Если ты можешь сделать страницу о себе, ты можешь сделать всё.
Недавно мы делали статью о котиках и мобильной вёрстке. Но в жизни довольно мало случаев, когда нужно создать мобильный сайт с котиками, поэтому попробуем что-то серьёзное. Сделаем страницу «О себе». Её можно будет выложить на собственный сайт и громко заявить о себе миру.
Работать над страницей будем в таком порядке: сначала определим, что мы хотим сказать людям, а потом обернём всё в код. Любой другой сайт делается по этой же схеме — прежде чем расчехлять HTML, надо подумать над содержимым.
Можно ли без страницы?
Собственную страницу можно сделать и на конструкторе сайтов, не заморачиваясь с вёрсткой и стилями. Но так каждый может. Это всё равно что жить на съёмной квартире — что тебе хозяева разрешили, то и можно. А вот сделать собственный сайт — это как построить собственный дом. Настоящие программисты делают собственные сайты.
О чём будем писать
Допустим, наш герой — преподаватель информатики, который хочет устроиться на работу по специальности в крутой московский вуз. Для этого ему нужно рассказать о себе так, чтобы вуз захотел пригласить его к себе. Какой именно текст будет — неважно, мы написали пробный текст в кате. Ещё где-нибудь добавим фотографию, чтобы было красиво.
Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.
В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.
А вот тут поставим ссылки на вымышленные работы этого преподавателя
Вёрстка текста
За основу возьмём стандартный шаблон с Бутстрапом. В этой статье мы спрячем его под стрелочку, чтобы не занимать много места, но если интересно пройти весь путь с нами — скопируйте этот код и повторяйте за нами.
Каждый элемент нашей страницы будем помещать в свой контейнер, чтобы потом легко можно было настроить адаптивность как нам нужно. Посмотрите внимательно на этот код: это основной «кирпичик», из которого строится архитектура страниц Бутстрапа.
Сначала сверстаем заголовок всей страницы — для этого используем тег
.
. Если между двумя этими тегами поместить текст, браузер поймёт, что это заголовок, и сделает его побольше. Скажем контейнеру, что содержимое при любом размере пусть занимает всю ширину макета, и вставим в него наш текст:
Михаил Максимов
Добавим новый контейнер и поместим в него описание на два абзаца, за которые отвечает тег
.
. Посмотрим, что получилось:
Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.
В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.
Фотография человека
Добавим фото героя, чтобы было интереснее. За это отвечает тег . В нашем случае тег будет выглядеть так:
Фотографию поставим справа от текста так, чтобы экран как бы делился на 2 части: слева текст, справа фото. Заодно настроим так, чтобы на маленьких устройствах каждый из них растягивался на всю ширину экрана. Чтобы так сделать, нужно добавить блок с фото в тот же контейнер с абзацами и настроить колонки в каждом блоке:
По умолчанию браузер показывает картинки в полном размере, и это выглядит некрасиво. Добавим в стили ограничение по размеру для картинки, чтобы она не вылезала за границы блока, и заодно настроим параметры заголовка и текста:
Раздел страницы: научные работы
Подзаголовок сделаем тегом
.
в отдельном контейнере:
Мои научные работы
Чтобы подзаголовок не слипался с остальным содержимым, добавим в раздел со стилями отступы для заголовка h2 сверху и снизу:
Теперь сделаем список научных работ так, чтобы на больших экранах он занимал 4 колонки, на средних — 2, а на телефонах занимал весь макет по ширине. Заодно сделаем список в виде ссылок, чтобы можно было по названию перейти к каждой работе. Ссылки оформляются тегом
Оформим таким образом наш список научных работ в отдельном контейнере:
Задача про бабушку и помидоры
Хитрый электрик
Как сделать свой таймер-напоминалку
Почему Sublime Text — это круто
Поговорим о Якубовиче
Как стать контент-менеджером
Задача про сторожа и фонарик
О названиях функций
Контакты
Осталось добавить контактную информацию — тоже в своём контейнере. Смотрите: мы положили тег со ссылкой внутри тега абзаца — так можно.
Контакты для связи
Телефон: +7 (123) 456-78-90
Почта: mikemaximov@gmail.com
Скайп: mihailmaximov
Телеграм: @mihailmaximov
Смотрим на результат и заодно проверяем адаптивность:
Я преподаю информатику с 2008 года, когда предмет ещё назывался ИКТ. Начинал со школы, учил детей разбираться в программировании и сдавать ЕГЭ на 90 баллов и выше. За два года вывел нашу школу на второе место в районе по олимпиадам по информатике. Вёл два класса коррекции — пятый и одиннадцатый — и знаю, как объяснить основы теории вероятности даже тем, кто не хочет ничему учиться.
В 2012 защитил кандидатскую диссертацию по обучению информатике детей с недостатком внимания и стал внештатным преподавателем РГСУМ им. Макаренко. Параллельно с этим веду курсы по программированию «IDDQD» и записываю подкаст «Прогрокаст» с аудиторией 25 000 человек.
Мои научные работы
Задача про бабушку и помидоры
Хитрый электрик
Как сделать свой таймер-напоминалку
Почему Sublime Text — это круто
Поговорим о Якубовиче
Как стать контент-менеджером
Задача про сторожа и фонарик
О названиях функций
Контакты для связи
Телефон: +7 (123) 456-78-90
Почта: mikemaximov@gmail.com
Скайп: mihailmaximov
Телеграм: @mihailmaximov
Это самый простой способ создать страницу о себе на чистом HTML, которая сразу будет адаптивной. Но есть ещё один способ сделать похожее: использовать конструкторы сайтов. Про них — в следующей статье.
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Во многих из нас, чего греха таить, живут «большие братья». Мы всегда хотим знать как можно больше про тех, кто нас окружает. Мы не хотим упускать из виду ничего. Особенный интерес мы питаем к посетителям нашего сайта. Кто они? За чем пришли? Откуда? Ответами на эти вопросы, мы сейчас и займемся.
Предъявите документы
Для начала, определим, откуда можно узнать что-то о посетителе вашего сайта? Дело в том, что при соединении с сервером, браузер посылает много информации о себе в заголовках. Промежуточные компьютеры между вашим, и конечным сервером, могут дописывать свои заголовки. В результате, до вашего скрипта доходит солидное количество информации о вас и о том, как вы получили доступ к сайту.
Как же изъять эти данные, чтобы знать о своих посетителях больше? Я хочу рассмотреть решение этой проблемы на языках Perl и php. Для начала, рассмотрим их на Perl. Нетерпеливые php-шники, вам тоже будет полезно почитать эту часть статьи. Хотя, если вам нужно решение, и побыстрее, то переходите к вашей части.
Получение данных о посетителе на Perl
Итак, начнем. Сервер получил заголовки, которые пришли к нему, вместе с клиентским запросом. Куда же он их девает? Как получить к ним доступ? Все просто. Эти данные сервер хранит в своих переменных, которые называются «переменные окружения». В Perl, доступ к ним осуществляется через хэш %ENV, ключами которого являются имена заголовков, а значениями — переданные данные.
Чтобы посмотреть все переменные окружения, достаточно выполнить простой идеоматический код:
print «$_ = $ENV » foreach(keys %ENV);
Какие из этих переменных будут нам полезны? В принципе, вы можете собирать хоть все. Но разумнее было бы собирать лишь то, что нужно. Предлагаю собирать это:
$ip = $ENV; #IP-адрес вашего посетителя #адрес страницы, на которой посетитель щелкнул по ссылке, ведущей на ваш сайт #если он перешел на ваш сайт из закладок, или набрав адрес в адресной строке #значение этой переменной, будет пустым #если был переход с поисковой системы, эта переменная будет содержать поисковый запрос $referer = $ENV; $client = $ENV; #название браузера вашего посетителя. #адрес страницы, на которую пришел ваш посетитель #вы можете узнать на какие страницы вашего сайта приходят чаще $page = $ENV;
Получение данных о посетителе на PHP
В php, дело обстоит похожим образом. Здесь тоже присутствует структура, хранящая данные о переменных окружения. Это ассоциативный массив $_SERVER.
Некоторые пользователи сидят в интернете через прокси-серверы. В этом случае, неплохо было бы получить еще адрес прокси-сервера. Хорошие прокси посылают данные об IP своего клиента. Есть анонимные прокси, которые вырезают эту информацию из заголовков. В этом случае, получится узнать только адрес самого прокси-сервера.
HTTP_X_FORWARDED_FOR — ip-адрес пользователя, предоставляемый прокси-сервером HTTP_VIA — имя прокси-сервера REMOTE_ADDR — ip-адрес самого прокси-сервера
Получить информацию о пользователе, по его IP. Служба WHOIS.
Мы получили ip пользователя. И что с того? Эта информация нам ни о чем не говорит. Как же получить информацию о пользователе, если у нас есть его ip?
Можно воспользоваться службой whois. Вводим ip-адрес и получаем кучку информации. Мы можем узнать город, в котором живет обладатель этого ip, адреса. Иногда, даже точный адрес и e-mail! Мы, почти наверняка, узнаем провайдера обладателя этого IP.
Служба whois хранит и предоставляет информацию, в нестандартизированном формате. Это значит, что разные службы могут предоставлять несколько разную информацию.
Большой брат следит за тобой!
Прежде, чем начинать следить за всеми перемещениями пользователей по вашему сайту, вгоняя их в паранойю, подумайте, а что бы вы хотели знать о своих пользователях? Нужна ли вам информация о том, какие страницы сайта они посещали? Готовы ли вы пожертвовать серверной мощностью и пространством для хранения этих данных, ради того, чтобы собрать полную статистику?
Лично я, на этом сайте, использую систему сбора статистики. Она нужна только для того, чтобы узнавать откуда ко мне приходили посетители, какие поисковые запросы они вбивали. Поэтому, я записываю только тех посетителей, чей referer не пуст и не содержит адрес этого сайта.
Я могу оценивать, какие темы интересны людям, а какие — не очень. Скажем, на статью про docx, регулярно заходят с гугла и яндекса. Значит, эта информация нужна людям. Проанализировав запросы, по которым заходят на эту статью, я понял, что не совсем удовлетворяю ожиданиям пользователей. Это заставило меня дописать несколько строк к статье, что придало ей законченности. Теперь пользователи уходят довольными.
Используйте слежку за пользователем с умом! Пусть полученные данные ведут к улучшению ресурса. Доброй охоты!
Если вам понравилась статья, можете подписаться на RSS этого блога и всегда быть в курсе обновлений. А еще, вы можете подписаться на рассылку новостей блога по почте.
