СЪДЪРЖАНИЕ I HTML 5 още информация II

СЪДЪРЖАНИЕ I. HTML 5 – още информация II. j. Query в примери III. j. Query компоненти IV. Работа с XML (примери) V. Oбектно-ориентиран CSS VI. Литература / Полезни връзки

HTML 5 – още информация Как и кога да изпoлзваме мерните единици за font-size в HTML: em, rem, %, px През последните дни възникнаха доста дебати по въпроса кои точно мерни едини да използваме за оразмеряване на текста в уеб страниците. За съжаления за и против, относно всяка от тях има доста. Ето защо е добре да знаем малко повече за всяка една от тях. Кога и как се използват като теория, а накрая разбира се, сами може да решим кое да изберем. Има 2 основни единици, които се използват основно: 1) Size с px 2) Size с em

HTML 5 – още информация Sizе с px В момента за размерите на текста се използва найчесто pixels (px). Надеждна и устойчива мярка. За съжаление потребителите на Internet Explorer— даже на IE 9, а и 10 — нямат възможност да променят размера на текста като използват фуккциите на самия браузър за увеличаване и намаляване на font size. Което за самата използваемост на конкретния сайт не е добре. Последните версии на IE включват zooming, който уголемява всично на страницата — това помага отчасти. Като цяло залагайки на тази мерна единица, си даваме относителна сигурност под различните бразузъри.

HTML 5 – още информация Sizе с еm Невъзможността да скалираме текста под IE се решава с избора на em като мерна едина за текста (Тя се появява около 2004). Техниката променя основния размер на текста в body-то използвайки процентите. Тя променя нещата така, че 1 em е равен на 10 px, вместо на този по подразбиране - 16 px. Напримерм, за да зададем font-size равен на 14 px, задайте го като 1. 4 em.

HTML 5 – още информация /* 1 em е 10 px, 0. 8 em е 8 px, 1. 6 em е 16 px */ #main_content {font-size: 1. 2 em} H 1 {font-size: 2 em} /* displayed at 24 px */ H 2 {font-size: 1. 5 em} /* displayed at 18 px */ H 3 {font-size: 1. 25 em} /* displayed at 15 px */ H 4 {font-size: 1 em} /* displayed at 12 px */ Когато оразмеряваме текста с em трябва да запомним едно правило: конкретният текст е релативен с неговия родител и се използва проста формула: child pixels / parent pixels = child ems

HTML 5 – още информация body { font-size: 62. 5%; } /* = от 16 px става 10 px */ h 1 { font-size: 2. 4 em; } /* =24 px */ p { font-size: 1. 4 em; } /* =14 px */ li { font-size: 1. 4 em; } /* =14 px? */ Тук идва и проблемът, избирайки em-based font sizing нещата доста се усложняват. Списъкът в горното

HTML 5 – още информация body { font-size: 62. 5%; } h 1 { font-size: 2. 4 em; } /* =24 px */ p { font-size: 1. 4 em; } /* =14 px */ li { font-size: 1. 4 em; } /* =14 px? */ li li, li p /* и т. н. */ { font-size: 1 em; } В общи линии тази сложна система действа отчайващо, така че какво може да направим? Вече може да изберем новата мерна единица, придружаваща CSS 3: rem

HTML 5 – още информация Eдиницата “rem” като име идва съкратено от "root em". Ако това още не ви е приспало; ), да обясним как работи тя. Единицата em е зависима от font-size на родителския елемент, което причинява усложняването. Единицата rem е зависима от от root—или html—елемента. Това означава, че можем да дефинираме определен font size на html елемента и после да зададем всички rem единици да са процент от него.

HTML 5 – още информация html { font-size: 62. 5%; } body { font-size: 1. 4 rem; } /* =14 px */ h 1 { font-size: 2. 4 rem; } /* =24 px */ Във всички случаи, когато търсим fluid layout, достатъчно гъвкав единицата “rem” е идеалният избор.

