HTML css решения

Главные вкладки

Аватар пользователя sergey_sholohov sergey_sholohov 17 октября 2011 в 19:40

HTML css решения

- Сделан на drupal 7.

- Основная цель сайта - решить задачи верстальщиков и начинающих html кодеров.

- Упор сделан на простоту - что бы посетитель с максимальной быстротой нашёл рабочее, кроссбраузерное решение, которое ему необходимо: дизайн практически отсутствует, шрифт, цвета шрифтов и отуступы подбирались на опыте работы с другими сайтами.

- Статьи написаны с упором на пользователя - основной код с решением находится вверху страниц, описание чаще всего находится внизу - для детального пояснения и SEO.

- Проведена поверхностная оптимизация сайта для увеличения скорости загрузки страниц: включено кеширование блоков, страниц (с минимальной жизнью кеша, куки и сессии пользователей 24 часа), включено объединение и сжатие css и javascript файлов для уменьшения количества запросов к базе данных. Удалены все модули, которые не используются на сайте. Из файлов максимально убраны комментарии (для уменьшения размера файлов). Удалены все темы, которые не используются. Максимально убраны изображения.

- Сделана небольшая оптимизация под SEO: подобраны ключевые слова из рассчёта 1 слово на страницу. Из файлов и шаблонов максимально удалён изначально скрытый через display:none код. Расставлены теги h1, h2, h3. Количество символов без пробелов, точек и спецсимволом на каждой странице сделано в количестве минимум 200 штук. Отказался от добавления мета тега keywords.

Комментарии

Аватар пользователя Plazik Plazik 17 октября 2011 в 20:21

Почему не используем HTML5?
В head два раза встречается строчка:

 <link rel="icon" href="favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

Почему не используем ЧПУ?
Почему используем не относительные ссылки? Как мне кажется, слишком много H2 тегов для одной страницы:

<h2><a href="http://divhack.com/node/51" title="Добавление нестандартного шрифта">Подключить шрифт на сайт</a></h2>
<h2><a href="http://divhack.com/node/50" class="e" title="Установка расстояния слева от первой строки текстового блока">Отступ первой строки абзаца</a></h2>
<h2><a href="http://divhack.com/node/48" title="Решение проблемы со съезжающим текстом в firefox на кнопках">Убрать смещение текста на input type submit в firefox</a></h2>
<h2><a href="http://divhack.com/node/47" title="Сделать так что бы при нажатии на ссылку содержимое открывалось в новом окне">Открыть ссылку в новом окне</a></h2>
<h2><a href="http://divhack.com/node/45" class="e" title="Растягивающееся меню с пропорционально расположенными пунктами">Резиновое меню</a></h2>
<br />
<h2><a href="http://divhack.com/node/44" title="Изменение внешнего вида кнопки для загрузки файлов">Нестандартный input type file</a></h2>

<h2><a href="http://divhack.com/node/43" title="Стилизация переключателя">Нестандартный radiobutton</a></h2>
<h2><a href="http://divhack.com/node/42" class="e" title="Кроссбраузерный код для подключения flash">Вставить флеш на сайт</a></h2>
<h2><a href="http://divhack.com/node/41" title="Удаление отступа у изображений в контейнере">Убрать отступ снизу у картинки</a></h2>
<h2><a href="http://divhack.com/node/40" title="Постраничная навигация по картинками с автопрокруткой">Слайдер jquery постраничный</a></h2>
<h2><a href="http://divhack.com/node/39" class="e" title="Смена изображений и подписей к ним на jquery">Смена картинок при наведении</a></h2>
<h2><a href="http://divhack.com/node/37" title="Сделать элемент кроссбраузерно полупрозрачным">Прозрачность css</a></h2>
<h2><a href="http://divhack.com/node/36" title="При наведении на главный пункт - из него выпадает дочерний">Выпадающее меню css</a></h2>
<h2><a href="http://divhack.com/node/35" class="e" title="Выбор элемента, который является прямым потомком родителя">Выбрать дочерний элемент</a></h2>
<h2><a href="http://divhack.com/node/34" title="Обращение к элементу, который стоит следующим в коде">Обратиться к следующему элементу</a></h2>

