Windows calculator с HTML5 и CSS3 (1)

ЧАСТ 1: Подготвяне на работни файлове 

Да си поиграем малко със CSS-а. Вземаме калкулатора на Windows 8 в режим Programmer и го почваме. Трябва да напишем HTML код за него и да го стилизираме. Постъпково ще обясняваме какво, защо и как. Естествено, визията на калкулатора ще варира според цветовата схема, която сте избрали за своя Windows. 🙂

calculator-mix

Подходът на всеки е различен, като пише код. Моят е да пиша паралелно HTML и стилове, за да виждам резултата на екрана.  Ще следим също и разликите в представянето на IE (за всички версии до 7 включително), като за IE7 ще създадем допълнителен файл със стилове.

1. Определяне на размерите 

Имаме конкретен обект (приложението Windows Calculator), който вече е направен да работи с определени размери, затова ползваме тях. Няма да го правим да се преоразмерява, затова работим в пиксели, а не в проценти.

Отваряме калкулатора на Windows и с Alt + PrintScreen копираме вида му. Във Photoshop създаваме нов документ (File > New…) и пействаме в него. Понеже копираното от нас е запазено в Clipboard-а (при графичния интерфейс той позволява трансфер на данни от едно приложение към друго), Photoshop „вижда“ какво се каним да поставим в новия документ и ще ни предложи автоматично размерите на копираното. Това са точните размери, които ни трябват. Виждат се още в прозореца за създаване на новия документ, но впоследствие можем да ги намерим също и през менюто Image > Size: Pixel Dimensions 423 x 389.

new

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

По-нататък ще ни трябват размери и на други неща: отстояния, дебелина на рамки, размери на кутийките за бутоните. За да измерим всяко от тях, можем да ползваме инструментите на Photoshop: инструмент за селекция (Marquee Tool) и линийка за измерване (Ruler Tool). При достатъчен Zoom в изображението понякога лесно се вижда броят на пикселите и без допълнителни инструменти. Когато все пак се налага да мерим, аз ще ползвам най-вече Rectangular Marquee Tool. В палитрата Info вдясно можем да наблюдаваме данните, които се отразяват за селектирания обект.

2. Подготвяне на изображения

Имат се предвид бутоните за Minimize, Maximize и Close. На вид са простички, може и със CSS да ги нарисувате. Сега обаче ще ги отрежем наготово от картинката с калкулатора, няма да си ги рисуваме сами. Понеже нямате изходния дизайнерски файл, в който са оригиналните бутони, ще трябва да ползвате изображението от скрийншота.

Създайте си отсега папка img, в която да събирате изрязаните картинки. Трябва да са на едно място, за да знаете къде да ги търсите.

Стъпки:

1. Отваряте си картинката с калкулатора във Photoshop.

2. С Rectangular Marquee Tool ограждате правоъгълник около бутона Close. В палитрата Info вдясно можете да видите даже размерите му: 45 х 20 пиксела.

select-close

3. Натискате Ctrl + C за копиране на селектирания участък. 

4. Отваряте нов документ във Photoshop и пействате там копираното.

5. Изображенията за уеб се запаметяват с File > Save for Web… във Photoshop CS6 или File > Save for Web and Devices… във Photoshop CS5. Това ви позволява да съхраните малка по размер картинка, оптимизирана за уеб и във формат по ваш избор, който също повлиява на размера й. 

Аз ползвам в случая PNG-8 формат, понеже:

  • GIF орязва от качеството на картинката – този формат се ползва основно за прости анимации, но тук случаят не е такъв;
  • JPG прави картинката по-голяма – той е добър за оптимизаране на по-сложни изображения, като фотографии например, където се пазят повече цветове;
  • PNG-24 е аналогичен на JPG, но поддържа възможността за прозрачен фон, какъвто в случая нямаме – съответно би произвел по-голям по обем файл, което не ни е нужно;
  • WBMP форматът създава монохромни изображения, освен това е оптимизиран за мобилни устройства, но в рамките на текущото упражнение няма да се занимаваме с тях

