Презентация моей предстоящей лекции для студентов ППК НТУ "ХПИ"

1. Основы HTML:
6 лет спустя
Бабич А.В. © 2015
http://ProductivityBlog.com.ua

2. Однажды в студеную зимнюю
пору...
● 22 января 2009 года
открытая лекция для студентов
ППК НТУ “ХПИ” на тему
“Основы HTML”
● слайды доступны
на SlideShare
http://www.slideshare.net/liketaurus/html-presentation-941527

3. Введение в HTML
Общие сведения

4. Новая версия стандарта - HTML5
● совместимость
● семантика, а не визуализация
● новые возможности
○ мультимедиа
○ навигация
○ оффлайн
○ графика
○ веб-сокеты

5. Новая версия стандарта
CSS3 и JavaScript
● преобразования и анимации
○ keyframe
● JavaScript API
○ jQuery
○ Modernizr
● Canvas!
● ...

6. Новая версия стандарта
● Microsoft Virtual Academy
http://www.microsoftvirtualacademy.com/
● Developing in HTML5 with
JavaScript and CSS3 Jump Start
http://www.microsoftvirtualacademy.com/training-courses/
learn-html5-with-javascript-css3-jumpstart-training

7. Браузеры
● Google Chrome
○ App launcher, диспетчер задач, F12
○ Chrome Web Store
■ Chrome Dev Editor
■ DevDocs, http://devdocs.io/
■ экспериментальные фичи
● WebGL, https://www.chromeexperiments.com/
Web Fundamentals
https://developers.google.com/web/fundamentals/

8. Браузеры
● Mozilla Firefox
○ Developer Edition
○ WebIDE,
○ F12
○ Firefox OS
Mozilla Developer Network
https://developer.mozilla.org/ru/

9. Браузеры
● Opera
○ теперь - родственник Chrome
○ Opera Vivaldi
○ Opera TV
Dev. Opera
https://dev.opera.com/, http://www.opera.com/uk/developer

10. Браузеры
● Maxthon
○ теперь - родственник Chrome
○ уникальные фишки для видео
■ смотреть в окне
■ скачать
○ записная книжка
○ F12

11. Браузеры
● MSIE
○ все еще “утилита для
скачивания браузера”
○ но 11-й IE неплох…
■ сглаживание шрифтов
■ плавные анимации
○ F12
● ждем Microsoft Spartan

12. Can I use...
● Проверка
возможностей браузера
http://caniuse.com/
● Modernizr Test Suite
http://modernizr.github.io/Modernizr/test/index.html

13. Структура документа
Теги для структурирования
<nav>
<header>
<footer>
<section>
<article>
<aside>
<hgroup>

14. Введение в HTML
Форматирование

15. В целом без изменений, но
● некоторые теги стали deprecated
● возросла роль CSS
○ оформление
○ рисование фигур
○ эффекты
○ преобразования
○ анимации

16. Введение в HTML
Гипертекстовые ссылки и якоря

17. Без изменений

18. Введение в HTML
Мультмедиа и HTML

19. Поменялось все!
Ура! Нативная поддержка!
● теги <video> и <audio>
<video src="MyVideo.mp4"
width="300" height="200"
poster="MyPoster.jpg"
autoplay="autoplay"
muted="muted"
controls="controls"
loop="loop" >
</video>

20. Поменялось все!
Несколько форматов - перестраховываемся
<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>

21. Введение в HTML
Создание таблиц

22. Без изменений

23. Кое-что еще
Теги
<thead>
<th>
<tbody>
<tfoot>

24. Введение в HTML
Фреймы

25. Все так же считаются плохой кармой!

26. Введение в HTML
ПО для веб-дизайна

27. Доступные инструменты
● AceHTML, 1st Page и Web Studio
все еще доступны и даже
очень неплохи
● Но лучше Visual Studio
нет ничего!
https://www.visualstudio.com/en-us/products/visual-studio-community-vs.aspx

28. PhotoShop? Нет!
● GIMP или GIMPShop
http://www.gimp.org/
http://www.gimpshop.com/
● Paint.NET
http://www.getpaint.net/
● Inkscape
https://inkscape.org/ru/

29. Бесплатные шаблоны
● http://www.opendesigns.org/website-templates/
● http://html5up.net/
● http://www.tooplate.com/free-templates
● http://getbootstrap.com/
○ http://startbootstrap.com/

30. Введение в HTML
Заключение

31. Пару советов
● HTML(5) Tutorial & Quiz
http://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

32. Вопросы?

33. http://goo.gl/lm8tLb