book

Mobile HTML5

by Estelle Weyl

November 2013

Intermediate to advanced

480 pages

14h 4m

English

O'Reilly Media, Inc.

Read now

Unlock full access

Native Applications Versus Web ApplicationsPep Talk (or Leaving Old Internet Explorer Behind)The Browser LandscapeWeb Applications Versus Native Applications: A Brief HistoryRelease of the SDK: Beginning of Third-Party ApplicationsWhat’s New(t)? New Elements and APIsSemantic Grouping TagsWeb FormsSVG and CanvasVideo and AudioGeolocation APIOffline Content and StorageOther APIsWhat’s New in CSS?Web FontsMobile-Specific ConsiderationsWhy This Book?Screen SizeUser GoalsWhat’s in This BookConventions Used in This BookUsing Code ExamplesSafari® Books OnlineHow to Contact UsAcknowledgments
CubeeDoo: HTML5 Mobile GameDevelopment ToolsText EditorBrowserDebugging ToolsDesktop DebuggersMobile viewportRemote DebuggingAndroid debugging toolsweinreUsing weinreAdobe Edge Inspect and GhostlabJavaScript debugging with AardwolfBlackBerry 10 DebuggerTesting ToolsEmulators and SimulatorsOnline ToolsPhonesBrowser labsiOSAndroidWindowsBlackBerryNokiaKindleWebOSAutomated Testing
HTML5 SyntaxElementsAttributesGlobal and Internationalization AttributesidclasstitlestylelangdirHTML 4 Attributes Made Core in HTML5tabindexaccesskeyNew to HTML5: Global Accessibility and Interactive AttributeshiddencontenteditablecontextmenudraggabledropzonespellcheckARIA accessibility attributesCustom data attributes with data-*Dataset APIitemid, itemprop, itemref, itemscope, and itemtypeHTML Element/Attribute SyntaxSelf-Closing ElementsBest PracticesThe Required ComponentsThe Document Type DeclarationThe <html> elementThe <head> elementThe <title> elementThe <body> elementElements Found in the <head><meta>: Adding Metadata<meta charset=“UTF-8”>Description meta tagKeyword meta tag<meta http-equiv=“. . .”>Mobile Meta TagsViewport meta tagMobile Vendor-Specific Valuesapple-mobile-web-app-capableapple-mobile-web-app-status-bar-styleformat-detectionThe <base> of Your Web Page<link>s Aren’t Just for StylesheetsAdd <link>s for your stylesheetsAttributes of the <link> tagThe media attributeThe rel attribute<style><style> and mobile performance: standards anti-patternAdding a <script> to your web pageJavaScript performance tipsWhen a user has JavaScript turned off, <noscript>A <body> of elements
Sectioning Elements in HTML5<section><article><section> Versus <article><nav><aside><header><footer>CubeeDoo Header and FooterNot New, but Not Often Used: <address>Grouping Content: Other New HTML5 Elements<main><figure> and <figcaption><hr><li> and <ol> Attribute ChangesText-Level Semantic Elements New to HTML5<mark><time><rp>, <rt>, and <ruby><bdi><wbr>Changed Text-Level Semantic Elements<a>Mobile-specific link handlingText-Level Element Changes from HTML 4Unchanged ElementsEmbedded ElementsChanges to Embedded Elements<iframe><img><object><param><area><embed>Interactive Elements<details> and <summary><menu> and <menuitem><menuitem>All of XHTML Is in HTML5, Except...In Conclusion
Attributes of <input> (and Other Form Elements)The type AttributeThe required AttributeMinimum and Maximum Values: The min and max AttributesThe step AttributeThe placeholder AttributeThe pattern AttributeThe readonly AttributeThe disabled AttributeThe maxlength AttributeThe size AttributeThe form AttributeThe autocomplete AttributeThe autofocus Attribute<input> Types and AttributesRe-introduction to Input Types You Think You KnowText: <input type=“text”>Password: <input type=“password”>Checkbox: <input type=“checkbox”>Radio: <input type=“radio”>Submit: <input type=“submit”>Reset: <input type=“reset”>File: <input type=“file”>Hidden: <input type=“hidden”>Image: <input type=“image”>Button: <input type=“button”>Styling Input TypesNew Values for <input> TypeEmail: <input type=“email”>URL: <input type=“url”>Telephone: <input type=“tel”>Number: <input type=“number”>Range: <input type=“range”>Search: <input type=“search”>Color: <input type=“color”>Date and Time Input TypesDate: <input type=“date”>Datetime: <input type=“datetime”>Datetime-local: <input type=“datetime-local”>Month: <input type=“month”>Time: <input type=“time”>Week: <input type=“week”>Form ValidationEasy UI Improvements with CSSControlling validation bubblesStyling to enhance usabilityNew Form ElementsThe <datalist> Element and the list AttributeGraceful degradation of the <datalist>The <output> elementCubeeDoo<meter><progress><keygen>Other Form ElementsThe <form> element<fieldset> and <legend><select>, <option>, <optgroup><textarea><button>The <label> ElementIn Conclusion
HTML5 Media APIsSVGIncluding SVG in Your DocumentsClown Car Technique: SVG for Responsive Foreground ImagesLearning SVGCubeeDoo SVGCanvasYour first <canvas><canvas> code exampleCanvas Versus SVGWebGLAudio/VideoMedia TypesAdding <video> to Your WebsiteAttributes of <video> and <audio>The <track> elementVideo and Audio and JavaScriptCubeeDooStyling VideoResponsive video sizingThings to know about <video> implementation
Offline Web ApplicationsAm I Even Connected to the Internet?Application CacheThe cache manifest fileUpdating the cacheLocal and Session StorageThe cookie comparisonLocalStorage to enhance mobile performanceCubeeDooclassListSQL/Database StorageWeb SQL methodsopenDatabase methodtransaction methodexecuteSQL() methodCubeeDoo high scores codeIndexedDBEnhanced User ExperienceGeolocationWeb WorkersMicrodataMicrodata versus microformatsMicrodata APICross-Document MessagingCORS: Cross-Origin Resource SharingSecurityAccessible Rich Internet Applications (ARIA)AccessibilityIn Conclusion
CSS: A Definition and SyntaxCSS SyntaxUsing External Stylesheets: <link> RevisitedThe media attributeMedia Querieswindow.matchMediaCSS Best Practices1. Minimize HTTP requests2. Use external stylesheets3. Normalize browsers with a CSS reset or normalizer4. Use the weakest specificity for ease of overwriting5. Don’t use inline styles or the !important modifierCSS SelectorsBasic SelectorsType selectorClass selectorID selectorMore CSS3 SelectorsGeneral SelectorsUniversal selector: *Type selector: EClass selector: .classID selector: #idUsing the SelectorsRelational Selectors: Rules Based on Code OrderDescendant combinator: E FChild combinator: E > FAdjacent sibling combinator: E + FGeneral sibling combinator: E ~ FAttribute SelectorsCubeeDooPseudoclassesState PseudoclassesStructural PseudoclassesThe Math of the nth TypesEven and oddSingle elements:nth-of-type versus :nth-childNumber expressionsExerciseMore Pseudoclasses:target:lang(en):not(s), or the negation pseudoclassReal world examplePseudoelements::before and ::afterCubeeDooUnderstanding double-colon notationOther Selectors: Shadow DOMSpecificity Trumps Cascade: Understanding CSS SpecificityIn Conclusion
CSS Color ValuesHexadecimal Valuesrgb() SyntaxAdding Transparency with RGBAHue, Saturation, and Lightness: HSL()CMYKNamed ColorsCurrentColorBrowser Color ValuesWhich color syntax should I use?CSS Units of MeasurementCSS Length Valuesdpi, dpc, dppxCubeeDooAngles, Times, and FrequenciesCSS Angle MeasurementsDegreesGradsRadsTurnsTimesFrequenciesCubeeDooAvoiding TRouBLe: Shorthand Properties and Value DeclarationsIn Conclusion