Форматът PNG-8 отделя по 8 бита за съхраняването на всеки пиксел от изображението, докато PNG-24 отделя по 24 бита за пиксел. Това позволява на PNG-24 да пази доста повече цветове. Когато избираме между двата формата, вземаме под внимание колко ни е „шарена“ картинката. Ако е по-сложна, използваме PNG-24. В случая имаме бутони, доста простовати, с по 1-2 цвята, което показва, че PNG-8 е по-добрият избор.

Повече за избора на файлов формат можете да прочетете в статията Web Designer’s Guide to PNG Image Format на Catalin Rosu.

6. Даваме подходящо име на файла с бутона, напр. close.png и натискаме Save.

Същата процедура повтаряме и за другите два бутона. Именуваме файловете така, че да ни казват какво е съдържанието в тях:

  • close.png
  • maximize.png
  • minimize.png

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

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

Установяваме чрез Rectangular Marquee Tool, че разстоянието между чертата в средата на първия бутон и „прозореца“ в средата на втория бутон е точно 18 пиксела.

size-between

Логично е при това положение да теглим точно по средата разделителната линия между двата бутона. С еднакъв цвят са и нищо друго не ни показва докъде свършва единият и откъде започва другият. Издърпала съм водач отляво, за да показва къде точно е средата („водач“ се нарича светлосинята вертикална линия, вж. изображението отдолу). Маркираме бутона Maximize точно до 9 пиксела вляво от вътрешното му „прозорче“, копираме маркираното и запаметяваме според описаните по-горе стъпки.

select-maximize

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

select-minimize

Може да се поспори, обаче, дали не е по-добре да вземем най-вътрешния елемент на бутоните (в случая – долна черта за бутона Minimize и „прозорче“ за Maximize) и да отброим еднакъв брой пиксели от двете страни, така че да има симетрия в изрязаното. Ако съдим по червения метро бутон Close, симетрия няма: вляво от хикса има 19 пиксела, а вдясно са 18. С по-голяма точност можем да видим размерите на бутоните, ако сравним с друго Windows приложение, където и бутонът Maximize е активен:

maximize-select-size

Тогава става ясно, че между бутоните има по 1 рх отстояние и размерите им са: 26 х 20 рх за бутона Minimize и 25 х 20 рх за бутона Maximize.

min-max-select

Има още една особеност при бутона Minimize: като застанете над него с мишката, променя цвета си. Съответно, ще трябва изрежем още едно изображение за този бутон, което ще отговаря на hover ефекта:

  • minimize-hover.jpg

calculator-hover-crop

Остава да изрежем иконата с калкулатора: маркирате по познатия начин и запаметявате в нов файл, както обяснихме по-горе. Понеже картинката е с повече цветове, използваме друг формат за нея. Разликата между JPG и PNG-24 в случая е незначителна: 545 пиксела срещу 554 пиксела краен размер, но в уеба икономията на ресурси е изключително важна, така че избираме този път JPG формата:

  • calculator-icon.jpg

select-icon

Огледайте пак калкулатора – по него няма други картинки за изрязване. Бутоните с цифри и символи на тях ще нарисуваме чрез HTML. Дори за стрелката наляво си има HTML запис, както ще видим по-нататък.

3. Организиране на работните файлове

За нашия проект КАЛКУЛАТОР ще ни е нужна отделна папка. Тя ще съдържа всички файлове, които създаваме и използваме при работата:

  • папка за изображенията – img
  • файл с HTML кода – index.html
  • файл с приложените стилове – style.css

Именуването, което сме използвали, е стандартно. Може да използвате обаче и друго, по ваша преценка.

ЧАСТ 2: Разделяне калкулатора на зони 

ЧАСТ 3: Структуриране на HTML файла

Advertisements

Вашият коментар

Попълнете полетата по-долу или кликнете върху икона, за да влезете:

WordPress.com лого

You are commenting using your WordPress.com account. Log Out / Промяна )

Twitter picture

You are commenting using your Twitter account. Log Out / Промяна )

Facebook photo

You are commenting using your Facebook account. Log Out / Промяна )

Google+ photo

You are commenting using your Google+ account. Log Out / Промяна )

Connecting to %s