5:58 PM Урок №1 HTML5 Въведение | |
въведениеHTML5 е следващото поколение HTML Той е съвместна разработка на W3C и WHATWG (Web Hypertext Application Technology Working Group) Ето и правилата, следвани при създаването на стандарта Новите функционалности трябва да бъдат базирани на HTML, CSS, DOM и JavaScript Намаляване на нуждата от външни плъгини за браузърите като Flash playerПо-добро управление на грешките Повече изходен код, за да се намали писането на JavaScript HTML5 трябва да е независим от устройството на което се използва Процесът на разработване трябва да бъде публичен. Нови свойства Нов <!DOCTYPE HTML> Canvas елемент за рисуване Video и Audio елементи за изпълняване на медийно съдържание в браузърите По-добра поддръжка за запазване на офлайн съдържание локално Нови специфични маркиращи елементи като article, header, footer, nav, section Нов контрол на form елементите като calendar, date, time, email, url, search Поддръжка от браузъритеHTML5 се поддържа от последните версии на: Safari Chrome Firefox Opera IE9 BetaНови маркиращи елементи <article> - за външно съдържание като статии, публикации в блогове, форуми или др. вид външен източник <aside> - за странични ленти <command> - бутон, радио бутон или чекбокс <details> - за описване на детайли относно документ или част от документ <summary> - заглавие или описание, използва се в <details> елемента <figure> - за групиране на секция от независимо съдържание (може да включва и видео). <figcaption> - заглавие на секция <figure> <footer> - за долната част на документа или на секцията. Може да включва заглавие на автора, дата на документа, контактна или др. информация <header> - кратко представяне на документ или секция, може да включва и навигация <hgroup> - за секция от заглавни тагове (h1-h6), като най-големият служи за заглавие на секцията, а останалите са под-заглавия <mark> - използва се за текст, който трябва да бъде обозначен по специален начин <meter> - за измерване. Използва се само, ако се знаят началната и крайната стойност <nav> - за навигационно меню. <progress> - моментното състояние на работа в прогрес <section> - за секция в документ. Използва се за раздели, хедъри, футъри или други секции от документа <time> - за дефиниране на време, дата или и двете <wbr> - wordbreak – служи за дефиниране на line-break Нови медия елементи <audio> - за мултимедийно съдържание – звук, музика или други аудио потоци <video> - за видео съдържание – видео клипове или видео потоци <source> - поставя се във видео или аудио елементите. Чрез него се задава пътят, от който се зареждат тези файлове. <embed> - за вмъкнато съдържание, най-често някакви плъгини. Canvas елемент <canvas> - за създаване на графики, използвайки скриптови езици. Нови Form елементи <datalist> - списък с опции за input полета <keygen> - генерира ключове за идентификация на потребителите <output> - за различни видове изходен код, като например такъв, генериран от външен скрипт Нови Input Type видове tel – поле за въвеждане на телефонен номер search – идентифицира поле за търсене на съдържание в сайта url – поле за въвеждане на интернет адрес email – поле за въвеждане на E-mail адрес datetime – поле за въвеждане на дата или време date – поле за въвеждане на ден month – поле за въвеждане на месец week – поле за въвеждане на седмица time – поле за въвеждане на време datetime-local – поле за въвеждане на локално време number – поле за въвеждане на номер range – стойността на полето трябва да е в определен интервал color – стойността на полето трябва да е шестнайсетичен код – напр. #FF0000 Видео и поддържани формати Досега нямаше единен стандарт за показване на видео в сайтовете. В момента браузърите използват външни плъгини като Flash или Silverlight. HTML5 определя стандарт за включване на видео в съвременните сайтове. В момента се поддържат само 2 видео формата: Ogg = .ogg файлове, използващи Thedora видео кодек и Vorbis аудио кодек MPEG4 = MPEG 4 файлове с H.264 видео кодек и AAC аудио кодек Ogg файловете се поддържат от: Firefox 3.5 Opera 10.5 Chrome 3.0 MPEG 4 файловете се поддържат от: Chrome 3.0 Safari 3.0 IE9 Всичко, от което се нуждаете, за да покажете видео файл е в този код: <video src="movie.ogg" controls="controls"></video> Атрибутът control е за показване на бутони Пусни, Спри, Пауза и Звук Добра идея е да се зададат и широчина и височина на клипа. Ако добавите текст преди затварящия таг, той ще се показва ако браузърът, който използвате не поддържа новия елемент. <video src="movie.ogg" width="320" height="240" controls="controls"> Your browser does not support the video tag. </video> Видео атрибутиАудио и поддържани формати Досега нямаше единен стандарт за пускане на аудио в сайтовете. В момента браузърите използват външни плъгини като Flash. HTML5 определя стандарт за включване на аудио в съвременните сайтове. В момента се поддържат 3 аудио формата: Ogg Vorbis MP3 WAV Ogg Vorbis файловете се поддържат от: Firefox 3.5 Opera 10.5 Chrome 3.0 MP3 файловете се поддържат от: Chrome 3.0 Safari 3.0 IE9 WAV файловете се поддържат от: Firefox 3.5 Opera 10.5 Safari 3.0 Всичко, от което се нуждаете, за да пуснете аудио файл е в този код: <audio src="song.ogg" controls="controls"></audio> Атрибутът control е за показване на бутони Пусни, Спри, Пауза и Звук Ако добавите текст преди затварящия таг, той ще се показва ако браузърът, който използвате не поддържа новия елемент. <audio src="song.ogg" controls="controls"> Your browser does not support the audio element. </audio> За да може да пуснете аудио файла при всички браузъри може да направите списък с файлове с различни разширения. Браузърът ще пусне аудио файла, който разпознае първи и няма да пусне останалите: <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> Видео атрибутиCanvas елементът се използва за рисуване на графики в страниците. При него се използва JavaScript, за да работи, тъй като сам по себе си не прави нищо. За да добавите елементът в страницата трябва да напишете това: <canvas id="myCanvas" width="200" height="100"></canvas> и да добавите например този JavaScript код: <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script>Запазване на уеб данни HTML5 предоставя 2 нови начина за запазване на данни на клиентския компютър: localStorage - запазва данни без ограничение във времето sessionStorage - запазва данните само за текущата сесия Тези два метода изместват употребата на cookies, с което значително се ускорява работата на сайтовете. При него данните се извикват само, когато са поискани и е подходящ за голям обем данни. localStorage методът се създава и достъпва по този начин:
По този начин може да преброите колко пъти даден потребител е посетил страницата. sessionStorage методът се създава и достъпва по този начин:
По този начин може да преброите колко пъти даден потребител е посетил страницата през текущата потребителска сесия. | |
|
| |
Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
| Всички коментари: 0 | |
