Онлайн-конкурс "HTML+CSS"
Рівень змагання:
2
Термін проведения:
від 2013-03-15 17:00
до  2013-03-15 21:00
Вікова категорія:
Від 5 до 21
Рефері:
Микола Гілко

Стандартна задача: зверстати сайт за макетом Photoshop. Мало того, що макет дуже детальний, то в ньому використовуються ще й нестандартні шрифти (дам у комплекті). Так як це мій перший конкурс, то можу трохи погано судити - відгуки залишите після конкурсу) А зараз бажаю усім добре підготуватися, й перемогти)

роботи
Робота 1 етап Статус Технологія IT-бали
Номінація HTML + CSS, від 5 до 80 років включно
1 Проект Антона
Кремляков Антон ( )
26.00 26 1 місце HTML + CSS  20
2 Тик-так
Урсул Владислав ( CIT )
18.00 18 2 місце HTML + CSS  10
3 Проект Олексія
Козлов Олексій ( Бобры Центра Информационных Технологий хорошо владеющие костылями, имеющие за плечами огромный опыт )
16.00 16 3 місце HTML + CSS  5
4 ПЕЧЕНЬКИ!!!
Мачавариани Дмитрий ( )
13.00 13 Активний учасник HTML + CSS  1
5 НАЗВА ПРОЕКТУ
Безсмертний Іван ( )
12.00 12 Активний учасник HTML + CSS  1
6 Печеньки
Погорелая Оксана ( ЦНТТМ «Сфера» )
3.00 3 Активний учасник HTML + CSS  1
7 печево
( )
  HTML + CSS 
8 НАЗВА ПРОЕКТУ
drdf rdf ( )
  HTML + CSS 
9 НАЗВА ПРОЕКТУ
Антипов Євгеній ( 10Б )
  HTML + CSS 
10 НАЗВА ПРОЕКТУ
Бабіенко Саша ( CIT )
  HTML + CSS 
11 НАЗВА ПРОЕКТУ
Бурда Іринка ( 8В )
  HTML + CSS 
12 НАЗВА ПРОЕКТУ
Бурда Назар ( Спеціалізована школа №52 )
  HTML + CSS 
13 НАЗВА ПРОЕКТУ
Виталий Ковалев ( )
  HTML + CSS 
14 НАЗВА ПРОЕКТУ
Гребенюк Олег ( )
  HTML + CSS 
15 НАЗВА ПРОЕКТУ
Даньков Егор ( )
  HTML + CSS 
16 НАЗВА ПРОЕКТУ
Демко Віталій ( )
  HTML + CSS 
17 Печенье
Иванилов Илья ( CIT )
  HTML + CSS 
18 НАЗВА ПРОЕКТУ
Михаленков Николай ( CIT )
  HTML + CSS 
19 НАЗВА ПРОЕКТУ
Паливода Игорь ( )
  HTML + CSS 
20 слава пиченькам
Потапенко Артем ( CIT )
  HTML + CSS 
21 НАЗВА ПРОЕКТУ
Пількевич Олексій ( )
  HTML + CSS 
22 НАЗВА ПРОЕКТУ
Резник Тарас ( )
  HTML + CSS 
23 НАЗВА ПРОЕКТУ
Степанчук Вікторія ( )
  HTML + CSS 
24 НАЗВА ПРОЕКТУ
Торбек Александр ( )
  HTML + CSS 
25 НАЗВА ПРОЕКТУ
Шпилька Александр ( )
  HTML + CSS 
Номінація HTML + CSS, поза віковими категоріями
26 НАЗВА ПРОЕКТУ
Аршинова Полина ( ЦНТТМ «Сфера» )
  HTML + CSS 

Відгук до онлайн-конкурсу "HTML+CSS", верстка з шаблону PSD
2013-03-07 Автор: Гілко Микола

Безсмертний Іван

