New Horizons Computer Learning Centers Unit 622 HTML5 Application Development Fundamentals Created by Ravinder Basra.

New Horizons Computer Learning Centers Unit 622 HTML5 Application Development Fundamentals
Created by Ravinder Basra

Aims and Objectives Aims Objectives
This unit has been designed to help a learner build an understanding of these topics: Manage the Application Life Cycle, Build the User Interface by Using HTML5, Format the User Interface by Using CSS, Code by Using JavaScript. Learners are expected to be able to demonstrate this understanding, so that on successful completion of this unit they will be able to: manage the Application Life Cycle, build the User Interface by Using HTML5, format the user interface by using CSS and code by Using JavaScript Objectives Know how to manage the application life cycle. Know how to build the user interface using HTML5. Know how to format the user interface using CSS Know how to code using JavaScript Be able to create HTML5 based web applications. Resources to use HTML5 templates Source Code examples

platform fundamentals
describe platform fundamentals Keywords Semantic Tags HTML5 APIs Modernizr UCertify - Lesson 1 Managing the Application Life Cycle Range - organise content (tables, lists, sections) HTML5 is current draft standard. HTML5 family includes: HTML5, Cascading Style Sheets version 3 (CSS3), JavaScript Audio and video tags: Embeds audio and video multimedia using the HTML5 markup tags <audio> and <video> Canvas: An HTML5 element that creates a container for graphics, and uses JavaScript to draw the graphics as needed Media queries: A CSS3 feature that detects the user’s type of screen and sizes the output accordingly New application programming interfaces (APIs): Give apps access to resources, such as files and webcams Geolocation: Uses JavaScript to detect the location (geographic positioning) of a client device, whether it’s a Windows Phone, Android phone, or a PC Modernizr: A JavaScript library that helps you deliver the new capabilities of HTML5 and CSS3 in older browsers modernizr-custom.js <script src="modernizr.min.js" type="text/javascript"></script> if (Modernizr.audio) { /* properties for browsers that support audio */ } else{ /* properties for browsers that does not support audio */ } Task 1 - HTML5 templates folder – use 1 template for all of class (colour purple), add semantic elements, change CSS, add Modernizr script 2 – Explore and builds 3. Older elements e.g. tables, lists

describe platform fundamentals Plan Design UI Update Manifest Write Code Build App Test and Debug Package Validate Deploy UCertify - Lesson 1 Managing the Application Life Cycle Plan - what type of app Design UI - how app appears App Manifest - properties of app Code - e.g. html5, CSS Build - convert to app Test - in multiple devices Package - container for all files Validate - validation program Deploy - Microsoft Windows Store, Android Marketplace Task Students remember these 9 stages

describe platform fundamentals UCertify - Lesson 1 Managing the Application Life Cycle Windows App Package Manifest File The following is an example of the default manifest file for a Windows Phone 8 app. appManifest.xml Windows App Package Manifest File

describe platform fundamentals UCertify - Lesson 1 Managing the Application Life Cycle Exploring Packaging and the Runtime Environment An application when launched is assumed to be in a runtime environment (RTE). In this environment, developers test their apps. The Windows runtime environment is known as Windows Runtime (WinRT). WinRT is the foundation of the of the Windows 8 operating system and provides functionality to Metro-style apps. It supports all apps written in any language that uses the Metro UI. Understanding the Host Process A process is a program that's being executed. An app always need a runtime host to begin. When we open Internet Explorer, a host process in the operating system controls the overall program execution. Each tab of the browser has its own process. So if there would be four running processes for four open tabs. Understanding the App Package and App Container The process of combining an application along with its files all together into a distributable file is known as app packaging. This makes app deployment easier and the result of this process is app package. App development packages are used to create app packages. We can relate packaging to archiving a folder containing files. Sending files and folders the way they are is little difficult, but when you compress them into a single archive file, sharing becomes easier. An app package can be acquired from an online app store and then be installed on a device. A runtime app container ensures the application executes in a separate memory space and prevents operating system from getting corrupted in case the application fails. A package can be installed, upgraded, and removed. It contains database tables, Web pages, code, and procedures and can also contain other packages. Elements of a package can be moved in or out of a package. As you move the package, all its contents are also moved because a package is in its own container. A package is referred to as an application when it has a user interface. It has different functionalities. A namespace is defined in order to keep the components separated so that there is no conflict.

describe platform fundamentals Keywords DOM BOM DOM Designed for HTML and Extensible Markup Language (XML). Allows programs and scripts to update content, structure, and styles on the fly. Is neither HTML nor JavaScript—it’s an API—but ties them together Exercises/Try It Yourself – go through exercises

