Loading...
ttitto avatar ttitto 1153 Точки

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

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

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

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

Тагове:
7
Web Fundamentals - HTML5
Antoveravip avatar Antoveravip 67 Точки
Best Answer

Колега,

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

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

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

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

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


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

7
ttitto avatar ttitto 1153 Точки

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

3
Aleksiev avatar Aleksiev 133 Точки

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

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

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

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

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

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

4
Flyer avatar Flyer 150 Точки

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

Успех!

8
avitoholix avatar avitoholix 13 Точки

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

2
Valleri avatar Valleri 304 Точки

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

0
Aleksiev avatar Aleksiev 133 Точки

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

2
zomtorg avatar zomtorg 36 Точки

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

1
ttitto avatar ttitto 1153 Точки

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

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

0
genov1824 avatar genov1824 54 Точки

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

0
bewolf avatar bewolf 30 Точки

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

0
genov1824 avatar genov1824 54 Точки

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

0
Можем ли да използваме бисквитки?
Ние използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Можете да се съгласите с всички или част от тях.
Назад
Функционални
Използваме бисквитки и подобни технологии, за да предоставим нашите услуги. Използваме „сесийни“ бисквитки, за да Ви идентифицираме временно. Те се пазят само по време на активната употреба на услугите ни. След излизане от приложението, затваряне на браузъра или мобилното устройство, данните се трият. Използваме бисквитки, за да предоставим опцията „Запомни Ме“, която Ви позволява да използвате нашите услуги без да предоставяте потребителско име и парола. Допълнително е възможно да използваме бисквитки за да съхраняваме различни малки настройки, като избор на езика, позиции на менюта и персонализирано съдържание. Използваме бисквитки и за измерване на маркетинговите ни усилия.
Рекламни
Използваме бисквитки, за да измерваме маркетинг ефективността ни, броене на посещения, както и за проследяването дали дадено електронно писмо е било отворено.