Верстка

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

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

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

Итак, в список заметок для темизатора пока попадают две полезных и очень удобных генератора. Удачной работы и не забудьте написать спасибо в коммент, если статья Вам пригодится :)

http://cssanimate.com

http://cssanimate.com

Информация для клиентов и разработчиков Друпал сайтов:

Заметка для тех, кто разрабатывает сайты на Друпал:

background-color: #bbb;

background-image: url(img/bg.png);

background-repeat: repeat-x;

background-attachment: fixed;

background-position: left center;

/* is the same */

background: #bbb url(img/bg.png) repeat-x fixed left center;

margin-top: 5px;

margin-right: 5px;

margin-bottom: 10px;

margin-left: 25px;

/* is the same */

margin: 5px 5px 10px 25px;     

font-style: normal;

font-variant: inherit;

font-weight: lighter;

font-size: 10px;

line-height: 20px;

font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

/* is the same */

font: normal inherit lighter 10px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;

Реокмендую статью по HTML5 на CMS Drupal
http://www.drupaldeveloper.es/ru/node/483

Реокмендую статью по HTML5 на CMS Drupal
http://www.drupaldeveloper.es/ru/node/483

Ест такая респонсив тема, как Бамбу, многие рекомендуют ее, как достаточно неплохую для разработки сатов с респонсив дизайнами, чтобы брать за основу. 

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

Ссылка на тему на друпал.орг - http://drupal.org/project/bamboo

Там же можно найти вот такую демонстрацию для этой темы, чтоб попробовать какой она будет - http://bamboo.themehuis.com/ - в шапке темы есть возможность при помощи иконок изменять цвета

У темы есть вот такие регионы:

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

• http://www.colorzilla.com/gradient-editor/ - генератор градиентов

Выпадающих списков и чекбоксов - http://uniformjs.com/

Чекбоксов - http://www.xiper.net/collect/html-and-css-tricks/verstka-form/nice-checkbox.html

http://habrahabr.ru/post/133258/
 

Сделать картинки одинаковые по ширине и разные по высоте

Для того, чтобы сделать данную задачу, стандартного имедж кеша не хватит. Для выполнения задуманного, а именно выстраивания картинок одинаковыми по ширине и разными по высоте, необходимо поставить дополнения к модулю Imagechashe.

Эти дополнения можно поставить по вот этой ссылке - http://drupal.org/project/imagecache_actions

После установки дополнения, в Конфигурация - Стили изображения - Добавить стиль - необходимо добавить такой сценарий - Custom action - и в нем прописать следующий код:

$pct = 200/$image->info['width'];

В Drupal готовые баннеры разместить достаточно несложно, это может сделать не только опытный разработчик, но и сам клиент, приложив немного усилий, прочитав данную инструкцию:
Разместить баннер:
1. Заходим Структура - Блоки - Добавить блок
2. Описание блока - обязательно вписывать название понятное для себя, что это будет за блок.
3. Заголовок блока - 1) Можно не писать ничего, тогда сам сайт выведет машинное имя - это часто неудобно 2) Можно писать свое название, например такое же как и в описании 3) Если не нужен заголовок вообще, то вписываем в строку <none>
4. В поле Содержимое блока есть зеленая кнопка Изображение - Выбор на сервере - Закачать - Обзор... - Выбираем картинку с баннер - нажимаем на саму картинку - ширина картинки доолжна быть например 700-750 - ОК
5. В поле bigportal.biz выбираем в выпадающем списке в какой части сайта разместить баннер.
6. Выбираем внизу на каких страницах размещать баннер.
7. Внизу кнопка Сохранить.
8. Чтобы поменятьместами блоки - Структура - Блоки - находим наш блок по названию и перетаскиваем за крестик меняя местами. В самом низу нажимаем Сохранить.
Всем удачи!

Баннеры часто позволяют увеличить объемыпродаж, привлечь внимание клиентов и покупателей, дают коротко и четко важную информацию.

Итак, как от клиентов, так и от разработчиков часто возникают непонятки, что такое баннер, а что такое слайдшоу, каким оно может быть и что делать нужно и стоит, а что не стоит делать вообще. Наша студия по разработке сайтов  "Большой Хамелеон" решила создать статью, которая поможет разобраться во всем этом, надеемся благодаря этой статье общение между клиентом и разработчиков немного упростится :) Всем удачного прочтения.

