Leaderboard

Как меня всегда умиляют «HR-специалисты» и тексты вакансий, которые они составляют. Во-первых, знание HTML+CSS === опыт вёрстки для веб, избыточность данных в тексте налицо. «...пунктуальность, исполнительность, инициативность ... приветствуются усидчивость, внимание к мелочам» — это вообще жесть. Неужели бывают такие вакансии (на сообтветствующих должностях), где этого бы не требовалось. Я вот ни разу не видел. Странными так же кажутся два момента. Первое — это «курсы по HTML, CSS-верстке» — большинство из них на редкость паршивые, сколько знаю веб-верстальщиков, все так или иначе самоучки. Второе это «высшее образование». Или надо писать «ВО по таким-то специальностям», или вообще ничего не писать — не понимаю зачем требовать любое высшее образование — вам шашечки или ехать? И, да, в данном контексте слово «ваши» надо писать с маленькой буквы, иначе это неграмотно — это не личное письмо. А насчёт того, что с каждым ЗП обсуждается индивидуально, то тут тоже промах — надо хотя бы указывать границы. Например, меня не интересует работа с зарплатой меньше 100 тысяч рублей в месяц, а вы не можете выделить на верстальщика больше 50. Зачем мне тратить своё и ваше время, чтобы узнать что мы друг другу не подходим? Прошу прощения за флуд, но я думаю, что так не стоит составлять тексты вакансий.

Так сначала просто про семантику расскажу (вдруг кто-то быстрее меня расскажет), а потом уже про саму вёрстку. Сначала стоит понять, что <header>, <aside> и др. теги — не аналоги <div id="header"> (кстати, одна из ошибок в этой вёрстке). Новые теги — структурные элементы, которые разделяют всю страницу или статью, или комментарий на логические блоки. <header> — это логическая шапка. Если проводить аналогию с письменными документами, то это верхний колонтитул. Не заголовок. header может использоваться для шапки сайта, для шапки статьи ит.д. Обычно в нём содержится заголовок, если заголовков несколько, то используется <hgroup>. <hgroup> — группирует несколько подряд идущих заголовков. Как вариант, может заменить собой header, а может и входить в него, тут уже нужно смотреть по ситуации. <article> — часть информации, которая может быть обособлена (да, я не умею объяснять). Если проще, это то, ради чего и создавался сам сайт. Выбрасываем весь дизайн, всё навигацию по страницам, и остаётся она — информация. article может использоваться для статей, комментариев (каждый коммент в отдельный article), новостей. Является одним из важнейшими элементами на странице. <section> — логический раздел. Предназначается для структурирования контента. Может использоваться, например, для разделения статьи на главы. В качестве ещё одного примера, можно привести подвал на главной странице htmlbook.ru Блоки "О сайте", "Основные разделы" ит.д. — это разделы подвала. <aside> — выполняется роль дополнительного контента. Например, небольшая историческая справка или интересные факты в статье. Как вариант, можно использовать его для сносок (footer правда подходит немного лучше, но опять всё зависит от ситуации). Если рассматривать всю страницу с точки зрения логики, то <aside> используется (кто бы мог подумать) для боковых колонок. Можно, также использовать для информации, которая менее важна на странице (только тут главное не перемудрить). Ещё одно предназначение, о котором практически никто не знает — это кнопки для лайков и рассшариваний в соц. сетях. Те, кто скажет, что это <nav>, будут не правы, так как нажатие этих кнопок приводит не к переходу к другому контенту, а к какому-либо действию. Те, кто скажет, что это <menu> будут тоже не правы, так как это не производит никаких действий с самим контентом, а нацелено на сторонний ресурс. <nav> — используется для навигации. Теоретически, уже можно отказаться от меню на списках и фигачить на таблицах оставлять одни ссылки без лишних контейнеров. Однако whatwg и w3c, всё-таки рекомендуют оборачивать меню в список ul или ol, но всё-равно нужно смотреть по обстоятельствам. Нужны вам дополнительные контейнеры в виде ul и li, то делайте списком, не нужны, то оставляйте одни ссылки. Внимание! Элементы <nav>, <article>, <section> и <aside> формируют новую логическую единицу структуры. Что это значит? В идеале, в html5 (ну то есть новый html) страничка логически разбивается на структурные элементы, в зависимости от этих четырёх сематических блоков и заголовков. Поэтому желательно, чтобы в каждом семантическом блоке (<nav>, <article>, <section> и <aside>) был заголовок. Если заголовка нет, то подумайте подразумевается ли он. Например, главное меню, да и вообще любая навигация вполне может обойтись без заголовка. С небольшой натяжкой, боковая колонка может обойтись без заголовка. Однако, <article> практически всегда имеет заголовок. Исключения есть, но они только подтверждают правила. Например, безымянное стихотворения. Для проверки логичности разметки нужно использовать outliner (вот ещёoutliner в виде букмарклета). Чем меньше у вас безымянных блоков, тем лучше. В будущем, возможно, это поможет вывести устройства чтения с экрана на новый уровень. Те, кто возможно сталкивался с ними сейчас, понимает, как тяжело с помощью них бродить по интернету). <footer> — используется для некой побочной информации, которая обычно изображается снизу. Для всей старицы — это адреса, телефоны, название дизайн-студии, SEO-ccылки и пр. Для статей, это информация о авторе, о дате публикации. Кстати, если footer не обязательно должен идти снизу. Логически, он может быть использован вверху статьи, если там содержится информация об авторе. Правда такой приём ломает привычный вид на оформление блоков, поэтому право использовать <header> или <footer> для указание инфо об авторе в верхней части статьи, лежит полностью на верстальщике. <menu> — используется для панелей инструментов. <time> — для времени. Не забывайте ещё про семантические элементы из html 4: <abbr>, <code>, <dfn>. А также про немного переиначенные <small>, <cite>, <strong>, <em>, <b>, <i>

