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

Лекция для основного курса ИКРы.

Transcript

1. Ликбез по технологи м Алексей Симоненко веб-евангелист в HTML Academy 2014
2. Как работает интернет Запрос Ответ
3. Что Скрывает йсберг
5. Операционные системы
6. Операционные системы Базы данных
7. Операционные системы Базы данных Языки программирования
8. Операционные системы Базы данных Языки программирования Фреймворки
9. Операционные системы Базы данных Языки программирования Фреймворки Системы управления сайтом
10. Операционные системы Базы данных Языки программирования Фреймворки Системы управления сайтом Сайт
11. Операционные системы Базы данных Языки программирования Фреймворки Системы управления сайтом Сайт ↓ Хостинг
12. Как работает интернет Запрос Ответ Client-side Server-side Фронтенд Бэкенд
13. Бэкенд
14. Операционные системы Базы данных Языки программирования Фреймворки Системы управления сайтом
15. LAMP A L M P Linux Apache MySQL PHP
16. LAMP A L M P Linux Apache MongoDB Python
17. Стек разработки L L P R Linux LightTPD PostgresSQL Ruby
18. Стек разработки N L M N Linux Nginx MongoDB Node.JS
19. Бэкенд это скучно
20. Фронтенд
21. Сайт
23. Google Chrome Mozilla Firefox Internet Explorer Safari Opera Статистика 44.2% 14.3% 10.9% 7.1% 13.5%
24. какие сайты? Статика Динамика
25. какие сайты? • Корпоративные сайты • Интернет-магазины • Лендинги • Мобильные сайты
26. HTML & CSS
27. htmlacademy.ru
29. Что вместо флеш • HTML5 Video
31. Что вместо флеш • HTML5 Video • HTML5 Canvas
32. gabrielecirulli.github.io/2048/
33. flappybird.io
34. Что вместо флеш • HTML5 Video • HTML5 Canvas • Web Audio API
35. noisli.com
36. effectgames.com/demos/canvascycle/
37. jamwithchrome.com
38. dashersw.github.io/pedalboard.js/demo/
39. Что вместо флеш • HTML5 Video • HTML5 Canvas • Web Audio API • WebRTC
40. Флеш можно заменить
41. 24hoursofhappy.com
42. html5 — buzzword
43. CSS3 • Веб-шрифты • Линейные и радиальные градиенты • Анимация • 2D и 3D трансформации
45. codepen.io/lbebber/full/BzoHi/
46. tympanus.net/Development/HoverEffectIdeas/
47. codepen.io/teolitto/full/cdxFm/
48. joecritchley.com/demos/time-machine/
49. codepen.io/kennethcachia/full/Fhvie/
50. clicktorelease.com/code/css3dclouds/
51. javascript
52. Javascript • Gamepad • Device Orientation • Ambient Light • Vibration • Geolocation • Battery Status
53. WEBGL
54. madebyevan.com/webgl-water/
55. webaudio-io2012.appspot.com/frames/pool.html
56. media.tojicode.com/q3bsp/
57. playmapscube.com
58. alteredqualia.com/three/examples/webgl_terrain_dynamic.html
59. Parallax
60. ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/
62. Команда Менеджер Дизайнер Программист Верстальщик
63. Команда Менеджер Дизайнер Верстальщик Программист
64. Команда Менеджер Дизайнер Технолог Программист
65. Команда Менеджер Дизайнер Технолог Программист Фронтенд Бэкенд
66. сайт в 2014 • Быстрый • Доступный • С качественной графикой • Адаптивный
67. kandilyan.ru
68. kandilyan.ru
69. kandilyan.ru
70. Как узнавать новое?
71. simonenko simonenko simonenko.su Спасибо.