Веб–технологии для разработчиков
Вступление
Веб–технологии являются частью логической составляющей интернет технологий в группе информационных ресурсов Интернет. Современные web–технологии позволяют разработчикам веб–сайтов и веб–приложений реализовывать свои идеи, практически неограниченно, от создания Интернет магазинов до автоматизации бизнеса с помощью CRM. Отличный опыт внедрения CRM в различных отраслях вы найдете на сайте https://dizlab.com/.
Далее я перечислю, базовые составные части веб технологий, которые разработчик должен знать или в них ориентироваться для работы.

Веб–технологии
Основы веб разработки
Язык гипертекстовой разметки — это язык, используемый для определения структуры и описания содержания веб-страницы в структурированной форме. Читать: Основы HTML, язык разметки гипертекста
Каскадные таблицы стилей используются для описания внешнего вида веб-контента.
HyperText Transfer Protocol (HTTP) — это протокол, по которому доставляются HTML и прочие медиа-документы. Читать: Протокол HTTP — что такое
Написание сценариев
JavaScript
JavaScript — язык программирования, широко используемый для реализации взаимодействия пользователя с веб-сайтами и приложениями.
Веб API
Справочные материалы по каждому из отдельно взятых API, содержащих огромные возможности для создания веб-сценариев, включая DOM и все связанные с ним API, которые вы можете использовать для построения веб-контента и приложений.
WebAPI — перечень API для взаимодействия с устройствами и другие API не менее полезные для приложений.
Список событий, которые возникают на веб-странице или в веб-приложении.
Веб Компоненты
Веб Компоненты – это набор различных технологий, позволяющих создавать собственные переиспользуемые элементы – со своей функциональностью, инкапсулированной от остального кода – и использовать их в ваших веб-приложениях.

Графика и веб–технологии
Canvas
элемент предоставляет API для рисования 2D-графики, с использованием JavaScript.
SVG (Scalable Vector Graphics – масштабируемая векторная графика) – позволяет вам описать изображение в виде линий, кривых и других геометрических фигур. Благодаря этому можно машстабировать рисунок без потери качества.
WebGL
Аудио, видео и мультимедиа в веб–технологии
Web медиа-технологии
Список связанного с медиа API, со ссылками на документацию для каждого из них.
Media capture and streams API
API, используемого для потоковой передачи, записи и управления данным как локально, так и по сети. Также включает в себя инструменты для использования локальных камер и микрофонов для захвата видео, аудио и статичных изображений.
Использование HTML аудио и видео
Включение видео и\или аудио в веб-страницу и управление их воспроизведением.
WebRTC
RTC в WebRTC означает Real-Time Communications (связь в реальном времени) – технологию, обеспечивающую поток аудио или видео и обмен данным между одноранговыми клиентами браузера.
Прочее
MathML
Математический язык разметки предоставляет возможность показа комплексных математических уравнений и синтаксиса.
Extensible Stylesheet Language Transformations (XSLT) позволяет преобразовать XML-документ в человекочитаемый HTML.
EXSLT
Фукнциональное расширение, которое предоставляет дополнительные возможности для XSLT.
XPath
XPath позволяет вам выбрать DOM-узел в документе, используя более мощный синтаксис, чем предоставляется обычными CSS selectors.
Заключение
Как видите список веб–технологии необходимых для разработчика не мал. Дел предстоит много, удачи вам в желании создавать сайты и веб–приложения.
Web. История одной технологии
Когда-то давно, когда мамонты ещё были живы, а огонь был главным технологическим достижением человечества, наши предки оставляли зарисовки на земле, чтобы сообщить другим племенам, кто тут хозяйничает. Именно так зарождались первые веб-сайты.
Об истории одного из наших любимых в GeekBrains направлений мы и поговорим.
Представьте мир, в котором нет интернета. Точнее, он существует в форме протоколов, позволяет обмениваться сообщениями и письмами, но первый веб-сайт был создан только в конце 1990 года (с описанием World-Wide-Web, что логично) и располагался по адресу info.cern.ch. Текст, только текст и ничего больше.
Позже HTML, основы которого были описаны на info.cern.ch, очень быстро научился поддерживать 16 цветов и вставлять изображения, что повлекло за собой рождение первых браузеров, поддерживающих эти функции — Mosaic (1993) и NetScape (1994).
В веб-разработке происходит качественный скачок — появляются таблицы. Они позволяют качественно упорядочить информацию, выравнивать текст в столбцах и приближают вид веб-страниц к большинству современных.
Что касается деятельности дизайнеров и разработчиков сайтов, то в мире, в котором существует лишь HTML, работа ведётся преимущественно в примитивных текстовых редакторах.

