В результате изучения мною html, css и javascript в течение последней недели появилось на свет такое чудо:
http://omegastroj.ru/
Это пока не реальный сайт, а всего лишь одна свёрстанная страница, даже без реального наполнения.
На входе был дан макет psd и пожелания: чтобы было шириной 1280px и висело кирпичом по центру, а сверху домики менялись.
Идентично в разных браузерах, к сожалению, не получилось. Идентично макету выглядит только в Safari, Chrome и Konqueror.
Интересно, что с точки зрения профессионального веб-технолога сделано хорошо, а что плохо, и в чём присутствует пока полное непонимание, как должно быть на самом деле.
Ранее я ничем подобным не занималась, но в целом понравилось. Стоит ли продолжать? Есть ли шансы достичь сколько-нибудь приемлемого уровня для профессиональной работы по этой теме или лучше поискать себе другое занятие?
Примечание:
Skibushka, прошу прощения, но в данном случае не работа дизайнера критикуется. Кто делал макет, сделал так, как сделал. У меня тоже есть некоторые сомнения по поводу правильности дизайна, но заказчиком утверждено, заказчику нравится. Перемещаться ничего не будет до момента сдачи сайта в эксплуатацию ибо любое перемещение будет противоречить ТЗ.
По поводу маленького разрешения и старых браузеров было прямо сказано: не заморачиваться. Поэтому и тестировалось только на разрешениях 1280 и выше в браузерах Safari 4, Chrome, Firefox 3.5, Opera 10, Konqueror 3.5, IE8. Я так понимаю, что в старых версиях IE эта вёрстка может вообще расползтись напрочь, но проверить не могу по причине их отсутствия. Буду премного благодарна, если кто кинет скриншот, как это там выглядит.
Примечание:
Малёк, спасибо!
Примечание:
> serg54
> Есть небольшая ошибка-половина картинки "объявления" срезается
Да, спасибо :) Это когда я по совету Елены меняла #advert на #announcement, в одном месте забыла указать в css новое имя, вот и появилась ошибка :)
Примечание:
> большая часть рынка принадлежит IE и FF, упускаете лакомый кусочек 80% пользователей сети
Простите, вы хотите сказать, что в IE и FF выглядит совсем неприемлемо? Или это на основе моих слов о точном соответствии макету?
И про статистику браузеров: я видела уже статистику от w3schools. Видимо это мировая статистика, согласно которой например можно не сильно обращать внимания на Оперу, имеющую 2%. Кстати, вы верите в то, что Оперой пользуется всего 2% населения? Я — нет. Вот эта:
http://www.liveinternet.ru/stat/ru/browsers.html?period=month статистика мне кажется более правдоподобной.
Про ширину для body: а кроме того, что с точки зрения некоторых религий это кощунственно, есть соображения, почему стоит добавлять лишний тэг, не несущий смысловой нагрузки? Из того, что мне удалось узнать, body — это не что иное, как тело документа, которое может обладать любыми допустимыми свойствами.
Примечание:
Да, про ширину всем спасибо. Это действительно существенный и стабильный косяк. Макет отправлен дизайнеру на доработку.
Примечание:
> не применяйте в верстке ID и особенно (подчеркиваю) не вешайте на них никаких стилей
а вот, кстати, очень интересно: почему?
Примечание:
RoverWhite, спасибо.
1. ну… заказчику нравится. А на вкус и цвет… В общем, раз он платит за такой цвет, то значит именно этот цвет правильный.
2. а это издержки копипаста при общей невнимательности. Это же первый опыт, и чуть что я лезла в гугл за решениями. Иной раз просто тупо копировались строчки кода из разных мест, вот и получились разные кавычки. Спасибо за замечание, поправлю.
3. да, вы правы, и я уже вижу, какими неприятностями могут обернуться относительные пути.
4. спасибо, значит буду стараться в дальнейшем продолжать и развиваться в том же направлении.
Примечание:
WebCumo, спасибо за интересный ответ.
про 11 ошибок валидатора: там фактически одна ошибка, исправить её заняло секунду. Но проблема в другом. Эту часть страницы заказчик заполняет сам, а ему неведомы стандарты и доктайпы. Как можно себя обезопасить? Как можно любой произвольный код привести в соответствие заданному доктайпу?
> в чем писали? могу посоветовать NetBeans как очень удобную IDE для web-разработок
боюсь, что осваивать ещё одну среду разработки сейчас — это перебор. Информации и так много. К тому же связка Coda+MAMP вполне устраивает.
> как минимум header_bg.png нуждается в оптимизации
да, тут есть ещё над чем поработать.
> каким редактором делали нарезку?
Pixelmator
> полная синхронизация между браузерами достигается различными хаками... или js или серверными
полной идентичности и нет. В конце концов, если ИЕ и Опера не понимают скруглённых углов и теней, то я не могу их изобразить для этих браузеров, пришлось делать лишь приблизительно похожий вид для них. Делала так: javascript'ом определяю, поддерживает ли браузер нужное свойство, и если нет, то добавляю элементу html специфический класс, на который ориентируются старорежимные стили. Плюс этим же скриптом добавляю несемантические элементы, требуемые для сколько-нибудь приемлемого оформления в устаревших браузерах.
На сервере же нет ровно ничего, относящегося к оформлению, считаю это идеологически неверным.
Примечание:
> Опера точно не понимает... в плане поддержки стандартов это один из лучших браузеров
Точно. К сожалению, новейшие стандарты она поддерживает плохонько. css2 на ура, а css3 или html5 довольно странно. Например, тэг <video> был реализован в Опере 9.72, а в современных его почему-то убрали.
> в плане js материться чаще всего приходится как-раз таки на сцепку ie-firefox
подключаем jquery и не материмся.
>… js у пользователя может быть отключён … если пользователь не подменяет настоящий UserAgent …
это всё экзотические случаи. К тому же, отключая стандартные возможности, пользователь должен быть готов к тому, что потеряет часть функционала. Задача же разработчика в том, чтобы сайтом можно было продолжить пользоваться даже в случае отключения части возможностей браузера или в случае применения неизвестного науке браузера. В моём случае это соблюдено. Попробуйте посмотреть сайт в ИЕ с отключенным js, и получите просто-напросто отсутствие теней и прямоугольные рамки.
> сколько я IDE попробовал... но для php лучшего не нашёл
вы меня убедили, попробую. Хотя несколько и смущает надпись на странице загрузок, что часть её возможностей доступна только для Windows и Linux.
Примечание:
Спасибо, интересное было обсуждение. Отзывы учту и при доведении до ума этого сайта и в дальнейшем, на очереди уже разработка следующего. Само занятие оказалось весьма интересным, продолжать буду. Опытные разработчики из посетителей ВиО своими замечаниями очень здорово дополняют сухую теорию из учебников. Даже не знаю, как выразить свою благодарность.
Спасибо всем за помощь.