application states Keywords localStorage sessionStorage Cookies
describe how to manage the state of an application Keywords localStorage sessionStorage Cookies Application Cache UCertify - Lesson 1 Managing the Application Life Cycle localStorage V sessionStorage Session state created when user first requests access to an application; state ends when the user closes the session. State management is the process of maintaining Web page information during multiple requests for the same or different Web page. Application state created when browser sends first request for Web page to Web server; ends when the user closes the browser. Many Web applications need to store data (make it persistent) so that users can pick up where they left off when they return to the site. Persistent state information is data that an application needs after the session ends. Cookies addressed limitations of HTTP protocol but pose security risk localStorage method allows users to save larger amounts of data from session to session (persistent data) No time limit as to how long the data exists sessionStorage method keeps data only for one session (until the browser is closed) Referred to as “per-tab storage” Stores resources like images, HTML pages, CSS files, and JavaScript Application Cache Data would ordinarily be stored on a server Example of a cache manifest: Index.html Stylesheet.css Images/dot.png Scripts/main.js Tasks localStorage & sessionStorage – go through examples (chrome – inspect element > resources > local storage etc) – app cache

application states Keywords localStorage sessionStorage
describe how to manage the state of an application Keywords localStorage sessionStorage DEMO Try in Chrome – more tools - developer tools – resources – local and session storage menus left hand side The localStorage Object The sessionStorage Object

HTML5 touch enabled application
describe how to debug a HTML5 touch enabled application Keywords Touch Events touchstart touchend touchmove UCertify - Lesson 1 Managing the Application Life Cycle Any finger move is a gesture Single finger, one-touch: press, tap, press and hold, slide to pan Finger and a thumb, two-touch: pinch and stretch or a turn to rotate The action an application takes in response to a gesture is a touch event JavaScript touch events are touchstart, touchend, and touchmove mobile validators Demo - & - (Chrome - more settings – developer tools – toggle mobile device emulator icon) Lesson 10 – javascriptTouchDrag.html

HTML5 touch enabled application
describe how to test a HTML5 touch enabled application UCertify - Lesson 1 Managing the Application Life Cycle Chrome – mobile device emulator Overall responsiveness and fluidity Tapping, pinching, rotating, and other common gestures Controlled scrolling Controlled panning Ability to disabled scrolling and panning Accuracy of snap points Unintended zooming or scrolling, especially in a multi-touch environment Proper touch event reaction, especially in a multi-touch environment Debugging Detecting, finding, and correcting logical or syntactical errors A syntax error is a typo in the code or a similar error, which is usually revealed during runtime for interpreted apps. A logic error results in the app behaving differently than expected. Checks HTML documents and reports any errors or problems - Checks CSS files and reports any errors or problems -

publish an application to a store
describe how to publish an application to a store. UCertify - Lesson 1 Managing the Application Life Cycle Windows App certification Kit Included in the Windows Software Development Kit (SDK) Checks Metro style apps (Windows 8) that may include HTML5 Package and install app locally using an app development tool Use the kit to validate app Sign up and pay for a Windows Store developer account, and reserve a name for your app. Edit your app’s manifest file. Go through the app submission checklist at Name your app, set price, indicate release date, assign an age rating, etc. Test app with Windows App Certification Kit Capture screen shots of significant or unique features of your app for store listing Have other testers or developers test your app on different devices and platforms Include a privacy statement Use app development tool (such as Visual Studio 12 or Visual Studio 12 Express for Windows 8) to create a final app package Upload app package to Windows Store Wait for approval from the store Task UCertify - Lesson 1 Managing the Application Life Cycle - Quiz Optional Test Bank 1

HTML5 Keywords Semantic tags
identify HTML5 tags to display text content Keywords Semantic tags uCertify - Lesson 2 HTML, CSS, and Javascript The <b> element should now be used to offset text without conveying importance, such as for keywords or product names. The <i> element now indicates content in an alternate voice or mood, like spoken text. The <strong> element indicates strong importance. The <em> element indicates emphatic stress. The <small> element should be used for small print, like a copyright line. Explore w3schools HTML5-Mega-Cheat-Sheet-A4-Print-ready.pdf Task HTML5 templates folder – (colour purple), complete semantic elements The <mark> element highlights text on a page, similar to the highlighting feature in Microsoft Word. The <time> element displays a machine-readable time and date, such as 10:10 A.M., CST, July 19, 2012, which is handy for blogs and calendars, and potentially helps search engines provide better results when time and date are part of the search criteria. Text Elements Not Used in HTTML5 <applet> - use <object> <big> - use CSS <center> - use CSS <font> - use CSS <strike> - use <del> lesson3UISemantics Use the html template provide and add/change elements to some HTML5 tags