По-перше: коли я відкрив index.html я майже не побачив в ньому нічого. Все що було: пункти меню, та трохи тексту. Трохи відредагувавши файл, я побачив більше: виконано пункти меню,  виконано текст (теглайн, привітання, сьогоднішній вибір), виконано зображення печива (небагато). Під меню немає фону, у слайдера відсутні «вуха» для перелистування, відсутній фон сайту, відсутня більша частина елементів. Зображення вирізані достатньо непогано (за сіткою), але всі вони збережені в JPEG, що не є добрим. За правильністю виконання потрібно було зробити фон сайту, а зображення помістити вже з прозорим фоном. Попіксельне порівняння показало, що 49,5% - помилки, з яких 46,7% - помилки грубі. В це число помилок входить фон, зображення, текст та інше. Верстка виконувалась за технологією HTML5, та я навіть бачив CSS3, але Іван використовував допоміжні засоби для верстки (це не заборонено, але й не дуже гарно), тому за техніку виконання в нього гарні бали.

Володіння інструментами редактора: 5

Техніка виконання: 5

Точність виконання: 1

 

Козлов Олексій

Відкривши index.html я побачив доволі непогане виконання… Що я кажу. Я побачив погане виконання поставленої задачі. Макет не відцентровано, фотографії на місці слайдеру виглядають жахливо, неправильно підключені шрифти, багато з них відсутні (із-за неправильного підключення), відсутня краса первинного шаблону. Печиво, під слайдером, замість одного рядка займає аж два. Недоліків дуже багато, але дещо зроблено. Видно, що учасник виконував роботу так, наче не дивився її. Вимкнувши всі зображення, я втратив небагато: інформація все ще можна було побачити. Дивлячись код, я побачив достатньо валідний HTML код, а також те, що учасник використовував HTML5 у своїй роботі. Достатньо непогано, з технічного боку. В попіксельному порівнянні було знайдено 41,1% значних помилок, і 53,8% взагалі, тому оцінка за порівняння така низька.

 

Володіння інструментами редактора: 6

Техніка виконання: 7

Точність виконання: 3

 

Кремляков Антон

Відкривши index.html я був приємно здивований: це єдиний учасник, який виконав завдання майже на 100%. Я не знаю, чим він користувався під час роботи (якась підозріла назва: «Документ без названия»), але виконано все майже на 100%. Майже на 100% тому що в input’і потрібно було писати не value, a placeholder. Але це таке. Дивлячись HTML код документу, а також CSS файл, я пересвідчився в тому, що документ виконано в сучасних стандартах, в якості роботи. Код виглядає добре, макет зверстано грамотно, шапка більша за відповідник. Також присутні невеликі проблеми з шрифтами та зображеннями. Із-за того, що шапка більша за відповідник змістилася уся верстка. 45,7% важливих помилок, та 58% взагалі, але візуально дуже складно відрізнити макети.

Володіння інструментами редактора: 8

Техніка виконання: 10

Точність виконання: 8

 

 

Мачаваріані Дмитро

Верстка зроблена досить невдало: центральний блок з контентом невідцентровано, тому майже все з’їхало. Немає відступу між пунктами меню, досить невдало було вставлене зображення в шапку (воно завелике, для зверстаної  вами шапки, Дмитро). Більшість шрифтів мають світлий колір, і зливаються з фоном. В коді використано inline-теги (ті теги, які задають форматування елементу) та верстка «гібридного» вигляду: трохи блоків, більшість – таблиці. Це – погано, адже ви вказали doctype html, що свідчить про використання html5 в документі, а у вас я його не побачив. До того ж, ви завершили документ ще до його початку (закрили тег HTML одразу після тегу HEAD).  У попіксельному порівнянні макету програма знайшла 48% важливих помилок, та 63% помилок взагалі. Бажаю даному учаснику врешті решт закинути табличну верстку, та вивчати верстку за допомогою div блоків.

Володіння інструментами редактору: 6

Техніка виконання: 4

