HTML5 – още информация jQuery в примери jQuery компоненти Работа с XML ( примери)

2. СЪДЪРЖАНИЕ • HTML5 – още информация • jQuery в примери • jQuery компоненти • Работа с XML (примери) • Oбектно-ориентиран CSS • Литература / Полезни връзки

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

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

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

6. HTML5 – още информация /* 1em е10px, 0.8em е 8px, 1.6em е 16px */ #main_content {font-size:1.2em} H1 {font-size:2em} /* displayed at 24px */ H2 {font-size:1.5em} /* displayed at 18px */ H3 {font-size:1.25em} /* displayed at 15px */ H4 {font-size:1em} /* displayed at 12px */ Когато оразмеряваме текста с em трябва да запомним едно правило: конкретният текст е релативен с неговия родител и се използва проста формула:child pixels / parent pixels = child ems

7. HTML5 – още информация body { font-size:62.5%; }/* = от 16px става 10px */ h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */ Тук идва и проблемът, избирайки em-based font sizing нещата доста се усложняват. Списъкът в горното <li> не е 14px, а 20px. За да избегнем това, трябва да зададем всички child елементи да използват 1em и така да опростим сметките.

8. HTML5 – още информация body { font-size:62.5%; } h1 { font-size: 2.4em; } /* =24px */ p { font-size: 1.4em; } /* =14px */ li { font-size: 1.4em; } /* =14px? */ li li, li p /* и т.н. */ { font-size: 1em; } В общи линии тази сложна система действа отчайващо, така че какво може да направим? Вече може да изберем новата мерна единица, придружаваща CSS3: rem

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

10. HTML5 – още информация html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */ Във всички случаи, когато търсим fluid layout, достатъчно гъвкав единицата “rem” е идеалният избор.

11. HTML5 – още информация Safari 5, Chrome, Firefox 3.6+, идаже Internet Explorer 9 поддържат rem. Но напр. Opera до 11.10 нямаше още имплементация за rem, от 13.12.2011 вече и Opera поддържаrem. За такива случаи трябва да предоставим fall-back алтернатива чрез px. Като първо дефинираме font-size в px и после отново, използвайки rem. html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */

12. Използване на <canvas> елемента за рисуване на форми (shapes),текст (text), и картинки (images) Използване наHTML5Canvas API

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

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

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

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

17. Използване на <canvas> елемента за рисуване на форми (shapes),текст (text), и картинки (images) Проверка на поддръжката: try { document.createElement("canvas").getContext("2d"); document.getElementById("support").innerHTML = "HTML5 Canvas is supported in your browser."; } catch (e) { document.getElementById("support").innerHTML = "HTML5 Canvas is not supported in your browser."; }

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

19. Използване на <canvas> елемента за рисуване на форми (shapes),текст (text), и картинки (images) • Работа с пътища (Paths)lineJoin: bevel, miter или round • lineCap: butt butt, square, или round Quadratic крива: начало, край, и контролни точки

20. Използване на <canvas> елемента за рисуване на форми (shapes),текст (text), и картинки (images) • Работа с криви Quadratic крива:начало, край, иконтролни точки Други възможни криви са: bezierCurveTo, arcTo, и arc.

21. Използване на <canvas> елемента за рисуване на форми (shapes),текст (text), и картинки (images) • Вмъкване на картинка в Canvas- Използване на градиенти- Използване на Background Patterns • Мащабиране • Използване на Canvas Transforms – операции и на завъртане context.rotate(angle) • context.save(); • // ъгъл на завъртане в радиани • context.rotate(1.57); • context.drawImage(myImage, 0, 0, 100, 100); • context.restore();

22. Използване на <canvas> елемента за рисуване на форми (shapes),текст (text), и картинки (images) • Използване на Canvas Text • fillText (text, x, y, maxwidth) • strokeText (text, x, y, maxwidth)

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