HTML5 Keywords figure element figcaption element
identify HTML5 tags to display graphics Keywords figure element figcaption element Image Basics A raster image is made up of pixels. Example: A photograph Formats: JPG, PNG, GIF, BMP A vector image is made up of lines and curves based on mathematical expressions. Example: Adobe Illustrator AI file Formats: PNG or GIF for Web display Use img to add images to an HTML document Example: <img src="images/redball.jpg" alt="Red ball graphic" /> The src attribute and the alt attribute are required to be fully valid. The W3C requires the alt attribute for accessibility by people with disabilities. The figure element specifies the type of figure you’re adding The figcaption element adds a caption to an image on a Web page, Can display the caption before or after the image Task Use of the figure and figcaption tags in HTML template uCertify - Lesson 3 Getting Acquainted with HTML5 & Quiz

HTML5 identify HTML5 tags to display graphics
uCertify - Lesson 4 Rich Media Range - tags to display graphics (Canvas, SVG) Use JavaScript to draw pixel-based shapes on a canvas Include color, gradients, and pattern fills, Render text with various embellishments, Animate objects by making them move, change scale, and so on Basic syntax for the canvas element: <canvas id="smlRectangle" height="100" width="200"></canvas> HTML5_Canvas_Cheat_Sheet.pdf Task Lesson 2 – canvas1.html Explore - canvas tool – examples – change code

HTML5 Keywords canvas api identify HTML5 tags to display graphics
uCertify - Lesson 4 Rich Media Use JavaScript to draw pixel-based shapes on a canvas Include color, gradients, and pattern fills, Render text with various embellishments, Animate objects by making them move, change scale, and so on Basic syntax for the canvas element: <canvas id="smlRectangle" height="100" width="200"></canvas> FallBack “Backup” content that displays if primary content cannot Can be a problem with some older browsers Cannot render canvas drawings or animation, for example Fallback adds an image, text, or some other HTML content within the canvas element that displays if the drawing cannot <canvas id=“rect” height=“100” width=“200”> <img src=“”… /> </canvas> Task Students create own Canvas examples export html5/javascript

HTML5 identify HTML5 tags to display graphics
uCertify - Lesson 4 Rich Media A language for describing 2D vector graphics in Extensible Markup Language (XML) SVG graphics referred to as objects SVG loads into the DOM Vector graphic changes size to fit screen, whether 32-inch PC monitor or smartphone SVG is not new, but HTML5 can embed SVG objects in Web pages without using <object> or <embed> tags Task - explore and export to SVG – test in Dreamweaver

HTML5 Keywords SVG identify HTML5 tags to display graphics
uCertify - Lesson 4 Rich Media - explore If the drawing is relatively small, use canvas. If the drawing requires a large number of objects, use canvas; SVG degrades as it continually adds objects to the DOM Generally, use canvas for small screens and SVG for larger screens. If you must create highly detailed vector documents that must scale well, go with SVG. If you are displaying real-time data output, such as maps, map overlays, weather data, and so on, use canvas.

HTML5 identify HTML5 tags to play media uCertify - Lesson 4 Rich Media
Range - media (video, audio) Enables you to incorporate videos in HTML documents using minimal code Markup example: <video src="intro.mp4" width="400" height="300"> </video> poster: Displays a static image file before the video loads autoplay: Start playing the video automatically upon page load controls: Displays a set of controls for playing, pausing, and stopping the video, and controlling the volume loop: Repeats the video

HTML5 Keywords video element identify HTML5 tags to play media
uCertify - Lesson 4 Rich Media Enables you to incorporate videos in HTML documents using minimal code Markup example: <video src="intro.mp4" width="400" height="300"> </video> poster: Displays a static image file before the video loads autoplay: Start playing the video automatically upon page load controls: Displays a set of controls for playing, pausing, and stopping the video, and controlling the volume loop: Repeats the video – closed captions Task Explore video in HTML5 template

HTML5 Keywords audio element identify HTML5 tags to play media
uCertify - Lesson 4 Rich Media Enables you to incorporate audio (music, other sounds) in HTML documents using minimal code Markup example: <audio src="sample.mp3" controls="controls"></audio> Task Explore audio template in HTML5 template uCertify - Lesson 4 Rich Media – questions 2 and 3

HTML5 identify HTML5 tags to organise content
DIV Element Used for years to create structure of an HTML document. Often includes a class or ID attribute. May include CSS styles such as background-color, height, and width Example: <div id="header" > This is a header </div>

