Jump to content

Бизнесовый макет из 2009 года


advokatua
 Share

Recommended Posts

Увидел макет, скачал, заценил уровень криворукости и полнейшей пофиговости того кто его рисовал, и решил провести пару дней садо-мазо над собой.

 

Какой плюс может дать верстка ужасного и кривого макета? Как мне кажется - опыт работы с криворукими дизами и закалка мозга от неожиданного батхерта. Если все время верстать хорошие макеты, где каждый слой лежит в своей папочке, и каждая такая папочка еще и раскрашена, где все сделано по сеточке пиксель в пиксель, где нету одинаковых абзацев текста, у которых разные отступы интерлиньяжы и тому подобное, где 2 подряд идущих абзаца не имеют разных отступов со любых сторон, где почти все значения целые или хотя бы четные, а не что-то типа 173, 169, 19.5, в таком случае это похоже на шоколадную жизнь. А такого, как мы знаем, не бывает. :D  

 

Верстка полностью фиксированная под ие8+, но и на ие7 все довольно не плохо. Также пытался сохранить все извращения диза, потому в коде полным полно сдвигов с садо-мазо числами. То что на глаз кажется одинаковым, например черточка нижнего подчеркивания одинаково отступает у заголовков, на самом же деле там разброс в 1-3 пикселя. Если все прижимается к левой стороне, все равно находится блок, который вылазит на 3-4 пикселя за границы. В общем весело было.  :devil:

Лого специально верстал, а не вырезал. Менюшку также извращал градиентами, но голова опухла раньше чем удалось более точно добиться совпадения (3 градиента это перебор 0_o ), решил оставить как есть и не заменять картинкой. Всяких ховер стейтов и прочих нифига нету, потому все оставлено как есть, без своих добавлений.

 

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

 

картинка макета - http://webdevelop.zz.mu/business-1/business-1.jpg

сайт - http://webdevelop.zz.mu/business-1/

Edited by advokatua
Link to comment
Share on other sites

<nav class="main-nav">
<a href="#" class="main-nav-item">Home</a>
В общем не нужен класс для ссылки внутри, итак понятно, что любой тег будет иметь это же оформление, что и .main-nav-item
.main-nav a {} без лишних классов.
И честно говоря непонятно, зачем задавать относительные размеры шрифтов. Это раньше при фиксированном размере шрифта пользователь не мог увеличить шрифт в настройках браузера, сейчас браузер увеличивает все пропорционально, любую страницу, не зависимо, что в параметрах шрифта указано. А вот если в каком-то браузере стоит шрифт большой, то вся верстка может поехать при большом шрифте.

<article class="article">					<h1><span>Veroeros</span> sed dolor</h1>					<div class="underline"> </div>					<section class="article-text">						<div class="article-photo">							<img src="i/article/china-1.jpg"  alt="chinesez-1">						</div>						<p><strong>Fusce nec eros augue</strong> hendrerit erat. Nam dapibus lorem ipsum <a href="#">dolor et suscipit</a> semper. Lorem amet sed consequat.</p>						<p>Sed fermentum dui in bibendum tempus, est orci iaculis dolor vel gravida varius, dui est <a href="#">tincidunt augue vel</a> facilisis mauris turpis ac mauris. Etiam elementum odio ac erat convallis sit <a href="#">amet porttitor libero</a> sed vestibulum.</p>					</section>				</article>

Какой секшин для текста внутри артикл, что это. Так бывает, но не в этом же случае и не для текста статьи.

<div class="underline sub"> </div>					<h3><time pubdate="2009-09-15">09.15.2009</time><a href="">Tempor dolor aliquet vel donec</a></h3>					<h3><time pubdate="2009-09-12">09.12.2009</time><a href="">Odio magna suscipit bibendum eget</a></h3>					<h3><time pubdate="2009-09-09">09.09.2009</time><a href="">Nulla sed dolor nibh aenean lorem</a></h3>					<h3><time pubdate="2009-09-05">09.05.2009</time><a href="">Tellus fermentum imperdiet sed</a></h3>					<h3><time pubdate="2009-09-02">09.02.2009</time><a href="">Justo maecenas erat neque iaculis</a></h3>					<h3><time pubdate="2009-09-30">09.30.2009</time><a href="">Euismod sit amet cursus et ante </a></h3>

Какой-то сомнительный ряд h3 заголовков. За заголовками должно следовать хоть какое-то описание, иначе это больше, чем на текст, список итп - не тянет.

 