<br />
</div>
<div class="slide_two">
<h2><a href="http://divhack.com/node/33" title="Выбор только первого элемента из нескольких одинаковых">Обратиться к первому элементу</a></h2>
<h2><a href="http://divhack.com/node/32" class="e" title="Готовые шаблоны для того, что бы сразу начать вёрстку сайта">HTML заготовка</a></h2>
<h2><a href="http://divhack.com/node/31" title="Удаление рамки со ссылок в фокусе">Убрать пунктирную рамку вокруг ссылок при нажатии</a></h2>
<h2><a href="http://divhack.com/node/30" title="Приведение браузеров к одному стандарту">Сброс стилей css</a></h2>
<h2><a href="http://divhack.com/node/29" class="e" title="Маркер списка, который будет одинаково отображаться во всех браузерах">Кроссбраузерный list style image</a></h2>
<h2><a href="http://divhack.com/node/28" title="Обхватывающий блок, который корректно работает во всех браузерах">Кроссбраузерный inline-block</a></h2>
<h2><a href="http://divhack.com/node/27" title="Подвал, стабильно находящийся внизу">Футер внизу</a></h2>

<h2><a href="http://divhack.com/node/26" class="e" title="Центрирование текста по вертикали относительно родителя">Выровнять текст по вертикали</a></h2>
<h2><a href="http://divhack.com/node/25" title="Показ программного кода на сайте">Отобразить код на странице</a></h2>
<h2><a href="http://divhack.com/node/24" title="Скрытие лишних частей фотографии">Показать только центр фотографии</a></h2>
<br />
<h2><a href="http://divhack.com/node/11" class="e" title="Соседние колонки выравниваются по высоте колонки с наибольшим контентом">Таблица в div подстраивающаяся под контент любой ячейки</a></h2>
<h2><a href="http://divhack.com/node/7" title="Оптимизация картинки">Качество картинок при сохранении в jpg. photoshop</a></h2>
<h2><a href="http://divhack.com/node/12" title="Убрать float left">Очистка float:left и float:right</a></h2>
<h2><a href="http://divhack.com/node/15" class="e" title="Стилизированный select корректно работающий во всех браузерах">Нестандартный селект jquery</a></h2>
<h2><a href="http://divhack.com/node/16" title="Картинка для избранного">Favicon. Вставить на сайт</a></h2>

<h2><a href="http://divhack.com/node/17" title="Комбинации кнопок помогающие быстрее создать сайт">Удобные горячие клавиши браузеров</a></h2>
<h2><a href="http://divhack.com/node/18" class="e" title="Кроссбраузерная вёрстка блоками разной ширины">Резиновая вёрстка div 3 колонки</a></h2>
<h2><a href="http://divhack.com/node/19" title="Пользователи с большим разрешением увидят больше">Скрыть часть фона на маленьком разрешении экрана</a></h2>
<h2><a href="http://divhack.com/node/20" title="Создание растягивающегося сайта на маленьком экране">Просмотр резиновой вёрстки на маленьком экране</a></h2>
<h2><a href="http://divhack.com/node/21" class="e" title="Стилизированая кнопка отправки данных">Нестандартный универсальный input type submit</a></h2>

Почему код гугл аналитикса вставляем в конце страницы, а не в начало? Можете потерять учет некоторых посетителей.

Аватар пользователя Alex Bacart Alex Bacart 18 октября 2011 в 10:30

Не хватает подсветки синтаксиса во вставках кода. Да и отступы в коде добавляют читабельности.

body:not([x|x]) .class{
color:red;
}

удобнее читать так:

body:not([x|x]) .class{
  color:red;
}
Аватар пользователя sergey_sholohov sergey_sholohov 26 декабря 2011 в 20:52

Нововведения:
1. На главной странице ссылки разбты по трём колонкам для того, что бы на большинстве экранов все ссылки находились в видимой части без необходимости прокрутик страницы.
2. Добавлен раздел "Обучение вёрстке" в котором в порядке увеличения сложности находятся psd макеты страниц сайтов и технические задания по их вёрстке.