HTML5 Keywords div article section main nav aside header footer
identify HTML5 tags to organise content Keywords div article section main nav aside header footer DIV Used for years to create structure of an HTML document. Often includes a class or ID attribute. May include CSS styles such as background-color, height, and width Example: <div id="header" > This is a header </div> header, footer, section, nav, article, and aside Tag names that are intuitive Makes it easier to build and modify HTML documents Makes it easier for Web browsers and other programs to interpret Developers can still use <div> in HTML5 documents; should use new structure elements whenever appropriate Task Create from scratch - inductioncolumns3_nav.htm

HTML5 identify HTML5 tags to organise content <article>
Defines a part of an HTML document that consists of a “self-contained composition” independent from the rest of the content in the document Content set off by <article> tags can be distributed in syndication Think of it as content that makes sense on its own

HTML5 identify HTML5 tags to organise content <section>
Defines a section in a document, such as a chapter, parts of a thesis, or parts of a Web page whose content is distinct from each other According to the W3C, must contain at least one heading and define something that would ordinarily appear in the document’s outline

HTML5 identify HTML5 tags to organise content <nav>
Defines a block of navigation links and is useful for creating A set of navigation links as a document’s primary navigation A table of contents Breadcrumbs in a footer Previous-Home-Next links

HTML5 identify HTML5 tags to organise content <aside>
Used for sidebars and notes—content that’s related to the current topic but would interrupt the flow of the document if left inline

HTML5 identify HTML5 tags to organise forms
uCertify - Lesson 5 Organising Forms and Working with Validation Form input is the information a user enters into fields in a Web or client application form. HTML5 introduces several new form and input element attributes; some are: url for entering a single Web address, for a single address or a list of addresses, search to prompt users to enter text they want to search for Use the <form> start and end tags All form content and fields are between <form> tags. Common syntax: <form id="keyword"> <content and fields> </form> The fieldset element is used with many forms to group related elements. The <fieldset> tag draws a box around individual elements and/or around the entire form. Form required and attributes - The required attribute requires information in a field when the form is submitted. The attribute requires the user to enter an address. Markup example: <input type=" " required /> Placeholder text is text displayed inside an input field when the field is empty. It helps users understand the type of information they should enter or select. When you click on or tab to the input field and start typing, the newly entered text replaces the placeholder text. Markup example: <input name="fName" placeholder="First Name" /> Markup example: <input type="text" id="empID" name="EmployeeID" required pattern="[A-Z]{2}[0-9]{4}“ title="Employee ID is two capital letters followed by four digits"> The pattern attribute provides a format (a regular expression) for an input field, which is used to validate whatever is entered into the field. You can use the pattern attribute with these <input> types: text, search, url, telephone, , password Markup example: <input type="text" name="fname“ autofocus="autofocus" /> The autofocus attribute moves the focus to a particular input field when a Web page loads. Task Bruceontheloose example – chapter 16 - form- .html

HTML5 uCertify - Lesson 5 Organising Forms and Working with Validation
Identify HTML5 tags for input uCertify - Lesson 5 Organising Forms and Working with Validation Form input is the information a user enters into fields in a Web or client application form. HTML5 introduces several new form and input element attributes; some are: url for entering a single Web address, for a single address or a list of addresses, search to prompt users to enter text they want to search for Use the <form> start and end tags All form content and fields are between <form> tags. Common syntax: <content and fields> <form id="keyword"> </form> The fieldset element is used with many forms to group related elements. The <fieldset> tag draws a box around individual elements and/or around the entire form. Form required and attributes - The required attribute requires information in a field when the form is submitted. The attribute requires the user to enter an address. Markup example: <input type=" " required /> Placeholder text is text displayed inside an input field when the field is empty. It helps users understand the type of information they should enter or select. When you click on or tab to the input field and start typing, the newly entered text replaces the placeholder text. Markup example: <input name="fName" placeholder="First Name" /> The pattern attribute provides a format (a regular expression) for an input field, which is used to validate whatever is entered into the field. Markup example: <input type="text" id="empID" name="EmployeeID" required pattern="[A-Z]{2}[0-9]{4}“ title="Employee ID is two capital letters followed by four digits"> You can use the pattern attribute with these <input> types: text, search, url, telephone, , password Markup example: <input type="text" name="fname“ autofocus="autofocus" /> The autofocus attribute moves the focus to a particular input field when a Web page loads. Bruceontheloose example – chapter 16 - form- .html

