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

I. HTML5 – още информация

II. jQuery в примери

III. jQuery компоненти

IV. Работа с XML (примери)

V. Oбектно-ориентиран CSS

VI. Литература / Полезни връзки

СЪДЪРЖАНИЕ

HTML5 – още информация

Как и кога да изпoлзваме мерните единициза font-size в HTML: em, rem, %, px

През последните дни възникнаха доста дебати по въпроса кои точно мерни едини да използваме за оразмеряване на текста в уеб страниците. За съжаления за и против, относно всяка от тях има доста. Ето защо е добре да знаем малко повече за всяка една от тях. Кога и как се използват като теория, а накрая разбира се, сами може да решим кое да изберем.

Има 2 основни единици, които се използват основно:1) Size с px2) Size с em


Sizе с px

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


Sizе с еm

Невъзможността да скалираме текста под IE се решава с избора на em като мерна едина за текста (Тя се появява около 2004).

Техниката променя основния размер на текста в body-то използвайки процентите. Тя променя нещата така, че 1em е равен на 10px, вместо на този по подразбиране - 16px. Напримерм, за да зададем font-size равен на 14px, задайте го като 1.4em.


/* 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


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 и така да опростим сметките.


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


Eдиницата “rem” като име идва съкратено от "root em". Ако това още не ви е приспало;), да обясним как работи тя.

Единицата em е зависима от font-size на родителския елемент, което причинява усложняването. Единицата rem е зависима от от root—или html—елемента.

Това означава, че можем да дефинираме определенfont size на html елемента и после да зададем всички rem единици да са процент от него.


html { font-size: 62.5%; }

body { font-size: 1.4rem; } /* =14px */

h1 { font-size: 2.4rem; } /* =24px */

Във всички случаи, когато търсим fluid layout, достатъчно гъвкав единицата “rem” е идеалният избор.


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 */

Използване наHTML5 Canvas API

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


HTML5 Canvas API—a e много интересна и занимателна страна на технологията, която позволява динамично да генерираме и рендираме графики, диаграми, картинки, и анимации.

Ще се запознаем и с основите на rendering API, за създаване на графики, които после можем да скалираме и адаптираме към средата на браузъра.


-концепцията за Canvas, създадена в началото от Аpple за нуждите на Mac OS X WebKit от създаване на dashboard widgets

- Canvas всъщност е bitmap canvas, и финалният резултат не може да се скалира, както Scalable Vector Graphic (SVG) картинките могат. Обектите, нарисувани върху canvas не са част от DOM или който и да е друг namespace — нещо, което се смята за слабост. SVG картинките, от друга страна се мащабират “безкрайно” под различните резолюции и позволяват прихващания като клик на мишката и то точно къде е станало това.


-Но HTML5 Canvas API има 2 предимства, за които си струва да го използваме: изпълнява се добре тъй като не е нужно да съхранява обекти за всеки примитив, който се изрисува; лесно е да се имплементира, на базата на много популярни двумерни API-та за рисуване, познати от другите езици за програмиране.”

- Когато използвате canvas елемента във вашата уеб страница, се създава правоъгълна област с размери по подразбиране 300 px широка и 150 px висока, но тя може да се промени и да се зададат и други атрибути.


<canvas></canvas>

/* за браузъри, които не го поддържат задавайте пояснения:<canvas>Oбновете своя браузър, да се насладите на canvas eфектите!</canvas>*/


Проверка на поддръжката:

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.";}


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


- Работа с пътища (Paths)

lineJoin: bevel, miter или round lineCap: butt butt, square, или round

Quadratic крива: начало, край, и контролни точки


- Работа с криви

Quadratic крива:начало, край, иконтролни точки

Други възможни криви са: bezierCurveTo, arcTo, и arc.


- Вмъкване на картинка в Canvas- Използване на градиенти- Използване на Background Patterns- Мащабиране-Използване на Canvas Transforms – операции и на завъртане context.rotate(angle)

context.save();// ъгъл на завъртане в радианиcontext.rotate(1.57);context.drawImage(myImage, 0, 0, 100, 100);context.restore();


- Използване на Canvas Text

fillText (text, x, y, maxwidth)strokeText (text, x, y, maxwidth)


- Добавяне на сянка shadow към Canvas Text


- Работа с Pixel Data или достъп до пикселите на нашето пано или Canvas

context.getImageData(sx, sy, sw, sh)

// връща текущото състояние като колекция от integerRed component: ((width * y) + x) * 4Green component: ((width * y) + x) * 4 + 1Blue component: ((width * y) + x) * 4 + 2Alpha component: ((width * y) + x) * 4 + 3


Използване на 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 var lowQualityJpegUrl =

canvas.toDataURL('image/jpeg', 0.2);</script>


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


<script> // взимаме image данните var imageData=context.getImageData(0,0,canvas.width,