Вот мне интересно, а такое не пойдет? http://chikuyonok.ru/playground/tabs/

А я купил себе квартиру. Вот переехал вчера

Ну уж не всё. Установка сложнее, если учесть время на поиск и установку драйверов, а ещё потом 5 перезагрузок после этого (ну да, у меня стоят проприетарные дрова nvidia и wifi от d-link, но винда на каждый чих просит перезагрузиться). Да и NAT на винде - дело нетривиальное. Почему-то роутер может иметь только один конкретный айпишник. А про скорость: могу посоветовать сравнить работу sqlite на запись. Взять так 200000 строк данных и вставлять одним и тем же php-кодом. Если лень, то я напишу: разница в скорости в 20 раз.

Я почти как swetlana пишу. И да, если б мне кто сказал, что я так буду писать, тоже не поверил бы Но на больших объемах писанина в строку оказывается удобней.

GreatRash, спасибо <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .tab-list { padding: 20px 0 0; overflow: hidden; list-style: none; margin: 0; } .tab-btn { float: left; margin: -19px 0 0; border: 1px solid #000; background: #f00; height: 18px; } .tab-content { display: none; float: right; width: 100%; margin: 0 0 0 -100%; } .tab-active .tab-content { display: block; } </style> </head> <body> <ul class="tab-list"> <li class="tab-holder tab-active"> <span class="tab-btn">tab 1</span> <div class="tab-content"> text </div> </li> <li class="tab-holder"> <span class="tab-btn">tab 2</span> <div class="tab-content"> text 2 </div> </li> </ul> </body> </html> Допилить до кроссбраузерности. Особенно опасаюсь ие7. Из-за отсутствия хаслаяута на лишках - вполне возможны баги в ие7 во время смены табов

Аа! Ну да, извиняюсь - пропустил ошибочку))

Это из другой галатки но раз уж перешли на пожелания Живите долго и процветайте \/ © Мр. Спок

