Веб технологии и их польза
Я хочу поделиться десяткой самых популярных веб технологий. Они не являются обязательными. Но в то же время помогут ускорить работу и улучшить качество кода.
Это новый стиль элементов для HTML5, который базируется на стандартах W3C. Компоненты позволяют создавать пользовательские элементы многократного использования для структур динамических страниц, таких как виджеты с вкладками, слайдеры изображений и выпадающие меню. Вместо того чтобы создавать всплывающее меню с маркированным списком, можно использовать тег <dropdown>.
На официальном сайте Web Components доступно множество практических примеров, но очень мало пояснений того, где они могут пригодиться.
На данный момент еще слишком рано использовать Web Components в реальных проектах. Но через несколько лет все может измениться. Вот почему я считаю, что все веб-разработчики должны ознакомиться с этой современной веб технологией.
Когда вы познакомитесь с Web Components, вам может понадобиться библиотека Polymer. Этот проект с открытым исходным кодом запустил Google. Он предназначен для создания стандартизированных веб-компонентов.
Эта библиотека упрощает разработку, если вы работаете с Web Components API. С ее помощью вы получите встроенные элементы для добавления таких функций, как видео, слайдеры и даже виджеты Google Maps.
Целью Polymer является создание модульной структуры. Вот почему она позволяет создавать собственные виджеты на основе Web Components API. Таким образом появляется возможность добавить несколько виджетов на одну страницу без повторной записи кода.
Библиотека Polymer неразрывно связана с Web Components, и две эти технологии значительно изменяют методы модульной разработки сайтов.
Google всегда пытается улучшить интернет. Проект Accelerated Mobile Pages (сокращенно AMP) позволяет адаптировать любую веб-страницу для мобильных устройств по стандартному шаблону.
Нужно просто добавить небольшой код на свою страницу и позволить Google сделать все остальное. Если ваш сайт AMP-оптимизирован, он будет загружаться быстрее. Таким образом, сайт будет больше похож на оригинальное приложение.
Учитывая стремительный рост количества пользователей мобильных устройств, это технология веб разработки, на которую стоит обратить внимание. Она не подходит для интерактивных сайтов, но для блогов и новостных ресурсов технология AMP может стать революционным решением.
Gulp позволяет автоматизировать рутинные задачи. Он умеет компилировать Sass в CSS, добавлять в код шаблоны или заплатки для браузеров, автоматически обновлять страницы после внесения в код каких-либо изменений.
Google недавно утвердил TypeScript в качестве предпочтительного языка для своего front-end фреймворка AngularJS. Это делает TS еще более привлекательным, потому что он помогает сэкономить время, как при написании общих скриптов, так и при разработке специализированных Angular-проектов.
TypeScript является не новым языком, а скорее надмножеством JavaScript. Поэтому, если вы знаете JS, вам будет легко использовать эту популярную веб технологию.
Если вы следите за тенденциями WebGL и 2D / 3D веб-графики, то должны знать о Three.js. Это самый мощный движок рендеринга на основе JS, который можно использовать для веб-графики.
Немногим сайтам нужна 2D или 3D графика. Но количество таких сайтов увеличивается, и это одна из лучших JavaScript-библиотек, которые можно использовать для создания элементов холста и диаграмм данных.
Лучшее в Three.js это то, что данная библиотека является бесплатным инструментом с открытым исходным кодом, поэтому она постоянно совершенствуется вместе с WebGL API.
С помощью контейнерной платформы Docker можно поддерживать полную виртуальную среду и легко переносить сайты на разные серверы. Виртуальные контейнеры содержат интерфейсы для простой передачи файлов с одного сервера на другой.
Если вы являетесь приверженцем IT / DevOps, тогда Docker — это обязательная для вас технология. В последнее время данная веб технология начала набирать популярность.
Это бесплатная платформа с открытым исходным кодом для разработки мобильных приложений под iOS и Android. Каждое приложение пишется на оптимизированном коде. Поэтому можно создавать программное обеспечение на JavaScript, но конечный результат будет выглядеть как оригинальное мобильное приложение Swift / Java.
На данный момент уже выпущена версия 1.3, и Ionic получил большую поддержку со стороны веб-сообщества.
Фреймворк Foundation — невероятно мощный инструмент. В последнем релизе разработчики выделили веб-фреймворк из Foundation for Emails, который теперь поддерживает автоматизацию и шаблоны для email-разработки.
Но еще больше мне нравится их новый Motion UI, предназначенный для создания анимации «на лету». Можно создавать анимацию с помощью онлайн-инструмента Zurb и включать библиотеку Motion UI в любой проект на Foundation.
Google предлагает множество полезных технологий веб разработки, и одной из них является Web Starter Kit. Это библиотека полезных ресурсов для создания сайтов, модульного кода Sass / CSS, локальных HTTP-серверов и многого другого.
Предполагается, что Web Starter Kit предоставляет все основные компоненты, которые потребуются веб-разработчику. Это стартовый набор, который является отличным бесплатным решением для начинающих разработчиков.
Данная публикация представляет собой перевод статьи «10 Modern Emerging Web Technologies You Should Know About» , подготовленной дружной командой проекта Интернет-технологии.ру
Веб – технологиями называются технологии, применяемые во Всемирной паутине. Вся информация в сети Интернет содержится в форме веб – страницы (минимальная логическая единица). Определенное количество веб – страниц, принадлежащих одному хозяину и находящихся на одном сервере, образуют веб – сайт. Веб – страница и веб – сайт – это основные понятия, используемые в веб – технологиях. Совокупность всех сайтов и составляет сеть Интернет. Виртуальные технологии – это инструменты, с помощью которых происходит создание страниц и сайтов.
Для смысловой разметки виртуальной страницы используют язык HTML, управлять отображением содержания виртуальных страниц помогают таблицы стилей. Использование языка и стиля позволяет менять оформление сайта без изменения соответствующих тегов. Перед тем, как продолжить статью, хочу порекомендовать персональный блог о веб-технологиях, он здесь.
Динамизм веб – страниц зависит от использования такого инструмента, как язык написания скриптов. Технология JavaScript является стандартным языком скрипта, с ее помощью виртуальной странице придаются элементы интерактивности, контролируются встроенные фреймы и всплывающие окна, организуются активные элементы в виде бегущей строки, часов, иных видов анимации. Инструмент Java располагается на компьютере пользователя и не требует выполнения, каких – то работ на сервере.
Как строятся веб-страницы
- Веб-страница строится на основе языка разметки гипертекста. Официальное название этого языка HTML (Hyper Text Markup Language).
- Для отражения содержимого на веб-страницы созданы и служат каскадные таблицы стилей, иначе CSS.
- В создании динамических страниц, на помощь разработчикам «приходят» языки скриптов. Самый популярный язык JavaScript.
- В принципе, с помощью этих трех языков HTML, CSS, JavaScript можно создать любую, даже самую сложную, веб — страницу, а созданные веб-страницы собрать в веб-сайт.
Динамический HTML
Чтобы браузеры отображали созданные веб-страницы, а браузеры видят веб-страницу, как набор объектов, был создан стандарт DOM (Document Object Model). Согласно нему, веб-стрнаница должна представляться в виде набора объектов, а сам стандарт DOM называется объектная модель документа.
- DOM связан с JavaScript, а по сути, эта модель связывает веб-страницы со скриптами или языками программирования.
- Связку HTML, CSS, JavaScript и DOM называют динамическим HTML или Dynamic HTML, а иногда DHTML.
Виртуальные технологии второго поколения. Особенности и возможности виртуальных сайтов второго поколения
Развитие виртуальных технологий привело к созданию и распространению новой разновидности сайтов. В отличие от традиционных, содержимым их наполняют сами пользователи. Контроль таких сайтов осуществляется не средствами публикации, а в основном интерактивными инструментами. Это различные блоги, форумы, социальные сети, онлайн – игры, сообщества и прочие подобные виртуальные ресурсы. От сайтов первого поколения они отличаются тем, что получают бесплатный контент от своих участников, которые управляют им, самостоятельно раскручивая и увеличивая его посещаемость. Ресурсы сайтов этого типа не зависят от позиции одного пользователя, их наполняет творчество и самовыражение многих пользователей.
Отличительной особенностью является возможность пользователя иметь свою личную уникальную зону для общения с другими пользователями, размещения фотографий, личных записей, формирования круга друзей и тому подобных действий.
Интерфейс сайта построен таким образом, что, перезагружаясь, страница всегда выдает данные, нужные пользователю. Все сервисы сайта интегрированы, взаимосвязаны и взаимозависимы друг от друга.
Сайты этого типа постоянно развиваются, дополняясь новыми разработками по части создания групп и сообществ. Их настройки просты, легки, понятны пользовательской аудитории.
В качестве популярных примеров веб – сайтов второго поколения можно привести Википедию, Ютуб, Мой мир, LiveJournal, eBay и другие.
Топ 10 современных веб-техналогий
1. Web Components
Это новый стиль элементов для HTML5, который базируется на стандартах W3C. Компоненты позволяют создавать пользовательские элементы многократного использования для структур динамических страниц, таких как виджеты с вкладками, слайдеры изображений и выпадающие меню. Вместо того чтобы создавать всплывающее меню с маркированным списком, можно использовать тег <dropdown>.
На официальном сайте Web Components доступно множество практических примеров, но очень мало пояснений того, где они могут пригодиться.
На данный момент еще слишком рано использовать Web Components в реальных проектах. Но через несколько лет все может измениться. Вот почему я считаю, что все веб-разработчики должны ознакомиться с этой современной веб технологией.
2. Tumult Hype 2.0
Mac-приложение Hype от Tumult вышло пару лет назад, но его последняя версия 2.0 наконец-то заняла свою нишу. Hype позволяет конструировать интерактивный анимированный веб-контент по ключевым кадрам с помощью инструментов рисования и временной шкалы. А затем экспортировать результат парой щелчков мыши в стандартные HTML5, CSS и JavaScript с картинками, работающие во всех настольных и — что немаловажно — мобильных браузерах. Это как аналог Flash Professional (приложение от Adobe), но для HTML5 и гораздо дешевле.
Автор изучал Hype 2.0 несколько недель и уверен, что хотя приложению не хватает многих продвинутых функций Flash Professional, оно вполне пригодно для создания профессионального интерактивного веб-контента. Оцените игры и инфографику, сделанные на Hype.
Главное в новой версии 2.0: бесплатное приложение Hype Reflect для моментального предпросмотра на iPhone и iPad, значительно улучшенная поддержка мобильного контента, улучшенная поддержка аудио, а также движения по кривой траектории. В Macworld есть неплохой обзор (EN) новых возможностей приложения.
3. Polymer
Когда вы познакомитесь с Web Components, вам может понадобиться библиотека Polymer. Этот проект с открытым исходным кодом запустил Google. Он предназначен для создания стандартизированных веб-компонентов.
Эта библиотека упрощает разработку, если вы работаете с Web Components API. С ее помощью вы получите встроенные элементы для добавления таких функций, как видео, слайдеры и даже виджеты Google Maps.
Целью Polymer является создание модульной структуры. Вот почему она позволяет создавать собственные виджеты на основе Web Components API. Таким образом появляется возможность добавить несколько виджетов на одну страницу без повторной записи кода.
Библиотека Polymer неразрывно связана с Web Components, и две эти технологии значительно изменяют методы модульной разработки сайтов.
4. Sketch
Мечта веб-дизайнера. Хотя популярность фотошопа среди веб-дизайнеров трудно пошатнуть, многие ищут более рациональные и доступные решения, лучше приспособленные конкретно для веб-дизайна.
Sketch от Bohemian Coding предназначен именно для этой роли. Как и Hype, приложение Sketch работает под Mac и прошло путь от относительно простого дизайнерского инструмента до красивой, полнофункциональной программы, чрезвычайно удобной для интерфейсных дизайнеров. Sketch может похвастаться:
- Векторной графикой для неразрушающего редактирования и независимости от разрешения;
- Встроенной поддержкой типографской сетки;
- Поддержкой нескольких страниц и рабочих областей в одном документе;
- Удобной нарезкой и обрезкой изображений;
- Стилями слоев для простого добавления эффектов, например заливки, границ и теней.
Саймон (Simon) в команде Elated Communications использует эту программу почти для всей своей веб-дизайнерской работы. Его статья (EN) о Sketch — отличный обзор ее возможностей.
5. AMP
Google всегда пытается улучшить интернет. Проект Accelerated Mobile Pages (сокращенно AMP) позволяет адаптировать любую веб-страницу для мобильных устройств по стандартному шаблону.
Нужно просто добавить небольшой код на свою страницу и позволить Google сделать все остальное. Если ваш сайт AMP-оптимизирован, он будет загружаться быстрее. Таким образом, сайт будет больше похож на оригинальное приложение.
Учитывая стремительный рост количества пользователей мобильных устройств, это технология веб разработки, на которую стоит обратить внимание. Она не подходит для интерактивных сайтов, но для блогов и новостных ресурсов технология AMP может стать революционным решением.
Данная информация была взята из мною созданного сайта https://myinfo-mani.ru.
Перейдя по которой вы узнаете еще больше и найдете для себя много интересного.
Меня зовут Антон Шеин. Иногда я выступаю с докладами про дизайн, прототипирование и систематизацию интерфейсов.
После каждого доклада, раз за разом мне задают два основных вопроса:
- Должен ли дизайнер уметь работать с веб-технологиями?
- С чего дизайнеру начать, если хочется с ними разобраться?
Постараюсь ответить на них в этой статье.
Должен ли дизайнер уметь работать с веб-технологиями?
Если отвечать коротко: нет, не должен.
Дело в том, что никто никому ничего не должен. Как минимум до тех пор, пока вы не подписали документов с банком или ещё с кем-нибудь.
Правильный вопрос: помогает ли владение веб-технологиями дизайнеру решать задачи? Да, помогает. Особенно, если вы работаете в продукте, в котором важную роль играют данные.
Владение технологиями позволит вам:
- Автоматизировать рутину. Те вещи, которые вы выполняете из раза в раз, может сделать за вас компьютер. Например, соблюдать гайдлайны в дизайне, делать по образцу одного элементы сотни похожих, проверять их на разных сочетаниях данных, менять сразу все элементы при изменении одного и т. п.
- Прорабатывать дизайн сложных систем и масштабных продуктов.
- Легче общаться с разработкой и быстрее внедрять свои работы в продукт. Макет, нарисованный в графическом редакторе, позволяет многие неудобные моменты замести под ковёр. С ними всё равно придётся столкнуться на этапе разработки, когда менять решение будет уже поздно. Если дизайнер проработает все тонкости заранее, то продукт на выходе получится более качественным и по пути возникнет меньше споров.
- Проверять свои решения в жизни, не дожидаясь разработки. Да, есть куча приложений и сервисов, которые позволяют на основе картинок собрать кликабельный прототип. Но ни один из этих сервисов не позволит вам воспользоваться вашим продуктом и проверить его в жизни до того, как он будет реализован разработкой.
- Самостоятельно делать первые версии своих личных проектов, а не жалеть о том, что нет знакомого разработчика. Рабочий прототип, пусть и очень простой, всегда является плюсом при продаже идеи.
При этом, веб-технологии лишь один и навыков, полезных для дизайнера. На них свет клином не сошёлся. Есть ещё типографика, умение работать с цветом, иллюстрация, сценарии, переговоры, редакторское мастерство, 3D-визуализация, анимация и т. п.
Список почти бесконечен и каждый пункт расширяет ваши возможности. Чем больше у вас навыков и чем лучше вы владеете каждым из них, тем больше у вас возможностей для решения разных задач. И тем больше шансов участвовать в интересном проекте.
На что делать упор, каждый решает сам.
Если вы всё ещё читаете и вам интересно как же начать изучение технологий, то в оставшейся части статьи я попытаюсь осветить первые шаги.
С чего начать изучение веб-технологий?
Есть много интерактивных онлайн-курсов. Но, по-моему, начать нужно не с них. Когда вы начинаете заниматься боевыми искусствами, на первых занятиях вас не начнут учить приёмам. Сначала вам нужно будет научиться бегать, отжиматься, приседать и всячески подготовить своё тело к занятиям.
Так и здесь. Начать нужно с двух очень важных навыков:
- Десятипальцевая слепая печать.
- Базовое умение читать на английском.
Десятипальцевая слепая печать
Когда вы передаёте свои мысли в компьютер, вы должны делать это максимально просто и быстро. Если мысли выражаются текстом, будь то письмо, статья или код, то для их передачи пока самый удобный интерфейс — клавиатура. Поэтому важно научиться быстро печатать, чтобы мысли были на кончиках пальцев.
Если задаться целью, то овладеть базовым навыком слепой печати можно за неделю занятий по вечерам. После чего скорость печати будет расти сама.
Несколько советов:
- В качестве тренажёра лучше использовать thetypingcat.com или klava.org. Остальные тренажёры — издевательство над психикой и от них больше вреда, чем пользы.
- Начав тренироваться печатать вслепую, не поддавайтесь соблазну переключиться обратно на привычный метод. Даже если очень хочется — скорость обучения от этого будет стремиться к нулю, так устроен мозг.
Навык полезен не только для кода. Начав печатать вслепую вы будете экономить кучу времени на переписке.
Базовое умение читать на английском
При изучение кода у вас будет возникать много вопросов. Благодаря StackOverflow.com, на них есть ответы. Но они на английском. Кроме того, на английском огромное количество хороших туториалов и статей. Если вы сможете их читать, учиться вам будет гораздо проще.
При этом не нужно идти на курсы или открывать толстый учебник. Ваш мозг — нейросеть. И если вы просто заставите себя читать ответы и статьи на иностранном языке, ваш мозг сам приспособится. С каждой статьёй вам будет всё легче понимать прочитанное. Хорошим помощником в изучении будет плагин для браузера, который переводит слова при выделении.
Ещё один способ научиться читать на английском — заставить себя смотреть сериалы без дубляжа. Для этого есть, например, замечательный сервис Ororo.tv.
Лучше начать с простых сериалов, так как «Шерлока» или «Теорию Большого Взрыва» смотреть будет тяжело. Сам я сильно продвинулся в английском пока смотрел «Lost» во время тренировок. Там очень простой английский, а сюжет незамысловат настолько, что и без перевода понятно что происходит.
Онлайн-курсы
Если вы овладели слепой печатью и умеете хоть немного читать по-английски, то можно идти дальше. Например, попробовать онлайн-курсы про технологии. Их очень много, есть платные и бесплатные. Из бесплатных мне самому больше нравится Codecademy.com.
Я бы рекомендовал такой порядок занятий:
- HTML и CSS
- Основы JS
- Работа с терминалом
Но у курсов есть беда — они всё очень постепенно и медленно разжёвывают. Успеваешь заснуть, так и не дойдя до сути.
Поэтому в следующем посте я расскажу о другом подходе к обучению: мы возьмём реальный полезный проект и будем препарировать его по кусочкам, попутно изучая что к чему. Если вам это интересно — следите за статьями. Следующая будет в понедельник. О всех новых статьях рассказываю в Твитере, там же публикую полезные находки.
P.S.: Все комментарии внимательно прочитаю в конце дня и отвечу апдейтом поста.