Изграждане на бързи и отзивчиви уебсайтове

Автор: Randy Alexander
Дата На Създаване: 25 Април 2021
Дата На Актуализиране: 20 Юни 2024
Anonim
Създаване на сайт с Wordpress, тема, меню
Видео: Създаване на сайт с Wordpress, тема, меню

Съдържание

Този откъс е глава 4 от HTML5 готварска книга за мобилно развитие от Ши Чуан, в издателство Packt.

На мобилните устройства честотната лента не винаги е толкова добра, колкото на настолния компютър. Ако сте в бавна 3G мрежа, нещата могат да се заредят много по-бавно, отколкото в Wi-Fi точка за достъп. Дори за Wi-Fi връзки, много мобилни браузъри обработват по-бавно от настолните компютри. Така че, когато създаваме мобилни сайтове, те трябва да бъдат бързи и отзивчиви.

От тази глава нататък ще започнем да въвеждаме и HTML5 функции. HTML5 е набор от технологии, състоящ се от семантика, нови правила и свойства на CSS и нови API на JavaScript, които могат да се използват за изграждане на по-добре структурирани уеб страници и мощни уеб приложения. Следват осемте основни функции на HTML5:

  • Семантика
  • Офлайн и съхранение
  • Достъп до устройството
  • Свързаност
  • Мултимедия
  • 3D, графика и ефекти
  • Изпълнение и интеграция
  • CSS3

Не всички тези функции са изключително за мобилни устройства; някои са свързани по-скоро с мобилната мрежа, докато други са по-общи както за мобилната мрежа, така и за настолната мрежа. Ще говорим за всяка от тези функции и ще видим как най-добре те биха могли да помогнат за нашето мобилно развитие.


Въз основа на примерите, създадени с помощта на новите семантични тагове и CSS3, ще обсъдим много начини да използваме напълно това, което предлага мобилният браузър и как да изградим уебсайт, използвайки тези уникални функции.

Изграждане на страници с помощта на HTML5 семантика

Целево устройство: кръстосан браузър

HTML5 представи по-богат набор от тагове; тези тагове придават значение на структурата. Семантиката е основен аспект на HTML5.

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

Приготвям се

Първо, нека създадем нов HTML файл и го наименуваме ch04r01.html. Нека създадем измислен сайт за музика.

Как да го направим...

В нашия HTML документ въведете следния код:

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> style> / style> / head> body> header> h1> first.fm/h1> / header> div id = "main"> h2> Pages / h2> nav> ul> li> a href = "music.html"> Музика / a> / li> li> a href = "radio.html"> Радио / a> / li> li> a href = "events.html"> Събития / a> / li> li> a href = "charts.html "> Charts / a> / li> li> a href =" community.html "> Общност / a> / li> li> a href =" help.html "> Помощ / a> / li> li> a href = "about.html"> About / a> / li> / ul> / nav> / div> footer> small> © 2011 first.fm/small> / footer> / body> / html>

Как работи...

The заглавна част елемент често се използва за h1 да се h6 елементи; той може да се появи като глава на цялата страница или като глава на всеки елемент на ниво блок. Често съдържа заглавие, подзаглавие или слоган.


заглавка> елемент:

заглавка> / заглавка>

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

Не всички групи връзки на дадена страница трябва да са в навигационен елемент. Това са само групи от първични или вторични навигационни връзки.По-специално, за долните колонтитули е обичайно да има списък с връзки към различни ключови части на даден сайт, но елементът на долния колонтитул е по-подходящ в такива случаи.

nav> елемент:

nav> ul> li> a href = "music.html"> Музика / a> / li> / ul> / nav>

The долен колонтитул елемент представлява „долния колонтитул“ на документ или раздел на документ. Долният колонтитул обикновено съдържа метаданни за заграждащата си секция, като например кой го е написал, връзки към свързани документи, данни за авторски права и т.н. Информацията за контакт за раздела, даден в долния колонтитул, трябва да бъде маркирана с помощта на адресния елемент.


долен колонтитул> елемент:

footer> small> © 2011 first.fm/small> / footer>