HTML 5 – още информация Safari 5, Chrome, Firefox 3. 6+, и даже Internet Explorer 9 поддържат rem. Но напр. Opera до 11. 10 нямаше още имплементация за rem, от 13. 12. 2011 вече и Opera поддържа rem. За такива случаи трябва да предоставим fall-back алтернатива чрез px. Като първо дефинираме fontsize в px и после отново, използвайки rem. html { font-size: 62. 5%; } body { font-size: 14 px; font-size: 1. 4 rem; } /* =14 px */ h 1 { font-size: 24 px; font-size: 2. 4 rem; } /* =24 px */

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) Използване на HTML 5 Canvas API

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) HTML 5 Canvas API—a e много интересна и занимателна страна на технологията, която позволява динамично да генерираме и рендираме графики, диаграми, картинки, и анимации. Ще се запознаем и с основите на rendering API, за създаване на графики, които после можем да скалираме и адаптираме към средата на браузъра.

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) -концепцията за Canvas, създадена в началото от Аpple за нуждите на Mac OS X Web. Kit от създаване на dashboard widgets - Canvas всъщност е bitmap canvas, и финалният резултат не може да се скалира, както Scalable Vector Graphic (SVG) картинките могат. Обектите, нарисувани върху canvas не са част от DOM или който и да е друг namespace — нещо, което се смята за слабост. SVG картинките, от друга страна се мащабират “безкрайно” под различните резолюции и позволяват прихващания като клик на мишката и то точно къде е станало това.

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) -Но HTML 5 Canvas API има 2 предимства, за които си струва да го използваме: изпълнява се добре тъй като не е нужно да съхранява обекти за всеки примитив, който се изрисува; лесно е да се имплементира, на базата на много популярни двумерни API-та за рисуване, познати от другите езици за програмиране. ” - Когато използвате canvas елемента във вашата уеб страница, се създава правоъгълна област с размери по подразбиране 300 px широка и 150 px висока, но тя може да се промени и да се зададат и други атрибути.

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) /* за браузъри, които не го поддържат задавайте пояснения: Oбновете своя браузър, да се насладите на canvas eфектите! */

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) Проверка на поддръжката: try { document. create. Element("canvas"). get. Context("2 d"); document. get. Element. By. Id("support"). inner. HTML = "HTML 5 Canvas is supported in your browser. "; } catch (e) { document. get. Element. By. Id("support"). inner. HTML = "HTML 5 Canvas is not supported in your browser. "; }

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) - Използване на javascript функция за рисуване на диагонал - Използване на трансформации за същата линия

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) - Работа с пътища (Paths) line. Join: bevel, miter или round line. Cap: butt, square, или round Quadratic крива: начало, край, и контролни точки

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) - Работа с криви Quadratic крива: начало, край, и контролни точки Други възможни криви са: bezier. Curve. To, arc. To, и arc.

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) - Вмъкване на картинка в Canvas - Използване на градиенти - Използване на Background Patterns - Мащабиране -Използване на Canvas Transforms – операции и на завъртане context. rotate(angle) context. save(); // ъгъл на завъртане в радиани context. rotate(1. 57); context. draw. Image(my. Image, 0, 0, 100); context. restore();

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) - Използване на Canvas Text fill. Text (text, x, y, maxwidth) stroke. Text (text, x, y, maxwidth)

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) - Добавяне на сянка shadow към Canvas Text

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images) - Работа с Pixel Data или достъп до пикселите на нашето пано или Canvas context. get. Image. Data(sx, sy, sw, sh) // връща текущото състояние като колекция от integer Red component: ((width * y) + x) * 4 Green component: ((width * y) + x) * 4 + 1 Blue component: ((width * y) + x) * 4 + 2 Alpha component: ((width * y) + x) * 4 + 3

Използване на елемента за рисуване на форми (shapes), текст (text), и картинки (images)

Използване на HTML 5 Canvas API

Използване на HTML 5 Canvas API За са вземем информацията за всеки пиксел от нашия canvas ползваме image data обекта и с метода get. Image. Data() на canvas контекста и тогава имаме достъп до данните за пикселите чрез характеристиките на обекта imagе.

Използване на HTML 5 Canvas API

Използване на HTML 5 Canvas API

Използване на HTML 5 Canvas API

Използване на HTML 5 Canvas API

Използване на HTML 5 Canvas API

Използване на HTML 5 Canvas API За да създадем линейно движение с HTML 5 Canvas, можем да увеличаваме x или y, или и двете позиции на обекта за всеки кадър, според формулата за скорост. За да създадем клатеща анимация с HTML 5 Canvas, можем да използваме обикн. Хармонично трептене за позициониране на обекта за всеки кадър: x(t) = отклонение * sin(t * 2 PI / период) + x 0

Използване на HTML 5 Canvas API За да пуснем HTML 5 Canvas анимация, можем постоянно да извикваме нов кадър, а за да я спрем, просто не рекуестваме нов кадър. http: //kineticjs. com/ Използване на HTML 5 Canvas APIприхващане на мишката За да вземем релативните координати на мишката тук, можем да създадем get. Mouse. Pos() метод, който връща координатите на мишката, на основата на позицията спрямо платното и получени на база get. Bounding. Client. Rect() метод на window обекта.