HTML5 uCertify - Lesson 5 Organising Forms and Working with Validation
Identify HTML5 tags for validation uCertify - Lesson 5 Organising Forms and Working with Validation The process of verifying that information entered or captured in a form is in the correct format and usable before sending the data to the server Some things verified during validation: Required fields are empty, addresses are valid, Dates are valid, Text does not appear in a numeric field or vice versa Automatic validation of input means the browser checks the data the user inputs. Also referred to as client-side validation Server-side validation occurs when server validates data received from an input form Task - explore elements/attributes with ? icon to explore code uCertify - Lesson 5 Organising Forms and Working with Validation - quiz

HTML5 identify HTML5 tags to organise forms (Validation)
The process of verifying that information entered or captured in a form is in the correct format and usable before sending the data to the server Some things verified during validation: Required fields are empty, addresses are valid, Dates are valid, Text does not appear in a numeric field or vice versa Automatic validation of input means the browser checks the data the user inputs. Also referred to as client-side validation Server-side validation occurs when server validates data received from an input form - explore Task Lesson 3 UISemantics – form- .html - explore

CSS describe core CSS concepts
uCertify - Lesson 6 A Layout for Every Occasion Range - CSS concepts (separate presentation from content, manage content flow, manage positioning of individual elements, basic CSS styling) Content is the words and images in an HTML document. Presentation is related to styles and how words and images "look" in an HTML document. Content is managed as HTML and style as CSS. The separation of HTML and CSS generally means keeping CSS styles in a file separate from the HTML file. CSS = Cascading Style Sheets CSS is a sequence of rules. CSS3 is the latest draft version; corresponds to HTML5 CSS3 is that it’s backward compatible with previous versions of CSS The <link> element in an HTML file links the HTML file to a CSS file. You can reference more than one CSS file in an HTML page. Markup example: <link href = "filename.css" rel = "stylesheet" type = "text/css"> For simple projects, can use the <style> tag to include styles within an HTML document The selector is usually the HTML element you want to style. The declaration is the style for a specific selector. A declaration has a property, which is a style attribute, and a value. Task HTML5 template – explore CSS code

p {color: brown;} CSS Selector Declaration Property Value
describe core CSS concepts Selector Declaration uCertify - Lesson 6 A Layout for Every Occasion Bruceontheloose - Chapter 7 CSS Building Blocks, Chapter 8 Working with Style Sheets, Chapter 9 Defining Selectors, Chapter 10 Formatting Text with Styles Task – go through selectors p {color: brown;} Property Value

d p t d p t CSS Serif Sans serif describe core CSS concepts
uCertify - Lesson 7 Improving Web Typography A font is a set of characters of a particular size and style. Examples: Times New Roman, Eras Bold ITC, Myriad Web Pro, Monospace is often used for technical material such as formulas, numbers, codes, and so on. The primary way to specify fonts in a CSS file is to use the font-family property. The property can declare a specific font, like Garamond or Arial, or a family that includes many different fonts, such as “serif.” Examples: font-family: Arial, font-family: serif Fonts most likely installed on a Web page visitor’s system. List of Web-safe fonts is relatively short and doesn’t offer much variety CSS3 rule that enables developers to use any font they choose Create a font-face rule by assigning a name to the font Font must be located on your Web server, or include a URL to font location { font-family: TrustyHomePage; src: url('Euphemia.ttf'), } BruceOnLoose - Chapter 13 Working with Web Fonts - demo Task - free fonts – webfont kit uCertify - Lesson 7 Improving Web Typography - quiz d p t d p t

CSS Keywords floats absolute positioning describe core CSS concepts
uCertify - Lesson 6 A Layout for Every Occasion Float positioning Is useful when a layout is in columns, at least in part To float an element is to have it move as far as possible either to the right or left Text “wraps” around the element Absolute positioning More exact and uses geometric placement Task Lesson 4 CSS Basics

uCertify - Lesson 6 A Layout for Every Occasion Float positioning Is useful when a layout is in columns, at least in part To float an element is to have it move as far as possible either to the right or left Text “wraps” around the element Task

uCertify - Lesson 6 A Layout for Every Occasion Task

CSS overflow property Task
describe core CSS concepts uCertify - Lesson 6 A Layout for Every Occasion When an element overflows its bounding box, and its overflow is set to scroll, all the content of the element stays within the box; none of the overflow appears outside the box. This is referred to as scrolling overflow. Visible overflow writes over the content that follows it. Hidden overflow makes overflow invisible. overflow property Values: Scroll, Visible, Hidden Task - explore overflow examples Bruceontheloose – chapter 8 working with style sheets – chapter 9 selectors – chap 10 – text with styles

