Разделы: HTML | CSS | PHP | Design | Color | Art | All |
Страницы: 1 2 Следующая
17 | 23.02.2011
CURL - парсинг текста с удалённого web-ресурса
Допустим, у нас стоит задача спарсить текст с какого-то сайта, не будем вдаваться в подробности "зачем?", вот нужно и всё! В PHP есть масса функций и способов это сделать, но сейчас рассмотрим эту задачу в контексте работы функции CURL.Воспользуемся функцией CURL-запроса, которую мы рассматривали в предыдущем посте:
function curlRequest($url){ //передаём в функцию переменную с адресом страницы, которую будем парсить
$data=curl_init();
curl_setopt($data,CURLOPT_HEADER,0);
curl_setopt($data,CURLOPT_URL,$url);
curl_setopt($data,CURLOPT_TIMEOUT,10);
curl_setopt($data,CURLOPT_USERAGENT,"Mozilla/5.0 (X11; U; Linux i686; en-US) Chrome/9.0.597.84 Safari/534.13");
curl_setopt($data,CURLOPT_RETURNTRANSFER,1);
curl_setopt($data,CURLOPT_FOLLOWLOCATION,1);
$our_result=curl_exec($data);
curl_close($data);
return $our_result;
}
К примеру, нам нужно спарсить все заголовки постов с главной страницы xstyle.info, и вывести их сформированным списком на страницу. Для этого напишем следующий код:
$url=$_GET['u']; //посылаем запрос с адресом нужной нам страницы
function parsXstylePostTitle($url){
$data=curlRequest($url); //вызываем собственно CURL
preg_match_all('/<h1><a href="(.*?)">(.*?)</a></h1>(.*?)<a href="?show=art_archive">/is', $data, $matches); //выбираем блоки текста и разделяем на субмассивы, заносимые в переменную $matches
$list='';
for($i=1;$i<sizeof($matches[1]);$i++){
$list.='<li><a href="'.trim(strip_tags($matches[0][$i])).'">'.trim(strip_tags($matches[1][$i])).'</a></li>'; //строим список
}
return '<ul>'.$list.'</ul>'; //выводим результат
}
parsXstylePostTitle($url);
Вот так всё просто.
Автор: Lasckorn | Комментарии [0] | Раздел: php
16 | 15.02.2011
CURL - работа с основными функциями
Замечательная библиотека CURL в PHP, позволяет производить запрос к содержимому удалённых веб-ресурсов, передачу данных посредством POST и GET запросов, произвести авторизацию собственными средствами и так далее и тому подобное.Вот список основных функций:
curl_init(); - Собственно создание нового CURL запроса. Основные параметры запроса для curl_init():
- CURLOPT_URL – Установка URL-адреса удаленного web-ресурса.
- CURLOPT_HEADER – Отображение или скрытие заголовка удаленного ресурса (значения: TRUE/FALSE или 1/0)
- CURLOPT_TIMEOUT – Время ожидания ответа от запрашиваемого URL ресурса (в секундах)
- CURLOPT_USERAGENT – Подмена для содержимого "User-agent"
- CURLOPT_FOLLOWLOCATION – Указание на разрешение следовать редиректу URL на установленном ресурсе (значения: TRUE/FALSE или 1/0)
- CURLOPT_RETURNTRANSFER – Помещение результата парсинга в переменную, без необходимости вывода на экран (значения: TRUE/FALSE или 1/0)
curl_close(); - завершение сеанса
В качестве тренировки составим запрос:
$url='http://www.xstyle.info/'; // адрес ресурса к которому обращаемся
$data=curl_init(); // инициализация запроса
curl_setopt($data,CURLOPT_HEADER,0); // скрываем заголовок
curl_setopt($data,CURLOPT_URL,$url); // обращаемся по указанному адресу
curl_setopt($data,CURLOPT_TIMEOUT,10); // таймаут в 30 секунд для получения результата (вдруг на той стороне слишком загруженный сервер)
curl_setopt($data,CURLOPT_USERAGENT,"Mozilla/5.0 (X11; U; Linux i686; en-US) Chrome/9.0.597.84 Safari/534.13"); // собственно наш USERAGENT,
// то-есть того браузера, каким хотим казаться для посещаемого нами ресурса
curl_setopt($data,CURLOPT_RETURNTRANSFER,1); // запишем результат ответа удалённого сервера в переменную
curl_setopt($data,CURLOPT_FOLLOWLOCATION,1); // позволим осуществиться редиректу, если он имеет место быть на странице
$our_result=curl_exec($data); // получает массив данных
curl_close($data); // закрываем сессию
А далее, пользуемся плодами своих стараний в своих корыстных целях:) Удачи!
Автор: Lasckorn | Комментарии [0] | Раздел: php
15 | 15.09.2010
Про верхний регистр
В веб-дизайне, очень часто встречается такой момент, как оформление текста прописными буквами, помимо прочего - использование заглавных букв окружает нас повсеместно. Если вы напишете в интернете текст заглавными, все будут считать, что вы повышаете тон. Но чаще всего все буквы в словах в верхнем регистре раздражают пользователей, а текст написанный таким образом очень сложно быстро прочитать.Вебмастера используют данный приём, желая подчеркнуть сказанное, считая, что такой стиль текста привлечет больше внимания. На самом деле, сообщение, набранное в верхнем регистре, совсем не подчеркивает что-либо, а как раз наоборот - теряется в сравнении с обычным набором текста. Причина данного явления - недостаток контраста между формами букв в тексте, набранного в верхнем регистре.
(Использованы изображения с сайта: http://uxmovement.com/)
Текст, набранный заглавными, значительно снижает контраст формы каждого слова на веб-странице. Фактически, форма любого слова, набранного большими буквами, независимо от выбранного шрифта (с засечками или без них) - в первообразе это всегда прямоугольник. Как итог, слова набранные в верхнем регистре, имеют по одному смежному краю из букв сверху и снизу, а это ведёт к снижению контраста формы. Те слова, в которых лишь первая буква заглавная, а другие нет, имеют большое количество краёв, расположенных рядом сверху и снизу, тем самым придавая слову достаточно высокую контрастность. Чем больше несмежных ребер имеет слово (здесь это условный объект), тем выше его контрастные свойства. Слова набранные подобным образом, гораздо проще читаются. А когда ваш контент легче прочесть, то и его смысл будет понятен быстрее, и как вариант в последствии может отразиться на прибыли сайта и команды его разработчиков.
Тем не менее текст, набранный только заглавными используют не только на веб-страницах, но и в печатных изданиях, рекламных сообщениях, на телевидении, в кинематографе и всяческих глянцевых журналах. И это делается повсеместно, так как издателям кажется, что подобным образом они смогут подчеркнуть важность информации, которую они пытаются вам передать. Но если вы хотите сказать что-то действительно важное для целевой аудитории (это важное замечание в контексте данного предложения), ваш контент скажет это за вас и без дополнительных стилистических приёмов. И применение всех заглавных букв в словах сделает только хуже, как вашему имиджу, так и вашему кошельку.
Так в каких же случаях имеет место быть допустимым использование всех прописных букв в словах? Подобная форма написания хороша в ситуациях не связанных с чтением, например в логотипах и редкоупотребимых акронимах. Но если же ваше сообщение подразумевает чтение и особенно внимательное, использование верхнего регистра, а вместе с ним ухудшение контрастности текста, негативно сказывается на результате.
Итог, - в веб-дизайне важно использовать все прописные крайне редко, либо не использовать их вообще. Используйте лучше восклицательные знаки.
Автор: Lasckorn | Комментарии [0] | Раздел: design
14 | 14.07.2010
Тенденции развития web-дизайна в эпоху ценности контента
Каковы современные тенденции в веб-дизайне, или даже правильнее сказать именно в дизайне? Вопрос на первый взгляд не столь очевидный. Но изменения налицо, и посему всегда стоит держать руку на пульсе прогресса в сфере информационных технологий. Дизайн веб-страниц - неотъемлемый элемент современной жизни, составляющий гештальт восприятия мировой информационной сети у человека имеющего к ней непосредственное отношение или простого пользователя.Итак, что же даёт нам современный мир дизайна и юзабилити? Вот основные направления дизайнерской мысли в купе с работой разработчиков веб-приложений:
- Просторный дизайн. Повсеместно приветсвуется, широко применяется и активно внедряются дизайнерско-типографические схемы с визуально чётко-выраженными удалёнными друг от друга блоками контента на инертном просторном фоне, что позволяет пользователю, сосредоточится исключительно на чтении, наслаждаться получением интересной для него информации и не отвлекаться на посторонний зачастую второстепенный контент. Тоже правило широко применяется и для блоков навигации. Современный дизайн шагнул в сторону достаточно широких отступов между контентными элементами страницы и с каждым годом они становятся всё больше и более приближаются к пропорциям золотого сечения.
- Чистота дизайна. Всё большую популярность приобретает дизайн не пестрящий мелкими деталями с высоким насыщением разноплановой палитры, а чистый, однотонный - всё большую ценность имеет контентная составляющая, а не инкрустация веб-страницы.
- Минимальное количество элементов. Путь дизайнеров извилист, и сейчас идёт процесс укрупнения визуальных и логических блоков представления информации. Это не только прихоть мастеров дизайна, но и сложная работа контент менеджеров с постоянно накапливающимся опытом в структурировании контента и юзабилити в его подаче.
- Дизайн форумов. Да, это действительно важное направление в современном сайтостроительстве, виной тому - стремление компаний и разработчиков их веб-приложений к большей интеграции пользователей в информационную среду сегмента предоставления услуг. К тому же, форум - это одна из форм построения информационных социальных сетей. Так что же представляют современные форумы (в особенности специализированные) в плане их дизайнерских особенностей? Вот небольшой список глобальных направлений в развитии форумной части Интернета:
- Преобладание стандартных тем. Как было описано в этой статье выше, наибольшую ценность для современных пользователей (и даже для блондинок:)), представляет контент и с каждым днём, с ростом информационной массы и повышением уровня сложности поиска нужной информации, этот фактор становится всё более и более весомым. Посему, очень часть веб-разработчики не утруждают себя в интегрировании какой либо иной авторской дизайнерской темы в структуру форума, вместо этого они предпочитают использовать стандартные темы, изменяя лишь логотип. И это не удивительно, ведь разработчики форумов также следуют тенденциям и дизайн их продуктов с каждым следующим релизом становится всё более дружелюбным к пользователю.
- Фирменный стиль. Фирменный стиль в дизайне форумов, не какое-либо исключение, а настоящая волна. Использование фирменного стиля, чаще всего связано с целями, из-за которых данный форум и был запущен. А иногда вместо корпоративного блога, компании предпочитают развивать сайт в форме форума, который фактически становится их представительством в глобальной информационной паутине.
- Цели работы форумов. Это важный пункт, хоть и глубокий по вложенности. Цели с которыми используются форумы - это серьёзный фактор для дизайнера. Итак, какие бывают цели у корпоративных или просто информационных форумов, самостоятельных ресурсов, или привязанных к определённым сайтам:
- Узкоспециализированные. Длинное и сложное слово:), однако, в данном случае дизайн имеет минимальное значение, основной упор делается на предоставляемый контент. Примером такого форума может служить тот же php.su.
- Служба поддержки. Очень многи компании, в качестве системы службы поддержки, используют форум или систему форумов, и наличие фирменного стиля в дизайне страниц форума (а не только логотипа), придают пользователю чувство причастности, весомости компании-хозяина (которую представляет форум) и уверенности в компетентности модераторов.
- Антиномия остальным сайтам. Смысл всех новостных сайтов, как в принципе и всех остальных - является получение прибыли, а источник дохода у них один - реклама. Но для получения прибыли с рекламы, необходимы пользователи, а для их привлечения нужен контент, огромная масса контента для поискового индекса. Что в погоне за прибылью у большенства подобных сайтов, сводит на нет всю заботу о пользователях (из-за клонирования новостных ресурсов, упор делается на привлечение поискового трафика, а не на постоянных читателей) и юзабилити интерфейсов.
- Чрезмерная визуальная загрузка страниц. Это настоящий бич для пользователя ищущего информацию в сети. Основные проблемные факторы:
- Высокая информационная загруженность. Контентные блоки на страницах, отличаются высокой плотностью расположения, слабой структурированностью и относительно небольшими размерами, что ведёт к их низкой логической контентной ценности для конечного пользователя. Главные страницы подобных веб изданий, фактически превращаются в каталог ссылок на такие же относительно небольшие по размеру новости, и при этом зачастую клонированные с какого-либо другого новостного ресурса.
- Высокая плотность рекламных блоков. Так как для новостных изданий - реклама это "всё", то каждый свободный клаптик пространства незанятый поисковым контентом, используется для размещения рекламных блоков, реже текстовых, чаще атрактивных графических, превращая страницу в перенасыщенную элементами мигающую доску объявлений. На такой странице случайно зашедшие из поисковиков пользователи редко задерживаются больше минуты, просто бегло прочитав заголовки. Это тупиковый формат дизайна веб-страниц, пусть даже и детально продуманный с технической стороны, информационно представительный, и выдерживающий корпоративный стиль.
- Ориентация дизайна страниц под дисплеи высокопортативных гаджетов. На нынешнем этапе организации массового доступа к информации в сети Интернет, всё большую популярность приобретают нетбуки и мобильные комунникаторы. Если для сайтов неновостной направленности, разработчики предпочитают создавать мобильные версии, то для новостной индустрии это малоприемлемо, ведь необходимо откручивать большие рекламные баннеры, и им нечем компенсировать отток пользователей на мобильные устройста. Как итог, всё больше и больше новостных иданий умышленно сужают визуальную ширину контентных блоков, при этом совершенно не заботясь о "резиновом" дизайне для всех остальных пользователей с большими разрешениями мониторов. Страница превращается в узкую полоску контента плотно облепленную полноразмерными рекламными блоками.
- Исходя из вышеперечисленных тенденций, куда стремяться дизайнеы? Серьёзные к "просторному и чистому", сторонники функционального дизайна - даже не заостряют на этом внимания, те кого интересует только быстрый доход с одноразового пользователя - вообще не придают значение хоть каким бы то нибыло тенденциям и моде (там господствует простаю вёрстка).
- Безусловно, сайты с плотной структурой элементов дизайна, ожидает только падене популярности и как итог - финансовый крах. Примеров масса, а также и масса примеров учёта дизайнерами и маркетологами крупных популярных изданий современных тенденций. Ярким примером могут выступать такие ресурсы как msdn.com, yahoo.com, страницы социальных сетей.
- Акцентирую ваше внимание господа - Красота Спасёт Мир!
Автор: Lasckorn | Комментарии [0] | Раздел: design
13 | 23.06.2010
Возобновление работы этого блога
И вот настал по прошествии трёх лет тот долгожданный момент, когда меня вновь посетило вдохновение и появилось весьма ощутимое желание возобновить работу над этим проектом. Есть огромное желание работать, и надеюсь - оно не исчезнет и на страницах этого блога появится много полезной информации.Автор: Lasckorn | Комментарии [0] | Раздел: art
12 | 01.04.2008
Послеобраз - скрытые возможности
Итак, послеобраз. Свиду, довольно понятная концепция, но вот как правильно её использовать?Когда после рассматривания каких-либо цветных поверхностей взгляд падает на белую поверхность, она кажется не белой, а окрашенной и воспринимается в "дополнительном цвете" к рассматривавшейся вначале цветной поверхности. Это явление носит название "послеобраз" и связано оно с инерцией зрения.
Вот основные результирующие последовательности цветов, которые бы не мешало использовать в web-дизайне:
- Жёлтый - синевато-фиолетовый
- Жёлто-оранжевый - ультрамариновый
- Оранжевый - васильково-синий
- Красно-оранжевый - зеленовато-голубой
- Красный - сине-зеленый
- Пурпурно-красный - зелёный
- Пурпурно-фиолетовый - жёлтовато-зелёный
- Фиолетовый - зеленовато-жёлтый
- Синевато-фиолетовый - жёлтый
- Ультрамариновый - жёлто-оранжевый
- Васильково-синий - оранжевый
- Зеленовато-голубой - красно-оранжевый
- Сине-зелёный - красный
- Зелёный - пурпурно-красный
- Желтовато-зелёный - пурпурно-фиолетовый
- Зеленовато-жёлтый - фиолетовый
Также важное замечание - если на глаз воздействует периодическая смена света и темноты, то зрительное восприятие такого раздражителя зависит от частоты смены света и темноты. При достаточно большой частоте глаз будет воспринимать свет постоянной яркости. Число прерываний света в секунду, при котором достигается ощущение неизменной яркости, называется критической частотой прерывания (об этом в следующих постах). Отсюда быстрый вывод - не стоит увлекаться излишней чересполосицей (подробнее об этом в предыдущем посте).
Именно эти особенности устройства и работы человеческого глаза (инерция зрения)накладывают определённые требования web-мастеру в разработке стиля дизайна сайта, предназначенного для успешного продвижения того или иного проекта.
Чем меньше цветов используется при оформлении дизайна сайта, тем легче добиться определённого воздействия (цветовой ассоциации) на посетителя сайта.
Весь смысл вышесказанного, можно очень просто подытожить - чем меньше контрастность и плавней переходы в цветовом оформлении сайта, тем с большей вероятностью можно предугадать цветовое воздействие на посетителя сайта и негласно влиять на его дальнейшие действия по отношению к вашему web-ресурсу.
Сюда же, можно отнести и использование плавных градиентных рисунков и фонов, вместо контрастных изображений и всякого рода мозаичных текстур в фоне страницы, поскольку это более предпочтительно с точки зрения акцентирования внимания на контенте.
Дерзайте!
Автор: Lasckorn | Комментарии [0] | Раздел: design
11 | 16.12.2007
Физиологическая размерность элементов web-страниц
Размернсть элементов на экране, а точнее размеры элементов веб-страниц и расстояния между ними, являются, как ни странно, сильным аттрактивным элементом в веб-дизайне. И заложено это отнюдь не в сложенных за время блуждания по сети стереотипах. Причиной тому физиологические особенности нашего зрения, и наши инкстинкты. В видеоэкологии, есть такие базовые понятия, как агрессивная и гомогенная визуальные среды, каждая из которых, качественным образом, влияет на работу зрительного аппарата человека.Видимая среда, в которой рассредоточено большое количество одинаковых элементов называется агрессивной средой. Гомогенная видимая среда - это такая среда, в которой либо совсем отсутствуют видимые элементы, либо число их резко снижено. Обе эти крайности визуальных сред, являются негативными в плане созерцания.
В студенческие годы:), была у меня магистрская работа, как раз по видеоэкологии. И там, вывел я несколько методик (кому интересно, могу поделиться), что в последующем, очень пригодилось мне на поприще веб-дизайна, когда даже обычная сетка таблицы, превращалась в шедевр, на который можно было любоваться часами.
В кратце, суть основной методики, составляло определение расстояния до объекта, при котором, негативное воздействие данного объекра на зрительный аппарат нивелировалось.
Cag = Ф/0,0350
Cho = Ф/0,2634
где: Ф - размер видимого элемента дизайна веб-страницы;
Cag - минимальное расстояние от объекта до наблюдающего, при кото-ром объект не создаёт агрессивной визуальной среды для человека;
Cho - максимальное расстояние от объекта до наблюдающего, при котором объект не создаёт гомогенной визуальной среды для человека.
Для расчёта Ф – необходимо руководствоваться условием исходных формул расчёта коэффициентов агрессивности и гомогенности (лень мне здесь всё писать, интересно, спрашивайте), то есть при расчёте Cag необходимо брать минимальное расстояние от нижней (или пер-вой по счёту боковой) границы объекта из одинаковой серии расположенной на одной линии (прямой) до третьей такой же границы. А при рас-чёте Cho - максимальную протяжённость гомогенных пустых площадей на элементах веб-страниц.
Минимальное безопасное (так считается, и во всех умных книжках пишеться) расстояние от монитора компьютера до глаз, должно составлять не менее 50 см. Стало быть, при расстоянии 50 см, высота, тех же повторяющихся строк в таблице, окрашенных к примеру в несколько цветов чересполосицей (агрессивная визуальная среда по определению), должна составлять не менее 1,75 см и не более 13,17 см. Если перевести полученные значения в пиксели, то получиться соответственно 73px и 549px, или 50pt и 376pt. Вычисляйте среднее расстояние от глаз до экрана и вперёд!
Конечно, вы сразу же могли заметить нереальность компановки строк таблицы с высотой 73px, с размерами экрана, особенно, если строк много (хотя для столбцов, это очень актуально, так как агрессивные свойства проявляются в большей степени в горизонтальном направлении):
| 1 Ваш контент |
| 2 Ваш контент |
| 3 Ваш контент |
| 4 Ваш контент |
| 1 Ваш контент | 2 Ваш контент | 3 Ваш контент | 4 Ваш контент |
| 5 Ваш контент | 6 Ваш контент | 7 Ваш контент | 8 Ваш контент |
| 9 Ваш контент | 10 Ваш контент | 11 Ваш контент | 12 Ваш контент |
| 13 Ваш контент | 14 Ваш контент | 15 Ваш контент | 16 Ваш контент |
Но в таком случае, выиграшную позицию можно занять увеличив длину (протяжённость по горизонтали:)) таблицы.
Думаю, далее уже все поняли, с чем надо эксперементировать.
Автор: Lasckorn | Комментарии [0] | Раздел: design
10 | 10.12.2007
Что не любят браузеры
Что не любят браузеры, а точнее что они не воспринимают? Этот вопрос неоднозначен, поскольку браузеров как известно - много. А воспринимать или нет, они могут только код. Всё до крайности бонально.Речь пойдёт о CSS, так как это самая наболевшая проблема. Вот бывает торопишься, пытаешся сокращать код до минимума, классы и идентификаторы, сокращаешь до 1 - 2 знаков. А потом, вытирая пот со лба, нажимаешь Ctrl+s Alt+Tab F5, и о ужас! Далее наверное комментировать не нужно, у любого вебмастера сразу всё падает. Это естественный рефлекс. Но всегда ли так бывает? Нет не всегда, а когда используешь, что-нибудь типа браузера Firefox и ему подобных! Так что же может не понравиться этим монстрам в деле обозревания Интернета? Есть несколько загвоздок, из-за чего браузерная совместимасть сайтов, превращается в настоящую головную боль для лубого верстальщика.
Вот загвоздка первая! Прочитайте пост http://xstyle.info/?show=7, вам сразу станет заметна проблема. Пример в том посте не отображается правильно в Firefox и Netscape, и вместо скруглённых углов, мы видим прямые. Ошибка в коде CSS, для этих браузеров, заключается в том, что идентификаторы заданы цифрами. Чтобы исправить ошибку, необходимо поменять названия идентификаторов. И всё. Пусть будет не 1 или 2, а primer1 или primer2, и даже pri1mer, тоже пойдёт, Но вот пускать просто цифры и цифры в начале имени идентификатора или класса не стоит, проверено горьким опытом.
Итак, правильным будет:
<style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
</style>
Неправильно:
<style type="text/css">
#1qwerty{ваши правила}
#4{ваши правила}
.3{ваши правила}
.3qwerty{ваши правила}
</style>
И так далее! Простое правило, которого следует избегать при вёрстке.
Второй и также немаловажной вещью для указанных браузеров, является правильность поочерёдности расстановки элементов страниц в теле документа и в коде CSS. Кажется немного бредом, но факт, который при том очень часто портит кровь. Что нужно делать!? Всё просто. Необходимо добиться соответствия поочерёдности расположения указанных элементов.
<head>
<style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
</style>
</head>
<body>
<div id="qwerty1">Ваш контент</div>
<div id="qwer1ty">Ваш контент</div>
<div class="qwerty3">Ваш контент</div>
<div class="qwer3ty">Ваш контент</div>
</body>
А не так:
<head>
<style type="text/css">
#qwerty1{ваши правила}
#qwer1ty{ваши правила}
.qwerty3{ваши правила}
.qwer3ty{ваши правила}
</style>
</head>
<body>
<div class="qwerty3">Ваш контент</div>
<div id="qwer1ty">Ваш контент</div>
<div id="qwerty1">Ваш контент</div>
<div class="qwer3ty">Ваш контент</div>
</body>
Иногда, случается такое, что перестановки, требуют не отдельные идентификатоды, а их блоки, при том как в самих блоках, их положение может быть произвольным.
<style type="text/css">
/* 1 block */
#qwerty1{ваши правила}
#qwer3ty{ваши правила}
.qwerty3{ваши правила}
.qwer1ty{ваши правила}
/* 2 block */
#qwerty4{ваши правила}
#qwer4ty{ваши правила}
.qwerty2{ваши правила}
.qwer2ty{ваши правила}
/* 3 block */
#qwerty7{ваши правила}
#qwer6ty{ваши правила}
.qwerty6{ваши правила}
.qwer7ty{ваши правила}
</style>
</head>
<body>
<!-- 1 block -->
<div id="qwerty1">Ваш контент</div>
<div class="qwer1ty">Ваш контент</div>
<div class="qwerty3">Ваш контент</div>
<div id="qwer3ty">Ваш контент</div>
<!-- 2 block -->
<div class="qwerty2">Ваш контент</div>
<div class="qwer2ty">Ваш контент</div>
<div id="qwerty4">Ваш контент</div>
<div id="qwer4ty">Ваш контент</div>
<!-- 3 block -->
<div class="qwerty6">Ваш контент</div>
<div id="qwer6ty">Ваш контент</div>
<div id="qwerty7">Ваш контент</div>
<div class="qwer7ty">Ваш контент</div>
</body>
Практика делает чудеса! Этой фразой никого не удивишь. Со временем, начинаешь привыкать к такому построению страниц и к подобным капризам браузеров от различных производителей. Будем надеяться, что когда-нибудь, всё изменится, все друг друга купят и в приказном порядке договорятся до единых стандартов.
Автор: Lasckorn | Комментарии [0] | Раздел: css
9 | 22.11.2007
Выбор приемлемых шрифтов при разработке дизайна web-страницы
Итак, шрифты. Если подходить к данной проблеме, с позиции веб-дизайна, то выходит полная сумятица, полный хаос - на вкус и цвет, товарища нет, а программное обеспечение, даёт возможность видеть тот шрифт, какой захочет пользователь, или который ему больше нравится, и в размере, который он предпочитает или хорошо видит. И что тогда!? А тогда, всё очень просто, особенно, для веб-дизайнера - использовать тот шрифт, и того размера, который ему нравится самому (немножко неправильный подход, но всё же).Но возможен и другой вариант, когда пользователь, реально полный user, нормальный user конечно, вообще не трогает настройки своих браузеров, и видит, то что есть, то есть - те шрифты, которые прописаны на веб-странице, при условии, что они установленны у него в системе, в противном случае - шрифт по умолчанию в его браузере (например Times New Roman). Стало быть, необходимо подстраиваться под пользователя. Но как известно, и мне тоже, и другим веб-программистам, что очень тяжело подбирать шрифты под фоновый дизайн, намного проще и эффективней, подбирать их по тематике сайта, степени его оффициальности, а сам фон - под уже имеющийся шрифт. Вот так!
Для эффективной работы, дизайнер, должен выбрать набор собственных часто используемых им шрифтов, и тогда успех ему гарантирован.
Как всегда, у веб-дизайнера, есть собственный любимый шрифт, или несколько, с определённым любимым размером, и все свои работы, он воспринимает и неосознанно подстраивает под него. Причём, самые лучшие работы, получаются, когда вебмастер следует своему правилу "по умолчанию".
Автор: Lasckorn | Комментарии [0] | Раздел: design
8 | 19.11.2007
Ахроматическая цветовая схема дизайна web-сайта
Всем известна цветовая схема RGB. А что подобрать для своего сайта, чтобы он был приятен всем - опять же, какую-нибудь схему из этого самого RGB. Но какую!? Этот вопрос задают многие.Существует ряд принципиально отличных цветовых схем для веб-страниц, это:
1. Нейтральная.
2. Основная.
3. Дополнительная.
4. Терциарная.
5. Аналоговая.
6. Ахроматическая.
7. Дисгармоничная.
8. Дополнительная.
9. Монохромная.
(это не моя классификация, где-то когда-то это вычитал).
Но не суть дело. Обо всех этих схемах и их применении в веб-дизайне, я раскажу в следующих постах. Сейчас - наиболее универсальная для всех времён и народов цветовая схема. Не так давно, я уже описывал подобные цветовые композиции, но это был лишь набор цветов, для того или иного целевого восприятия сайта и привлечение постоянной целевой аудитории. А вот схема цветов, которая, вне зависимости от предпочтений и целевых установок, распологала бы к себе посетителя. Одно из правил при выборе - больше чистоты, второе - завершённость световой схемы. Чистый цвет - это понятно, а вот где взять "завершённость", или точнее сказать замкнутость, придающую элегантность и уют. Цветовая схема должна состоять из двух крайних цветов и их средних оттенков. А это, если вспомнить общенациональный триколор (красный - чёрный - белый), будут как раз - чёрный и белый. Такая цветовая схема в дизайне, называется "ахроматической". Пример, перед вашими глазами, или здесь.
Эта схема, имеет потрясающую популярность, и вместе с тем, каждый подобный проект, отличается уникльностью в восприятии посетителя web-страницы. Как известно, чистые цвета, благоприятствуют обострению внимания. Вспомните белоснежный лист формата A-4 с напечатанным в чистом чёрном цвете текстом и в противовес - старую пожелтевшую книжку с затёртыми страницами и посеревшим (а лучше сказать "пошкарябанным") текстом. Разница на лицо!
Даже если у вас будет только часть страницы, иметь ахроматическую схему, но только разумеется визуально целостная часть, то это будет безпроиграшное решение. И если хотите акцентировать внимание посетителя страницы на чём то серьёзном, сделайте такую вставку, либо сделайте оформленную в ахроматической схеме всю страницу.
Автор: Lasckorn | Комментарии [0] | Раздел: color
Архив 'Life online' | Сообщения по дате | Главная
При публикации контента данного ресурса, ссылка на сайт обязательна!
Всегда гарантированная настройка локальной сети от компании "Профитроль"
Надежно краска тиккурила качественно
Нужен хостинг или поиск игры? Игровой портал csds то, что Вам нужно!!
Разделы:
Общение с HTML и последствия
Приёмы с CSS, высший пилотаж
PHP в web-дизайне | (архив статей)
Дизайнерские решения
Цветовые решения
Мой Art
Главная
Мой новостной обзор
Live
Статьи | (архив статей)
Коллекция