да, есть что покритиковать. Но Светлана не может высказать всё. Нервы стоит поберечь html5 — это не фича, это принципиальный подход. К этому всё давно уже шло, и тот же подход уместен и при старых доктайпах. Но вот использование новых тэгов не к месту — это можно расценить лишь как дань моде. Отсутствие внятной структуры документа — да, как непонимание основ.

<body onload="makeStripe(document.getElementById('zebra'));"> какой кошмар Зачем? А как же :nth-child(even)? А скриптик можно и под условным комментарием подключить. alt="" title="" Мрак! (глядючи в этот код, я скоро обучусь части лексикона Эллочки-людоедки, да-да). Зачем? Это же не xhtml с его массой непонятных ограничений и неразумных требований. <section class="logo"> <a href="#"><img src="images/logotype.gif" alt="BusinessName.com" title="BusinessName.com" width="235" height="35" /> <span>Veroeros etiam dolore</span></a> </section> … @#$%!!!! Таких слов, чтобы описать это, нет даже в словаре русском матерном. Это зачем? Это как? Это что? Это раздел чего? При чём тут <section>? При чём тут <span>? <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Почему без версий? Для устаревших всего лет на пять версий IE (9-10) такое не нужно. Это только для безнадёжно устаревших версий IE (7-8). Форма поиска комментированию просто не поддаётся. Там просто непонятно что. Какие-то навороты, характерные не просто для xhtml, а для xhtml, написанного студентом-халтурщиком. Общее обилие контейнеров. А смысл? Зачем? Ведь в данном конкретном случае управление потоком примитивнейшее. А вот там, где контейнеры были бы уместны из соображений семантики (например, лента новостей), их почему-то нет. И для оформительских целей там одна из страшных ересей: <br class="clear">. Эту ересь в принципе мало что может оправдать. А в данном случае — просто ничто. <p class="space"></p> Зачем? Что это? Что несёт читателю этот абзац? <h3 class="mini-header">Lorem ispsum sed amet</h3> <aside class="mini-block"> <img src="images/foto-woman.jpg" alt="" title="" width="240" height="92" /> <strong>Lorem ipsum dolor</strong> amet dolore eart. Nam dapi bus lorem ipsum dolor consqquat semper. Nulla blandit sed amet volutpat. Tempus sed dolore etiam lorem ipsum et nullam. <a href="#" class="href">Learn more ...</a> </aside> Почему заголовок вынесен из блока? Это всё только при поверхностном взгляде. Редко я оцениваю работу именно как плохо. Но в данном случае однозначно плохо. С html5 это ничего общего не имеет. Разве что в угоду моде натыканы наугад новые тэги. Но это не html5. Суть как минимум не понята. html5 предполагает простоту и естественность. Здесь нет ни того, ни другого.

По упоминанию ТК РФ можно предположить, что зп всё-таки белая и пушистая. А по тому, что город не указан, можно уверенно сказать, что Москва. Ибо только москвичи не уверены в существовании жизни за МКАДом

Может это корпоративный вертолет до Колымы...

Действительно, очень интересно!