canvas.height); var data = imageData.data; // модифицираме ги

// рисуваме отново върху платното context.putImageData(imageData, 0, 0);</script>


<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 stuff s custom transform</script>

<script> context.transform(1 ,sy, sx, 1, 0, 0); // draw stuff naklanyane</script>


<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>


<script> context.shadowColor = 'red'; context.shadowBlur = 20; context.shadowOffsetX = 10; context.shadowOffsetY = 10;</script>

<script> context.globalAlpha = 0.6;</script>

<script> context.save(); // draw path here context.clip(); // draw stuff here context.restore();</script>


<script> context.globalCompositeOperation = 'destination-over';

</script>


<script> context.clearRect(0, 0, canvas.width, canvas.height);</script>

За да създадем линейно движение с HTML5 Canvas, можем да увеличаваме x или y, или и двете позиции на обекта за всеки кадър, според формулата за скорост. За да създадем клатеща анимация с HTML5 Canvas, можем да използваме обикн. Хармонично трептене за позициониране на обекта за всеки кадър:

x(t) = отклонение * sin(t * 2PI / период) + x0


За да пуснем HTML5 Canvas анимация, можем постоянно даизвикваме нов кадър, а за да я спрем, просто не рекуестваме новкадър.

http://kineticjs.com/

Използване на HTML5 Canvas API-прихващане на мишката

За да вземем релативните координати на мишката тук, можем да създадем getMousePos() метод, който връща координатите на мишката, на основата на позицията спрямо платното и получени на база getBoundingClientRect() метод на window обекта.

Запознаване с 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


<canvas> се нарича още императивен - даваме му списък от операции, които да се изпълнят и след последната имаме някакъв резултат, а SVG е декларативен.

Даваме му описание на крайния резултат и оставяме браузъра да се справя с него. Докато <canvas> изисква JavaScript, SVG си иска маркиращ език, подобно на HTML, и може да се включи директно в HTML5.

viewBox дефинира припокриване (mapping) между физическите размери на елемента, дефинирани в CSS, и логическите координати на всичко, което се показва вътре.


Не е нужно да разчитаме на директната бразузър поддръжка за SVG. По-старите бразузър и IE предлагат различни JavaScript библиотеки, които осигуряват това.

SVG Web е JavaScript библиотека, която проверява за поддръжка на SVG и ако такава няма, намира и замества всяка графика с Flash movie. То от своя страна се грижи за рендването на SVG в браузъра.

http://code.google.com/p/svgweb/


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/

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

Изготвяне на 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/

Работа с XML (примери)

XML (eXtensible Markup Language) e език за форматиране на данни чрез използване на етикети (tags). Служи за лесно обозначаване (маркиране) на информация в рамките на обикновен текстов файл. Едно от основните негови предим-ства е възможността за съхраняване на тази информация в йерархичен вид. Това означава, че можете да я разделите на парчета. Фактически, можете да мислите за XML като тек-стово описание на йерархична файлова система, съхраняваща текстова информация.

XML НЕ е скриптов език и реално не “върши” нищо, макар средствата, с които си служи да напомнят такъв. Навсякъде, където нормално използвате текстов файл можете да го заместите с XML. Снабдявайки се така със структурираност и яснота на конкретото съдържане. За повече информация относно XML може да погледнете в:

http://www.xml.com/http://www.w3.org/XML/


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

<letter>

<to> Мария </to>

<from> Игнат </from>

<body> Как си? </body>

</letter>


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


Възли елементи

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


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


В XML файла може да използваме еднакъв етикетмного пъти:

<letter>

<to> Mария </to>

<to> Ивелина </to>

<to> Петър </to>

<from> Игнат </from>

<body> Как си? </body>

</letter>


Текстови възли

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

Ако това все пак стане, се казва, че документа не е форматиран правилно.


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

Символ Заменя се в XML с:

< <

> >

& &

' '

" "


Ако използваме таговете от HTML в XML, даже и в първия да нямат затварящ, то е задължително да ги затворим в XML. Например вместо <br> в HTML трябва да напишем:< br /.

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


Примери:

http://msdn.microsoft.com/en-us/data/bb190600.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/

Литература

HTML5 / CSS3 работни рамки

I. http://52framework.com/

II. http://www.openlaszlo.org/

III. http://lessframework.com/

IV. http://baselinecss.com/

V. http://sproutcore.com/

VI. http://code.google.com/p/css3-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/#!/CreateJS

Полезни връзки

http://jqueryfordesigners.com

http://webdesigneraid.com/category/tutorials/

http://www.smashingmagazine.com

http://webdesignledger.com/inspiration/10-html5-demos-to-make- you-forget-about-flash

HTML5 платформи: http://www.appcelerator.com/platform http://www.phonegap.com http://www.motorola.com/Business/US-EN/RhoMobile+Suite/Rhodes http://www.the-m-project.org/

Documents

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