Секреты верстки сайтов

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

2

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

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

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

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

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

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

(далее…)

Секреты верстки сайтов

Почему я не люблю разбираться в чужом коде

0

Разбираться в чужом HTML коде

У каждого человека есть свой стиль верстки. Плохой или хороший – не важно, но он другой. Любой человек может писать как оригинальный оптимальный код в одном месте, так и непонятный избыточный в другом. Настроение у него было такое или пробелы в знаниях не позволяют одинаково легко делать выпадающие менюшки и правильно вставлять flash ролики. А комментировать свой код HTML утруждаются немногие.
(далее…)

Секреты верстки сайтов

Простая анимация CSS (спрайты)

5

Никого не удивляют акционные баннеры, иконки или графические меню, сделанные с помощью JavaScript, которые могут слегка меняться при наведении на них указателя мыши. Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая css-анимация (также известная как спрайты css), реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.

Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:

Пример анимации css

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

Бесплатно скачать коды урока интерактивной CSS-анимации

(далее…)

Как сделать баннер

Код ActionScript 3, который позволяет сделать flash баннер ссылкой

47

В этом уроке я хотел бы подробно описать, как с помощью ActionScript 3 баннер на flash можно сделать ссылкой.

Вы можете совершенно бесплатно скачать архив .rar с исходником flash-баннера в формате .fla, который иллюстрирует этот урок (10 Кб):

Скачать бесплатно архив с исходником .fla баннера flash

В своей статье Как баннер на Flash сделать ссылкой я подробно описывал, как с помощью встроенного в Adobe Flash языка ActionScript 2.0 можно сделать флэш-ролик кликабельным. Суть урока в том, что нужно в самый верхний отдельный слой ролика flash вставить прозрачный объект button, размер которого совпадает с размером всего баннера. А далее к этой прозрачной кнопке цеплялся простенький код перехода, написанный на ActionScript 2. Все просто, все работает, все счастливы.

Судя по комментариям после этого урока, счастливы оказались не все. Предложенный стандартный способ сделать баннер flash кликабельным не работал, если баннер разрабатывался с использованием более новой версии языка ActionScript 3.0. Дело в том, что 3-я версия ActionScript существенно переработана и код ActionScript 2 не всегда понимается средой разработки и проигрывателем. Среда разработки Adobe Flash CS4, как и предыдущая версия Adobe Flash CS3, при создании нового флэш-клипа предлагает по умолчанию использовать новую версию встроенного языка ActionScript 3.0. Новички, которые при создании своего баннера решили, что более новая версия лучше, столкнулись с тем, что описанный в статье способ добавления ссылки в баннер на flash, не работал.

Лично я не сторонник использования всего самого нового. Предпочитаю подождать, пока другие помучаются с несоответствиями, потратят время на написание книг и уроков. Если старый способ работает – зачем искать себе лишнюю работу? Впрочем, сколько людей, столько и мнений.

На самом деле сделать ссылкой баннер, разработанный в Adobe Flash CS4 с выбранным языком ActionScript 3 не сложнее, чем более старых версиях Флэша на ActionScript 2. Просто это немного по-другому выглядит.
(далее…)

Продвижение сайтов

Что нужно сделать до начала раскрутки сайта

2

Сложно раскрутить сайт, если он похож на свалку

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

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

Хостинг и сервера

Почему хостинг будет дорожать

0

В этой статье мы решили поднять вопрос о том, имеет ли смысл уменьшения места на жестком диске в тарифных планах на виртуальный хостинг? На этот вопрос постарались ответить специалисты киевской веб-студии inVision.

Удорожание хостинга

Во-первых, маленькое лирическое отступление в прошлое. Термин дисковой квоты вошло в лексикон благодаря программистами ОС Linux по весьма правильным причинам. Представим себе научный университет, соединённый единой локальной сетью на основе сервера, в нем работают пару десятков ученых. Сервер представляет собой высокопроизводительный компьютер с большим по ёмкости винчестером. Ясно, что нельзя дать одному пользователю заполнить жёсткий диск лишь собственными данными, подвергнув под угрозу работу сторонних ученых и организацию дорогостоящих научных экспериментов. И если только представить что с тогдашними объемами жестких дисков и скоростью записи один человек вполне мог заполнить весь жёсткий диск приблизительно за пару минут. По тем временам объем жёсткого диска в 10Мб считался чем-то фантастическим. Скорость записи на тот момент составляла примерно 50 Кб/с. Элементарной математической операцией деления мы и получаем те самые четыре минуты.
(далее…)