CSS & UI describe how to arrange user interface (UI) content using CSS User interface (UI) is the portion of a Web site or application with which a user interacts Can be simple, or complex with several sections, buttons, and controls Positioning and autosizing of UI elements central to good design Compare Bing.com to Microsoft.com Look very different, Both follow the elements of good design—clean, easy to use, well-structured

CSS & UI http://css3generator.com/ Task
describe how to arrange user interface (UI) content using CSS CSS3 specification is still in draft format and undergoing modifications Need to use vendor prefixes with several CSS3 constructs Internet Explorer uses the -ms- prefix. Firefox supports the -moz- prefix. Opera supports the -o- prefix. Chrome and Safari support the -webkit- prefix. Task – explore padding/margin

CSS & UI describe how to arrange user interface (UI) content using CSS uCertify - Lesson 6 A Layout for Every Occasion - The Flexible Box Layout Module Range - arrange user interface (UI) content (flexible box, grid layouts, proportional scaling, templates) Good for controls, toolbars, menus, and forms that resize and reposition automatically when the user changes the size of the browser window Browser takes the available space into account and calculates the dimensions for the user Enables relative sizes and positioning Example: Parent flexbox indicated by shaded background, icons are child boxes When user increases screen size horizontally, the flexbox expands, distributing an even amount of space between the children

CSS & UI describe how to arrange user interface (UI) content using CSS uCertify - Lesson 6 A Layout for Every Occasion - The Flexible Box Layout Module Good for controls, toolbars, menus, and forms that resize and reposition automatically when the user changes the size of the browser window Browser takes the available space into account and calculates the dimensions for the user Enables relative sizes and positioning Example: Parent flexbox indicated by shaded background, icons are child boxes When user increases screen size horizontally, the flexbox expands, distributing an even amount of space between the children Define an element as a flexbox using the CSS properties display:flexbox or display:inline-flexbox. The flexbox attribute sets the flexbox as a block-level element. The inline-flexbox attribute sets the flexbox as an inline-level element. A box within a box is a child box, which can be flexible or not. A child box is referred to as a flexbox item. The flex property controls the height and width of flexbox items. Whereas the display:flexbox property creates a flexible parent box, the flex property is what gives the flexible nature to child boxes. Task - exercises sourceCode – lesson 5 flexbox

CSS & UI describe how to arrange user interface (UI) content using CSS A parent flexbox with three child boxes (flexbox items) uCertify - Lesson 6 A Layout for Every Occasion - The Flexible Box Layout Module See flexbox source code items The flex-wrap property determines whether child boxes automatically create a new line and wrap onto it. The flex-pack property justifies the alignment of child boxes within a flexbox and minimizes whitespace in the parent box. Accepts one of four values: start, end, justify, or center The flex-align property sets the default alignment for child boxes, but with a twist. If the orientation of the parent box is horizontal, flex-align determines the vertical alignment of the child boxes, and vice versa. Task - exercises Modifying the third child box to fill the available space

CSS & UI describe how to arrange user interface (UI) content using CSS uCertify - Lesson 6 A Layout for Every Occasion - The Flexible Box Layout Module - exercises See flexbox source code items The flex-wrap property determines whether child boxes automatically create a new line and wrap onto it. The flex-pack property justifies the alignment of child boxes within a flexbox and minimizes whitespace in the parent box. Accepts one of four values: start, end, justify, or center The flex-align property sets the default alignment for child boxes, but with a twist. If the orientation of the parent box is horizontal, flex-align determines the vertical alignment of the child boxes, and vice versa.

CSS & UI describe how to arrange user interface (UI) content using CSS uCertify - Lesson 6 A Layout for Every Occasion - The Flexible Box Layout Module - flexbox - exercises See flexbox source code items The flex-wrap property determines whether child boxes automatically create a new line and wrap onto it. The flex-pack property justifies the alignment of child boxes within a flexbox and minimizes whitespace in the parent box. Accepts one of four values: start, end, justify, or center The flex-align property sets the default alignment for child boxes, but with a twist. If the orientation of the parent box is horizontal, flex-align determines the vertical alignment of the child boxes, and vice versa.

CSS & UI Keywords flexbox cssgrid
describe how to arrange user interface (UI) content using CSS Keywords flexbox cssgrid uCertify - Lesson 6 A Layout for Every Occasion - The CSS Grid Layout Module - grid css tool CSS property of a grid layout creates container for the layout : display:grid, display:inline-grid Grids also use grid-columns and grid-rows properties Child elements of a grid are called grid items Grid tracks: The columns and rows of the grid; you define grid tracks using the grid-rows and grid-columns properties Grid lines: The horizontal and vertical lines that divide columns or rows Grid cells: The logical space used to lay out grid items, similar to a cell in a spreadsheet Task - exercises