Итак, что и как называется.

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

1. На внутренние страницы, разделы на сайте. ИЛИ 2. На страницы, ведущие на другие сайты

Пример:

Для пункта 1 - На внутренние страницы, разделы на сайте: реклама о том, что товары определенной серии мебели продаются со скидкой - при этой кликая на картинку с такой рекламой мы попадаем на раздел с этой серией.

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

3. Кликабельная реклама - на которую нажимаем и попадаем на определенную страницу. ИЛИ 4. Некликабельная реклама - просто несущая информацию в картинке.

Пример:

Для пункта 3 - Кликабельная реклама: реклама на то, что если покупатель купит товар на определенную сумму, он бонусом получит нетбук, при этом можно нажать на баннер и попасть на страницу, на которой есть описание о том, какую серию мебели и на какую сумму нужно купить, чтобы получить в подарок нетбук.

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

Обучающие сайты по Друпалу:

http://drupal.zvirec.com/ - хороший сайт для начинающий разработчиков, хотя и для тех, кто уже работает неплохой.

http://sixrevisions.com/web-development/getting-started-with-drupal-a-co... - создание меню и материалов

http://www.cmsmagazine.ru/library/items/cms/drupal_intro/ - вводный курс по друпалу

http://drupalace.ru/uroki - о шаблонах

на англ - http://site-made.ru/book/export/html/6 - начиная работу - на английском

на русс - http://www.drupal.ru/quickstart  - начиная работу - на русском

http://habrahabr.ru/blogs/drupal/64286/ - оптимизация сайтов

http://drupalace.ru/uroki - набор уроков

http://drupalize.me/ - очень полезный сайт как для теммизаторов, так и разработчиков, но на английском.

При верстке часто возникает проблема из-за нестандартных шрифтов. Одним из впособов настроить нестандартные шрифты является font-face.

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

Существует так же второй способ - подбор шрифтов под разные браузеры, который иногда помогает больше, чем просто применение font-face.

Приведу один из таких ресурсов ниже:

http://www.fontsquirrel.com/fontface/generator

Люди, которые начинают заниматься верстко, часто даже не подозревают о тех проблемах, которые могут возникнуть при верстке и как уменьшить количество этих проблем.
Одна из самых частых ошибок верстальщика - это использование программных средств, которые не предназначены для написания кода. Если Вы пользуетесь обычным блокнотом или же каким-то других редактором, который не умеет подстраиваться под код верстальщика, Вы делаете огромную ошибку.
Для теммизатора самый простой способ допускать меньше случайных ошибок - это использовать специальные программы, предназначенные для разработки сайтов, для теммизации сайтов и для других дел, связанных с созданием веб-проектов. Тем более Друпал сайты обычно подразумевают не просто сайты-визитки, а что-то более крупное.
А когда перед Вами не 500-1000 строк, а больше 5000 или 10000 строк кода, тогда достаточно сложно найти ошибку, особенно если ее существование выявилось намного позже, чем она была ддопущена.
На помощь разработчикам и верстальщикам сайтов приходят такие программы, как Notepad++, IDE, Dreamviewer и другие.
Эти программы помогают верстальщикам в первую очередь тем, что подсвечивают код, который пришется при верстке. Если Вы сделали ошибку, например забыли закрыть скобку или не поставили запятую или точку, программа сразу же отреагирует цветом и вы при определенном опыте сразу же среагируете, что что-то не так. Ошибка будет исправлена тут же.
Задача верстальщика - из всех програм выбрать ту, которая допускаем как можно меньше ошибок с подсветкой, которая меньше глючит при работе и так далее.
Из моего опыта в полтора года и постоянной верстки сайтов, самый простой, быстрый и менее глюмный - это Notepad++
Я знаю, что есть люди, готовые со мной поспорить. 
Да, каждая программа по своему хороша и по своему плоха. К каждой программе надо привыкнуть и научиться понимать все, что делает эта программа, изучить ее особенности, возможные ошибки и т. д. Поэтому выбирать должен каждый сам для себя. Я сделала свой выбор при разработке сайтов. И желаю всем удачи в таком достаточно серьезном деле ,как теммизация вебпроектов.