Windows calculator с HTML5 и CSS3 (2)

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

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

Подготвили сме файловете, които ще ни трябват. Какво следва?

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

1. Анализ на смисловите зони

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

calculator-divisions

Аз обичам да слагам бележки по кода, така ще направя и тук:

<!– CALCULATOR HEAD –>

1) лента с икона и главни бутони

<!—CALCULATOR BODY –>

<!– Menu –>

2) лента с навигация (менюта View, Edit, Help)

<!– Input Result –>

3) поле за въвеждане на данни и за извеждане на резултат от калкулация

<!– Byte Representation –>

4) поле за бинарна репрезентация на числата

<!– Counting Systems –>

5) поле за избор на бройна система, към която да се конвертира (Hex, Dec, Oct, Bin)

<!– Data Types –>

6) поле за избор на тип данни, към който да се конвертира (Qword, Dword, Word, Byte)

<!– Buttons –>

7) поле с бутони – може да прегледате малко повече за функцията на отделните бутони

2. Подбор на HTML елементите

Има два начина да се напише калкулаторът:

  • с таблица (table-based)
  • с div-ове за всички раздели

Доскоро таблиците са използвани масово за построяване на layout (изглед). Днес вече това се възприема като лоша практика, понеже смисълът на table елемента е друг. Таблицата си е таблица: ползва се за таблични данни. Тук нямаме такава, имаме главно бутони, организирани в групи.

Затова основното, което е добре да използваме за нашия layout, са divisions или т.нар. div елементи. Стилизирането им е малко по-трудно, понеже „шават“, за разлика от клетките на една таблица, които са фиксирани. Но мързелът не е добра практика, когато искаме качество, тъй че да се загащим и да я почваме отнякъде. 🙂

Определяне на съответстващите HTML елементи

1) Главната лента с бутоните може да се изгради с img за първата иконка, span за заглавието Calculator и input от типа image за главните бутони.

2) Навигация се прави със списък: ul таг с li-та в него. На първо време ще оставим само трите основни раздела, без да добавяме падащите менюта към тях.

3) Полето за данни е div с текст вътре (максимум 16 цифри), който можем да реализираме чрез input от типа text.

4) Полето за бинарна репрезентация е div с няколко реда:

  • 2 реда с по 32 позици, разпределени в 8 групи по 4 позиции за всяка група – за бинарно представяне на числата

Няма да навлизаме в програмната логика на самия калкулатор, но ще вземем под внимание, че тези редове позволяват превключване от 0 към 1 (и обратно) за всяка отделна позиция, чрез кликване върху нея. Това означава, че позициите са също своеобразни бутони. Може да им се зададе „поведение“ чрез JavaScript, но за момента ще оставим съдържанието им в span елементи. Самите редове можем да „опаковаме“ в div-ове.

  • 2 реда с по 3 елемента на ред, обозначаващи съответна позиция от 0 до 63 – могат да се напишат отново със span елементи с текст вътре

5), 6) Полето с бройните системи е div с ul-списък от input radio бутони. Същото важи и за полето, в което избираме тип данни.

7) Всички останали бутони на калкулатора са елементи са div-ове с input бутони вътре. Изключение прави само един от тях, който е без никакво съдържание.

ЧАСТ 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