CSS Box Model Propertiesborderborder-styleborder-colorMaking triangles with CSSborder-widthThe CSS Box Modelbox-sizingMarginsLearning CSS3border-radiusborder-radius for native-looking buttons on the iPhone and in CubeeDooCSS GradientsGradient Type: Linear or RadialRadial GradientsLinear GradientsGradient angles and directionsGradient colorsiPhone and CubeeDoo linear gradientsbackground-sizeDPI and background-sizeStripey GradientsRepeating Linear GradientsGradients in CubeeDooMultiple background imagesCandy buttons and hard stopsTools for gradientsShadowsText ShadowFitting Text with width, overflow, and text-overflowtext-overflow propertywhite-space propertyBox ShadowPutting It All Together: CubeeDoo
CSS TransitionsThe transition-property PropertyThe transition-duration PropertyThe transition-timing-function PropertyThe transition-delay PropertyThe Shorthand transition PropertyMultiple TransitionsCSS3 TransformsThe transform-origin PropertyThe transform Propertytranslate()translateX()translateY()scale()scaleX()scaleY()rotate()rotateX()rotateY()skew()skewX()skewY()Multiple Transformsmatrix()Transitioning Transformations3D Transform Functionstranslate3d()translateZ()scale3d()scaleZ()rotate3d()perspective()Other 3D Transform PropertiesThe transform-origin property revisitedThe perspective propertyThe transform-style propertyThe backface-visibility propertyPutting It All TogetherCSS3 AnimationKeyframesApplying animationsBouncing ball animationAnimating spritesCubeeDoo animationsTransitions, Animations, and Performance
Media Queries, Breakpoints, and Fluid LayoutsMultiple ColumnsBorder ImagesSetting Border Imagesborder-image-sourceborder-image-sliceborder-image-widthborder-image-outsetborder-image-repeatBorder-image shorthandFlexboxflexFeature Detection with @supportsResponsive MediaServing ImagesRetina®: high pixel-density displaysConnection speedbackground-sizeData URIsSpritesimage-set()Font iconsCSS Masking: Creating Transparent JPEGsClient Hints
Considerations Before You StartDesign ConsiderationsTools: Productivity ApplicationsEntertainment: Immersive ApplicationsFun entertainmentSerious entertainmentUtilityWhat Is Right for You?The Mobile Platform: Rich with PossibilitiesSmall ScreenLess MemoryManage memoryOne Window, One Application at a TimeMinimal DocumentationDevelopment ConsiderationsTargeting Mobile WebKitStatus BarNavigation BarUX of navigation barPage controlsNavigation bar size and colorStartup ImageHome Screen IconsMinimize Keyboard EntryBe SuccinctMake it ObviousMinimize Required InputMinimize TextOther User Experience Considerations
Scaling Down to Size@viewportTouch MeTouch AreasMouse Events, Touch EventsPointer eventsTouch eventsFeature detection for touch eventsPseudo or Not-So-Pseudo Click EventsTap highlight colorKill the selection dialogKill the images dialogKill panningonTouchEndTouching to scrollHardware AccessPhone Movement and DirectionDevice StatusNetwork connectionBatteryOther APIsNative Web Apps, Packaged Apps, and HybridsPhoneGap/Apache CordovaSencha TouchAppcelerator TitaniumTesting
Battery LifeUse Dark ColorsUse JPEGsReduce JavaScriptEliminate Network RequestsHardware AccelerationAvoid repaints and reflowsLatencyReduce the Number of HTTP RequestsBrowser cacheCombined JavaScript fileSingle stylesheetImage spritesImage compressionData URIs/inline imagesIcons and character setsInspecting network requestsReduce Size of RequestsMinify text-based assetsCompress binary filesGzip everythingReduce image sizeSkip the frameworkMinimize cookiesDefer third-party scriptsPerformance anti-patternsMemoryOptimize ImagesWeigh the benefits of CSSGPU benefits and pitfallsViewport: Out of sight does not mean out of mindMinimize the DOMMemory managementUI ResponsivenessTouch EventsAnimationIn Conclusion
CSS Selectors Level 3CSS Selector Cheat SheetCSS Selector SpecificityCSS Selectors Level 4

Content preview from Mobile HTML5

Introduction

We’re going to learn how to develop mobile web applications. Note the word “web.” This book focuses on web application development for mobile devices like Android, iPod, iPhone, BlackBerry, and tablets. This book is not about native application development requiring the iOS or Android SDK. Nothing we will learn is operating system specific.

Mobile web applications are websites or web applications that leverage the markup of desktop web applications with the functionality of touch-enabled devices. Web applications, whether accessed via a phone, tablet, or laptop, are built with HTML, CSS, and JavaScript, optionally with image, video, and audio assets and server-side technologies.

By upgrading to using newer HTML5, CSS3, and JavaScript features, we can create web applications with the look and feel of native applications. Because mobile web apps are web based, they are compatible with desktops, smartphones, tablets, and any other device that has a modern browser. Because our web applications are web based, we can distribute them directly to our users, with no need to be listed in the Apple App Store or Google Play, with their sometimes complex, expensive, and lengthy approval processes.

This book will teach you what you need to know to create applications that work in a browser using CSS3, HTML5,^[1] and JavaScript. This is about technologies you already know: technologies that are portable to most devices. Everything discussed is operating system agnostic.

In other words, ...