Создание веб-сайта. Курс молодого бойца

[@velafrys]

Вы, конечно, работу проделали, пост написали, но на кого этот пост ориентирован?

[@Chekit]

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

[@zjeday]

Вы правильно сделали, что выложили сюда эту информацию. Сам месяца 2 назад начал копаться в этой теме, если бы мне тогда в руки попалась ваша статья, она бы мне очень помогла.

[@velafrys]

Статья показалась немного сложной для новичков, от этого и вопрос.
Если будет стоять цель «создать сайт», то лучше уж сразу заняться изучением попсовых CMS, тот же WP.
А если цель «научиться создавать сайты», то в статье слишком много моментом, галопом по Европам.
Имхо.

[@Chekit]

Не спорю, но, скорее цель была дать пищу для умов. )

[@finetyro]

На меня!

[@Anghei]

Спасибо большое! Очень детально и весьма объемно.

[@r00tGER]

Спасибо, очень полезная статья.
Теперь, я смогу кидать ссылку знакомым, которые просят «за вечер» научить делать сайты.
Либо научаться (конечно, прочитав и освоив ещё очень многое), либо наконец дойдет (что скорее всего), что ради одного сайта проще и дешевле заказать готовый.

[@shtange]

После прочтения первой трети Вашей статьи вернулся в ее начало чтобы перепроверить дату публикации. Мне показалось, что попал на архивную запись, которой минимум несколько лет от роду. Последняя треть статьи «вытянула» ее в категорию актуальных. В целом, полезная шпаргалка для начинающих. Спасибо за проделанную работу.

[@f0rk]

Запустив консоль в директории проекта и набрав в ней всего лишь одну строку:

mkdir project && cd project && mkdir css && touch css/styles.css && mkdir images && mkdir js && touch js/app.js && touch index.html

Я бы две предпочел набрать :)

$ mkdir -p proj/{css,img,js}
$ touch proj/{index.html,css/style.css,js/app.js}

[@Chekit]

Соглашусь, две смотрятся ещё красивее. )

[@SuperKozel]

нельзя неподготовленному человеку выливать на голову всю эту технологическую кашу. Сначала html, потом css подключаешь, потом php, потом js, потом объясняешь как работает http. Мне иногда кажется что люди забывают состояние, когда они ничего не знали в своей области

[@komiller]

Спасибо. Честно узнал много нового я может динозавром кажусь но извините меня если мы так писали и нам привичнее писать все с нуля то тут уже не поменяешь кажись, но вот такие статьи дают знать многое о писанине ХТМЛ.

[@Sirion]

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

[@NookieGrey]

По мне WebStorm и для обычной вёрсти супер!
Он акцентирует внимание на очень большом количестве недочётов, которые упускают другие редакторы.

[@NookieGrey]

Про сетки:
Сейчас 4 основных разрешения это
1366, 1920, 320, 768 (в порядке популярности)
4 колонки для мобильника
8 колонок для планшета
12 колонок для ноутбука и старых мониторов
24 колонки для desktop и TV, причём здесь желательно ограничивать ширину где-то на 2400 или 2880
Да и для наших дизайнеров, понять, что нарисовать один макет для 1280 — этого не достаточно, ну ни как.

Еще нужно не забывать про такой кошмар как ppi (pixel per inch) размер пихеля
при чём, его ни как не определить средствами браузера
Проблема в том, что существуют такие устройства у которых
диагональ 17 дюймов а разрешение 1747х1092 (121ppi)
диагональ 19 дюймов, а разрешение 1440х900 (89ppi)
т.е. на одном экране ваши 1000px будут 20 см, а на другом будут 28.5 см (1inch=2.54cm)

[@NookieGrey]

о0 а можно поподробнее?

[@NookieGrey]

ppi — это не только пикселизация

Суть проблемы в том что реальный размер элемента (физический, тот, который пользователь видит своим глазом) зависит от ppi
и на разных
операционных системах/видео драйверах/видео картах/экранах
будет разный физический размер пикселя.
Т.е. если дизайнер смотрит на свой макет с платформой 89ppi ( для наглядности предположим, что и у него хорошее зрение), и считает все элементы удобными, чекбоксы попадаемы, текст читаем
то пользователь с экраном с 121ppi (и для наглядности плохим зрением) будет с ним не согласен.

И еще одна проблема в догонку.
Нет нативного API для определения, открыта ли страница на тачскрине, или на мыше и клаве
Крупный планшет и старый экран могут иметь одинаковое разрешение. Есть варианты с угадованием, но они не 100% (узнав по userAgent тип ОС и предположить, что это за устройство)

P.S. Это всё и не критично, и не существенно, и проявляется в редких случаях,
но вносит свои неудства, так сказать не идеально.

P.P.S. Все эти ограничения из-за политики безопасности браузеров.

[@gatilin222]

Спасибо за статью, мне как верстальщику интересно было прочитать про прототипирование и дизайн)

[@paveliskrinsky]

Он же написал, что он верстальщик, а не дизайнер.

[@gatilin222]

Главное чтоб не начался холивар должен ли верстальщик дизайнить)))

[@gatilin222]

Никак. И пока не собираюсь)

[@sgolubev]

Для макетов Photoshop «молодым бойцам» скорее всего будет довольно сложен, вместо этого очень рекомендую очень простой и удобный в использовании Balsamiq balsamiq.com

[@Chekit]

Да, хорошая вещь для прототипирования (создания каркаса). Пробовал, но очень давно (

[@sgolubev]

Balsamiq, к счастью, c каждой версией всё лучше и лучше. Также неплохи InVision и Axure RP для более интерактивных прототипов.

[@don_vladimir]

Автор, Вы указываете ширину экрана в 1024px, как самую популярную. У Вас сильно устарела информация возможно Вам будет интересно ознакомиться с современной статистикой.

[@Chekit]

Спасибо. Внёс небольшие корректировки, чтобы не вводить в заблуждение

[@kladus]

5 копеек

Эта статистика очень хороша когда вы делаете сайт для всего мира. Если же человек ориентируется на российскую аудиторию то имеет смысл попробовать другие статистики. Видел в докладе с Яндекс вебмастерской ссылались на статиску посещений так не любимого мной mail.ru, в принципе подойдет любой высокопосещаемый сервис, той страны для которой делается сайт.

[@rv82]

Лично мне статья понравилась. Сам я полный ноль в веб-дизайне. Но поставлено задание сделать веб-страницу (невзирая на ноль). А в статье даются советы, в какую сторону смотреть перед тем, как приступить собственно к разработке страницы.