Спасибо Всем (: Вопрос к swetlana: А как же тогда быть? Ведь в этом "блоке" находится логотип и бэкграунд с изображением здания, ведь логично его было сделать в section или же...article? А если нет - то тогда как? Просто div что ли? Ну а span - не вижу ничего противоречащего, чтобы его там не было... Извините, но если бы всё было так просто, то мне бы было бы достаточно и одного input'a. Но из-за того, что Все браузеры нормально восприняли, к примеру такое как input{ ... background:#eee; ... }, КРОМЕ IE8 , -- мне Пришлось обернуть этот input в span, пришлось делать эти "новороты" p.s. А может у меня бэкгроунд не применялся, из-за того, что Я тестил под IE8 на IEtester'e ? (во всяком случае, Я оправдал использование данного span'a) Да, мне самому это не нравится, но Я решил, что это самый оптимальный выход из положения, а если нет, то что это значит: Создавать для каждого мнин-блока с картинкой свой класс, где и чистить обтекание? Зачем? Что это? Что несёт читателю этот абзац? Ничего не несёт, просто мне нужен был определенный отступ, вот Я и сделал этот параграф... Но как Я уже понял - это неверно( Значит, нужно было сделать класс для групп ссылок, и уже там прописать верхний маргин, верно? (: Serlutin, спасибо тебе, ты пролил немного света на эту тёмную сторону HTML5 (: И вот хотелось бы узнать у тебя, а такие теги, как <header>,<footer> - они могут использоваться только раз на странице или нет? и.. Это значит, что им нельзя задавать стили? Просто мне кажется, что как раз таки и аналоги, просто для семантики решили создать именно <header>, <aside> и др. теги, чтобы визуально было легче ориентироваться...

Veseloff Вы полагаете, что HR - это такой Джани Родари копирайтер, который сам по себе выдумывает текст объявлений о найме? :-) Смею Вас заверить, это не так. Относительно избыточности данных в тексте. Мы понимаем, что идеальных кандидатов не бывает. Мы постарались указать все, что для нас имеет значение. в данном случае мы хотели еще раз сакцентировать внимание соискателей на этом. Сейчас проявляет интерес к данной вакансии много людей, которым "просто нужна хоть какая-то работа" "потому что денег уже совсем нет", понимаете? Это не то, что нам нужно. Нам нужно, чтобы человек хотел этим заниматься, чтобы ему было интересно это. возможно, все эти курсы паршивые. Но: мы готовы взять человека без опыта работы, но хотя бы с общим представлением о том, что это такое - пусть после тех самых курсов, но с желанием этим заниматься. А без самообразования дальше - никуда. Согласна Если Вы начинающий специалист в этой области, что, собственно, нам и нужно сейчас на данную должность, то это неадекватно, как Вы понимаете чтобы узнать, сможем ли мы сотрудничать в будущем. Не смотря на то, что сейчас, возможно, открытых вакансий, соответствующих Вашему опыту, в компании нет Давайте к данной вакансии отнесемся просто как к данности: есть такая вакансия, есть такие требования. Если они вам не нравятся - значит это не ваш вариант. Подходят - будем рады знакомству. ЗЫ:Veselof мы изменили немного требования, спасибо за советы, хорошего дня

Для Гугла метатэг "keywords" можно не прописывать, он уже давно его не учитывает.

Тёмыч, я-то думал у вас широкополосный доступ... раз нет, то превращать машину в сервер смысло конечно нет. предубеждения нет. просто в многопользовательской unix системе (пусть декстопном дистре юбунты) как-то логичнее этим заниматься, чем в сугубо "пользовательской" xp например. хотя в win всё проще и быстрее. и сервер простенький замутить для отладки в том числе. на сто процентов не соглашусь, но в какой-то мере надо быть мазахистом))) даже с учётом юзерлайковости юбунт.

Нужен опытный верстальщик в ЗАО "Мамба". Верстка для сайта mamba.ru. Если вы считаете себя профессионалом или если у вас есть знакомые профессионалы ищущие работу пишите мне. HTML верстальщик 60000 руб. Компания: Мамба Требования: * Совершенное знание HTML&CSS; * Навыки блочной кроссбраузерной верстки * Опыт работы с системами контроля версий: cvs, svn, git * Базовые знания JavaScript и желательно PHP хотя бы на уровне чтения простого кода; Обязанности: очевидные. Верстка страниц системы по готовым макетам дизайна. Условия: * полный рабочий день (с 11 до 20) в офисе на 1905 года. Аутсорс не рассматриваем! * полностью белая зарплата * ДМС * квартальные премии * компенсация туристических поездок * молодой доброжелательный коллектив и гора интересных задач * иногородним соискателям помогаем решить проблемы с жильем в Москве Испытательный срок 2 месяца. Конечный размер зарплаты обсуждается на собеседовании. При отзыве на вакансию просьба указывать email для получения тестового задания.