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

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 FirefoxInternet 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
Спасибо.