yahoo.com, 1994 год
google.com/inbox, наши дни
Игры с цветами достигают своего апогея. Страницы выглядят ужасно, безвкусно и часто абсолютно нечитабельно, но покрасить всё вплоть до кнопок в яркие тона — признак хорошего тона. Всё это, впрочем, не препятствует настоящему расцвету в технологической отрасли.
HTML дополняется Javascript. Теперь разработчики с удовольствием добавляют на страницы всплывающие окна и прочие ответные реакции на действия пользователя. JS останется настоящим must-have любого веб-сайта вплоть до развития CSS, а актуальность сохранит и по сей день.
В 1995 году появился также скриптовый язык PHP, значительно упростив создание базовых страниц с выполнением сценариев, например, гостевых. И, конечно, не обойти стороной запуск платформы Macromedia Shockwave — главного проводника идей анимационного интернета.
Для простых труженников веб-цеха компания Microsoft выпускает HTML-редактор FrontPage, работающий по принципу WYSIWYG (What You See Is What You Get). Приложение получило бешеную популярность среди непрофессионалов: теперь любой человек в домашних условиях мог за несколько минут создать симпатичный сайт. При этом FrontPage нашёл отклики и в сердцах разработчиков — для работы под связку Windows-Internet Explorer он подходил идеально.
microsoft.com, 1995 год
microsoft.com, русская версия, наши дни
Год ознаменовался двумя громкими дебютами: CSS и Macromedia Flash. Язык разметки позволил серьёзно сократить размеры исходного кода и количество проблем, связанных с банальным форматированием текста.
Flash же и вовсе на многие годы стал основой интернет-анимации, признаком качественного сайта и магнитом для случайных прохожих.

