Листаю очень плохую книжку по веб-разработке

Вот она, лежит у меня на столе. Прямиком из 2008 года, ждала, чтобы я её прочитал и научился делать сайты. Самостоятельно. Самоучитель же. Триумф!

А если тут ещё и предлагают самый быстрый способ, то точно успех, смогу всему научиться, пока пишу эту статью. Смогу ведь, да?

В общем, давайте вместе полистаем старую книжку.

Дисклеймер. Авторы молодцы, издательство молодцы, все молодцы, один я трачу казённые буквы и зря придираюсь к шрифтам. Ну и не будьте такими серьёзными, это просто статья про устаревание технологий и литературы.

Аннотация

Аннотация — важная часть книги. Она помогает определиться, нужно ли покупать книжку, и вкратце рассказывает о содержании. Давайте посмотрим.

Как видите, здесь прекрасно всё. Сразу понятно, что в книге мы узнаем

• Чем web-страничка отличается от web-сайта (чем?).

• Как стать мастером web-дизайна (запомним раз).

• Как пройти полный цикл разработки (забудьте свой грант и галп).

• Как сделать всё с помощью пошаговых инструкций (запомним два).

• Чем отличается web от Интернета.

• Что после книги нам срочно понадобится резюме веб-разработчика с увлекательными творческими фотографиями (в мире, где фотостоки ещё не победили).

• Что кириллические шрифты, даже с диска «3000 лучших шрифтов», остаются кириллическими шрифтами.

• Что авторы даже все примеры залили на свою web-страничку в Интернете. Залили ведь, да?

Вывод: аннотация хороша, ожидания соответствующие. Если правда быстро научат делать сайты, то это вообще триумф. Давайте листать дальше.

Содержание

В книге пять глав. Вот они, слева направо: Намджун, Чонгук, Чингачгук, Гойко Митич, Джин, Юнги.

Глава 1. Как «устроена» web-страница. Чувствуете эту снисходительность? В этой главе мы, буквально, «смотрим устройство чужой web-страницы» и больше ничего не делаем.

Глава 2. Создаем свой первый web-сайт. Глава сразу предлагает нам набор важнейших знаний для любого веб-разработчика из 2008 года.

• что такое HTML,

• как задать шрифт и оформить текст,

• вставить рисунок,

• «создать список наших возможностей» (могу копать, могу не копать),

• добавить книгу отзывов и предложений (сразу после оформления текста),

• добавить ссылки,

• создать меню в виде таблицы,

• и добавить некие «последние штрихи».

Хорошо, мы потом полистаем дальше. Потому что глава 3 очень уж неожиданная.

Глава 3. Бесплатное размещение сайта в Интернете. В этой главе нам предлагают создать адрес нашего сайта в Интернете и разместить web-страницу с помощью менеджера файлов бесплатной службы. Какой-то очень-очень интригующей бесплатной службы.

Промежуточный итог. Пока всё выглядит как самый быстрый способ создать сайт:

1. Задать шрифт и оформить текст

2. Вставить рисунок

3. Создать список возможностей

4. Добавить книгу отзывов.

5. Добавить последние штрихи

6. И бесплатно разместить сайт в Интернете

Чувствуете, как авторы книги предсказали будущее? Это же буквально любой лендинг на Тильде из 2021. Но продолжим, ведь четвёртая глава посвящена важной для любого разработчика в 2008 году теме — графике и её оптимизации.

Авторы — мастера интриги, ведь даже сейчас тяжело сказать, что такое «прозрачная» графика.

Здесь интрига достигает максимума — если в книжке из 160 страниц 80 уже заняты, что же будет дальше? CSS? Основы JavaScript? Табличная вёрстка? Какой-нибудь модный фреймворк? Переворачиваем страницу.

Нет, в этом месте авторы сдались.

Вторая половина книги — шаманство в Sharepoint Designer 2007. Даже листать туда не хочется, ведь на выходе получится известно что. Но хватит тянуть флексбокс по диагонали, давайте посмотрим, что нам предлагают для изучения.

Глава 1. Как «устроена» web-страница

В этой главе мы узнаём, что каждая web-страница (знали бы вы, как я устал переключать раскладку) может содержать текст, рисунки, видео, звукозаписи и объёмные миры. Вон те знаменитые объемные миры из 2008 года.