<h2><span>Blandit</span> lorem et dolor</h2>   <div class="underline sub"> </div>

Элемент оформления в разметке - удалить и сделать через css.

 

<label for="search-input"> Такого id Нету, поэтому и не работает, как я вижу. Да и в чем смысл - я нажму на надпись search и курсор перескочит, зачем.

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

Edited by Zverushka
  • Like 1
Link to comment
Share on other sites

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

Это уже обговаривалось как-то. Западенских книг начитался + сайтов насмотрелся. Минуса тут точно никакого не вижу, возможно для некоторых покажется, что меньше кода = лучше, но с таким же успехом можно тогда и в других местах отказаться от классов, а в CSS городить каскадирование что-то типа .article-list > li > ul > li  или похожее. Для меня это больше привычка.

 

И честно говоря непонятно, зачем задавать относительные размеры шрифтов

Это где? В body? В body это стандартный мув сходу ставить 100%. А в остальном я везде в px задавал, насколько помню. (Проверил, ничего не едет, т.к. все переопределено.) 

 

 

Какой секшин для текста внутри артикл, что это. Так бывает, но не в этом же случае и не для текста статьи.

А то и не статья, а хрен пойми что с заголовком, я латынью не владею. ) В любом случае, это еще один мегахоливар, ничем не отличающийся от использования nav, или когда у нас есть типа article c 1-им заголовком и мы его оборачиваем в hgroup. 

 

 

Какой-то сомнительный ряд h3 заголовков. 

Так и есть. Это побольшей части к СЕО относится. Если это анонс новостей, то я хочу чтобы он имел определенный вес на странице, а не висел как какой-то никому не нужный набор ссылок на внутренние части сайта. Правда, по СЕО части давно ничего толкового не читал, может сейчас роботы уже и не обращают внимание на количество разного типа заголовков (сомневаюсь). Делая этот блок списком или дивами или ссылками мы не придаем этому блоку никакой важности, а это нехорошо (особенно если подобный блок действительно важный).

 

 

Элемент оформления в разметке - удалить и сделать через css.

Этот элемент вверху и внизу страницы имеет разные отступы от заголовка (подкласс sub), потому пришлось лепить его отдельно. Потом, когда стало понятно, что надо вешать класс на сам хедер , было уже лень переделывать. 

 

 

<label for="search-input"> Такого id Нету, поэтому и не работает,

Косяк, да. Класс на id не сменил  :facepalmxd:

 

 

Многие картинки обернуты в слой, а зачем.

Клик по картинке и глянь класс class="article-photo" и отключи в дебаггере overflow:hidden.

Там все не так просто как кажется. Если вставят большую картинку, она обрежется. Собственно этот момент вообще решаться должен через CMS, потому в CSS  я больше ради собственного интереса лепил. 

Тут дизу опять большой превед. :D  

 

Спасибо!

Edited by advokatua
Link to comment
Share on other sites

а в CSS городить каскадирование что-то типа .article-list > li
 
Да, именно так и писать, а что в списке еще может быть? li он и есть ли и не нужны ему подклассы.

 

Это где? В body? В body это стандартный мув сходу ставить 100%
 

Так удобнее задать же в пикселях сразу нужное значение для стандартного текста на странице и уже ничего не переопределять, им и пользоваться. Захочешь увеличить - в боди меняешь и везде меняется, удобно

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

http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fwebdevelop.zz.mu%2Fbusiness-1%2F%3F%23

Видишь внутри статьи появился новый оутлайн документа - он же там не нужен. Значит в принципе неверно секшин использован

Этот элемент вверху и внизу страницы имеет разные отступы от заголовка (подкласс sub), потому пришлось лепить его отдельно.

Через всевдоэлемент залепить думаю в любом случае можно - задать ширину поменьше и бодер указать.

Клик по картинке и глянь класс class="article-photo" и отключи в дебаггере overflow:hidden.

Так это в каждом 2м дизайне встречается, наверное, там обычно большая картинка слинкована с обрезающим слоем - вобщем надо было в фотошопе обрезать и задать ограничения по размеру в css 

Link to comment
Share on other sites

 

Да, именно так и писать, а что в списке еще может быть? li он и есть ли и не нужны ему подклассы.

