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

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

Відгук до онлайн-конкурсу "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 для фону

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

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