apple.com, 1996 год
apple.com, русская версия, наши дни
К 1997 году веб-разработка упёрлась в невидимую стену — существующих возможностей для разработки и вёрстки сайтов было столько, что компьютеры того времени просто не могли всё переварить.
Главным событием стал анонс HTML 4 — версии языка, призывающей активно использовать таблицы стилей CSS, а от издержек первых трёх версий немедленно избавится. Впрочем, доработанная и причёсанная версия 4.01 официально объявится лишь спустя 2 года и впоследствии прослужит долгих 15 лет. Тем временем число пользователей интернета достигло 100 миллионов человек.
В качестве альтернативы FrontPage Macromedia выпустила Dreamweaver. Правда, в 1997 году была создана лишь версия для MacOS, лишь через год появилась адаптация под Windows. Впрочем, это не помешало Dreamweaver достаточно быстро занять лидирующие позиции на рынке.
Выходит CSS2. Теперь разработчики могут прибегать к блочному форматированию, работать со звуком, создавать стили постранично, а также генерировать содержимое сайтов. CSS2 верой и правдой служит вот уже 18 лет (если учитывать редакцию CSS2.1 вышедшую в 2011 году) и до сих пор не потерял актуальности, несмотря на активное внедрение CSS3.
1999 — 2002
Период, когда на свет не появилось ничего полезного, кроме, пожалуй, браузеров Internet Explorer 5.0 (1999) и 6.0 (2001) и CMS Drupal. Последняя, впрочем, появилась лишь формально, серьёзная популярность придёт лишь через 3 года.
Игры с яркими цветами, наконец, уходят в прошлое, в моде теперь тёмные тона и градиенты, особенно в качестве фона. Особое внимание уделяется навигации — возросшее количество контента предполагает грамотное оформление меню и ссылок.
Запуск Facebook и MySpace вводит новую моду в дизайн сайтов — простота и функциональность. Flash-анимация буквально повсюду, любой верстальщик сайтов должен в совершенстве владеть этим инструментом и предлагать заказчику прямо с порога. Кстати, в помощь разработчикам появляется ещё и WordPress, идеальная платформа для создания популярных блогов и информационных порталов.
2004-2005
2004 год ознаменовался запуском FireFox — конкурента практически безальтернативного IE. А вот годом позже на свет появился сервис YouTube. Несмотря на то, что в тот момент это не произвело эффекта разорвавшейся бомбы, проект довольно быстро обошёл в рейтингах MySpace, а уже через год был куплен Google более чем за 1,5 миллиарда долларов. И это никого не удивило. Более того, популярность сервиса оказалось такой, что долгое время подавляющее количество видео на сайтах было именно с YouTube.
Стоит отметить и выпуск Unity — инструмента для разработки 2D и 3D приложений. В вебе эта технология прекрасно проявила себя в создании браузерных игр, а также оказалось полезной для ресурсов с необходимостью демонстрации прототипов и 3D моделей.
Кроме того, в 2005 году объявился ещё один конкурент WordPress и Drupal – CMS Joomla!
Веб-дизайн меняет курс на мобильные устройства с самого начала 2007 года, ведь именно тогда был представлен широкой публике iPhone и появился первый мобильный браузер — Safari. И, как элемент адаптации к новым реалиям, стали появляться сайты с минимальной навигацией и узким информационным полем, зато с долгим пролистыванием и засилием изображений.
Выходит первый релиз Sass — популярного метаязыка на основе CSS, позволяющего упростить чтение и создание исходных файлов. Несмотря на не самый широкий набор функций, препроцессор быстро заслужил уважение профессионалов и сегодня трудно представить опытного веб-дизайнера, не имеющего опыта работы с Sass.
FrontPage, последняя версия которого датирована 2003 годом, уходит в утиль и заменятся на Microsoft SharePoint и Microsoft Expression Web.
Google создаёт Chrome, который очень быстро обходит в рейтингах популярности Internet Explorer. Он быстр, удобен как пользователю, так и разработчику. Веб-дизайнеры понемногу привыкают к необходимости работать на большие и малые экраны.
В моду входят сетки, а позднее появляются специальные фреймворки, стандартизирующие и упрощающие работу с отдельными элементами для многостаночников.
Алексис Сельер под влиянием Sass создаёт на языке Ruby собственный препроцессор LESS. Несмотря на незначительное число отличий, большинство начинающих разработчиков предпочитают именно этот продукт из-за его простоты и универсальности, а главное, из-за возможности работы с фреймворком Twitter Bootstrap.
Microsoft объявляет о прекращении поддержки IE6, некогда самого популярного в мире браузера (даже сегодня его использует около 0,1% пользователей).
2010-2013
Эти годы ознаменовались появлением сразу трёх главных трендов.
Первый — адаптивный дизайн. То есть теперь каждый уважающий себя интернет-ресурс должен создавать мобильную версию сайта, позволяющую не потерять контент, при этом значительно повысить удобочитаемость и скорость загрузки.
Второе — так называемый flat-дизайн, он же «плоский». Это тот случай, когда разработчик старается донести до клиента идею первостепенности наполнения, а не визуального оформления. Зачастую такая разработка напрямую связана с первым трендом и служит куда больше инструментом совмещения уникальности и универсальности ресурса, чем с реальным удобством пользования.
Нашлись несогласные с модными упрощениями, что послужило стимулом для третьего тренда — параллакс-дизайн. Это ничто иное как совмещение адаптивного и плоского дизайна, с сопутствующим приданием 3D-эффекта отдельным элементом.
В конце года был опубликована пятая версия стандарта языка HTML. Для разработчиков, наконец, упрощена работа с аудио- и видео-контентом, что по сути послужило отправной точкой для смерти Adobe Flash. Кроме того, появилась возможность хранить данные прямо в браузере и управлять его историей, использовать геолокационную информацию, полноценно работать с базами данных и производить запись в файл.
Наши дни
Мы в GeekBrains поймали волну и продумали целую профессию “Веб-разработчик”, включающую основные языки и web-технологии, а также стажировку.
Введение в web-технологии — понятия Интернет и всемирная паутина
Вступление
Сразу замечу, что понятие веб-технологии гораздо шире чем Интернет. Всемирная паутина лишь элемент веб-технологий, которые в свою очередь лишь логический элемент Интернет технологий. Более подробно об этом в статье Интернет технологии это что такое?
Хорошим примером комплексного применения логических элементов интернет технологий являются всем хорошо знакомые онлайн географические карты.
Такие элементы интернет технологий, как web API и языки программирования JS и HTML, дают возможность создания и использования онлайн конструкторов карт, динамических карт с привязкой местоположения пользователя, карт для постройки маршрута и т.д.
Веб-инструменты под названием «конструкторы карт», позволяют создать схемы проезда и указатели местоположения конкретных географических объектов. Например, показать на карте местоположение магазина.
Сервисы API Карт позволяют использовать картографические данные в веб-проектах, через геодекодеры JS API и HTTP API. Например, построить маршрут от точки А до точки Б или показать пользователю магазины по его местоположению.
Введение в web-технологии
Еще раз замечу. Не стоит путать понятия Интернет и всемирная паутина (WWW).
Интернет это глобальная сеть компьютерных сетей, а WWW это один из сервисов Интернет. Но эта путаница скорее говорит о глобальной популярности всемирной паутины (WWW) и подчеркивает ее значимость для пользователей.
Веб–технологии это логическая составляющая Интернет–технологий, которые включают в себя:
1) Интернет-сервисы
2) Работа в Интернет
3) Информационные ресурсы Интернет
Основные понятия веб-технологий
Основные понятия веб-технологий: веб-страница и веб-сайт. Их не стоит путать.
Веб-страница – это минимальная единица сервиса WWW. По-сути это документ, который уникализирован в WWW своим URL адресом.
Веб-сайт – это набор веб-страниц связанных общей тематикой. Веб-сайт находится на одном сервере (хостинге) и принадлежит одному владельцу. Как вариант, веб-сайт может состоять из одной веб-страницы (сайт – визитка).
Совокупностью всех веб-сайтов и образуют всемирную паутину, часто называемую веб или WWW – сервиса Интернет, созданного для поиска и обмена нужной информации.
Как строятся веб-страницы
Динамический HTML
Чтобы браузеры отображали созданные веб-страницы, а браузеры видят веб-страницу, как набор объектов, был создан стандарт DOM (Document Object Model). Согласно ему, веб-страница должна представляться в виде набора объектов, а сам стандарт DOM называется объектная модель документа.
Язык разметки XML
Язык разметки XML или XML – ExtensibleMarkupLanguage это описание синтаксиса современного языка HTML. Читать: Основы HTML…
Выводы
Подводя итоги, отмечу, что основная цель в изучении веб-технологий это создание или изменение веб-страниц, которые будут правильно отражаться в браузерах. Также введение в web-технологии поможет вам читать коды ваших веб-страниц, что, несомненно, нужно для любого владельца веб ресурсов.
Веб-технологии
В прошлой статье я писал про способы создания сайтов, стоит добавить, что выбор того или иного способа зависит от того, какими веб-технологиями владеет или планирует овладеть разработчик. Что же такое веб-технологии, какие они бывают и что изучать начинающему веб-разработчику?
Веб-технологии
Веб-технологиями (интернет-технологиями), обычно называют технологии создания и поддержки различных информационных ресурсов в сети Интернет: сайтов, блогов, форумов, чатов, электронных библиотек, энциклопедий и т.д.
Основные веб-технологии:
1) HTML – Hyper Text Markup Language (язык гипертекстовой разметки). Этот язык, используемый для определения структуры и описания содержания веб-страницы в структурированной форме. Если сравнить процесс создания сайта с постройкой дома, то HTML – это каркас дома: крыша (header), стены, перегородки и окна (body, div), подвал (footer).
2) CSS – Cascading Style Sheets (каскадные таблицы стилей). Это язык, содержащий набор свойств для определения внешнего вида документа (страницы). Если вернуться к строительству дома, то здесь CSS – это штукатурка, краска, обои, линолеум и т.д., то есть внутренняя отделка, «косметика».
3) PHP – Personal Home Page (личная домашняя страница), но в настоящее время более подходящим словосочетанием является Hypertext Preprocessor (гипертекстовый препроцессор). PHP – это скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. Т.е. при помощи PHP можно генерировать html-страницу непосредственно в процессе обработки действий пользователя.
При помощи PHP выполняются основные операции, которые необходимы для функционирования сайта: обработка данных, поиск информации, работа с БД, обработка веб-форм, обработка действий пользователя.
Здесь мне сложнее привести пример сравнения с постройкой дома, но я попробую. Возможно, примером PHP будет бригада строителей, которая работает на объекте, заказчик говорит что нужно сделать и бригада в кротчайшие сроки выполняет работу, как бы изменяя объект в соответствие с запросами заказчика.
4) JavaScript – это язык управления сценариями просмотра веб-страниц на стороне клиента (т.е. на компьютере пользователя).
Основная идея JavaScript состоит в возможности изменения свойств объектов HTML-структуры, их стилей, и возможности управления элементами страницы при взаимодействии с пользователем. При этом обновление страницы не происходит.
— при нажатии на кнопку, изменяется цвет фона страницы;
— при наведении курсора мыши на гиперссылку, открывается новое окно или изменяется текст в параграфе.
Возможности JavaScript огромны. При помощи JavaScript можно создать очень удобный, красивый и динамичный сайт.
Если вернуться к примеру с домом, тут JavaScript – это выключатель, вытяжка, жалюзи или система «умный дом» (управление отоплением, сигнализация, управление освещением, датчики движения и т.д.).
Что изучать начинающему веб-разработчику?
Те, кто планирует заниматься созданием сайтов любым из способов должны изучить такие «буквари» веб-разработчика как HTML и CSS. Это основы и с ними полезно познакомиться всем кто работает с сайтами, даже веб-дизайнеру полезно это знать, чтобы найти общий язык с верстальщиком.
Обобщение
Это далеко не все веб-технологии, но они являются одними из самых основных. Позже планирую добавить информацию о других не мене важных веб-технологиях (Ajax, MySQL и т.д.). В качестве обобщения приведу следующую схему:
Надеюсь информация была полезна, и у вас сформировалось представление о том какие существуют веб-технологии и для чего они используются. Если есть какие-то идеи, возражения по поводу примеров и схемы — жду комментариев. Спасибо за внимание!)
polyblog
Технологии и дзен
Веб-технологии для чайников
Периодически меня просят рассказать о «кухне» веб-разработки, люди, которые либо имеют гуманитарное образование, либо просто в этом совсем не разбираются. В таких случаях, быстро прикинув в голове сколько придется объяснять, я либо рассказываю все при встрече, либо говорю, что когда-нибудь напишу про все это пост. И вот пришло время для поста, где я попробую простым и понятным для большинства людей языком рассказать о веб-технологиях и их применении на практике.
Браузеры


