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

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

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

Читать полностью »

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

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

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

Читать полностью »

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

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

Читать полностью »

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

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

HTML 5

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;" /&gt;

Например, для вставки картинки, которую вы видите в этой статье чуть выше, код 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;" /&gt;
Читать полностью »

Чем отличается GIF от JPG. Разница между популярными графическими форматами

Для графики в интернете есть 2 основных требования: картинка должна быть максимально возможного качества и в тоже время она должна быстро загружаться. Когда интернет был дорогим и медленным, важнее была скорость загрузки фотографии, сейчас же более важно качество и отсутствие искажений на ней. Но, как и прежде, основными графическими форматами в интернете остаются GIF и JPG (JPEG).

Оба эти формата обеспечивают максимальное качество хранимой информации при ее минимально возможном объеме, т.е. скорости загрузки на компьютер пользователя сети. Разница между форматами GIF и JPG состоит в том, что они ужимают и хорошо показывают информацию разных типов.

Формат JPG (JPEG) лучше всего подходит для того, чтобы хранить фотографии, картины, яркие рисунки с плавным переходом одного цвета в другой (градиенты). Сохраняя информацию в формате JPEG, вы сами определяете, что вам важнее – четкость и достоверность графики или скорость, с которой ваши фотографии смогут отправляться по почте или загружаться с online-фотоальбомов и блогов.

Пример графики, которую нужно сохранять в JPG:

Фото нужно сохранять в jpg

Формат GIF предназначен для хранения одноцветных или черно-белых рисунков, схем, иконок, логотипов, флажков и т.п. Если цветов и оттенков на рисунке меньше, чем 256 и при этом важна четкость линий и равномерность цвета, картинку следуют сохранять в формате GIF.

Читать полностью »