Запознаване с SVG Scalable Vector Graphics (SVG) е базиран на XML маркиращ език за описване на двуизмерна векторна графика с възможност за включване и на растерни изображения, създаден от Уеб Консорциума (W 3 C). С термина се обозначава и множеството от спецификации дефиниращи езика (SVG Full, SVG Tiny SVG Basic и др. ). Последната версия на пълната спецификация, респективно на пълния език е SVG 1. 1 (обозначаван още като SVG Full 1. 1 за повече яснота). http: //www. codedread. com/svg-support. php

Запознаване с SVG се нарича още императивен - даваме му списък от операции, които да се изпълнят и след последната имаме някакъв резултат, а SVG е декларативен. Даваме му описание на крайния резултат и оставяме браузъра да се справя с него. Докато изисква Java. Script, SVG си иска маркиращ език, подобно на HTML, и може да се включи директно в HTML 5. view. Box дефинира припокриване (mapping) между физическите размери на елемента, дефинирани в CSS, и логическите координати на всичко, което се показва вътре.

Запознаване с SVG Не е нужно да разчитаме на директната бразузър поддръжка за SVG. По-старите бразузър и IE предлагат различни Java. Script библиотеки, които осигуряват това. SVG Web е Java. Script библиотека, която проверява за поддръжка на SVG и ако такава няма, намира и замества всяка графика с Flash movie. То от своя страна се грижи за рендването на SVG в браузъра. http: //code. google. com/p/svgweb/

Запознаване с SVG Raphaël Java. Script библиотеката вместо предлага API за създаването на графики. В Firefox, Chrome, Safari, и Opera създава SVG; в IE- VML. Интерфейсът Raphaël ни дава подобно на API: var paper = Raphael(10, 50, 320, 200); var circle = paper. circle(50, 40, 10); circle. attr("fill", "#f 00"); circle. attr("stroke", "#fff"); http: //raphaeljs. com/

j. Query в примери Примери: http: //www. 1 stwebdesigner. com/css/fresh-jquery-image-gallerydisplay-solutions/ http: //webexpedition 18. com/articles/20 -jquery-image-gallery-foryour-next-project/ http: //jqueryui. com/themeroller/#theme. Gallery

Изготвяне на One-page сайт Използвани j. QUERY плъгини: - http: //fancybox. net/ - lightbox - http: //tympanus. net/codrops/2011/01/19/sweet-thumbnails-gallery/ ефектен слайдър - http: //html 5 shim. googlecode. com/svn/trunk/html 5. js - добре познатия ни файл за поддръжка на по-стари браузъри 1) @fontface замяна на шрифта 2) дизайн, основан на HTML 5 Boilerplate: http: //html 5 boilerplate. com/

Работа с XML (примери) XML (e. Xtensible Markup Language) e език за форматиране на данни чрез използване на етикети (tags). Служи за лесно обозначаване (маркиране) на информация в рамките на обикновен текстов файл. Едно от основните негови предим-ства е възможността за съхраняване на тази информация в йерархичен вид. Това означава, че можете да я разделите на парчета. Фактически, можете да мислите за XML като тек-стово описание на йерархична файлова система, съхраняваща текстова информация. XML НЕ е скриптов език и реално не “върши” нищо, макар средствата, с които си служи да напомнят такъв. Навсякъде, където нормално използвате текстов файл можете да го заместите с XML. Снабдявайки се така със структурираност и яснота на конкретото съдържане. За повече информация относно XML може да погледнете в: http: //www. xml. com/ http: //www. w 3. org/XML/

Работа с XML (примери) Поглеждайки XML примера, ще забележите, че много прилича на HTML. Всъщност, HTML е тип XML (макар HTML да се е появил преди XML – и двата са създадени на база SGML). Тяхната структура в много отношения е еднаквa. Пример за XML файл: Мария Игнат Как си?

Работа с XML (примери) В аналогията файл-папка, етикета “letter” представя папка, съдържаща 3 други: “to”, “from” и “body”. Всички те описват съдържанието или изложението на едно писмо. Всяка една папка съдържа опреде-лен текст съответстващ на типа й (например “to” съдържа информация за получателя на писмото). Съдържанието на XML документ, етикетите и информацията в тях се разглеждат като възли. Тези възли са основните изграждащи блокове XML, определящи кое какво е. В примера има 2 типа възли: елементи и текст възли. “Letter”, “to”, “from” и “body” са елементи; “Мария”, “Игнат” и “Как си? ” са текст възли.