Точність виконання: 3

 

Оксана Погорелая

Оксано, дана робота не є роботою на цей конкурс, тому я не можу об’єктивно тебе поставити в рівень зі всіма учасниками. На майбутнє бажаю уважніше читати завдання і працювати над якістю верстки.

Урсул Владислав

Робота виконана досить непогано, але є дуже багато невідповідностей: деякі зображення вирізано разом з текстом, елементи меню все ще є маркірованим списком, в деяких місцях недостатньо тексту (наприклад, куди подівся «Welcome to delecioussary» та «this is your tagline»?) пункти меню виконано жирним шрифтом, фон меню (за виконання його на css3 був-би плюс, але так як воно не відповідає тому, яке в макеті – мінус), лінія-розділитель та багато іншого. В коді я не побачив doctype, але все ж – код досить непоганий, в ньому лише 1 inline тег. Зображення вирізано досить непогано, але чому так мало? В попіксельному порівнянні ти майже влучив: якби ти зробив заголовок над печивом (як було потрібно), то отримав-би в останньому блоці більше балів. А так: 59.2% помилок, з яких 44.1% - значні помилки.

Володіння інструментами редактору: 8

Техніка виконання: 4

Точність виконання: 6

 

 

 

Що саме я оцінював в кожому?
Володіння інструментами редактору: володіння вирізкою зображень, кольори зображень (я давав незміненне зображення, в ньому печиво трохи червонувате), використання png для зображень, та jpg для фону

Техніка виконання: використання останніх технологій для верстки, чистота, зрозумілість коду

Точність виконання: попіксельне порівняння макету, а також порівняння "На око"

