Ликбез по веб-технологиям

Ликбез по технологи.м

Алексей Симоненко веб-евангелист в HTML Academy

2014

Как работает интернет

Запрос

Ответ

Что Скрывает 7йсберг

Операционные системы

Операционные системы

Базы данных

Операционные системы

Базы данных

Языки программирования

Операционные системы

Базы данных

Языки программирования

Фреймворки

Операционные системы

Базы данных

Языки программирования

Фреймворки

Системы управления сайтом

Операционные системы

Базы данных

Языки программирования

Фреймворки

Системы управления сайтом

Сайт

Операционные системы

Базы данных

Языки программирования

Фреймворки

Системы управления сайтом

Сайт

↓ Хостинг

Как работает интернет

Запрос

Ответ

Client-side Server-side

Фронтенд Бэкенд

Бэкенд

Операционные системы

Базы данных

Языки программирования

Фреймворки

Системы управления сайтом

LAMP

A

L

M

P

Linux

Apache

MySQL

PHP

LAMP

A

L

M

P

Linux

Apache

MongoDB

Python

Стек разработки

L

L

P

R

Linux

LightTPD

PostgresSQL

Ruby

Стек разработки

N

L

M

N

Linux

Nginx

MongoDB

Node.JS

Бэкенд это скучно

Фронтенд

Сайт

Google Chrome Mozilla FirefoxInternet Explorer Safari Opera

Статистика

44.2% 14.3%10.9% 7.1% 13.5%

какие сайты?

Статика Динамика

какие сайты?• Корпоративные сайты

• Интернет-магазины

• Лендинги

• Мобильные сайты

HTML & CSS

htmlacademy.ru

Что вместо флеш• HTML5 Video

Что вместо флеш• HTML5 Video

• HTML5 Canvas

gabrielecirulli.github.io/2048/

flappybird.io

Что вместо флеш• HTML5 Video

• HTML5 Canvas

• Web Audio API

noisli.com

effectgames.com/demos/canvascycle/

jamwithchrome.com

dashersw.github.io/pedalboard.js/demo/

Что вместо флеш• HTML5 Video

• HTML5 Canvas

• Web Audio API

• WebRTC

Флеш можно заменить

24hoursofhappy.com

html5 — buzzword

CSS3• Веб-шрифты

• Линейные и радиальные градиенты

• Анимация

• 2D и 3D трансформации

codepen.io/lbebber/full/BzoHi/

tympanus.net/Development/HoverEffectIdeas/

codepen.io/teolitto/full/cdxFm/

joecritchley.com/demos/time-machine/

codepen.io/kennethcachia/full/Fhvie/

clicktorelease.com/code/css3dclouds/

javascript

Javascript• Gamepad

• Device Orientation

• Ambient Light

• Vibration

• Geolocation

• Battery Status

WEBGL

madebyevan.com/webgl-water/

webaudio-io2012.appspot.com/frames/pool.html

media.tojicode.com/q3bsp/

playmapscube.com

alteredqualia.com/three/examples/webgl_terrain_dynamic.html

Parallax

ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/

Команда

Менеджер

ДизайнерПрограммист Верстальщик

Команда

Менеджер

Дизайнер Верстальщик

Программист

Команда

Менеджер

Дизайнер Технолог

Программист

Команда

Менеджер

Дизайнер Технолог

Программист

Фронтенд Бэкенд

сайт в 2014• Быстрый

• Доступный

• С качественной графикой

• Адаптивный

kandilyan.ru

kandilyan.ru

kandilyan.ru

Как узнавать новое?

simonenko simonenko simonenko.su

Спасибо.