Как делать красивые интерфейсы сайтов

веб-дизайн

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

Что такое микроразметка сайта

микроразметка сайта

Микроразметка – стандарт семантической оптимизации. Этот стандарт был представлен поисковиками Google, Bing и Yahoo летом 2011 года, а уже осенью этого же года, стандарт поддержала поисковая система Яндекс. Микроразметка нужна для определения и структуризации информации, которая публикуется на сайте и выполняется с добавлением в HTML-код страницы ресурса специальных тематических тегов. Это своеобразная помощь поисковым роботам, чтобы найти слова ключевики в статье и предоставить их в поисковой выдаче по запросу пользователя.
(далее…)

Варианты дизайна сайта для разного класса мобильных устройств

дизайн мобильного сайта

Чтобы пользователь мог работать более эффективно, нужно разрабатывать различные варианты дизайна для каждого класса мобильных устройств. Чем меньше экран и меньше на устройстве функций, тем проще должен быть ваш дизайн. Самый лучший вариант (как минимум с точки зрения удобства для посетителя) не ограничиваться оптимизацией просмотра, а предложить скачать специальное приложение для работы с мобильной версией. Оно должно заинтересовать самых верных ваших пользователей. На практике создание такого приложения подходит не для всех сайтов.
(далее…)

Распространенные ошибки веб-дизайна

создание сайта

Создать интересный для пользователя сайт не так то и сложно, если делать это правильно. Это в первую очередь красивый веб-дизайн и интересное наполнение. Но чтобы конкурировать с огромным количеством других ресурсов, появляющихся каждый день на просторах интернета, нужно обладать знаниями и соблюдать правила разработки и продвижения.
(далее…)

Хорший код решает проблемы

программный код

Задача программиста, кодера – убедиться, что его код в каждой строке служит какой-то цели. Качество кода не зависит от привлекательности формы, либо теоретических преимуществ. Код должен решать определенные проблемы. Поясним эту мысль — HTML5 позволяет опускать закрывающие теги абзаца элементов списка. Некоторых передергивает при мысли об этом, но это совершенно правильный код. Так что если исключение лишних тегов помогает тому, чтобы ваш код стал компактнее и быстрее, то вы решаете проблему, и это делает его хорошим кодом. Знаки препинания, тире, переносы, подчеркивания – все становится более понятным и удобным для чтения, когда символов становится меньше.
(далее…)

Зачем Firebug и Google Analytics нужны начинающему веб-разработчику

создание сайтов

В этой статье я хочу посоветовать два важных инструмента вебмастера, использование которых в работе является стандартом в сфере разработки и продвижения сайтов. Если вы только начали осваивать веб-технологии и никогда раньше не слышали о возможностях плагина Firebug и аналитической системы Google Analytics – эта статья для вас.

Firebug для Firefox очень полезный плагин для любого владельца сайта, так как он помогает провести диагностику и отладку сайта с использованием ряда встроенных процедур. Если вы посещали хорошие курсы web разработчика, ваши преподаватели наверняка вам рассказывали об этом плагине. Что касается оптимизации сайта, Firebug обеспечивает, по крайней мере, одно из главных преимуществ: он сканирует весь код сайта: HTML, JavaScript, CSS – то, что используется в любом веб-проекте, и указывает на недопустимый синтаксис, нерациональный код и на другие элементы, которые вызывают ошибки или замедляют скорость загрузки страниц.
(далее…)

Что нового в HTML 5: Video, Аudio, Canvas и многое другое

HTML 5

HTML 5 ещё долго будет совершенствоваться до окончательного релиза, но он уже очень эффективен во всемирной паутине. В самом деле, некоторые элементы HTML 5, такие как видео и Canvas уже вовсю используются в современных браузерах Internet Explorer, Firefox, Chrome и Safari.

Apple и Google уже ввели стандарты для более продвинутых веб-разработок. Конечно же, это плохие новости для компаний подобных Adobe, чья популярная платформа Flash будет конкурировать с элементами видео и Canvas.
(далее…)

Как окружить фото текстом и задать отступы текста от картинки

Ничего сложного в том, чтобы сделать обтекание картинки текстом, нет. В то же время, вопрос какой код нужен для задания отступов текста от картинки или фотографии достаточно распространенный у новичков, которые только начали вести блог или постигать основы html+css. В этой статье я приведу пару типичных решений для создания отступа картинки от текста в виде кода html и css.

Способ 1: Вписываем код отступа текста для отдельной картинки или фотки

Простой способ задания обтекания картинки текстом, не требующий знаний html и css.

Задаем отступ текста для фото Чаще всего встречается задача, когда нужно расположить картинку слева и чтоб при этом ее сверху, справа и снизу окружал текст. Еще желательно, чтобы текст располагался не вплотную к вставленной в статью фотографии или схеме, а немного отступал от картинки. Как правило, большинство админок генерируют код для вставки изображения, при котором картинка располагается слева, а текст начинается не справа вверху от картинки, в справа внизу, что удобно для крохотных иконок, но не подходит для больших картинок. Чтобы сделать обтекание текстом для изображения, как в этом способе, при вставке картинки в статью нужно написать такой код:

1
2
3
4
<img src="здесь_веб-адрес_картинки" alt="" /> alt="Здесь_подсказка_если_картинка_не_загрузлась" title="Здесь_встплывающая_над_картинкой_подсказка" width="ширина_ картинки_в_точках_числом"
height="высота_ картинки_в_точках_числом"
align=”left”
style="margin: 3px 12px 0px 0px;>

Например, для вставки картинки, которую вы видите в этой статье чуть выше, код html и css выглядит так:

1
2
3
4
5
<img src="https://www.web-article.com.ua/wp-content/uploads/2009/12/otstup-kartinka-tekst.jpg" alt="" /> alt="Задаем отступ текста для фото"
title="Задаем отступ текста для фото"
width="300" height="350"
align="left"
style="margin: 3px 12px 0px 0px;>

(далее…)