Подробные инструкции / Уроки Photoshop

Как в Фотошопе сделать четче фото или рисунок

11

Современные фотоаппараты, даже домашние «мыльницы», делают огромные фотографии. Если есть большой жесткий диск и не лень сортировать и записывать фотографии на DVD-диски, большие фото можно не уменьшать. Но если вы хотите послать несколько фото друзьям или выложить их в блоге, размер фотографий придется уменьшать в Photoshop. А при уменьшении фото теряется четкость графики. Да и фотоаппараты не всегда делают четкие снимки. Так что улучшать четкость снимков приходится часто. К счастью, эта процедура очень проста и занимает мало времени.

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

1. Открываем программу Adobe Photoshop. Если при установке вы не меняли настройки, то для запуска Фотошопа нужно выбрать Пуск->Все программы->Adobe Web Premium CS3->Adobe Photoshop CS3. При подготовке урока использовалась версия Adobe Photoshop CS3, у вас на компьютере может быть установлена другая версия.

2. После того, как Фотошоп загрузится, нужно открыть в нем фотографию или картинку, четкость которой вы хотите улучшить. Удобнее всего перетащить картинку в Фотошоп из окна Windows. Для этого достаточно зажать левой кнопкой мыши ярлычок фотографии и перетащить ее в открытую программу Photoshop. Также можно открыть изображение традиционно с помощью меню Фотошопа: File->Open…:

Открыть фото в Photoshop

(далее…)

Создание сайтов / Уроки Photoshop

Как существенно ускорить работу в Photoshop

3

В этой статье я не буду рассказывать о технической стороне вопроса ускорения работы Фотошопа. Сколько должно быть жестких дисков и оперативной памяти мы подробно обсудим как-нибудь потом. На моем рабочем компьютере двухъядерник 1.86 ГГц, 3 ГБ оперативки и 2 винчестера по 250 Гб. Мне это позволяет комфортно работать. Но помимо мощного компьютера очень важно правильно организовать свою работу и не тратить слишком много времени на решение стандартных задач. Предлагаю свой рецепт из 10 основных правил ускорения работы в Фотошопе.

1. Как можно чаще используйте комбинации горячих клавиш. В Photoshop, как и в любой сложной программе, существует множество полезных сочетаний горячих клавиш. Выучить их все очень сложно, но запомнить основные просто необходимо.

2. Не ленится переименовывать слои и давать им осмысленные имена. Если в проекте 5-10 слоев и работать с ним 10 минут, то можно не заморачиваться с именами. Но в сложных макетах может быть пару сотен слоев, а имя слоя Layer 146 ни о чем не скажет через месяц ни вам, ни другому дизайнеру, ни заказчику. Разобраться, конечно, можно, но на этот нудный процесс уходит время и нервы.

Осмысленные имена слоев и папок

(далее…)

Секреты верстки сайтов

Код CSS, который понимает только Internet Explorer

11

Браузер Internet Explorer не всегда утруждает себя соблюдением всех стандартов верстки W3C. В свое время это было «фишкой» Microsoft, которая пользовалась своим монопольным положением на рынке ПО, чтобы еще больше его упрочить. А до этого «вольное трактование» языка разметки помогло победить Netscape. Впрочем, речь в этой статье пойдет не о погибшем браузере и даже не о его победителях.

IE против Mozilla

В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.

В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.
(далее…)

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

Можно ли переименовывать иконку из формата bmp в формат ico?

2

В комментариях к своим статьям Как сделать иконку favicon.ico для своего сайта и Как сохранить иконку сайта favicon в Photoshop я столкнулся с распространенным заблуждением, что иконки для сайтов favicon необязательно сохранять в формате ICO. Достаточно сохранить иконку 16×16 в формате BMP, а затем просто изменить расширение изображения с BMP на ICO. И нет мол никакой разницы.

О том, что форматы ICO и BMP совершенно разные и отличаются не только расширением, я уже писал. Никто не запрещает погулить или почитать Википедию, чтобы в этом убедиться. Но бог с ней, с теорией. Давайте проверим на практике можно ли менять расширение картинки с BMP на ICO.

Прежде всего я решил сделать новую иконку favicon.ico и сохранить ее в форматах BMP и ICO с помощью Photoshop. Я качестве изображения для иконки сайта я использовал черно-белый рисунок мультяшного персонажа Doodlez:

Персонаж Doodlez

(далее…)