CSS & Text Flow describe how to manage the flow of text content using CSS

CSS & Text Flow describe how to manage the flow of text content using CSS uCertify - Lesson 6 A Layout for Every Occasion - Multi-column basics Range - manage the flow of text (regions, columns, hyphenation, positioned floats) - columns Create columns by dividing text across multiple columns Specify the amount of space that appears between columns (the gap) Make vertical lines (rules) appear between columns Define where columns break Main CSS properties for creating multiple columns in an HTML document: column-count: Sets the number of columns Alternative: Use columns property with column-count and column-width properties column-gap: Specifies the gap between the columns, known as the gutter or alley column-rule: Creates a vertical line in the gap between columns and sets the width, style (single or double line, solid, dashed, 3D, etc.) and color of the rule Task Source code – lesson 6

CSS & Text Flow describe how to manage the flow of text content using CSS CSS Columns - columns Create columns by dividing text across multiple columns Specify the amount of space that appears between columns (the gap) Make vertical lines (rules) appear between columns Define where columns break Main CSS properties for creating multiple columns in an HTML document: column-count: Sets the number of columns Alternative: Use columns property with column-count and column-width properties column-gap: Specifies the gap between the columns, known as the gutter or alley column-rule: Creates a vertical line in the gap between columns and sets the width, style (single or double line, solid, dashed, 3D, etc.) and color of the rule Task Source code – lesson 6

CSS & Text Flow column-rule: 3px dashed blue; column-gap: 3em;
describe how to manage the flow of text content using CSS CSS Columns - columns Create columns by dividing text across multiple columns Specify the amount of space that appears between columns (the gap) Make vertical lines (rules) appear between columns Define where columns break Main CSS properties for creating multiple columns in an HTML document: column-count: Sets the number of columns Alternative: Use columns property with column-count and column-width properties column-gap: Specifies the gap between the columns, known as the gutter or alley column-rule: Creates a vertical line in the gap between columns and sets the width, style (single or double line, solid, dashed, 3D, etc.) and color of the rule column-rule: 3px dashed blue; column-gap: 3em;

CSS & Text Flow describe how to manage the flow of text content using CSS Hyphenation Ps Test in Firefox; not supported in Chrome - Chrome and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. It is advisable to set attribute on the HTML element to enable hyphenation support and improve accessibility. The process of connecting two words with a hyphen mark (-) or breaking words between syllables at the end of a line. CSS3 hyphens property controls hyphenation Values: auto: Enables automatic hyphenation of words based on line-break opportunities within words or by a “language-appropriate hyphenation resource” manual: Enables hyphenation of words based only on line-break opportunities within words none: Prevents hyphenation The hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present. Note that hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a parent element. Not all languages are supported yet, and support depends on the specific browser. W3C requires a language declaration for correct automatic hyphenation to occur: <!doctype html> <html lang="en-us"> Or <html xmlns=" xml:lang="en" lang="en"> -ms-hyphenate-limit-zone: Specifies the width of the trailing whitespace (called the hyphenation zone) that can be left in a line before hyphenation occurs; the property’s value is a length in pixels or a percentage -ms-hyphenate-limit-chars: Specifies the minimum number of characters in a word that may be hyphenated; if the character count is lower than the minimum, the word is not hyphenated -ms-hyphenate-limit-lines: Specifies the maximum number of consecutive hyphenated lines that may contain hyphenated words Task Lesson6 – lesson6 CSS Text Flow - hyphenation

CSS & Graphic Effects describe how to create graphic effects using CSS. uCertify - Lesson 8 Effects, Transforms, Transitions, and Animation Range - graphic effects (rounded corners, shadows, transparency, background gradients, typographic, 2D and 3D transformations) & – CSS3 Rounded corners Shadows Transparency Background gradients Typography & font-face 2D Translation 2D Scaling 2D/3D Rotation 2D/3D Skewing 3D Transition CSS Animation SVG Filter Canvas Task Lesson 7 – CSS Graphic Interface uCertify - Lesson 8 Effects, Transforms, Transitions, and Animation - Quiz

JavaScript uCertify - Lesson 9 Manage and Maintain JavaScript
describe how to manage Java Script uCertify - Lesson 9 Manage and Maintain JavaScript Range - manage Java script (use of functions, use of libraries) A JavaScript function is a block of code designed to perform a particular task. A JavaScript function is executed when "something" invokes it (calls it). Task Lesson 8 JavaScript files javascript_spec_v1.01_labfiles – lesson03 - selected files