Работа с XML (примери) Възли елементи Възлите елементите представляват XML таговете (или папки, етикети). В нашия пример елемента “letter” е коренният - root елемент на XML документа. Желателно е да има само един коренен етикет за всеки XML файл (макар, Flash да не е толкова строг за това). Всички други елементи трябва да бъдат поставени в него, определяйки цялостната структура на документа. Когато един възел се съдържа в друг, се обозначава като “дете” на съдържащия го. A другия като родителски (“родител”) подобно на родословно дърво. Елементът “letter” има 3 “деца”: “to”, “from” и “body”. Родителският възел на всеки от тях е “letter”. Всеки елемент в XML трябва да има отварящ и затварящ етикет. Елементи без съдържание между отварящия и затварящ таг, или нямащи “деца” (като ) се наричат “празни елементи" и могат да се запишат алтернативно като <име_елемент /> или в случая “to”, , където имаме един таг, затварящ себе си. Но имайки само без затваряне ще бъде неправилно.

Работа с XML (примери) Когато именувате елементи, съществуват правила, които да спазвате. Имената на елементи трябва да съдържат само символи. Това включва букви, цифри, (_), тирета (-), точка (. ), и двоеточие (: ). Двоеточието е типично само за разделител на именувани пространства. Макар изброените символи да са валидни, имената на елементите могат да започват само с букви или долна подчертавка “_”. Освен това имената на елементи не трябва да започват с "xml“. Имената на етикетите са чувствителни към регистъра. Тоест прави се разлика между малки и големи букви ( е различно от ). Стандартно XML таговете се пишат с малки букви, а често HTML етикетите в XML са с големи.

Работа с XML (примери) В XML файла може да използваме еднакъв етикет много пъти: Mария Ивелина Петър Игнат Как си?

Работа с XML (примери) Текстови възли Текстовите възли представляват текста, който описвате, и по-специално “body” текста, описан с XML. Този текст може да е разположен на повече от един ред. Поради, форматирането в XML файла и структуринето на таговете (с елементи), има някои символи в текстовите възли, които не могат да се използват или трябва да се използват по определен начин, за да не нарушат правилното форматиране на документа. Ако това все пак стане, се казва, че документа не е форматиран правилно.

Работа с XML (примери) Тези определени символи трябва да се заменят с техни обек-тни референции. Това важни в най-голяма степен за “<” и “&” Съществуват 5 предефинирани такива за XML, които трябва да заместваме: Символ Заменя се в XML с: < > < > & ' " & ' "

Работа с XML (примери) Ако използваме таговете от HTML в XML, даже и в първия да нямат затварящ, то е задължително да ги затворим в XML. Например вместо в HTML трябва да напишем: < br /. Трябва да кодирате в URL всички специални символи – което може да направите с помощта на функцията escape() във Flash. Уеб страниците често използват текстови файлове, които съдържат XMLформатирана информация – напр. Статичен XML файл за съхраняване на данни за това кои динамични страници (на ASP или PHP…) да се извикат или към кой порт или IP-адрес да се свържат, когато се опитват да се свържат със сокет сървър.

Работа с XML (примери) Примери: http: //msdn. microsoft. com/en-us/data/bb 190600. aspx // за да се справим с IE отново; )

Литература http: //docs. jquery. com/Main_Page http: //docs. jquery. com/UI http: //api. jqueryui. com/1. 9/category/effects/ http: //api. jqueryui. com/1. 9/category/widgets/ https: //github. com/stubbornella/oocss/wiki http: //www. sitepoint. com/first-look-object-oriented-css/ http: //oocss. org/

Литература HTML 5 / CSS 3 работни рамки I. III. IV. V. VI. http: //52 framework. com/ http: //www. openlaszlo. org/ http: //lessframework. com/ http: //baselinecss. com/ http: //sproutcore. com/ http: //code. google. com/p/css 3 -action-framework/

Полезни връзки 1) http: //html. adobe. com/edge/ 2) http: //html. adobe. com/opensource/ 3) http: //incubator. apache. org/cordova/ 4) http: //brackets. io/ 5) http: //jquerymobile. com/ 6) http: //html. adobe. com/webstandards/cssregions/ 7) http: //html. adobe. com/webstandards/cssexclusions/ 8) http: //html. adobe. com/webstandards/csscustomfilters/ 9) http: //html. adobe. com/webstandards/ 10) http: //html. adobe. com/webstandards/csstransforms/ 11) http: //www. webplatform. org/ 12) http: //www. createjs. com/#!/Create. JS

Полезни връзки http: //jqueryfordesigners. com http: //webdesigneraid. com/category/tutorials/ http: //www. smashingmagazine. com http: //webdesignledger. com/inspiration/10 -html 5 -demos-to-make- youforget-about-flash HTML 5 платформи: http: //www. appcelerator. com/platform http: //www. phonegap. com http: //www. motorola. com/Business/US-EN/Rho. Mobile+Suite/Rhodes http: //www. the-m-project. org/