Как да направим страницата pixel perfect?

ttitto 1153 Точки

Как да направим страницата pixel perfect?

Колеги, започнах да правя домашните от лекцията за формуляри да са pixel perfect, макар че не се изисква. Справям се до момента в който не се наложи да се донаместват елементите с маргини и падинги. След това започва едно гадаене на пиксели, на размери. Едно мръднеш, друго се размеси и отнема страшно много време. Една задача я решавам за повече време отколкото ще бъде целия изпит, което никак не е добре. И пак не става идеално. Дори съм вкарал само семантика. Представям си какъв ад ще е ако трябва и да е responsive. А уж имам и малко опит зад гърба си. Вероятно нещо изпускам.

Та бих искал да предизвикам дискусия за това дали ползвате някаква стратегия за бързо наместване на елементите. Нещо от вида: по какво разбирате кои са най-подходящите тагове за реализацията на дадена картинка; започва се от най-големите елементи и се слиза до по-малките, или обратно; първо се слагат маргини и след това падинги, или обратно; и т.н. и т.н.

Вероятно темата е по-подходяща за по-напредналите, но със сигурност в един момент всички ще се сблъскат с подобни проблеми. И то много скоро.

Тагове:

12/06/2014 08:09:07 Web Fundamentals - HTML5

Antoveravip 67 Точки

Best Answer

Колега,

И аз доста време отделих да ги направя "pixel perfect". От гледна точка като стимул към себе си, отколкото по задание, макар че в по-късен етап, а и в практиката - това си е по подразбиране.

А от къде се започва? Нека сравним изграждането на страница със строежа на къща - първо строиш външните стени и след това стаите - иначе може да се наложи да изкупуваш имотите на съседите около теб, за да завършиш къщата, подходяща за голямата тоалетна, която първо си направил. И докато в реалноста може и да имаш възможностите и благословия на съдбата да изкупиш имотите на съседите, то тук трябва да се съобразяваме с наличното пространство (или да се примирим с едни невероятни и невъобразими скролери във всички страни, които ще ни донесат много пцуйни, но не и задоволство - освен ако не обичаме да ни ...) . Макар че от гледна точка на модифициране и разширение на нещата при уеб разработката има много повече свобода и възможности за последващи действия.

Относно падингите и маргините: Падингите приемам за свободното пространсто между стената на стаята и сложената мебелировка - според това до колко искам масата залепена за стената или в средата на стаята. След време ако се наложи да внеса допълнителна мебелировка - просто намалявам това пространство - а не се налага да руша стени и да нарушавам целоста на съседните стаи от къщата.
Маргините от своя страна ги приемам за загубено пространство - точно като дебелината на стената на стаята. Но пък може да искам да изолирам кухнята от тоалетната с възможно по дебела стена .

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

Всичко е въпрос на представа, преценка и съобразяване, което след дълго време на опит се превръща в усет.

Надявам се да съм успял да обясня по описателен начин как приемам и действам нещата и да съм бил полезен.

16/06/2014 23:02:57

ttitto 1153 Точки

Аз досега винаги съм започвал отвътре навън. Задължително ще пробвам съвета ти при следващата задача. Благодаря!

17/06/2014 00:13:02

Aleksiev 133 Точки

Най-добрия начин според мен за подготовка за изпита.. хващате 10-20 безплатни темплейта в PSD формат и ги нарязвате..

А относно домашните.. нормално е да ти е трудно да ги направиш pixel perfect защото там като цяло са в по-малак мащаб картинките и трудно можеш да уцелиш големина на шрифтовете и елементите, марджини и т.н. (защото са в word-ски документ), на изпита този проблем няма да го има.. там ще се дават точни размери на всичко и ще трябва само да се напишат на CSS.

Ще предложа една интересна стратегия, на която са ме учили преди години относно това ако нещо не ми се получава с мардцини, падинги, флоутове и т.н. Просто си разчертавайте нещата на един лист и се опитайте да си представите за всеки елемент по отделно какво точно става с него когато му задавате нещо от горе-посочените неща. Друг е въпроса че трябва да се знае кое какво точно прави.. имам предвид разликата между падинг и марджин (много хора не правят разлика).

Ще споделя и едно от нещата, което много от начинаещите трудно научават относно падинга. Падинга е отстояние от вътре на елемента (за разлика от марджина, който е от вънка). Когато зададете на един елемент фиксирана дължина и му сложите падинг, дължината се увеличава и става дължината + падинга.

Друг голям проблем създават флоутовете, но там темата е доста обширна.. ще кажа само че при всеки енджин се държи различно.

Абе общо взето нарежете няколко десетки сайта и няма да имате проблеми след това.

12/06/2014 10:28:03

Flyer 150 Точки

Здравей. Може да използваш добавката за Chrome - Page Ruler. С нея ще може да отмерваш елементи и да взимаш координатите им директно от браузърът.

Успех!

12/06/2014 11:24:46

avitoholix 13 Точки

Колеага плзвай това: http://getbootstrap.com/ ще си олесниш работата двойно и няма да мислиш за responsive.

14/06/2014 18:24:37

Valleri 304 Точки

Какво ще рече да нарежеш сайт?

15/06/2014 00:17:39

Aleksiev 133 Точки

Взимаш PSD (photoshop) файл или обикновена картинка и изрязваш отделните елементи като ги правиш на HTML и CSS.

15/06/2014 00:20:18

zomtorg 36 Точки

Като цяло е възможно да си вземеш картинката от домашното и да я сложиш в CSS body{background-image: url()), а на самото съдържание да му сложиш opacity: 0.5. В този случай можеш да станеш малко разноглед, докато свикнеш кое е съдържанието и кое е снимката, но според мен така лесно си свършваш работата (нямам никакъв front-end опит).

17/06/2014 21:13:24

ttitto 1153 Точки

За това има и по-лесен начин да се направи - с плугин за Хром (PerfectPixel by WellDoneCode). Пробвал съм го, но честно казано не го възприех. Наистина ставаш разноглед.

Най-лесен начин за сравнение съм възприел като сложа снимката в html ( с нулирани маргини и падинги за html, body и img елементите) във втори таб на браузъра. С ctrl+tab сменям бързо двата таба и се вижда ясно къде пикселите се разминават.

17/06/2014 21:52:23

genov1824 54 Точки

Здравейте, да не отварям нова тема пиша тук. Трябва ли задължително домашните да са 1:1 с картинката от word-a?

29/06/2014 12:35:19

bewolf 30 Точки

Здравей, не е задължително, но ако можеш е добре. В една реална работна обстановка в повечето случаи (да не кажа всички) ще трябва да е pixel perfect. Така че е добре ако можеш. Но не смятам, че някой ще направи негативна оценка на работата ако има малки разминавания.

29/06/2014 18:17:15

genov1824 54 Точки

Благодаря, аз ги правя pixel perfect, но като имаме да направим страница цяла, е невъзможно по снимка да ги напасна нещата. Това ме притесняваше.

29/06/2014 20:11:15