The малък елемент може да се използва за дребен шрифт. Не е предназначен да представи основния фокус на страницата. Малкият елемент не трябва да се използва за дълги параграфи или раздели на текста. Предназначен е само за кратък текст като информация за авторските права.

малък> елемент:

малък> © 2011 first.fm/small>

Има още...

Семантиката е нещо повече от богат набор от тагове. Това, от което се нуждаем, е повече от просто по-смислени тагове. За да надхвърлим етикетите, бихме могли да добавим и допълнителна семантика, която може да се чете машинно; данни, които браузърите, скриптовете или роботите могат да разберат, позволявайки по-полезна, управлявана от данни мрежа както за програмите, така и за вашите потребители. Тези семантики са: RDFa (Framework Description Resource - in - attributes), микроданни, и Микроформати.

RDFa

RDFa предоставя набор от машинно четими HTML атрибути. Използвайки RDFa, авторите могат да превърнат съществуващата четима от човека информация в машинно четими данни, без да повтарят съдържание. Най-новите спецификации могат да бъдат намерени на: w3.org/TR/rdfa-in-html.

Микроданни

Микроданните използват атрибути, за да определят групи от двойки име-стойност на данни. Можете да научите повече за това на адрес: html5doctor.com/microdata.

Можете да се задълбочите в микроданните, като прочетете работния проект на W3C на адрес: w3.org/TR/microdata.

Можете също да прочетете чернова на редактора на W3C на адрес: dev.w3.org/html5/md. Микроформати
Микроформатите са предназначени за първата на човека и втората на машината. В момента има 34 спецификации за микроформати, някои са публикувани, а други са чернови. Можете да научите повече за тях на адрес: html5doctor.com/microformats.

Използване на CSS3 функции за прогресивно подобрение

Целево устройство: кръстосан браузър

CSS3 подобрява уеб приложенията и уебсайтовете, използвайки широк спектър от стилове и ефекти. С CSS3 може да се създаде набор от богат потребителски интерфейс, който е без изображения. На мобилни устройства по-малкото изображения означава по-бързо зареждане, което е един от начините за повишаване на производителността. С широката поддръжка на CSS3 в повечето съвременни браузъри за смартфони и polyfills за резервни копия (polyfills се използват като резервни, за да накарат функциите на HTML5 да работят в браузъри, които не поддържат HTML5 отначало), не просто е безопасно, но е необходимо да започнете да използвате CSS3!

Приготвям се

Нека стилизираме страницата, създадена в предишния пример. Първо копие ch04r01.html и го преименувайте като ch04r02.html.

Как да го направим...

Добавете следните правила за стил:

