На небе только и разговоров, что о море и о закате…

7.32M

Category:

internet

Frontend. Разработка

1. Frontend Разработка

Лекция 1
Сокольников Алексей | 2016

2. Автор

Волгатех, ПС [2009 – 2014]
Разработчик сайтов гостиниц [2011-2012]
Full Stack разработчик iSpring Cloud, iSpring Learn [с 2012]
Аспирант кафедры ИВС [с 2014]
Сокольников Алексей | 2016

3. Почему я это делаю?

• Я хочу работать в команде с профессионалами
• Мощнее команда – интереснее задачи
• Личное развитие
3/46
Сокольников Алексей | 2016

4. О чем курс?

• HTML, CSS
• JavaScript
• HTML5 & CSS3
• Bootstrap 3
• JQuery
• Angular JS
4/46
Сокольников Алексей | 2016

5. Как все устроено?

• Web-дизайнер делает макет
• Frontend-разработчик верстает страничку
• Backend-разработчик реализует серверную
часть
Сокольников Алексей | 2016

6. Верстает? Это как?

• Что такое верстка веб-страниц?
• Чем отличается от полиграфической?
• В чем интерес?
Сокольников Алексей | 2016

7. Требования к верстке

• Попиксельное соответствие
• Кросс-браузерность
• Адаптивность
Сокольников Алексей | 2016

8. Основы разметки HTML

• Введение HTML
• Что такое теги?
• Стандарты, DOCTYPE, кодировки
• Основные теги
• Форматирование кода
8/46
Сокольников Алексей | 2016

9. HTML

• Автор: Тим Бернерс-Ли 1986г.
• Браузеры
• Теговый язык
9/46
Сокольников Алексей | 2016

10. Тэги

<тег атрибут1="значение" атрибут2="значение“/>
<тег атрибут1="значение" атрибут2="значение">...</тег>
Сокольников Алексей | 2016

11. Парные теги

11/46

12. С чего начинается страница?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN "
"http://www.w3.org/TR/html4/strict.dtd">
Сокольников Алексей | 2016

13. А проще можно?

<!DOCTYPE html>
Сокольников Алексей | 2016

14.

14/46

15. Кодировка

<head>
<meta charset="utf-8">
<title>Проставлять кодировки очень важно!</title>
</head>
Сокольников Алексей | 2016

16. Основные теги

<html></html>
<head></head>
<body></body>
Сокольников Алексей | 2016

17.

<!DOCTYPE HTML>
<html>
<head>
<title>Тег BODY</title>
<meta charset="utf-8">
</head>
<body>
<p>Я изучил тег Body, но не знаю P</p>
</body>
</html>
17/46

18. Форматирование текста

<h1></h1>
<b></b>
<i></i>
Сокольников Алексей | 2016

19. Гиперссылки

<a href="vk.com"
title="Вконтакте">...</a>
Сокольников Алексей | 2016

20. Форматирование страницы

<p></p>
<ol></ol>
<ul></ul>
<li></li>
<div></div>
Сокольников Алексей | 2016

25. Графические элементы

<img src="sea.jpg" alt="Мое Море“ />
Сокольников Алексей | 2016

26. На небе только и разговоров, что о море и о закате…

На небе только и разговоров, что о море и о
закате…
26/46

27. Таблицы

<table></table>
<tr></tr>
<td></td>
<th></th>
Сокольников Алексей | 2016

28.

<table>
<tr>
<th>Заголовок</th>
</tr>
<tr>
<td>Ячейка</td>
</tr>
</table>
28/46

29. Формы

<form></form>
<input/>
<textarea></textarea>
<select></select>
Сокольников Алексей | 2016

35. Валидация страницы

• http://validator.w3.org
• HTML Validator для браузера Firefox
Сокольников Алексей | 2016

39. HTML Validator для браузера Firefox

40. Инструменты разработки

• Notepad ++
• Adobe Photoshop, Gimp
• Расширения: Pixel Perfect, Gridify
Сокольников Алексей | 2016

41.

41/46

42.

42/46

43. Соглашение о кодировании

• Именование файлов
• Соглашения по HTML
• Соглашения по CSS
43/46

44. Структура проекта

44/46

45. Оценки

• Каждая лабораторная 10 баллов
• Коэффициенты: 1.2, 1.0, 0.8, 0.6
• 90%, 75%, 60%
45/46

46.

Вопросы?

English Русский Rules