24. Използване на <canvas> елемента за рисуване на форми (shapes),текст (text), и картинки (images) • Работа с Pixel Data или достъп до пикселите на нашето пано или Canvas • context.getImageData(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

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

26. Използване на HTML5 Canvas API <script> // get png data url var pngUrl = canvas.toDataURL(); // get jpeg data url var jpegUrl = canvas.toDataURL('image/jpeg'); // get low quality jpeg data url varlowQualityJpegUrl = canvas.toDataURL('image/jpeg', 0.2); </script>

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

28. Използване на HTML5 Canvas API <script> // взимаме image данните varimageData=context.getImageData(0,0,canvas.width, canvas.height); var data = imageData.data; // модифицираме ги // рисуваме отново върху платното context.putImageData(imageData, 0, 0); </script>

29. Използване на HTML5 Canvas API <script> context.translate(x, y); // draw stuff </script> <script> context.scale(x, y); // draw stuff </script> <script> context.rotate(angle); // draw stuff </script> <script> context.transform(a, b, c, d, e, f); // draw stuffs custom transform </script> <script> context.transform(1 ,sy, sx, 1, 0, 0); // draw stuff naklanyane </script>

30. Използване на HTML5 Canvas API <script> // mirror horizontally context.scale(-1,1); // mirror vertically context.scale(1,-1); </script> <script> context.setTransform(1, 0, 0, 1, 0, 0); // draw stuff </script> <script> context.save(); // apply transforms // draw stuff context.restore(); </script>

31. Използване на HTML5 Canvas API <script> context.save(); // draw path here context.clip(); // draw stuff here context.restore(); </script> <script> context.shadowColor = 'red'; context.shadowBlur = 20; context.shadowOffsetX = 10; context.shadowOffsetY = 10; </script> <script> context.globalAlpha = 0.6; </script>

32. Използване на HTML5 Canvas API <script> context.globalCompositeOperation = 'destination-over'; </script>

33. Използване на HTML5 Canvas API <script> context.clearRect(0, 0, canvas.width, canvas.height); </script> За да създадем линейно движение с HTML5 Canvas, можем да увеличаваме x или y, илии дветепозиции на обекта за всеки кадър, според формулата за скорост. За да създадем клатеща анимация с HTML5 Canvas, можем да използваме обикн. Хармонично трептене за позициониране на обекта за всеки кадър: x(t) = отклонение * sin(t * 2PI / период) + x0

34. Използване на HTML5 Canvas API За да пуснем HTML5 Canvas анимация, можем постоянно да извикваме нов кадър, а за да я спрем, просто не рекуестваме нов кадър. http://kineticjs.com/ Използване на HTML5 Canvas API-прихващане на мишката За да вземем релативните координати на мишката тук, можем да създадем getMousePos() метод, който връща координатите на мишката, на основата на позицията спрямо платното и получени на база getBoundingClientRect() метод на window обекта.

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

36. Запознаване с SVG <canvas> се нарича още императивен - даваме му списък от операции, които да се изпълнят и след последната имаме някакъв резултат, а SVG е декларативен. Даваме му описание на крайния резултат и оставяме браузъра да се справя с него. Докато <canvas> изисква JavaScript, SVG си иска маркиращ език, подобно на HTML, и може да се включи директно в HTML5. viewBox дефинира припокриване (mapping)между физическите размери на елемента, дефинирани в CSS, и логическите координати на всичко, което се показва вътре.

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

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

39. jQuery в примери Примери: http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/ http://webexpedition18.com/articles/20-jquery-image-gallery-for-your-next-project/ http://jqueryui.com/themeroller/#themeGallery

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

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

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

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

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

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

46. Работа с XML (примери) В XML файла може да използваме еднакъв етикетмного пъти:<letter> <to>Mария </to> <to> Ивелина </to> <to> Петър </to> <from> Игнат </from> <body> Как си? </body> </letter>

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

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

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

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