стил> тяло {поле: 0; подплата: 0; семейство шрифтове: Arial; фон: #ccc; } заглавка {text-shadow: 0 1px # 000; фон: # ff3019; / * Стари браузъри * / фон: -moz-линеен градиент (отгоре, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * FF3.6 + * / фон: -webkit-градиент (линеен, ляв горен, ляв отдолу, цветен стоп (0%, # ff3019), цветен стоп (20%, # cf0404), цветен стоп ( 100%, # ff3019)); / * Chrome, Safari4 + * / фон: -webkit-linear-gradient (отгоре, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * Chrome10 +, Safari5.1 + * / фон: -o-линеен градиент (отгоре, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * Opera11.10 + * / фон: -ms-линеен градиент (отгоре, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * IE10 + * / филтър: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# ff3019’, endColorstr = ’# ff3019’, GradientType = 0); / * IE6-9 * / фон: линеен градиент (отгоре, # ff3019 0%, # cf0404 20%, # ff3019 100%); / * W3C * /} h1 {подложка: 0.5em 0.2em; марж: 0; размер на шрифта: 18px; цвят: бял; } h2 {text-shadow: 0 1px #FFFFFF; фон: #eeeeee; / * Стари браузъри * / фон: -moz-linear-gradient (отгоре, #eeeeee 0%, #cccccc 100%); / * FF3.6 + * / background: -webkit-gradient (линеен, ляв отгоре, вляво отдолу, спиране на цвета (0%, # eeeeee), спиране на цветовете (100%, # cccccc)); / * Chrome, Safari4 + * / фон: -webkit-linear-gradient (отгоре, #eeeeee 0%, # cccccc 100%); / * Chrome10 +, Safari5.1 + * / фон: -o-линеен градиент (отгоре, #eeeeee 0%, # cccccc 100%); / * Opera11.10 + * / фон: -ms-линеен градиент (отгоре, #eeeeee 0%, # cccccc 100%); / * IE10 + * / филтър: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# eeeeee’, endColorstr = ’# cccccc’, GradientType = 0); / * IE6-9 * / фон: линеен градиент (отгоре, #eeeeee 0%, # cccccc 100%); / * W3C * / подложка: 0.5em 0.2em; марж: 0; размер на шрифта: 16px; цвят: # 000; } nav ul {border-top: 1px solid #fff; list-style-type: няма; подплата: 0; марж: 0; } nav li {подложка: 0.5em 0.2em; марж: 0; фон: #AFAFAF; граница-дъно: 1px плътно #fff; } nav li a {височина: 20px; дисплей: блок; декорация на текст: няма; цвят: бял; } / стил>

Изпълнявайки този код в браузъра, ето какво можем да видим:

Как работи...

В този пример използвахме CSS3 градиенти за стилизиране на заглавния елемент. Традиционно, за да създадете градиент като предишния пример, ще трябва да използвате Photoshop или Illustrator, но сега можете да го създадете, използвайки чисто CSS!

фон: #eeeeee; / * Стари браузъри * / фон: -moz-linear-gradient (отгоре, #eeeeee 0%, #cccccc 100%); / * FF3.6 + * / background: -webkit-gradient (линеен, ляв отгоре, вляво отдолу, спиране на цвета (0%, # eeeeee), спиране на цветовете (100%, # cccccc)); / * Chrome, Safari4 + * / фон: -webkit-linear-gradient (отгоре, #eeeeee 0%, # cccccc 100%); / * Chrome10 +, Safari5.1 + * / фон: -o-линеен градиент (отгоре, #eeeeee 0%, # cccccc 100%); / * Opera11.10 + * / фон: -ms-линеен градиент (отгоре, #eeeeee 0%, # cccccc 100%); / * IE10 + * / филтър: progid: DXImageTransform.Microsoft.gradient (startColorstr = ’# eeeeee’, endColorstr = ’# cccccc’, GradientType = 0); / * IE6-9 * / фон: линеен градиент (отгоре, #eeeeee 0%, # cccccc 100%); / * W3C * /

Разглеждайки всяко гореспоменато правило, можем да видим, че различните браузъри използват различни CSS правила за градиенти. Има шест различни варианта, само за да се уверите, че е съвместим с различни браузъри. Сигурно си мислите: „О, човече, грижата за всеки браузър отнема доста време“. Не се притеснявайте, това правило не се въвежда ръчно. The Краен CSS генератор на градиенти идва на помощ! Мощен подобен на Photoshop CSS редактор на градиенти от ColorZilla може да ви помогне да направите безболезнено създаването на CSS3 градиенти:

colorzilla.com/gradient-editor

Има още...

Ако вземете под внимание IE9 и по-долу, CSS3 PIE може да се използва за поддръжка.

След изтегляне PIE.htc, включете го във вашия CSS, като използвате:

-pie-background: линеен градиент (отгоре, #eeeeee 0%, # cccccc 100%); / * PIE * / поведение: url (PIE.htc);

Поддържаните функции включват:

  • граница-радиус
  • кутия-сянка
  • граница-изображение
  • CSS3 фонове (-пие-фон)
  • Градиенти
  • RGBA стойност на цвета
  • Персонализирани свойства на PIE

Разбиране на CSS3 градиенти

Джефри Уей, редактор в nettuts, има отлична статия за CSS3 градиентите. Можете да го видите на адрес: net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients.

CSS3, моля!

CSS3 Please !, от Paul Irish, има най-новия синтаксис на градиенти и много други CSS3 функции на адрес: css3please.com.

Прилагане на отзивчив дизайн

Целево устройство: кръстосан браузър

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

И така, защо се нуждаем от отзивчив уеб дизайн?

Когато прилагаме фиксирано оформление на уеб страница на настолен компютър, често има празни пространства отляво или отдясно на екрана в зависимост от размера на екрана на браузъра. Мобилните браузъри също се предлагат с различни размери и с ограничено пространство за изглед, всеки пиксел е жизненоважен, така че е важно да се използва всеки наличен на екрана пиксел. За да се елиминират ненужните бели пространства отляво или отдясно на страницата, се използва отзивчив дизайн.

Как медийните заявки биха могли да помогнат с отзивчив дизайн?

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

Приготвям се

В този пример ще използваме HTML5 polyfill с име response.js. Създаден е от Скот Джел (от екипа на jQuery Mobile). Намира се на ch04_code / js в изходния код.

Как да го направим...

Първо, нека създадем HTML документ с име ch04r03.html. Въведете следния код в HTML:

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> link rel = "styleheet" href = "css / style.css? v = 1"> script> Modernizr.mq ('(min-width: 0)') || document.write ("scriptsrc = 'js / response.min.js'> x3C / script>") / script> / head> body> header> h1> first.fm/h1> / header> div id = "main "> h2> Страници / h2> nav> ul> li> a href =" music.html "> Музика / a> / li> li> a href =" radio.html "> Радио / a> / li> li> a href = "events.html"> Събития / a> / li> li> a href = "charts.html"> Графики / a> / li> li> a href = "community.html"> Общност / a> / li> li> a href = "help.html"> Помощ / a> / li> li> a href = "about.html"> За / a> / li> / ul> / nav> / div> footer> small > © 2011 first.fm/small> / footer> / body> / html>

Ако изобразите страницата на мобилно устройство, тази страница ще изглежда точно по същия начин като предишната рецепта. Но ако го направите в браузър за настолни компютри, той ще изглежда подобно на следното:

Как работи...

В горната част на файла използвахме Modernizr за първо откриване дали медийните заявки се поддържат от текущия браузър. Ако не, ще заредим response.min.js:

script> Modernizr.mq (’(min-width: 0)’) || document.write ("script src =’ js / response.min.js ’> x3C / script>") / script>

По време на писането трябва да имате / * / mediaquery * / коментирайте в края на правилото, за да работи. Това може да бъде подобрено в бъдещите версии на response.js:

Екран само за @media и (мин. ширина: 800px) {} / * / mediaquery * /

Има още...

На сайта Mobile Boilerplate обясних допълнително за медийни заявки и можете да намерите слайдовете на адрес: html5boilerplate.com/mobile.

Анди Кларк създаде 320 и нагоре, което също се основава на идеята за отзивчив дизайн. Можете да го изтеглите на адрес: stuffandnonsense.co.uk/projects/320andup.

Оптимизиране на зареждането на скриптове за polyfills

Целево устройство: кръстосан браузър

Зареждането на скриптове е важно за всеки браузър, но повече за мобилните устройства поради ниската честотна лента. Modernizr се предлага с решение за динамично зареждане.

Приготвям се

Първо, нека създадем HTML документ и го наименуваме ch03r04.html.

Как да го направим...

Въведете следния код във вашия редактор на код и го стартирайте.

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> script src = "js / modernizr.custom.54685.js"> / script> style> / style> / head> body> header> h1> Вашето местоположение / h1> / header> div id = "main"> Вашето гео местоположение е: span id = "geo"> / span> / div> script src = "// ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery. js"> / script> script> yepnope ({test: Modernizr .geolocation, nope: ['js / geolocation.js'], пълен: function () {navigator.geolocation.getCurrentPosition (function (position) {document.getElementById ('geo'). innerHTML = position.coords.latitude + ", "+ position.coords.longitude;});}}); / script> / body> / html>

Как работи...

По време на писането, Modernizr 2.0 Preview беше в бета версия 1. В тази бета версия има две страхотни нови функции. Едната е, че можете да изберете да персонализирате функциите, които искате да откриете. Другата чудесна характеристика е, че можете да имате yepnope.js (също известен като Modernizr.load от Алекс Секстън и Ралф Холцман). Yepnope.js осигурява динамичен JavaScript loader и можете да научите повече за него в Има още раздел на тази глава.

С Modernizr можем първо да открием дали дадена функция вече съществува или не в текущия потребителски агент:

тест: Modernizr.geolocation

Ако не съществува, ще заредим shim geolocation.js използвайки yepnope. И нататък
завършване, можем да добавим географската ширина и дължина:

yepnope ({тест: Modernizr.geolocation, nope: [’js / geolocation.js’], пълен: функция () {...});

Има още...

Има няколко незадължителни ресурси, които ще бъдат полезни за разработчиците. Modernizr test suite е един от тях. Полезно е да помогнете на разработчиците с един поглед да разберат какви функции се поддържат на определено устройство. Можете да научите повече на:

modernizr.github.com/Modernizr/test/index.html

yepnope

yepnope е асинхронен условен зареждащ ресурс, който е супер бърз и ви позволява да зареждате само скриптовете, от които се нуждаят вашите потребители. За да научите повече за това, отидете на:

yepnopejs.com.

Прилагане на откриване на потребителски агент

Целево устройство: кръстосан браузър

Когато разработвате мобилен сайт, е добре да имате разпознаване на потребителски агент. Това може да ви помогне със скрипт за пренасочване или да ви помогне да определите дали искате да заредите / не да заредите нещо въз основа на потребителски агент.

Приготвям се

Първо, нека видим как бихте могли да разберете дали потребителят може да пренасочи от един сайт към друг въз основа на откриване на потребителски агент. Има няколко начина да направите това: Можете да направите това в конфигурацията на сървъра, във вашия език за програмиране от страна на сървъра или да го използвате от интерфейсния JavaScript.

Как да го направим...

Можете да изтеглите скрипта за пренасочване от: detemobilebrowser.com. Той се предлага с много различни версии. В този пример нека използваме конфигурацията на Apache .htaccess.

Как работи...

След като изтеглите файла и го отворите, ще видите скрипта, както следва:

RewriteEngine на RewriteBase / RewriteCond% {HTTP_USER_AGENT} android | avantgo | blackberry | blazer | comp al | .... | нагоре . (Браузър | връзка) | vodafone | wap | windows (ce | телефон) | xda | xiino [ NC, ИЛИ] RewriteCond% {HTTP_USER_AGENT} ^ (1207 | 6310 | 6590 | .... | your | zeto | zte -) ​​[NC] RewriteRule ^ $ http://example.com/mobile [R, L]

За да пренасочите сайт за настолни компютри към мобилен сайт, можете да промените http://example.com/mobile до адреса на вашия сайт.

Има още...

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

При изграждането на сайта Mobile Boilerplate използвах версията на JavaScript на скрипта за откриване, за да определя дали сайтът трябва да изобрази вграденото съдържание въз основа на потребителския агент (мобилен или настолен):

if (! jQuery.browser.mobile) {...}

С този скрипт за настолни браузъри слайдовете се зареждат и показват, както следва:

На мобилната версия тя не се показва:

Методи за откриване на мобилен браузър

Статия за мобилните устройства обяснява различни методи за откриване на мобилни браузъри:
mobile.tutsplus.com/tutorials/mobile-web-apps/mobile-browser-detection.

Добавяне на балонче за мобилни отметки към началната страница

Целево устройство: iOS

В предишните глави говорихме за възможността да маркирате вашия сайт на определени мобилни устройства. Въпреки че това е доста готина функция за приближаване на уеб приложенията до родните приложения, има един проблем с него: няма API, който да използвате, за да извикате действието на отметката, така че много потребители просто не знаят за такова функция на техния телефон. За да се справи с този проблем, няколко рамки предоставят балонче с отметки, използвайки CSS и JavaScript. Скриптът добавя промоционален балон в долната част на страницата на вашето уеб приложение, като моли потребителите да маркират уеб приложението към началния екран на устройството си.

Приготвям се

Както споменахме, много рамки предоставят тази функция, но за по-простота, нека използваме такава, която е самостоятелна. Google пусна библиотека с отворен код, наречена The Mobile Bookmark Bubble за тази задача. Първо, нека го изтеглим на адрес: code.google.com/p/mobile-bookmark-bubble.

Как да го направим...

Библиотеката се доставя с sample.js. Просто включете и двете bookmark_bubble.js и sample.js във всяка създадена уеб страница; след това ще видите нещо, както следва:

Как работи...

Библиотеката използва локално хранилище HTML5, за да проследи дали промоцията вече е била показана, за да се избегне постоянно заяждане на потребителите.Текущата реализация на тази библиотека е насочена специално към Mobile Safari, уеб браузъра, използван на устройства iPhone и iPad.

Изграждане на страница за контакт с текстови области и формули за автоматично израстване

Целево устройство: кръстосан браузър

В родните приложения, като SMS, текстовата област се увеличава автоматично. В мобилната мрежа, ако създадете textarea, ще разберете, че това е фиксиран размер. Когато въведените от вас редове текст надхвърлят textarea височина, става много трудно да се види текстът. В този пример ще видим как бихме могли да създадем textarea който нараства, когато пишете в повече редове.

Приготвям се

Първо, нека създадем HTML документ и го наименуваме ch04r05.html. В този пример ще използваме helper.js в Mobile Boilerplate: https://github.com/h5bp/mobile-boilerplate

Как да го направим...

Въведете този код във файла:

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> style> # контакт {ширина: 220px; височина: 40px;} / style> / head> body> header> h1> Форма за контакт / h1> / header> div id = "main"> p> Въведете съобщението, за да го видите autogrow / p> textarea id = "contact" > / textarea> / div> script src = "// ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery. js"> / script> script src = "// github.com/shichuan/mobile -html5 -iletplate / raw / master / js / mylibs / helper.js "> / script> script> var contact = document.getElementById (" contact "); MBP.autogrow (контакт); / script> / body> / html>

Следва екранна снимка на това как се изобразява в Palm webOS:

Как работи...

В скрипта имаме слушател на ключови събития. Това ще открие дали textarea височината се е променила. Измерваме височината на съдържанието и ако се промени, ще променим CSS стила на textarea за увеличаване на височината.

Има още...

Оригиналната концепция е от блога на Google Code. Можете да прочетете повече за това на:
googlecode.blogspot.com/2009/07/gmail-for-mobile-html5-series.html.

Изработване на бутони с незабавен отговор

Целево устройство: iOS, Android

В браузъра на мобилно устройство реакцията на бутоните може да бъде малко по-бавна, отколкото в собственото приложение. В мобилните браузъри има тъчстарт събитие. Като открие това събитие вместо събитието за щракване, ще направи кликването по-бързо.

Приготвям се

В този пример ще използваме функция в Mobile Boilerplate. Създайте файл с име ch04r06.html.

Как да го направим...

Следният код ще създаде формуляр с бутон за изпращане:

! doctype html> html> head> title> first.fm/title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> style> # контакт {ширина: 220px; височина: 40px; } / style> / head> body> header> h1> Форма за контакт / h1> / header> div id = "main"> textarea id = "contact"> / textarea> br /> button id = "btn"> МОМЕНТАЛЕН бутон !!! / button> br /> span id = "result"> / span> / div> footer> small> © 2011 first.fm/small> / footer> script src = "// ajax.googleapis.com/ajax /libs/jquery/1.5.1/jquery. js "> / script> script src =" // github.com/shichuan/mobile-html5-boilerplate/raw/ master / js / mylibs / helper.js "> / script > скрипт> var btn = document.getElementById ("btn"); MBP.fastButton (btn, showForm); функция showForm () {$ ("# result"). html ("Благодарим ви, че изпратихте, скоро ще се свържем с вас!"); } / script> / body> / html>

Как работи...

По-долу е извадката от функцията за бърз бутон и тук ще видим как функционира функцията.

В горната част имаме дефинирана основна функция. Това се използва само ако addEventListener се поддържа, където слуша тъчстарт и щракнете събития:

MBP.fastButton = функция (елемент, манипулатор) {this.element = елемент; this.handler = манипулатор; if (element.addEventListener) {element.addEventListener (’touchstart’, this, false); element.addEventListener (’click’, this, false); }}; MBP.fastButton.prototype.handleEvent = функция (събитие) {превключвател (event.type) {случай ’touchstart’: this.onTouchStart (събитие); почивка; case ’touchmove’: this.onTouchMove (събитие); почивка; дело ’touchend’: this.onClick (събитие); почивка; case ’click’: this.onClick (събитие); почивка; }};

The onTouchStart метод се използва за слушане touchmove и докосване събития. stopPropagation се използва за спиране на разпространението на събитието в слушателите, така че да спре да се издига:

MBP.fastButton.prototype.onTouchStart = функция (събитие) {event.stopPropagation (); this.element.addEventListener (’touchend’, this, false); document.body.addEventListener (‘touchmove’, this, false); this.startX = event.touches [0] .clientX; this.startY = event.touches [0] .clientY; this.element.style.backgroundColor = "rgba (0,0,0, .7)";};

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

MBP.fastButton.prototype.onTouchMove = функция (събитие) {if (Math.abs (event.touches [0] .clientX - this.startX)> 10 || Math.abs (event.touches [0] .clientY - this .startY)> 10) {this.reset (); }};

Следният код предотвратява призрачни кликвания и извиква действителния манипулатор на кликвания:

MBP.fastButton.prototype.onClick = функция (събитие) {event.stopPropagation (); this.reset (); this.handler (събитие); if (event.type == ’touchend’) {MBP.preventGhostClick (this.startX, this.startY); } this.element.style.backgroundColor = "";}; MBP.fastButton.prototype.reset = function () {this.element.removeEventListener (’touchend’, this, false); document.body.removeEventListener (‘touchmove’, this, false); this.element.style.backgroundColor = "";};

Има още...

Можете да прочетете повече за бързия бутон в блога на Google. Той обяснява подробно предисторията и теорията зад идеята на адрес: code.google.com/mobile/articles/fast_buttons.html.

Скриване на WebKit хром

Целево устройство: iOS, Android

Лентата за URL адреси в горната част на мобилното Safari на iOS и Android използва голямо пространство. Много разработчици ще го скрият при зареждане на страници, тъй като мобилните недвижими имоти са ограничени. Всеки пиксел е важен и, скривайки URL лентата, ви помага да използвате всеки пиксел на екрана, за да увеличите максимално областта на показване.

Приготвям се

Първо, нека създадем HTML документ и го наименуваме ch04r07.html.

Как да го направим...

Въведете този код:

! doctype html> html> head> title> Mobile Cookbook / title> meta charset = "utf-8"> meta name = "viewport" content = "width = device-width, initial-scale = 1.0"> style> html, body, header, footer {padding: 0; марж: 0; } header {височина: 40px; фон: # BFB840; дисплей: блок; } #main {височина: 350px; фон: # F2CB67; } долен колонтитул {височина: 40px; фон: # DB5E31; дисплей: блок; } / style> / head> body> header> header / header> div id = "main"> main / div> footer> footer / footer> script src = "// ajax.googleapis.com/ajax/libs/jquery/ 1.5.1 / jquery. Js "> / script> script src =" // github.com/shichuan/mobile-html5-boilerplate/raw/ master / js / mylibs / helper.js "> / script> script> // MBP.hideUrlBar (); / script> / body> / html>

Сега, ако го направите в браузъра, той ще изглежда така:

Сега коментирайте следния ред:

MBP.hideUrlBar ();

Направете отново съдържанието и можете да видите, че хромът вече е скрит, което позволява на долния колонтитул да се показва:

Как работи...

По-долу е скриптът в Boilerplate:

MBP.hideUrlBar = function () {var win = window, doc = win.document; // Ако има хеш или addEventListener е недефиниран, спрете тук (! Location.hash ||! Win.addEventListener) {// превъртете до 1 прозорец.scrollTo (0, 1); var scrollTop = 1, // нулиране на 0 на bodyready, ако е необходимо bodycheck = setInterval (функция () {if (doc.body) {clearInterval (bodycheck); scrollTop = "scrollTop" в doc.body? doc.body.scrollTop : 1; win.scrollTo (0, scrollTop === 1? 0: 1);}}, 15); win.addEventListener ("load", function () {setTimeout (function () {// нулиране за скриване на лентата на addr при onload win.scrollTo (0, scrollTop === 1? 0: 1);}, 0);} , false); }};

Той открива дали в URL адреса има хеш. Ако има, ще спрем да изпълняваме скрипта, защото това означава, че има вградена котва. Ако няма хеш, ще изчакаме секунда и ако няма превъртане, Android използва 1 px y pos за скриване, докато в iOS е 0. Сценарият нормализира двете. Направен е от Скот Джел на адрес: gist.github.com/1183357.

Изграждане на мобилна карта на сайта

Целево устройство: кръстосан браузър

Много разработчици са запознати с Google Sitemap. Като най-голямата търсачка е много важно да се уверим, че тя получава нашето съдържание. За целите на SEO за мобилни устройства Google измисли Мобилна карта на сайта. Google препоръчва на хората да актуализират своите мобилни карти на сайта до формата, описан по-нататък.

Приготвям се

Първо, нека създадем XML документ и го наименуваме sitemap.xml.

Как да го направим...

Можем да добавим следния код към XML документа. За конкретния сайт, който имате, URL трябва да бъде URL на вашите страници:

? xml version = "1.0" encoding = "UTF-8"?> var13 -> urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9" xmlns: mobile = "http: // www .google.com / schemas / sitemap-mobile / 1.0 "> url> loc> http://mobile.example.com/article100.html/loc> mobile: mobile /> / url> / urlset>

Всички URL адреси са затворени вътре loc> / loc>.

Уверете се, че сте включили мобилен: мобилен />. В противен случай сайтовете няма да бъдат обходени правилно.

Как работи...

Картата на сайта следва определена схема; гореспоменатата XML схема се използва, за да съобщи на търсачката на Google местоположението на мобилната уеб страница. Обикновено, ако даден сайт е изграден с помощта на CMS система, трябва да има начин за автоматично генериране на URL адресите и всички те да бъдат изброени в loc> / loc>.

Има още...

Мобилната карта на сайта не може да съдържа URL адреси само за десктоп. Той обаче може да съдържа съдържание както за настолни компютри, така и за мобилни устройства.

За уебсайтове със специално мобилно съдържание и специален URL адрес можете да насочвате потребителите от example.com да се m.example.com. В този случай използвайте пренасочване 301 както за потребителите, така и за Googlebot-Mobile.

Ако обслужвате всички видове съдържание от example.com, това не се счита за прикриване от Google.

Google и удобно за мобилни устройства изграждане на сайтове

На сайта на Google Webmaster има публикация в блог за това как да направите уебсайтовете удобни за мобилни устройства: googlewebmastercentral.blogspot.com/2011/02/making-websites-mobile-friendly.html.

Индексиране на Google и мобилни сайтове

Има още един блог на сайта на Google Webmaster, който разказва за това как да помогнете на Google да индексира вашия мобилен сайт: googlewebmastercentral.blogspot.com/2009/11/help-google-index-your-mobile-site.html.

Предишна Статия

Groove е в изкуството: плакати с телевизионни и филмови танци
Следваща Статия

Вътре в технологичната настройка на свободна практика
Препоръчан
Фигурата на Adobe Hovering Art Director е тук, за да съсипе деня ви
Открийте

Фигурата на Adobe Hovering Art Director е тук, за да съсипе деня ви

Юни 2024
Още през март Adobe стартира поредица от весели видео спотове като част от кампанията си Hovering Art Director. Забавлявайки се с недостатъците на микроуправляващите и самоувеличаващи се арт директори...
Открийте бъдещето на дизайна в най-новите компютърни изкуства
Открийте

Открийте бъдещето на дизайна в най-новите компютърни изкуства

Юни 2024
Независимо дали започвате да се занимавате с креативна индустрия или сте опитен професионалист с дългогодишен опит под вас, със сигурност ще намерите нещо за вас в първата специална специалност за обу...
Авторът на „Игра на тронове“ разкрива любимото си изкуство
Открийте

Авторът на „Игра на тронове“ разкрива любимото си изкуство

Юни 2024
Тъй като телевизионният сериал „Игра на тронове“ щрака по петите на книгите, един сигурен начин да ядосате Джордж R R Martin е да го попитате кога ще излезе следващата книга. (Последната новина е, че ...