Раскрытие потенциала HTML5 и CSS3

Выпуск HTML5 и CSS3 был не чем иным, как эволюционным скачком, однако немногие дизайнеры в значительной степени используют новые функции, предоставляемые технологией. Частично это связано с тем, что весь потенциал HTML5 и CSS3 был упущен из виду, поэтому люди продолжают разрабатывать более или менее одни и те же сайты, только с небольшими различиями в кодировании.

В этом нет ничего особенно плохого, но есть много вещей, которые HTML5 и CSS3 делают доступными для вас, и вы можете использовать их для создания более удивительных творений, чем когда-либо прежде.

Не игнорируйте холст

Освоение объекта Canvas - одна из самых сложных задач для нового кодера HTML5, особенно когда этот кодер ранее кодировал в других версиях HTML и не имеет опыта программирования компьютерной графики.

Обучение использованию объекта canvas, даже если вы редко собираетесь рисовать, является ценным навыком, которому каждый серьезный программист должен уделить время для изучения. Его можно использовать для всех видов вещей, включая создание анимированной инфографики, слайд-шоу, диаграмм (в том числе интерактивных диаграмм) и многого другого.

иллюстрация предоставлена

Использование холста - это просто вопрос создания объекта в HTML5 и последующего наполнения его JavaScript. Используемые методы являются темой для другого дня, но вы уже можете найти некоторые учебники здесь на этом сайте, которые помогут вам начать.

Вам больше не нужна Flash

Большая часть того, для чего мы ранее использовали Flash, не требует Flash. Теперь вы можете делать все это с помощью переходов CSS3, рисования HTML5, анимации HTML5, видео HTML5 и аудио HTML5.

Единственное, что мы не делаем в HTML5, что позволяет вам делать Flash, - это шпионить за вашими пользователями и нарушать их конфиденциальность, но в любом случае это не то, чем вы хотите заниматься, не так ли?

Большинство пользователей сочли Flash очень раздражающим, хотя большинство также неохотно устанавливали его как неизбежную необходимость. Так продолжалось до тех пор, пока серьезные угрозы безопасности и проблемы с конфиденциальностью, связанные с Flash, не превратили его в нечто, что большинство пользователей либо вообще не устанавливают, либо активируют только в каждом конкретном случае, когда это строго требуется для задачи, которую они хотят выполнить. ,

CSS3 дает вам новые псевдо-классы

Некоторые псевдоклассы были в CSS2, но с помощью CSS3 вы можете использовать важные позиционные псевдоклассы для получения большего контроля. В основном они используются с текстом, как указывают имена псевдоклассов: до, после, первая буква, первая строка ...

У вас также есть доступ к переходам, которые можно использовать для изменения чего угодно, включая текст. Эти переходы оживляют или преобразуют то, что видит пользователь на экране.

Ваши веб-страницы могут общаться напрямую с GPU

Вы должны делать это с некоторой осторожностью, так как любое аппаратное ускорение истощает время автономной работы мобильных устройств, но все равно довольно здорово, что вы можете это сделать.

Ускорение графического процессора работает при использовании переходов, преобразований 3D, холста в режиме 3D и WebGL 3D. Последнее мое любимое, но вам нужно много читать, чтобы разобраться со всем, что связано с WebGL. Однако это даст вам много возможностей для создания анимации и игр.

Ускорение графического процессора не работает со старыми браузерами, даже если они поддерживают HTML5 и CSS3.

GIF предоставлено

Используйте игровые движки, чтобы перенести тяжелую работу с графики 3D

Программисты игр используют игровые движки всегда, чтобы упростить задачу игрового программирования, но только в последние год или два появились действительно мощные игровые движки HTML5, которые могут противостоять задаче создания высококачественных игр 3D в среда на основе браузера.

Одним из самых простых для начала является PlayCanvas, и хотя он бесплатен для экспериментов и действительно дешев для личной лицензии, он не легок. Вот Налетать, игра, созданная в PlayCanvas:

И это RoboStorm:

Не могли бы вы создать такие игры? Абсолютно, и теперь это намного проще, чем когда-либо.

Для получения опыта ретро-игры, попробуйте Construct2 or Construct3, В нем есть все необходимое, чтобы начать создавать игры методом перетаскивания (хотя некоторые сочтут это слишком ограничительным). Вы создаете свои игры онлайн, и люди играют в них онлайн. Это движок для тех, кто не знает программирования и не хочет заниматься учебой.

Вот История кивистарый платформер 2D, созданный в Construct3:

Вы не ограничены только играми с этими двигателями. Для создания целых фильмов и презентаций было бы лучше использовать смеситель or майяи для игр, предназначенных для конкретной платформы, обычно лучше использовать собственную среду программирования, предназначенную для этой платформы. Для кроссплатформенных интерактивных игр, рассказов, образовательных программ или презентаций механизмы HTML5 являются отличным вариантом.

HTML5 и CSS3 дают вам больше возможностей

С HTML5 и CSS3 вы теперь имеете полный контроль над каждым элементом, который появляется на вашей странице, включая возможность манипулировать каждым объектом практически любым желаемым способом.

Хотя основной единицей построения по-прежнему остается прямоугольник, вашим сайтам больше не нужно следовать прямоугольной линейности. Вы можете расположить вещи под любым углом, повернуть их, наклонить, скрутить и согнуть, и ваш веб-браузер не будет жаловаться.

Теперь вы также можете управлять прозрачностью и масштабированием гораздо проще, чем раньше, и эти методы будут работать во всех основных браузерах.

На момент написания статьи в раннем 2018 все еще были некоторые проблемы с масштабированием между различными браузерами, причем некоторые браузеры могли точно масштабировать, в то время как другие дают совершенно разные результаты для одной и той же страницы.

Это означает, что по крайней мере на данный момент мы все еще сталкиваемся с необходимостью программировать разные версии сайта, если мы хотим использовать масштабирование для адаптивных целей.

К счастью, вам редко когда-нибудь понадобится это, но иногда подгонка чего-либо на экране, независимо от того, насколько маленьким этот экран, будет вашей основной целью. В этих случаях отсутствие стандартизированного масштабирования в разных браузерах останется проблемой.

Тем не менее, эти проблемы не являются проблемами HTML5 или CSS3, это проблемы разработчиков браузеров, которые не могут должным образом поддерживать функции, предоставляемые HTML5 и CSS3.

Со временем мы увидим улучшения в браузерах, и все будет работать как положено. К тому времени, возможно, настало время начать изучение HTML6 и CSS4, но, по крайней мере, это шаг в правильном направлении.

изображение заголовка любезно предоставлено

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.