Александр Кашеверов — Коротко про web: html, css, js

36
Докладчик: Кашеверов Александр Дата: 13 июля 2016 года Коротко про WEB: HTML, CSS, JS

Upload: dataart

Post on 17-Jan-2017

158 views

Category:

Software


3 download

TRANSCRIPT

Page 1: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Докладчик: Кашеверов АлександрДата: 13 июля 2016 года

Коротко про WEB: HTML, CSS, JS

Page 2: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS
Page 3: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

О чём расскажу

• Теория• Немного истории• Примеры• Статистика использования js

Page 4: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Front-End + Back-End

=

Page 5: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

С этого момента поподробнее

Схема

Page 6: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Front-end

HTML

CSSJavaScript

jQueryCSS3

HTML5

ajaxBackbone IEsvg

Angular

Twitter Bootstrap

WebStorage

D3.js

prototype

mootools

sencha

Responsive layout

WebWorker

Cookies

Gulp

GruntCoffeescript

JSON

HTTP

flash

Canvas

PolymerReactJS

Page 7: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Front-end

HTML

CSSJavaScript

Page 8: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Три слона

Структура

Внешний вид

Логика

Page 9: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

evolutionoftheweb.com

Page 10: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

evolutionoftheweb.com

Page 11: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

evolutionoftheweb.com

Page 12: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

evolutionoftheweb.com

Page 13: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

1996

Page 14: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

2016

Page 15: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

JavaScript

• Брендан Айк из компании Netscape в 1995 году внедрил язык программирования в браузер Netscape (сегодняшний firefox)

• Цель - изменение структуры без перезагрузки страницы

• В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный Jscript

Page 16: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Javascript - развитие

• 1995 – начало

• 2005 – ajax, prototype.js, jQuery, Mootools, Dojo

• 2010 – JavaScript MVC

• backbone, angular, reactjs, ember, ….

• Сейчас WEB без JS представить сложно

Page 17: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS
Page 18: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример HTML

Page 19: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример CSS

Page 20: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример Javascript

Page 21: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

JavaScript, пример tabs

Page 22: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример tabs -> html разметка

Page 23: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример tabs -> чистый JS

Page 24: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример tabs -> jQuery

Page 25: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример tabs -> jQuery UI

Page 26: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример tabs -> jQuery UI

Page 27: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

“You should definitely use jQuery”

Page 28: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример

Page 29: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример

Page 30: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Пример

Page 31: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

JavaScript сейчас

Page 32: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Немного статистикиdou.ua

Page 33: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Немного статистикиdou.ua

Page 34: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Что рассмотрели

• Frontend+Backend• html+css+js• Немного истории• Примеры• Статистика использования js

Page 35: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS
Page 36: Александр Кашеверов — Коротко про WEB: HTML, CSS, JS

Домашнее задание

Движение планет вокруг Солнца

• https://htmlacademy.ru/

• https://learn.javascript.ru/

Что почитать

[email protected]

• https://github.com/kashesandr

• https://twitter.com/kashesandr

Контакты