ЗМАГАННЯ ЗАВЕРШЕНО
Тик-так
Конкурс:
Онлайн-конкурс "HTML+CSS"
Номінація:
HTML + CSS
Автор:
Владислав Урсул
Команда:
CIT
Печиво

Зверстати сайт за макетом Photoshop.  Макет знаходиться в папці templates  у файлі Cookies.psd (спочатку потрібно розпакувати архів, який прикріплений до завдання). 

В макеті використовуються деякі нестандартні шрифти, всі вони є в папці "Fonts", в архіві з макетом.

Оцінювання буде проводитися за такими категоріями:

"Володіння інструментами редактора" (буде оцінюватись те, як вирізано фрагменти),

"Техніка виконання" (використання блочної верстки, використання CSS3, валідність, кінцевий розмір сайту)

"Точність виконання" (попіксельне порівняння з макетом). 

 

Додаткова література:  http://www.siteprojects.ru/blog/?p=652

ДОДАТКИ
Завдання.zip Завдання.zip




ОПИС РОБОТИ:
Опис результатів


URSUL.zip URSUL.zip

ОБГОВОРЕННЯ:
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 Іван Безсмертний:
тайтл я і правда завтикав))) но писалося все вручну)