ОБГОВОРЕННЯ:
2013-03-09 20:38 Сергій Ярема:
Кто знает как проходит городская олимпиада по веб-дизайну?
2013-03-10 02:37 Микола Гілко:
Сергій, наскільки мені відомо, то ти приходиш в аудиторію, тебе садять за комп`ютер, і ти робиш веб-сторінку за заданою темою. Із застосунків лише блокнот (комплект Windows), GimP та paint.net. Я, доречі, й там приймаю участь)
2013-03-10 07:52 Владислав Урсул:
Обычно Paint.net не дают
2013-03-10 12:38 Микола Гілко:
Владислав, у нас говорили что дают о_О
2013-03-10 12:38 Микола Гілко:
ужас >< даже Paint.NET не дают, что там говорить про человеческий фотошоп...
2013-03-10 15:36 Дмитро Вітюк:
Коли я приймав участь у такому конкурсі декілька років тому, то отримав комп`ютер на якому навіть флешку не можна було використати. А із втановленого софту було тільки ie6 та звичайний paint...
2013-03-10 16:00 Владислав Урсул:
угу + там пока пейнт откроется то время на выполнение поставленой задачи истечет
2013-03-10 16:01 Владислав Урсул:
В общем, Сергей Яряма, можешь не приходить ;))))
2013-03-10 16:01 Владислав Урсул:
*Ярема
2013-03-15 16:39 Микола Гілко:
Добридень учасники! Як настрій? Суддя з вами, і готовий розпочинати конкурс!
2013-03-15 16:45 Владислав Урсул:
Привет
2013-03-15 16:53 Микола Гілко:
Шість хвилин до початку роботи, а живий лише Урсул :D
2013-03-15 16:56 Микола Гілко:
п`ять хвилин
2013-03-15 16:56 Микола Гілко:
Доречі, ті, хто не приймає участь у конкурсі, не може критикувати суддю :D
2013-03-15 16:57 Адміністратор:
Доброго дня, усім учасникам! Бажаю успіхів!
2013-03-15 17:00 Микола Гілко:
Хвилина...
2013-03-15 17:00 Микола Гілко:
10 секунд
2013-03-15 17:00 :
привит усим!!!
2013-03-15 17:00 Олександр Громовий:
Тут Микола трохи лукавить - у нас конкурси відкриті, тому усі можуть висловити свою думку щодо суддівської роботи, щодо завдань, щодо роботу порталу та Адміністрації і усього іншого.:)
2013-03-15 17:00 Микола Гілко:
5 секунд
2013-03-15 17:00 Микола Гілко:
Поїхали)
2013-03-15 17:00 Адміністратор:
ОСНОВНІ ІНСТРУКЦІЇ - для того, щоб прикріпити роботу до завдання, необхідно на сторінці свого проекту перейти в режим редагування (натиснути на олівець в правому верхньому кутку). Після цього під кожним завданням з`являться олівчики для завантаження файлів. Після того, як файл завантажився, рекомендується перевірити коректність завантаження - для цього збережіть його назад на свій комп`ютер та перегляньте зміст.
2013-03-15 17:00 Микола Гілко:
Привіт, Єгор!
2013-03-15 17:04 Адміністратор:
Поліно Аршинова та Олександре Торбек , введіть, будь ласка, дату народження. Система автоматично встановлює Вас "поза віковими категоріями", через невиставлену дату народження.
2013-03-15 17:11 Илья Иванилов:
когда открываю PSD файл то он весь зачеркнут полосками =(
2013-03-15 17:12 Микола Гілко:
Ілля, це розмітка, для того щоб було простіше вирізати фрагменти
2013-03-15 17:13 Владислав Урсул:
Ctrl+H
2013-03-15 17:13 Владислав Урсул:
нажми оно его уберет
2013-03-15 17:15 Дмитрий Мачавариани:
Товарищи, скажите где взять графику для создания сайта? Или вырезать с макета что дан? Просто первый раз учавствую в подобном конкурсе...
2013-03-15 17:16 Микола Гілко:
Дмитро, так, вирізати з цього макету.
2013-03-15 17:16 Владислав Урсул:
вырезать
2013-03-15 17:16 Владислав Урсул:
Коля, а почему 2 из 4 шрифтов повреждены?
2013-03-15 17:17 Дмитрий Мачавариани:
Благодарю.
2013-03-15 17:17 Владислав Урсул:
или мне текст вырезать из шаблона? ))))
2013-03-15 17:17 Микола Гілко:
Владислав, усі шрифти у мене були впорядку (windows 7), але зараз я ще раз перевірю
2013-03-15 17:18 Микола Гілко:
Владислав, там 3 Helvetica і 1 Coffee-script. Саме який було пошкоджено?
2013-03-15 17:19 Владислав Урсул:
просто 2 поключил нормально, а на остальные хром ругаеться
2013-03-15 17:19 Владислав Урсул:
на Helvetica
2013-03-15 17:19 Дмитрий Мачавариани:
Блин, не владею фотошопом((( Не повезло(
2013-03-15 17:19 Владислав Урсул:
я его заменю стандартным, я похожий нашел
2013-03-15 17:20 Олександр Громовий:
Дмитро Мачаваріані, я хочу уточнити - тобі потрібно зробити копію макету, який заданий в Photoshop. Тобто нічого не придумувати не потрібно, а потрібно з картинки зробити HTML файл. І одним критеріїв буде точність верстки - попіксельне порівняння.
2013-03-15 17:22 Дмитрий Мачавариани:
Вот-вот, но всю графику с начала надо вытянуть с макета, а это я делать как раз не умею(
2013-03-15 17:23 Микола Гілко:
Владислав, ці три шрифта - це сім`я Helvetica, а кожен шрифт: bold, oblique, i regular
2013-03-15 17:25 Олександр Громовий:
Дмитро - тоді настав час познайомитися з Photoshop! :) Щоб вирізати щось там не потрібно багато спеціальних навичок. Встановлюй Photoshop - і уперед! :)
2013-03-15 17:26 Дмитрий Мачавариани:
Александр, ну так приходится, качаю :=)
2013-03-15 17:27 Микола Гілко:
Для первачків: ось стаття, як правильно верстати з шаблону http://www.siteprojects.ru/blog/?p=652 я додам її в опис
2013-03-15 17:28 Микола Гілко:
Ні, не додам :(
2013-03-15 17:29 Александр Шпилька:
Під головним меню слайдер?
2013-03-15 17:30 Микола Гілко:
Олександр, так, але ви його верстаєте як зображення (тобто не потрібно робити його слайдером)
2013-03-15 17:31 Микола Гілко:
Я вибачаюсь, але я забув додати ще один шрифт (вже можете кидатись в мене тапками), я завантажив його на dropbox: https://www.dropbox.com/s/77r3qfz7o1uzgvg/sws.7z
2013-03-15 17:32 Адміністратор:
Посилання додано.
2013-03-15 17:33 Микола Гілко:
також якщо ви зустрінетесь з шрифтом CofeeService, сміливо замінюйте його на CofeeScript (знову я не догледів)
2013-03-15 17:33 Александр Шпилька:
В головному меню Delecionssary теж є пунктом меню?
2013-03-15 17:34 Микола Гілко:
Так, цей пункт меню веде на головну
2013-03-15 17:51 Владислав Урсул:
Ладно, я побежал в театр... Что успел сделать то выложил, всем удачи
2013-03-15 17:53 Владислав Урсул:
Всем пока!!
2013-03-15 17:56 Микола Гілко:
Бувай!
2013-03-15 18:27 Артем Потапенко:
привет!
2013-03-15 19:00 Олексій Пількевич:
Ех! Видно треба ще вчити HTML щоб в таких конкурсах участь приймати((
2013-03-15 19:02 Дмитро Вітюк:
Так, Олексію, це поєднання двох технологій разом :) .
2013-03-15 19:16 Александр Торбек:
не успею уже(
2013-03-15 19:16 Александр Торбек:
совсем забыл
2013-03-15 19:20 Адміністратор:
Олександре, хоча б спробуй!
2013-03-15 19:49 Іван Безсмертний:
А що робити тим в кого Gimp і Linux?(( я от на око верстаю текст, так ні який шрифт ні його розмір не відображаєця((
2013-03-15 20:06 Дмитрий Мачавариани:
Блин не люблю делать сайты на тематику еды... Особенно понимая что её нету рядом!
2013-03-15 20:22 Микола Гілко:
Іван, ставити wine
2013-03-15 20:23 Микола Гілко:
Дмитро Мачавариани, печиво в наш час не так багато коштує)
2013-03-15 20:26 Дмитрий Мачавариани:
2013-03-15 20:23 Микола Гілко: Это да, но сам факт ВЫЙТИ -> ДОЙТИ -> купить -> ВЕРНУТЬСЯ = эх лень... :=)
2013-03-15 20:27 Микола Гілко:
Дмитро, :)
2013-03-15 20:54 Микола Гілко:
П`ять хвилин до завершення конкурсу!
2013-03-15 20:58 Дмитрий Мачавариани:
Капец :=( Мне было очень стыдно выкладывать то что я выложил, тапками не бросайтесь пожалуйста(
2013-03-15 20:59 Антон Кремляков:
я не знаю как загрузить работу
2013-03-15 21:00 Олександр Громовий:
Антоне, якщо не встигаєте завантажити роботу - відправляйте архів з файлами на пошту info@it-arena.org Адміністрація порталу прикріпить.
2013-03-15 21:00 Антон Кремляков:
все я не немогу уже загрузить работу?
2013-03-15 21:01 Олександр Громовий:
А якщо хочете спробувати самі - читайте інструкції - коментар 2013-03-15 17:00 Адміністратор: ОСНОВНІ ІНСТРУКЦІЇ
2013-03-15 21:01 Антон Кремляков:
отправил, спасибо
2013-03-15 21:02 Олександр Громовий:
Вітаю усіх із завершенням конкурсу! Діліться враженнями. Складно-легко
2013-03-15 21:02 Микола Гілко:
ОСНОВНІ ІНСТРУКЦІЇ - для того, щоб прикріпити роботу до завдання, необхідно на сторінці свого проекту перейти в режим редагування (натиснути на олівець в правому верхньому кутку). Після цього під кожним завданням з`являться олівчики для завантаження файлів. Після того, як файл завантажився, рекомендується перевірити коректність завантаження - для цього збережіть його назад на свій комп`ютер та перегляньте зміст.
2013-03-15 21:02 Олександр Громовий:
Цікаво - нецікаво
2013-03-15 21:03 Дмитрий Мачавариани:
Мне было довольно тяжело... Не знаю почему, но было тяжеловато, особенно вырезать это всё из макета.
2013-03-15 21:04 Олександр Громовий:
До речі, вже всі можуть переглянути роботи своїх супротивників. (за винятком Антона Кремлякова, робота якого буде прикріплена трохи пізніше.)
2013-03-15 21:04 Дмитрий Мачавариани:
Я больше видео по ютуб смотрел нежели делал(
2013-03-15 21:05 Антон Кремляков:
не знаю, не разобрался как добавлять. отправил на info@it-arena.org
2013-03-15 21:07 Антон Кремляков:
ужасное юзабилити
2013-03-15 21:07 Олександр Громовий:
Антоне, особливіть IT-Арени в тому, що рівно в момент закінчення конкурсу в учасників зникають права на редагування проектів і завантаження файлів. Тому, звичайно, що після 21:00 вже нічого не вийде :)
2013-03-15 21:48 Адміністратор:
Роботи Антона та Олексія були прикріплені до їхніх проектів.
2013-03-15 22:59 Олексій Пількевич:
Та я знаю)) Я вчу його й користуюсь, але верстати сайти з шаблона ще не пробував.
2013-03-16 00:53 Антон Кремляков:
макет был не в самом лучшем состоянии...хотя бы по группам раскидали бы слои
2013-03-16 01:10 Микола Гілко:
Антон, це мій косяк, на наступний раз буде краще! Як кажуть, перший млинець комом)
2013-03-16 01:52 Іван Коломієць:
Всем комментаторам посвящается http://1tv.com.ua/uk/video/program/zapamjatay/2011/03/11/2294
2013-03-16 14:44 Адміністратор:
Дякуємо за суттєве зауваження!
2013-03-17 13:10 Іван Безсмертний:
переглянув роботи інших учасників і шось не зрозумів з фоном, як насправді виглядає макет? в мене ось так http://s017.radikal.ru/i430/1303/7b/e850a2445852.jpg
2013-03-18 13:24 Микола Гілко:
Іван, у вас щось з фоном. https://www.dropbox.com/s/xdanb373t7800ri/ext.png
2013-03-18 18:07 Микола Гілко:
Кому як оцінювання?
2013-03-18 18:31 Олексій Козлов:
Мені дуже сподобався конкурс. До судді немає претензій . Мені сподобалось ,те що суддя вказав на помилки кожного з учасників в наступний раз я постараюсь не допустити подібні помилки.
2013-03-18 19:04 Іван Безсмертний:
"але Іван використовував допоміжні засоби для верстки (це не заборонено, але й не дуже гарно)" шо значить допоміжні засоби? Gimp з текстовим редактором?
2013-03-18 23:04 Микола Гілко:
Іван, ні, підозрою на використання інших засобів є назва в title "Документ без названия"
2013-03-19 00:32 Антон Кремляков:
>> Я не знаю, чим він користувався під час роботи (якась підозріла назва: «Документ без названия») Adobe Dreamweaver. Забыл тайтл изменить. Недороботок достаточно много, не было времени уже исправлять
2013-03-19 08:56 Іван Безсмертний:
тайтл я і правда завтикав))) но писалося все вручну)