Эффективное использование инструментов разработки веб-страниц

1. Модуль: Эффективное использование инструментов разработки веб-страниц

2. Программное обеспечение

Браузер: GH, FF, IE, Safari, Opera (основные) и т.д.
Редакторы исходного кода: Notepad++ (свободный), AkelPad
(свободный), Vim (свободный), Adobe Dreamweaver (пл.), Top
Stype (пл.) и т.д.
FTP-клиенты: FileZilla, WinSCP (поддержка SSH), Total
Commander и т.д.
Графические редакторы: Gimp (свободный) , Inscape
(свободный), Adobe Illustrator (пл.), Adobe Photoshop (пл.), Adobe
Fireworks (пл.)
Страница 2

3. Пакеты программ

LAMP/WAMP = Linux/Windows + Apache + MySQL + PHP
– Денвер
– Open Server
– XAMPP
– EasyPHP
– WampServer
Страница 3

4. Загрузка файлов на сервер

FTP - File Transfer Protocol
SFTP - SSH File Transfer Protocol (Secure File Transfer Protocol) протокол, реализующий доступ к файлам, через надёжный канал
связи, например SSH.
SSH (Secure SHell — «безопасная оболочка») - сетевой протокол
предназначенный для защищённой передачи данных между двумя
сетевыми устройствами. Используемое в SSH шифрование
обеспечивает конфиденциальность передаваемой по сетям
информации.
– Использование проводника
– Плагин NppFTP для Notepad++
– Total Commander
– FileZilla
– Средствами панели управления или программно
Страница 4

5. Расширения!

Для браузеров GH, FF: Web Developer, Firebug
У Internet Explorer и GH встроенный отладчик (F12)
Для Notepad++:
– Zen-coding
– HTML tag
– MimeTools
Страница 5

6. Оформление стилей редактора

Страница 6

7. Онлайн сервисы

Генераторы файлов ico
Генераторы эффектов CSS3
Генераторы многоколоночных страниц
Страница 7

8. HTTP (HyperText Transfer Protocol) — протокол передачи гипертекста

HTTP-сообщение состоит из трёх частей:
1. Стартовая строка (Starting line) — определяет тип
сообщения;
2. Заголовки (Headers) — характеризуют тело сообщения,
параметры передачи и прочие сведения;
3. Тело сообщения (Message Body) — непосредственно данные
сообщения. Обязательно должно отделяться от заголовков
пустой строкой.
Страница 8

9. Примеры заголовков

Страница 9

10. Favicon

Favicon (сокращение от FAVorites ICON — «значок для избранного», от
названия папки с закладками в MSIE) — значок веб-сайта или веб-страницы.
Отображается браузером в адресной строке перед URL страницы, а также в
качестве картинки рядом с закладкой, во вкладках и в других элементах
интерфейса.
Размер изображения 16х16 пикселей, формат файла ICO, размещают в
корне сайта под именем favicon.ico.
Допускается использование форматов GIF, JPEG, PNG, размер 32х32
пикселя, глубина цвета 4, 8, 24 бита.
<link rel="shortcut icon" href="/favicon.ico">
<link rel="icon" type="image/png" href="/newicon.png">
Страница 10

11. Статистика использования браузеров

По данным http://www.w3schools.com
Страница 11

12. Статистика по браузерам с определенного сайта

Страница 12

13. Статистика по разрешениям дисплеев с определенного сайта

Страница 13