Первая страница книги вообще довольно хорошо объясняет штуки. Собрание страниц на одном компьютере называется веб-узлом. А веб-узел это просто сайт. А компьютер с сайтами — это сервер. А сервер должен быть подключен к Интернету и работать по HTTP в World Wide Web. Солидно, по фактам.

И если бы здесь остановиться, то книга бы уже себя окупила. Но мы перевернём страницу и провалимся на 15 лет назад.

Если где-то и есть идеальные сетап и панчлайн, то вот они. Мы снова оказываемся в том мире, fellow kids, где интернет был по карточкам, фотографии медленно грузились сверху вниз, хотя всё самое интересное всегда было внизу, а после загрузки страницы с анекдотами мы прерывали связь с провайдером. Потому что у интернета нулевых не было цели, только путь.

Здесь самое время утереть скупые слёзы и продолжить.

Дальше мы узнаём, что HTML — язык разметки web-страниц, и что самый быстрый способ узнать, как устроена страница, это увидеть её исходный код. И здесь авторы предлагают новичку посмотреть на образец HTML-разметки, который навсегда испортит психику любому просмотревшему. Уберите от экранов детей.

Следом авторы разъясняют, из чего состоят теги, и здесь становится понятно, почему к книге прилагался архив с кодом. Ведь иначе было было бы невозможно представить, как написать это:

Как видите, ни одна из кавычек не соответствует действительности. И это, забегая вперёд, большая проблема всей книги — ни один из примеров кода не заработает, потому что везде вот так. Я могу предположить, почему так получилось. Книжку писали в ворде, принесли в издательство, а там случился типограф и всё пошло наперекосяк.

После этого авторы рассказывают, что страница состоит из структуры вида

<html>
<head>
…
</head>
<body>
…
</body>
</html>

Что у страницы может быть <title> из 5-6 слов, <meta http-equiv=”Content-type” content=”text/html; charset=windows-1251” (причём именно так), а ещё что комментарии желательно использовать в редких случаях, потому что они тоже весят несколько байт и загружаются со страницей.

Кончается глава в лучших традициях трейлеров супергеройских фильмов.

Краткое содержание: не забывайте отключаться от интернета, страница состоит из хед и боди, лучший способ научиться — смотреть чужой код.

Ну и ладно.

Как делать хорошо: тренажёр по структуре HTML-документа.

Глава 2. Создаём свой первый web-сайт

Для создания страницы нужен браузер (IE, Opera, Mozilla) и текстовый редактор (notepad.exe). Не то чтобы это был необходимый минимум, но когда начинаешь делать творческие галереи своих фотографий и списки возможностей, становится трудно остановиться…

В этой главе нам предлагают сделать «сайт компании “НЕОТОН”, которая работает в области автоматизированных систем управления». Давайте посмотрим, что получится.

После нехитрых манипуляций (добавили структуру, покрасили боди) получаем вот что:

Стоп, bedcolor? Это что-то из HTML2? Проверяем страницей выше:

А тут всё ок, bgcolor. Да что ж такое-то. Ладно-ладно, просто книжку диктовали вслух. Ничего страшного. Всё равно мы дальше сохраняем htm-файл и открываем его в браузере. И здесь, на 14 странице, мы встречаем первый действительно полезный совет о тестировании.

Как делать хорошо: тренажёр по тому, как устроен HTML

Оформляем текст

На следующих пяти страницах мы узнаём, что текст можно оформить по-разному:

• Заголовки разных уровней

• Полужирное начертание

• Курсив

• Полужирный курсив

• Большой текст с помощью тега <big>

И чтобы ваш текст точно заметили, используйте все теги сразу:

Так как книга по созданию сайтов почти ничего не будет рассказывать о CSS, авторы предлагают страшное — менять размер шрифта с помощью тега <font> с атрибутом size. Если вы читаете это после 2021 года — не делайте так.

Центрируем текст на странице с помощью тега <center>. Оборачиваем рекламный текст на сайте во всё изученное и получаем, ну, какой-то результат.

Стоп, всё ещё bedcolor?! Им было настолько лень исправить?

В конце замаячил свет — впереди нас ждёт кусочек про CSS. Но не ожидайте от него ничего хорошего, ведь вы же помните про кавычки? Здесь они выходят на новый уровень:

