Кирилл Никитин

Ну раз есть php на нём и делайте. Он в общем-то как шаблонизатор и начинался. Отдельные блоки (навигация, подвал и тд) выносите в файлы и вставляете в нужном месте через include. А под отдельные элементы, как телефон например, можно создать один общий файлик с переменными и выводить в нужных местах через echo.

Деньги.

А если серьёзно, поищите примеры брифа на разработку сайтов (вот первый попавшийся для примера) и это должно закрыть большинство ваших вопросов, остальное по ходу.

Их миллион. Гуглите запросы вроде website change detection или site changes monitoring. Вот например такой.

Это какая-то ерунда, IE никогда не поддерживал SVG для фавок. Ещё и с ошибкой, тип для svg "image/svg+xml", а тут должна была бы быть ico, но и её не стоило ограничивать комментом. Вообще, если вам нужна максимальная поддержка устаревших браузеров, то иконок ещё мало, а если речь про 2021, то действительно слишком много.

Сейчас такой набор выглядит примерно следующим образом. Для устаревших — favicon.ico с типом "image/x-icon", далее основная в svg, которая ещё и берёт на себя тёмные темы, ибо внутри неё можно использовать css и одна apple-touch-icon.png размером в 180 пикселей + site.webmanifest, в котором прописываются большие png. Достаточно будет на 192 и 512px. В него же переносятся все эти theme-color, apple-mobile-web-app-capable и тд.

Иконка safari-pinned-tab.svg с 12 версии сафари больше не нужна, а для msapplication-icon-144x144.png лучше использовать файл ieconfig.xml с необходимыми инструкциями, хотя и это нужно только для старых версий.

Если конкретно, то как-то так:

<link rel="manifest" href="site.webmanifest">
<link rel="shortcut icon" type="image/x-icon" sizes="any" href="favicon.ico">
<link rel="icon" type="image/svg+xml" href="/img/icons/icon.svg">
<link rel="apple-touch-icon" href="/img/icons/apple-touch-icon.png">

HTML — разметка данных для браузера (это текст, а это картинка, а это кнопка и тд) и любой сайт либо сразу на нём, либо преобразуется в него для вывода в браузер. Папка js означает лишь наличие папки js. Но, как правило, в ней обычно лежат какие-то js-скрипты или библиотеки используемые на сайте.

Если сайт сделан без использования серверных языков, то просто найдите файл index.html или какой-нибудь файл с таким расширением (html или htm в конце после точки) и кликните. Каждый такой файл — одна страница сайта. Откроется ваш браузер с этой страницей и готово дело.

Ну а если вы не видите файлов с таким расширением, а есть например файлы c php в конце, то это уже проблемка и нужно поднимать сервер с поддержкой того языка, на котором писался сайт.

В документе может быть только один id со значением output.
Можно попробовать поменять на класс и getElementsByClassName. Проблема в том, что getElementsByClassName работает с массивами и тут нельзя вызвать getContext напрямую, нужна обёртка forEach.

<div id="wrap">
   <canvas class="output"></canvas>
   <canvas class="output"></canvas>
   <canvas class="output"></canvas>
   <canvas class="output"></canvas>
</div>

Вот как-то так...

var img = document.getElementById('input');

var c = document.getElementsByClassName('output');

c = Array.prototype.slice.call(c);

c.forEach(function (c) {

var ctx = c.getContext('2d');

c.width = img.width;
c.height = img.height;

var tic, sine, sineNormalized,
    start = Date.now();
    
var params = {
  AMP: 20,
  FREQ: 0.03,
  SPEED: 4,
  VERTICAL: true
};

function update() {
  tic = (Date.now() - start) * 0.001;
}

function render() {
  ctx.clearRect(0, 0, c.width, c.height);
  for(var i = 0; i < img.height; i++) {
    if(params.VERTICAL) {
      var ofs = params.AMP * (0.5 + (Math.sin(tic * params.SPEED + (i * params.FREQ)) * 0.5));
      ctx.drawImage(img,
                  0, i, img.width, 1,
                  0, i - (ofs * 0.5), img.width, 1 + ofs);
    } else {
      var ofs = params.AMP * Math.sin(tic * params.SPEED + (i * params.FREQ));
      ctx.drawImage(img,
                  0, i, img.width, 1,
                  0 + ofs, i, img.width, 1);
    }
    
  }
}

function loop() {
  requestAnimationFrame(loop);
  update();
  render();
}

$('nav input').on('input change', function() {
  var t = $(this).attr('data-param');
  if(t == 'VERTICAL') {
    params.VERTICAL = $(this).is(':checked');
  } else {
    params[t] = $(this).val();
  }
  
});

loop();

});