Интернет

Веб-Сервер
Это слово знакомо многим, но не все знают что это такое. По сути веб-сервером является компьютер, который соответствующим образом настроен и на котором установлена специальная программа: тоже веб-сервер. На данный момент самыми популярными программами веб-серверами являются «Apache», «nginx» и «IIS» от компании Microsoft.
Веб-сервер определенным образом обрабатывает запросы, поступающие к нему по проводам от остальных компьютеров в сети интернет и посылает им ответы с помощью так называемых «протоколов». Углубляться в протоколы мы так же не будем.
На серверах как раз лежат те самые сайты, по которым мы с вами «ходим». Сайт — это просто набор файлов, программа, которая написана на веб-языках программирования.
Клиент
Клиентом называют программу для взаимодействия с сетью на стороне пользователя. В нашем случае это браузер. Браузер посылает некую информацию (запросы) серверу, а сервер на них отвечает. Так они общаются. Когда вы кликаете по ссылке, то клиент (браузер) посылает запрос серверу, на котором лежит данный сайт. Сервер обрабатывает запрос и посылает в ответ клиенту информацию, которую тот запросил, или возвращает код ошибки, если эта информация по каким-либо причинам не доступна. Например, всем знакомая ошибка 404 (страница не найдена).

Доменное имя
Доменное имя, это тот адрес, который вы вводите в адресную строку браузера, чтобы попасть на сайт. Она располагается наверху. Чтобы проще было понять, считайте что домен — это имя сайта. Выглядит оно примерно так: trali-vali.example.ru, где «ru» — это домен 1го уровня, «example» — домен 2го уровня, а «trali-vali» — домен 3го уровня. Все уровни разделены точками. Уровней может быть сколько угодно.
Основные сайты, как правило, располагаются на доменах 2го уровня (yandex.ru). А их «дочерние» сайты находятся на субдоменах, на доменах 3го уровня (mail.yandex.ru).
Так же этот блог располагается на субдомене сайта веб-студии polycreative.ru.
CSS — ближайший помощник HTML. Это таблицы стилей. Без них бы сайты выглядели как газетные статьи. Просто отформатированный текст сверху вниз и немного картинок. CSS же позволяет с помощью определенных правил компоновать блоки HTML, задавать им оформление и расположение на странице. Если представить, что блоки HTML — это кубики, то в чистом виде они бы были выстроены один за другим в башенку. CSS же позволяет из этих кубиков построить полноценный замок.
Правила CSS подключаются к сайту с помощью специальных тэгов в HTML в виде отдельных файлов или прописываются напрямую в структуре странички.
JavaScript
Клиентский язык программирования. С помощью него наш сайт оживает и приобретает «поведение». Представьте как будто наш замок из кубиков ожил. По нему начали ходить солдатики, ворота открываются по наведению на них курсора мыши, а картинки на кубиках плавно меняются. За все это как раз отвечает JavaScript. Команды этого языка исполняются прямо в браузере и являются настоящей магией, так как порой производят «вау-эффект». Всплывающие меню, появляющиеся новые элементы, красивые эффекты движения — все это JavaScript.
Однако JavaScript предназначен не только для украшения и «оживления» сайтов. Сегодня это очень серьезный язык, с помощью которого можно написать очень и очень многое. Например на нем создают игры и даже серверные приложения.
Команды JavaScript, как и CSS, подключаются к сайту с помощью специальных тэгов в HTML в виде файлов или прописываются напрямую в теле станицы.
PHP, Python, Ruby, Perl и другие серверные языки
Многие ошибочно полагают, что все странички на сайтах пишутся в чистом HTML руками. Раньше конечно так и было, но сегодня все совсем не так. Веб-серверы позволяют писать довольно сложную внутреннюю логику с помощью серверных языков. То есть сейчас сайты пишутся на каком-либо из серверных языков, которые в последствии, исходя из заданной программистом логики, выдают html-структуру сайта.
Используется это повсеместно, но самым ярким примером являются интернет-магазины. Чтобы создать интернет-магазин без серверного языка, нам бы потребовалось создать кучу практически одинаковых html-файлов, различающихся только картинками и текстом внутри них. Серверный язык позволяет все это уместить в 1 файлик, где с помощью программной логики будет выясняться какой именно текст и картинку поместить на страницу, если пользователь перешел по данной ссылке.
Весь процесс выглядит примерно следующим образом: пользователь жмет на ссылку, клиент отправляет запрос серверу, сервер понимает, что запрос соответствует определенному файлу, где содержится определенный код. В коде идет детальный разбор запроса и, в соответствии с заданной программистом логикой, клиенту возвращается ответ в виде html-разметки. Клиент это обрабатывает и выдает пользователю визуальную картинку.
Так же все серверные языки умеют общаться с Базами Данных.
Базы Данных
База данных — это список таблиц с самыми разнообразными данными. Это могут быть даты, числа, индексы, тексты, коды, логины, пароли и даже картинки. Сегодня весь веб-контент хранится в базах данных, которые управляются с помощью языков запросов вроде SQL.
Серверный язык умеет посылать запросы в базу данных и получать из нее необходимый контент, который затем определенным образом обрабатывает и впоследствии отсылает клиенту, а тот в свою очередь показывает этот контент нам, но уже в красивой обертке.
Дизайн
Ну и напоследок про дизайн. Ни один сайт не обходится без дизайна. Дизайнеры рисуют свои макеты в Photoshop или где им удобно, а затем отправляют эти файлы верстальщикам, которые с помощью HTML и CSS эти макеты верстают, предварительно нарезав в том же Photoshop. Затем подключаются серверные и клиентские программисты (back-end и front-end соответственно). Серверные разработчики пишут логику каким образом будут формироваться сверстанные верстальщиком макеты, а клиентские — как они будет вести себя в браузере.
Вот вкратце вся кухня веб-разработки. Если что-то осталось непонятным — задавайте свои вопросы в комментариях, я с удовольствием на них отвечу.













