Сергей Леонидович Куринный - Mozilla Введение в веб программирование

Mozilla. Введение в веб
программирование
Установка базового программного обеспечения

3

Какие инструменты используют профессионалы?

3

Какие инструменты на самом деле нужны мне прямо сейчас?

4

Каким должен быть ваш веб-сайт?

5

Перво-наперво: планирование

5

Сделайте набросок вашего дизайна

6

Выберите свои активы

7

Работа с файлами

12

Где веб-сайт должен располагаться на компьютере?

12

Небольшое отступление о регистре и пробелах

13

Какую структуру должен иметь ваш веб-сайт?

13

Путь к файлам

14

Что должно быть сделано?

17

Основы HTML

17

Что такое HTML на самом деле?

17

Изображения

22

Разметка текста

23

Ссылки

25

Основы CSS

28

Что такое CSS на самом деле?

28

Шрифты и текст

33

Блоки, блоки и ещё раз блоки

35

Основы JavaScript
Что такое JavaScript на самом деле?

41
41
1

Пример "hello world"

42

Ускоренный курс по основам языка

44

Прокачаем пример нашего веб-сайта

51

Обзор инструментов разработки в браузерах

56

Как открыть инструменты веб-разработчика в браузере?

56

Inspector: DOM обозреватель и CSS редактор

59

Консоль JavaScript

62

Что дальше?

64

JavaScript — это язык программирования, который дает возможность
реализовывать сложное поведение веб-страницы. Каждый раз, когда
вы видите веб-страницу, она не только отображает статическое
содержимое, но и делает большее - своевременно отображает
обновление контента, выводит интерактивные карты, 2D/3D
анимацию, прокручивает видео и т.д. - будьте уверены, здесь не
обошлось без JavaScript.
Считается, что JavaScript сложнее изучить, чем связанные с ним
технологии, наподобие HTML и CSS. Поэтому, перед изучением
JavaScript, настоятельно рекомендуем сначала ознакомиться хотя бы
с этими двумя технологиями.
Необходимо много работать, чтобы создать профессиональный
веб-сайт, так что, если вы новичок в веб-разработке, мы рекомендуем
начать с малого. Вы не будете создавать свой Facebook прямо
сейчас, однако создать свой личный простой веб-сайт в Интернете не
так уж и сложно, так что мы начнем с этого.

2

Установка базового программного
обеспечения
Какие инструменты используют
профессионалы?
- КОМПЬЮТЕР. Может быть, это звучит очевидно для некоторых
людей, но некоторые из вас читают эту статью с телефона или
библиотечного компьютера. Для серьезной веб-разработки, лучше
приобрести настольный компьютер (Windows, Mac или Linux).
- ТЕКСТОВЫЙ РЕДАКТОР, ЧТОБЫ ПИСАТЬ КОД. Это может быть
бесплатный текстовый редактор, например:
Notepad++ (​
http://notepad-plus-plus.org/​
),
Brackets (​
http://brackets.io/​
),
Atom (​
https://atom.io/​
),
Visual Studio Code (​
https://code.visualstudio.com/​).
- ВЕБ-БРАУЗЕРЫ, ДЛЯ ТЕСТИРОВАНИЯ КОДА. В настоящее время
наиболее часто используемые браузеры это
Firefox (​
https://www.mozilla.org/ru/firefox/new/​
),
Chrome (​
https://www.google.com/chrome/browser/​),
Opera (​
http://www.opera.com/​
).
Вы также должны тестировать ваш сайт на то, как он работает на
мобильных устройствах и на любых старых браузерах, которые ваша
целевая аудитория может все ещё широко использовать (например,
IE 6-8).
- ГРАФИЧЕСКИЙ РЕДАКТОР, ЧТОБЫ СОЗДАВАТЬ ИЗОБРАЖЕНИЯ
для ваших веб-страниц.
The Gimp (​
http://www.gimp.org/​
)
3

Paint.NET (​
http://www.getpaint.net/​
)
- СИСТЕМА КОНТРОЛЯ ВЕРСИЙ, чтобы сотрудничать над проектом
с командой, делиться кодом и вкладами, и избегать редакционных
конфликтов. Сейчас Git (​
http://git-scm.com/​
) является наиболее
популярным инструментом контроля версий, и репозиторий кода
Github (​
https://github.com/​
), основанный на Git, также является очень
популярным.
- FTP ПРОГРАММА, чтобы загружать веб-страницы на сервер для
публичного просмотра.
- СИСТЕМА АВТОМАТИЗАЦИИ, такая как Grunt (​http://gruntjs.com/​)
или Gulp (​
http://gulpjs.com/​
), для автоматического выполнения
повторяющихся задач, например, минимизации кода и запуска
тестов.
- ШАБЛОНЫ, БИБЛИОТЕКИ, ФРЕЙМВОРКИ и т. д., чтобы ускорить
написание общей функциональности.

Какие инструменты на самом деле нужны мне
прямо сейчас?
Этот список выглядит страшновато, но, к счастью, вы можете начать
веб-разработку, не зная ничего о большинстве из того, что в нем
написано. В этой статье мы установим базовый минимум - текстовый
редактор и некоторые современные веб-браузеры.
УСТАНОВКА ТЕКСТОВОГО РЕДАКТОРА
У --">