Глава 1.Веб раньше vs сейчас
Вы ,наверное, видели эти страшные видео из разряда «Сайт Apple с 90-х до сегодняшних дней».Если нет, ловите ссылку на видео ,как менялся сайт NASA c 1991 года по 2015.
💣http://fabianburghardt.de/webolution/
Ужас!Но почему же все-таки за какие-то 20 лет так сильно поменялось отношение к дизайну?
В 90-х годах понятие “высокоскоростной интернет” не существовало.Поэтому нужно было делать сайты ,которые могли бы грузиться на компьютерах пользователей,именно поэтому сайты представляли из себя только текст и ссылки.Потом же стало доступно украшать сайт с помощью html-тегов.Но и то,максимум - сделать заголовок и отступить параграф.Ну, еще можно было добавить несколько картинок
Кстати, пример такого сайта до сих пор в интернете
Или как вам такой сайтик?
Но что же пошло дальше не так и как мы пришли к этому?
Складывается ощущение ,что дизайнер этого сайта заболел.
GIF
Во-первых, появляются gif-изображения,которые вставляют на все сайты.Из-за этого можно было сделать просто гифку и залить на сайт.И все.Вот вам и веб-страница.Например,чтобы сделать отступ на странице, надо просто создать прозрачную гифку.
Что, тебе нужно выровнять текст по середине? Забудь про flex-box.Можно же просто сделать так:
Табличная верстка
Тогда была придумана табличная верстка.Если объяснять простым языком ,то представим ,что сайт-это одна большая таблица, и разработчик,чтобы что-то разместить, просто объявляет название ячейки, в которую он хочет поместить элемент.Да,все по-прежнему: сайт состоял в основном из текста,но этот текст делился на столбцы, строки, параграфы, навигационные элементы.Был один минус: в разных браузерах сайт смотрелся по-разному.
Технология FLASH
В 1996 году появляется технология под именем Flash,что кардинально меняет веб-дизайн.Именно тогда появляются эти пестрые сайты ,где используются все цвета радуги
CSS - спасатель
В 2000-x положение спасает CSS - технологии каскадных таблиц стилей.Верстать сайт стало легче,кода меньше,CSS принесла много новых тегов.
Теперь разработчики стали больше думать о спокойном дизайне.Пестрая цветовая гамма на сайтах уменьшается,а затем и вообще исчезает.
Теперь мы видим вот такие сайты:
Глава 2.Как игры изменили Веб-разработку
Все мы играли в эти онлайн игры и слышали музыку в ней,если нет, то вот вам несколько игр
💣http://vseigru.net/igry-krokodilchik-svompi/14796-igra-krokodilchik-svompi-gde-moya-doroga.html
💣https://www.sladkiiflirt.ru/campus-life
В этих двух играх есть музыка,давайте же разберемся,как разработчик ее туда вставил и как развивалась музыка на веб страницах
Когда-то, на заре интернета ,Internet explorer попытался прервать тишину на сайтах и был придуман тег <bgsound> ,который позволял проигрывать midi файлы.И теперь, заходя на страницу ,пользователь мог услышать музыку.Дальше разработчики из Netscape создают такую же функцию с помощью тега <embed>
Но эти два текста не прижились и остальные браузеры не переняли это решение.Тк эти два решения не были стандартизованы и имели мало функционала.Люди хотели слышать что-то ,заходя в интернет и тут активно начали использовать сторонние плагины ,в частности FLASH.Но веб-разработчики мечтали о технологии ,позволяющей работать с аудио.И такая технология появляется...тег <audio>
Он позволял проигрывать аудио файлы и стримы, контролировать воспроизведение, буферизацию и уровень звука.Но хотелось большего и сейчас мы имеем технологию под названием Web Audio API
Web Audio API активно используется в играх,так как с помощью него можно хорошо поработать со звуком(Объемный звук для игр и интерактивных веб-приложений,приложения для обработки звука,аудио синтез)
Как происходит работа с Web Audio API?
Работая с Web Audio API, вы создаете один или несколько источников и получателей звукового сигнала.А также модули для работы со звуком
Как же работать со звуком?
Когда ты создал какую-то мелодию на сайте и хочешь поработать со звуком ,на помощь тебе приходят модули(фильтры).Web Audio API содержит десятки высокоуровневых, конфигурируемых и готовых к использованию модулей. Это усилители, линии задержки, фильтры, модули свертки, сплитеры и мержеры каналов, 3D паннеры и т.д.
Примеры с Web Audio API
💣https://codepen.io/gregh/pen/RKVNgB
💣https://github.com/codex-team/codex.music
💣https://codepen.io/gregh/pen/zNzvOm
💣https://github.com/codex-team/codex.music
Глава 3.Как СМИ изменила веб-разработку
Весной 2019 года состоялся релиз Editor.js от команды веб-разработчиков CodeX
“Три с половиной года разработки, 24 репозитория, 500 закрытых пулл-реквестов и бессчётное число коммитов.”
@vc.ru
В итоге:
— Первое место среди лучших проектов дня в мировом хит-параде Product Hunt
— 1000 оценок на PH на момент написания
— 10000 старов и 550 форк на GitHub
— Попали во всемирный GitHub Trending
— 30 000 уникальных посетителей сайта к текущей минуте
— Top Story на Hacker News и большая дискуссия о современных визуальных редакторах с участием представителей крупнейших игроков
Этот редактор был создан на технологии API.Мне кажется, это прорыв в веб-разработке.Это уже не тот word, где ты что-то передвинул на миллиметр и взорвал планету.
Что же такое API?
API-программный интерфейс приложения, интерфейс прикладного программирования) (англ. application programming interface, API ) — описание способов (набор классов, процедур, функций, структур или констант), которыми одна компьютерная программа может взаимодействовать с другой программой.
А как же делается так ,что теперь при передвижении текста у нас не взрывается планета?
Если говорить легким языком,то каждый новый обьект в editor.js записывается в отдельный блок (контейнер).То есть, у каждый картинки ,текста есть свой собственный контейнер и соответственно ,когда мы передвигаем какой-то элемент,мы передвигаем его блок ,а не весь документ.
Вывод
В итоге мы можем сделать вывод,что каждый из нас продвигает веб-разработку.Есть множество факторов, изменяющих сайты.
И именно поэтому от этого:
Пришли к этому: