Сегодня столкнулась в одном клубе на Яндексе с очередной несправедливостью.
Человек попросил сделать сайт. Просьба выглядела примерно так - "Помогите. Нужен сайт. Сколько стоит. Сколько времени займет его сделать..."
Так в основном, и звучат часто в инете просьбы сделать сайты. Тут же посыпались оригинальные предложения сделать сайт за 1500 штуки баксов, когда человек сказал, что дорого - начались оскорбления от профессионала и послания на х@й... вообщем ужОс.
Дорогие разработчики-профессионалы, я понимаю, что вы везде был и все видели, что каждый хочет найти, простите,  лоха и впарить ему свое бесценное творение... НО так нельзя обращаться с людьми. Если тебя это не интересует, то не говори ничего вообще, если заинтересовало, то найди компромис...

Вообщем, что же можно сделать, чтобы уберечься от таких профессионалов-лохоискателей.

Первоначально необходимо определится с уровнем своей крутизны и соответственно возможной крутизны сайта. Необходимо понимать, что сайт, который отличается от того что предлагает бесплатный хостинг Яндекс.ру (не в коем случае не хочу обидеть Яндекс) будет стоить денег. Причем чем круче дизайн и функционал, тем больще выкачка денег.
В нормальной приличной фирме большенство шагов сделают за вас профисионалы, но если вы решили сделать это путем удешевления и заказываете сайт просто в интернете у добровольцев, то эта печальная обязанность полностью ляжет на вас.
Итак есть следующие варианты разработки:
    - сайт под ключь - дизайн+порезка+написание функционала+размещение(подбор доменного имени и хостинга)+СЕО(раскрутка сайта).
    - сайт по частям - дизайн+порезка+написание функционала+размещение+СЕО - все заказываете как вам удобно. Домен и хостинг - подбираете сами если хотите. Раскруткой тоже занимаетесь сами.
Какой вариант выбрать - вопрос спорный. Если фирма серьезная, то это делают путем заказа в нормальной конторе, либо у проверенных людей.
Если же сайт для себя. то надо учитывать, что никакая крупная контора не возьмется делать сайт который не окупится. Т.е. надо выбирать тогда маленькую фирму которая берет малобюджетные заказы. плюс если вам там предлагают сайт за 2ва дня и по очень низкой цене, то надо знать, что вам предлагают шаблон, который:

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

Так что все это надо отсеживать и обсуждать.

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

2. Тщательно продумываем структуру сайта - в данном случае логическую: меню, пункты меню, что куда ведет (чтобы не было странных и никуда не ведущих ссылок, задвоенных ссылок) - вообщем всячески пытаемся сделать логическое юзабилити (то есть удобство для пользования).

3. В-третьих,, необходимо определится с хостингом. Если вы будете размещать на бесплатном хостинге, то надо выяснить есть ли там доступ к FTP, куда собственно можно залить полученный сайт или там есть только конструктор сайтов. А то можно ввалить бабки, получить сайт, а вставить его никуда не получится.

4. В-четвертых, так же определиться с дизайном сайта. Либо вы хотите сделать дизайн сами. Либо можно полностью заказать дизайн. но обязательно нужно продумать так называемый макап сайта - расположение элементов. Для этого необходимо облазить кучу сайтов и выбрать наиболее понравившийся вариант. Никогда, не полагайтесь целиком на дизайнера! Он может впарить вам и пресловутую розовую собачку, только бы взять за это дополнительные средства. Рассматривая разработанный дизайнером дизайн - трижды подумайте - это ли вы хотели и вам точно это все нужно! помните - это ваши деньги.

 5. Если вы всеже согласились с дизайном теперь пора обзаботится порезкой, т.е. реализацией нарисованного в рабочее. :)
Сразу отметаем тех, кто кричит, что DreamWaver это круто! Туда же идет MS FrontPage и им подобные. Запомните, нормальный сайт режут РУКАМИ и только ими, но не обязательно в Notepad. Есть куча специализированных программ для этого. Никогда не платите деньги за сайты сделанные в автоматических редакторах!
При порезке также стоит требовать прохождение сайтом валидации (соответствие стандартам W3C) и кроссбраузерность. Валидный сайт всегда лучше воспринимается поисковиками. Сайт должен как минимум корректно отображается в Фаерфоксе и Интернет Эксплорере 6-7. можно даже в Опере.
Верстка может выполняется таблицами, блоками, или смешано. Разбирать что лучше нет смысла - мнения расходятся. Лично я предпочитаю фиксированную блочную верстку - резиновой табличной. Но это мое ИХМО.
Особое внимание надо уделить смене разрешения на мониторе. Сейчас базовое - 1024х768. 800х600 уже редко где найдешь. Сайт нормально отображается на этом разрешении если его ширина не превышает 1000 пикселей (+/-5). Если размер будет больше, то появится горизонтальная полоса прокрутки.
Так же необходимо обозначить использование тегов разметки h1, h2 итд для заголовков, наличие alt и title у ссылок и рисунков. Это важно для поисковиков.
И самое важное - сайт должен быть сверстан с применением CSS. Любая стилевая разметка - цвет, фон итд выносится в CSS и только туда.

6. Шестой и наиболее важный пункт - продумывание функционала. Если сайт достаточно прост - в него даже не надо запихивать Java Script. Большенство визуальных эффектов решается в css. исключением могут стать формы ввода, ну и какие-либо специфические вещи - типа календаря итд. Подумайте, нужна ли вам технология AJAX, которая сейчас заниает уверенное место в сайтостроении. Это весьма полезная вещь, но если сайт с ограниченным бюджетом  и к тому же лишний - зачем навороты.
Еще надо продумать нужен ли вам поиск. Есть обычный поиск - поиск по сайту и интелектуальный - ищет более продумано + еще и в инете, а не только на сайте.
И самое важное - наличие CMS. CMS - это система управления сайтом. Может выглядеть как грубо написанное приложение, либо как мини сайт. Если вы хотите сайт с ней, то вы получаете возможность цивилизованного добавления контента на страницу, но сайт обойдется гораздо дороже. Можно обойтись и без нее, но тогда изменения в контенте прийдется делать руками прямо на странице.
Сюда же можно отнести форумы, регистрации, гостевые книги, отзывы, счетчики посещений... вообщем кучу полезностей, которая стоит денег.

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

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

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

- Ваши ЛИЧНЫЕ контакты.

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


С уважением, Black Cat  :)

Взято здесь: http://cssing.org.ua/2008/03/01/miyamoto-musasi/

Ассорти из советов для фрилансеров-верстальщиков от одного из лучших воинов этой планеты.

Cостояние духа

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

Не позволяйте багам возникшим в верстке завладеть вами. Все равно, по опыту, они всегда решаются только когда успокаиваешься и перестаешь орать “Ну какого !@# IE!?”.

Когда вы увлечены эмоциями, вы себя с ними отождествляете. Буддисты, например, советуют разделить себя и свои эмоции. Очистить душу для любви (к вёрстке) и сострадания (к багам).

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

Стать противником

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

Когда вам кажется, что клиент вас убьет своими доделками, просто поставьте себя на его место. Он уже на исходе сил в написании 35го пункта(у меня это было!) в поправках к вёрстке =)

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

Люди с хорошим воображением, могут представить как тяжело на самом деле Интернет Эксплореру. Нет, он не черный непробиваемый ящик, который удивляет вас своими фокусами. Он просто загнанный нашими хаками в угол мышонок, который дрожит и своими неловкими испуганными движениями может порой удивить вас. Ну разве можно ругаться или злиться на маленького беспомощного мышонка?!

Много противников

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

А это о работе на несколько заказчиков. Или просто над несколькими проектами в одной компании. Часто замечал, что первым делом отвечаю и занимаюсь приятными проектами. Вместо того чтобы делать то, что “нужно на самом деле”. То есть, отвечать тем “противникам”, которые первые атакуют.

“Ожидание пагубно”, а это вообще “Do It Now”, прямым текстом.

Школы, использующие сверхдлинный меч

Некоторые школы предпочитают сверхдлинные мечи. С точки зрения моей Стратегии — это слабые школы. Они не принимают принципа “рубить врага любыми средствами”. Они предпочитают особо длинный меч. Полагаясь на его длину, они думают нанести поражение противнику с расстояния.
…В своем рассуждении я отрицаю заданность, узкий настрой.

Под сверхдлинными мечами, очевидно, имеются ввиду супер-крутые редакторы. Dreamweaver, и прочие IDE. Часто люди охотятся за ними, пытаются узнать кто каким пользуется, обновляют их постоянно, надеясь таким образом удлинить свой меч. А некоторые, в свою очередь, агитируют за свои редакторы, софт. Мол, скачайте это, и вы начнете быстрее работать!
Для меня редактор и меч очень четко ассоциируются, и я верен Мусаси. Главное “рубить врага любыми способами”.

Тот же самый принцип в полной мере относится к языкам программирования, известные споры “PHP vs Perl”, “Ruby vs PHP” etc. Главное рубить, ребята…

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

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

Firefox ведет себя как приличный браузер, а на IE слов не хватает. Нашла вот каой метод борьбы:

Допустим внешний блок "block" имеет высоту 115px, внутри него расположена ссылка "link", а внутри ее расположен сам рисунок.

Для ссылки link код такой:

div.block a { display: table-cell; vertical-align: middle; width: 125px; height: 115px; zoom: 1; *display: block; line-height: 115px; }

- display: table-cell; vertical-align: middle; - это для адекватных браузеров.

- zoom: 1; *display: block; line-height: 115px; - для неадекватных. zoom=1 - делает для ie layout = -1. 

Для рисунка:

.item div.block a img { *display: inline; vertical-align: middle; line-height: normal;  }

 - *display: inline; - для неадекватных браузеров.

А для вообще неадекватного браузера IE6 используем:

div.block a img { margin-top: expression((115-height)/2 + "px") !important; }.

Вот такая полезность. Кот может быть немного не точным из-за различного кода при верстке - его легко скорректировать, но суть таже.

Удачи. :))

Сейчас парюсь с админкой одного проекта - фактически сайт в сайте.
Наткнулась на сложность - я делала выпадающее меню на css без джава скрипта. А у меня последний пункт выпадал на select. А 6 ИЕ всегда ставит select поверх всегго.
Вот ссылка как боротся с этой дрянью - реально помогло.
http://www.hedgerwow.com/360/bugs/css-select-free.html

Взято отсюда: http://www.webzz.ru/design/doc_opt_html.php

Зачем это нужно и как это делать, я попытаюсь объяснить наиболее доступно. Если Вы чувствуете, что не понимаете хотя бы 20% этой статьи, то могу посоветовать скачать учебник по HTML. За последние 3-4 года поисковые системы очень сильно изменились. Причина этого - резкий рост количества web-сайтов. Прежние методы ранжирования результатов поиска не дают возможности расставить ресурсы в правильном порядке, необходим более точный инструмент для определения релевантности страницы. Что такое релевантность? Говоря простым языком - это соответствие найденной web-страницы введенному запросу. Каждая поисковая система имеет несколько роботов, которые постоянно ходят по Сети, переходя со страницы на страницу по ссылкам, за это их и называют пауками. По сути дела это просто программа, которая сохраняет в базы данных поисковой системы части HTML кода страниц.
Далее полученная информация обрабатывается(индексируется), согласно алгоритмам расчета релевантности и становится доступной для поиска. Естественно у каждой системы свои уникальные алгоритмы, которые к сожалению держатся в секрете. Основываясь на личном опыте, я попытаюсь рассказать на что нужно обращать внимание при оптимизации HTML кода. Но сначала хочу заметить, что существует еще один критерий, влияющий на выдачу результатов поиска - индекс цитирования.

Читать далее

http://designformasters.info/posts/70-expert-ideas-for-better-css-coding/

Работа с CSS не всегда проста. Конечно, все зависит от опыта и навыков, но иногда CSS кодинг может превращаться в кошмар. Лучший способ упростить код это полезные, но не очень известные свойства и атрибуты которые можно использовать для создания семантически корректной разметки.

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

Это обзор 70 техник предложенных экспертами CSS, вы должны быть готовы пройти по списку ссылок и похожих публикаций в конце статьи.

• Мы собираемся опубликовать pdf-версию этой статьи, так что подпишитесь на наш RSS канал (Smash Magazine RSS)¹, чтобы следить за обновлениями.
• Возможно, вам будет интересно прочесть нашу статью 53 CSS-Techniques You Couldn’t Live Without², которая даст вам базовый набор техник CSS кодинга.

Мы хотим сказать спасибо всем разработчикам, которые делятся своими идеями, техниками, методами, знаниями и опытом с их читателями.

1.1 Кодинг: Начинаем

• Когда дизайн готов, начните с пустой страницы. Добавьте заголовки, навигацию, пример содержимого, и футер, потом добавьте html разметку и только после этого CSS. [CSSing³]
• Сначала сбросьте стили по умолчанию. Часто нет необходимости задавать значение какого либо свойства, потому что есть значение по умолчанию. Некоторые любят делать Global white space reset⁴, обнуляя отступы и поля всех элементов в самом начале файла стилей. Eric Meyer’s Global Reset⁵, Christian Montoya's initial CSS file⁶, Mike Rundle's initial CSS file⁷, Ping Mag's initial CSS file⁸. [Roger Johansson⁹]
• Используйте главный файл стилей. Одна из наиболее распространенных ошибок новичков в том, что они забывают сбросить стили по умолчанию, это является причиной несоответствия оформления в различных браузерах. Браузеры тут не причем, прежде чем начать писать CSS следует сбросить стили по умолчанию. [Master Stylesheet:¹⁰ The Most Useful CSS Technique], [Ryan Parr¹¹]

master.css

@import url("reset.css"); 
@import url("global.css"); 
@import url("flash.css"); 
@import url("structure.css");

<style type="text/css" media="Screen"> 
    /*\*/@import url("css/master.css");/**/ 
</style>

• Создайте библиотеку вспомогательных классов. Полезные для отладки они должны быть исключены в окончательной версии (разделяйте разметку и оформление). Можно использовать сразу несколько имен классов (<p class="floatLeft alignLeft width75">...</p>) [Richard K. Miller¹²]

.width100 { width: 100%; } 
.width75 { width: 75%; } 
.width50 { width: 50%; } 
.floatLeft { float: left; } 
.floatRight { float: right; } 
.alignLeft { text-align: left; } 
.alignRight { text-align: right; }

1.2 Организация CSS

• Используйте главный файл стилей. Организация CSS упрощает поддержку сайта. Начните с главного файла стилей в нем импортируйте reset.css, global.css, flash.css (если нужен) и structure.css и возможно файл настроек типографики.

Читать далее

Ссылка для отправки письма. При нажатии откроется форма для создания письма в Outlook Express:
<a href="mailto:name@name.ru">написать письмо</a>
mailto:name@name.ru - адрес эл.почты, на которую должно отправиться письмо.

Нашла прикольный сайт с примерами использования css
http://www.cssplay.co.uk/

автор:  Александр Качанов

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

Отныне верховным принципом веб-дизайна объявляю лозунг "Да верстайте вы в чем хотите!".

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

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

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

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

Настоящим манифестом призываю противные стороны сложить оружие, побрататься и жить в мире.

Фотографии Web-Black-Cat : Мое портфолио

Я работаю HTML-кодером относительно недавно.
И в работе столкнулась с проблемой кроссбраузерной верстки.
Мы тестируем наши проекты в Mozilla Firefox 2.0+, Internet Explorer 6, Internet Explorer 7.   Иногда приходится работать с такими вещами как  Opera и Safari.
Так вот выложу некоторые полезные хаки для браузеров которыми пользуюсь сама.

Mozilla Firefox
 - html:root .какой-нить стиль ( этот хак понимает также Safari );

Internet Explorer 6
- иногда можно использовать конструкцию -  _какой-нить стиль: ; - но код может быть не валидным. Лучше выносить  все проблемы IE6 в отдельную CSS.
- * html

 Internet Explorer 7
- хорошо относится к конструкции *какой-нить стиль: ;
- *:first-child+html .какой-нить стиль
- *+html .какой-нить стиль

Opera
- html:first-child .какой-нить стиль

Safari
- *html .какой-нить стиль

Вот такие хаки помогут Вам решить проблему кроссбраузерности при использовании одной css для проекта.