Я сделал для вас скриншот на iPhone 4. Как уже писал, панель снизу позиционируется нормально и зафиксирована сразу, проблема с иконками на ней и шириной шапки сайта, дальше до самого низа сайт в порядке.



Я не знаю как технически реализована эмуляция на этом appetize, лично мне хватает вёрстки по стандартам и режима отзывчивого дизайна браузера (есть в сафари, хроме, фоксе). Но многие ещё издавна пользуются сервисом BrowserStack, попробуйте его. И, как я уже писал, не забывайте про префиксы для старых браузеров.

Если вы про домены третьего уровня, то для поисковиков это будут разные сайты. В панели хостинга просто создаётся новый сайт.

Я так понимаю, верстали на Bootstrap? Этот фреймворк mobile-first, это значит сначала мобильные, а потом всё остальное по возрастанию. Соответственно, без media настраивается фон под самые маленькие экраны, которые до 320px, а потом добавляется по нарастанию через media по стандартным bootstrap или вашим собственным точкам.

body {background-color: #000;}

@media only screen and (min-width: 480px) {

/* Можете не менять тут, это горизонтальный iPhone или похожий мобильник */

} 

@media only screen and (min-width: 768px) {

/* Добавляем картинку для вертикального iPad или подобного */
body {background-image: url(bg-image-sm.jpg);}

} 

@media only screen and (min-width: 992px) {

/* Заменяем картинку для горизонтального iPad или подобного */
body {background-image: url(bg-image-md.jpg);}

} 

@media only screen and (min-width: 1200px) {

/* Заменяем картинку для больших экранов */
body {background-image: url(bg-image-lg.jpg);}

}

Очень старая проблема и не только на iOS, а на большинстве браузеров для мобильных устройств в принципе. Суть в том, что использование background-attachment: fixed; сказывается на производительности и он тупо отключён в мобильных устройствах. Может однажды всё будет работать, но пока так. После нескольких лет поиска решения я пришёл к следующим выводам.

Если эффект крайне необходим, вы можете использовать технологию параллакса (есть бесплатные плагины), когда позиционирование элемента изменяется динамически во время прокрутки, либо использовать отдельный пустой div, где вместо background-attachment: fixed; ставите position: fixed; этому пустому блоку и регулируете всё через z-index.

Если эффект не так важен и вы согласны пойти на компромисс с мобильными, то можете воспользоваться моим личным вариантом. На компьютерах эффект работает как должен, а на мобильных — фон просто растягивается по высоте блока и двигается вместе со страницей.

HTML
Тут ваша разметка шапки, но с разложенными по классам свойствами CSS.

<header class="main-header bg-cover bg-fixed">...</header>

CSS
Из своего основного класса убираете всё, что касается фона, кроме картинки. Естественно, если вам там ещё что-то нужно, вроде высоты, флоатов и тд., сами решите. Теперь добавляете два класса, которые пойдут как фреймворк и могут использоваться многократно. Один растягивает картинку (центрует и без повторений), другой делает тот самый эффект fixed.

.main-header {background-image: url(img/picjumbo-bg5.jpg);}
.bg-cover {background-repeat: no-repeat; background-position: center center; background-size: cover; -webkit-background-size: cover;}
.bg-fixed {background-attachment: fixed;}

JS
Добавляете этот код в шаблон или в файл скриптов. Если ваш сайт открывают на мобильных устройствах, скрипт находит все блоки по классу bg-cover и убирает из них класс bg-fixed, если он есть. Фоновая картинка просто будет скролиться со всем остальным.

var device = navigator.userAgent.toLowerCase();
var mob = device.match(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/);
        if (mob) {
            $(".bg-cover").removeClass("bg-fixed");
        }

Начнём с того, что это не видео, а свёрстанный на html блог. Теги img с CSS анимацией на них. Другими словами, каждый компонент композиции — отдельный png файл, облако, машинка и тд., которому задали действие. Воспользуйтесь dev tools в сафари, хроме или фоксе и посмотрите исходники. Там всё довольно просто.

Касаемо видео, тоже можно. Необходимо подключить js плагин, например BigVideo.js, но можно альтернативы поискать, и использовать видео как часть вёрстки.

Где — зависит от задачи, под которую подбирается инструмент (софт), а не наоборот. Если иконка должна содержать фотографический растровый элемент, то нужен фотошоп и паттерны в нём делать проще, но о масштабируемости можно забыть, тут вектор. А есть ещё и 3D: habrahabr.ru/post/137451

Насчёт паттернов (фонов), лично я такие делаю в PS. Создаёте файл, хоть квадратный, хоть какого размера, рисуется всё, что надо, потом Offset из меню фильтров и сдвигаете всё, что было по краям в центр и дорисовываете центральную часть зацикливая изображение. Это очень грубая инструкция. Поищите в гуле: photoshop offset