Но если серьёзно, то эти две страницы вполне сносные — тут намёк на семантику и теги <dfn>, <em>, <strong> и <code>. Хотя всё равно всё кончается инлайном CSS, а мы все знаем, что это не очень. Ну и bedcolor, куда же без него.

Как делать хорошо: тренажёр по разметке текста.

Вставляем рисунок

Здесь ничего примечательного — в разделе рассказывают про тег <img> и показывают (красивое), как использовать атрибут src без кавычек.

Валидатор W3C в этом месте захлёбывается тремя алертами (не указан alt, нельзя указывать 1 как значение и вообще border — устаревший атрибут) и выходит из чата.

Но самое неожиданное происходит дальше — книга даёт совет из мира Unix.

Сразу вспоминается другая известная ситуация с локальными файлами — какой-то видос на китайском (да ведь?) сайте Microsoft со ссылкой на локальный диск H:

Как делать хорошо: тренажёры по изображениям и ссылкам.

Создаём список наших возможностей

Помните интригующий заголовок из оглавления? «Списком наших возможностей» оказались обычные маркированные списки с описанием того, что делает «компания НЕОТОН».

Здесь ничего необычного, кроме очередного варианта кавычек, которые, впрочем, встроены в текст и ни на что не влияют:

Как сделать хорошо в 2021: тренажёры по работе со списками

Книга отзывов и предложений

Какие у вас версии о содержимом главы? Будет тренировка по JavaScript или PHP? Статическая таблица с отзывами? Может быть айфрейм с чем-нибудь? Нет, мы будем делать форму с помощью тега <form> и отправлять ответы себе на почту.

Сначала зарегистрируемся на Народе (помните, был такой сайт примерно в одно время с Клабхаусом?)

А потом за две следующие страницы напишем форму для решительной отправки отзывов и предложений на почту. Естественно, с очередной вариацией кавычек и выравниваем кода по ширине страницы, куда же без них.

В конце раздела нам рассказывают немного об информационной безопасности и необходимости не передавать конфиденциальные данные через незащищённую форму. Справедливо. Как защищать — не расскажут, но книга этого и не обещала.

Больше ничего плохого здесь не происходит. Листаем дальше, тем более, осталось недолго.

Как делать хорошо: тренажёры по работе с формами.

Ссылки, таблицы, последние штрихи

Мне не очень хочется повторяться — да, дальше всё ещё встречаются разные неправильные кавычки, странные формулировки и устаревшие практики. Да, уже надоело. Поэтому быстренько пролистаем до конца главы, подмечая разные штуки, которые бросаются в глаза в 2021 году.

Обещанный web-дизайн:

Абсолютные и относительные ссылки (кстати, вот хорошая инструкция, как их ставить правильно):

Боковое меню, приколоченное к странице через айфреймы (не делайте так):

Как видите, фреймы — удобное и эффективное средство для размещения информации на web-страницах. Однако, используя его, не следует терять чувства меры. Слишком большое количество окон на странице не улучшает восприятие информации. Не располагайте на экране более трех фреймов и старайтесь не применять их без необходимости.

Цитата прямиком из мира, где флексы и гриды ещё не заменили кексы и грибы.

Что там ещё смешного

Третья глава — списки бесплатных тогда и платных в 2021 хостингов и пошаговые инструкции по загрузке файлов на narod.ru (тут не соврали в аннотации).

Глава про графические форматы содержит всё, кроме самой графики, зато в ней очень хорошо видны графические форматы:

Не обошлось без web-дизайна:

Немного о сглаживании шрифтов:

И вот какой прекрасный сайт в итоге у нас получится.

А пятая глава полностью посвящена Sharepoint Designer, но давайте я просто остановлюсь здесь, ведь очевидно, что лучше уже ничего не будет.

Такая вот вышла книга прямиком из дикого мира свободного интернета. Да, она смешная, с глупыми ошибками, изданная без внимания редактора, но хочется верить, что кому-то она помогла понять, что сайты — это не очень сложно, а разработка — интересное занятие. Ведь ошибки, в общем-то, можно найти и исправить, а опыт их поиска останется и пригодится потом.

А самое главное — что для кого-то после прочтения этой книги создание и размещение в интернете резюме, рекламного материала или галереи с фотографиями стало просто увлекательным творческим занятием.

И это не я вам говорю, а книжка по веб-разработке. А книжке надо верить, ведь что попало в типографии не напечатают.