JavaScript javascript_spec_v1.01_labfiles – lesson11 - selected files
describe how to manage Java Script JavaScript library A JavaScript library is a library of pre-written JavaScript which allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. Task Lesson 8 – simpleJquery javascript_spec_v1.01_labfiles – lesson11 - selected files

JavaScript javascript_spec_v1.01_labfiles – lesson10 - selected files
describe how to update the UI using JavaScript Update the UI via JavaScript Range - update the UI (locating elements, responding to events, showing and hiding elements, updating content of elements, adding elements) JavaScript Calculator getElementByID() Listening & Responding to events onLoad Event Handler Showing & Hiding elements Updating content of elements Adding elements Task Lesson8 - calculator javascript_spec_v1.01_labfiles – lesson10 - selected files

JavaScript http://www.w3schools.com/js/js_htmldom_animate.asp
identify JavaScript animation code Simple animation Task Lesson 9 - javascriptAnimations

JavaScript describe how to access data using JavaScript
JavaScript & Send/Receive Data Range - how to access data (send and receive data, transmit complex objects, parsing, accessing databases and indexed DB, loading and saving files, App Cache) XMLhttpRequest API accessData demo Parsing – analysis of complex info into constituent parts Parse Complex Data example Accessing databases & indexed DB example? Local storage – local storage demo & File demo loading and saving files Application Cache (AppCache) What is Application Cache? Offline browsing - users can use the application when they're offline Application cache gives an application three advantages: HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection. Reduced server load - the browser will only download updated/changed resources from the server Speed - cached resources load faster javascript_spec_v1.01_labfiles – lesson12- selected files – firefox browser – lab12-1 ajax; example2_changingText.hml ajax; example_AJAXdatabase Task Lesson 9 – complexdata, cookies, data, form, indexedDB, localfile, localstorage

HTML5 access data using JavaScript Data Access/Storage Using JavaScript Task Lesson 9 – complexdata, cookies, data, form, indexedDB, localfile, localstorage

JavaScript identify code that responds to touch Types of gestures Tap
Gestures include touch mechanics (what your fingers do on the screen) and touch activities (results of specific gestures). A touch activity may be achieved through combining multiple touch mechanics. For example, by using the touch mechanics of pinch open, double-touch, or double-touch and dragging, a user may zoom in on a view. A touch mechanic may cause different outcomes, depending on the context in which it is used. For example, a long press may select an element like a list item. Types of gestures Tap Double tap Zoom – pinch Press and hold JavaScript Touch screen capability demo Touch Events touchStart touchMove touchEnd Demo : Task Lesson 10 touch examples – chrome – mobile emulator on in developer tools

JavaScript identify HTML5 API code
HTML5 specifies scripting application programming interfaces (APIs) that can be used with JavaScript. Range - API (GeoLocation, Web Workers, Web Sockets) Geolocation The HTML Geolocation API is used to locate a user's position. Geolocation demo Web Workers A web worker is a JavaScript running in the background, without affecting the performance of the page. Web workers demo Web Sockets Enables you to open a persistent connection between a client and a web server, and exchange files. Web Sockets reduce the time of overhead required for real-time communication Web Sockets demos Task Lesson 10 – geolocation, file api, web sockets, web worker

HTML5 Web Application Use of semantic HTML5 elements
build user interface using HTML5 Use of semantic HTML5 elements Article Aside Footer Header Main Section Task HTML5 templates

HTML5 & CSS3 Format interface using CSS3 Task HTML5 templates
format user interface using CSS Format interface using CSS3 Task HTML5 templates

HTML5 & JavaScript access data using JavaScript. uCertify - Lesson 13 JavaScript Coding for the Touch Interface, Device and Operating System Resources Range - system Resources (operating systems, system devices) JavaScript data examples e.g. localStorage, sessionStoriage, Task HTML5 templates

New Horizons Computer Learning Centers Unit 622 HTML5 Application Development Fundamentals Created by Ravinder Basra.

Similar presentations

Presentation on theme: "New Horizons Computer Learning Centers Unit 622 HTML5 Application Development Fundamentals Created by Ravinder Basra."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

New Horizons Computer Learning Centers Unit 622 HTML5 Application Development Fundamentals Created by Ravinder Basra.

Similar presentations

Presentation on theme: "New Horizons Computer Learning Centers Unit 622 HTML5 Application Development Fundamentals Created by Ravinder Basra."— Presentation transcript:

Similar presentations

About project

Feedback