Почитай про проблемы каскадирования и длинных селекторов. По спеке вообще больше 3-ех вложенностей не рекомендуется. Элемент имеющий класс или id обрабатывается быстрее всего, т.к. не нужно тратить время на поиск вложенностей. Тут, как я понял, примерно та же проблема, что и в универсальном селекторе *

 

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

Это да, но фотошопом неспортивно )

Edited by advokatua
Link to comment
Share on other sites

Это да, но фотошопом неспортивно )

 

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

 

По селекторам.

Ха, я тащусь. Решила почитать на эту тему и наткнулась 

http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=%23id&body=background%3A+%23CFD≠=1000

http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=.class&body=background%3A+%23CFD≠=1000

http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div+div+div+div+div+div+a&body=background%3A+%23CFD≠=1000

У меня грузится одинакого).

Вот еще 10 лет назад у меня был слабый комп и сайты грузились долго не потому,что комп слабый. а потому что коннект слабый и я уверена, что ни на одном сайте с этой темой не заморачивались.

Возможно это где-то на крупном и при этом специфическом проекте будет полезно... но и то как исключение...

http://frontender.info/writing-efficient-css-selectors/

Edited by Zverushka
Link to comment
Share on other sites

 

аоборот, у тебя валяется большего размера картинка и она больше весит в кб в итоге сайт не оптимизирован получается.

Я имел ввиду, что чисто для макета и тренировок мне интереснее было в CSS покопаться.

 

 

Про скорость обработки какая-то надуманная проблема) 

Я говорил не о скорости между id и class, а о скорости между id ИЛИ class и каким-нибудь .menu ul > li > ul > li a span

К тому же там какая-то фигня происходит. Он одно и тоже рендерит как за 1000ms, так и за 300ms и 200ms

 

Я разницы в скорости и при каком-нибудь таком селекторе не вижу: * { margin: 0; padding: 0; }

Но ведь это вовсе не значит, что стоит применять эти динозавровские методы, за которые сегодня можно и работу не получить, если на собеседовании скажешь, что-то типа:"Это все фигня, разницы нет и не было. Универсальный селектор форева."

 

10 лет назад у меня инет был 32 кбит/с, но это не значит, что раз сегодня 100Мбит, то значит можно и сайты такие делать будто и у каждого минимум сотка, минимум 4ГБ оперативной памяти и процессор минимум core I3.

Edited by advokatua
Link to comment
Share on other sites

Тут тоже не соглашусь, сейчас телефоны работают не хуже, чем 10 летней давности компьютеры. А когда ты отказываешься от поддержки ие7, ие6 это как правило как раз те юзвери, которые сидят на древнем железе и ни в ус не дуют, что у них что-то не так и существуют другие браузеры). При этом на старом железе та же вин7 просто не потянется)...

В общем подобная конструкция div div div div div div a > a div .x a ul li a у меня также как #id создается за 60 мс. Наверное в верстке сайтов надо еще стараться не остаться в прошлом, стараясь угодить всем и при этом применяя ненужные паттерны, которые уже не дают выигрыша, зато ухудшают читабельность кода.

Edited by Zverushka
Link to comment
Share on other sites

 

 

создается за 60 мс

там фигня какая-то с конструкциями в разделе create your own

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

Да и 60мс это ни о чем. Чтобы нормально протестировать надо поставить дабы оно считало секунд 20 не меньше. В JS та же фигня. Можно взять две сортировки до 200 строк и каждая сортировка будет считать почти одинаково. Затем ставишь 5000 строк и разница уже выплывает в несколько раз.

 

Согласен не согласен тут не имеет значения. Значение имеет только то, что есть тонна мест где инет очень хреновый и им лишние 100КБ на вес золота будут. Причем данная аудитория гораздо шире, чем даже те кто юзает древние ИЕ6-7.

 

И не надо далеко ходить. У меня есть живой пример. Примерно в 2008-2009 друзья в Киеве купили 3G модем, который типа до 2МБит должен был давать скорости. Интернета в общаге у нас тогда нормального не было, была только сетка. Так вот, эти 2Мбит были разве что только на бумаге и в рекламе этого провайдера. У меня диал-ап модем быстрее и стабильнее работал в 2003, чем эта фиговина за 40 баксов. Я еще никогда не видел более бесцельно использованных 40-ка баксов, чем эти. Полная печаль однако была.

Edited by advokatua
Link to comment
Share on other sites

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

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

Edited by Zverushka
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • By Марко
      Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь. 



×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy