Основы html - шесть лет спустя
TRANSCRIPT
Основы HTML:6 лет спустя
Бабич А.В. © 2015http://ProductivityBlog.com.ua
Однажды в студеную зимнюю пору...
● 22 января 2009 годаоткрытая лекция для студентов ППК НТУ “ХПИ” на тему“Основы HTML”
● слайды доступны на SlideSharehttp://www.slideshare.net/liketaurus/html-presentation-941527
Введение в HTMLОбщие сведения
Новая версия стандарта - HTML5
● совместимость ● семантика, а не визуализация● новые возможности
○ мультимедиа○ навигация○ оффлайн○ графика○ веб-сокеты
Новая версия стандарта
CSS3 и JavaScript● преобразования и анимации
○ keyframe● JavaScript API
○ jQuery○ Modernizr
● Canvas!● ...
Новая версия стандарта
● Microsoft Virtual Academyhttp://www.microsoftvirtualacademy.com/
● Developing in HTML5 with JavaScript and CSS3 Jump Starthttp://www.microsoftvirtualacademy.com/training-courses/learn-html5-with-javascript-css3-jumpstart-training
Браузеры
● Google Chrome○ App launcher, диспетчер задач, F12○ Chrome Web Store
■ Chrome Dev Editor■ DevDocs, http://devdocs.io/
■ экспериментальные фичи● WebGL, https://www.chromeexperiments.com/
Web Fundamentalshttps://developers.google.com/web/fundamentals/
Браузеры
● Mozilla Firefox○ Developer Edition○ WebIDE, ○ F12○ Firefox OS
Mozilla Developer Networkhttps://developer.mozilla.org/ru/
Браузеры
● Opera○ теперь - родственник Chrome○ Opera Vivaldi○ Opera TV
Dev. Operahttps://dev.opera.com/, http://www.opera.com/uk/developer
Браузеры
● Maxthon○ теперь - родственник Chrome○ уникальные фишки для видео
■ смотреть в окне■ скачать
○ записная книжка○ F12
Браузеры
● MSIE○ все еще “утилита для
скачивания браузера”○ но 11-й IE неплох…
■ сглаживание шрифтов■ плавные анимации
○ F12● ждем Microsoft Spartan
Can I use...
● Проверка возможностей браузераhttp://caniuse.com/
● Modernizr Test Suitehttp://modernizr.github.io/Modernizr/test/index.html
Структура документа
Теги для структурирования <nav><header><footer><section><article><aside><hgroup>
Введение в HTMLФорматирование
В целом без изменений, но
● некоторые теги стали deprecated● возросла роль CSS
○ оформление○ рисование фигур○ эффекты○ преобразования○ анимации
Введение в HTMLГипертекстовые ссылки и якоря
Без изменений
Введение в HTMLМультмедиа и HTML
Поменялось все!
Ура! Нативная поддержка!● теги <video> и <audio>
<video src="MyVideo.mp4" width="300" height="200" poster="MyPoster.jpg" autoplay="autoplay" muted="muted" controls="controls" loop="loop" ></video>
Поменялось все!
Несколько форматов - перестраховываемся<video poster="MyPoster.jpg" autoplay controls> <source src="MyVideos/MyVideo.mp4" type='video/mp4' /> <source src="MyVideos/MyVideo.webm" type='video/webm' /> <source src="MyVideos/MyVideo.ogv" type='video/ogg' /> <!-- You can embed Flash or Silverlight content here, as a fallback --> <!-- You can also display some simple text for old browsers--> Cannot play video. Download video <a href="MyVideos/MyVideo.webm">here</a></video>
Введение в HTMLСоздание таблиц
Без изменений
Кое-что еще
Теги<thead><th><tbody><tfoot>
Введение в HTMLФреймы
Все так же считаются плохой кармой!
Введение в HTMLПО для веб-дизайна
Доступные инструменты
● AceHTML, 1st Page и Web Studio все еще доступны и даже очень неплохи
● Но лучше Visual Studio нет ничего!https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx
PhotoShop? Нет!
● GIMP или GIMPShophttp://www.gimp.org/
http://www.gimpshop.com/ ● Paint.NET
http://www.getpaint.net/
● Inkscapehttps://inkscape.org/ru/
Бесплатные шаблоны
● http://www.opendesigns.org/website-templates/● http://html5up.net/● http://www.tooplate.com/free-templates● http://getbootstrap.com/
○ http://startbootstrap.com/
Введение в HTMLЗаключение
Пару советов
● HTML(5) Tutorial & Quizhttp://www.w3schools.com/html/ http://www.w3schools.com/html/html5_quiz.asp
● Познакомьтесь с Java Script и jQuery
● Изучите CSS3● Курс 20480 от Microsoft
https://www.microsoft.com/learning/en-us/course.aspx?id=20480b
Вопросы?
