Client side Development withtml5, CSS3 and JavaScript (FT100)

Transcription

1 Client side Development withtml5, CSS3 and JavaScript (FT100) 40 Hours Outline HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard. It was published in October 2014 by the World Wide Web Consortium (W3C) to improve the language with support for the latest multimedia, while keeping it both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 anddom Level 2 HTML. HTML5 includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalizes the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications. CSS3 is the latest version of the CSS specification. The term CSS3 is not just a reference to the new features in CSS, but the third level in the progress of the CSS specification. CSS3 contains just about everything that s included in CSS2.1 (the previous version of the specification). It also adds new features to help developers solve a number of problems without the need for nonsemantic markup, complex scripting, or extra images. Features that are included in CSS3 include support for additional selectors, drop shadows, rounded corners, multiple backgrounds, animation, transparency, and much more.

2 jquery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto Write less, do more. jquery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jquery is a JavaScript toolkit designed to simplify various tasks by writing less code. Features are included DOM manipulation, Event handling, AJAX Support, Animations, Lightweight, Cross Browser Support Target Audience This course is suitable for experience developers who wish to learn practices and techniques to develop scalable, reusable and testable Clientside web applications using HTML5, CSS3 and JavaScript. Prerequisites Participants should be experienced in Object Oriented Programming (like: Java, C++ or C#) Basic knowledge in web concepts and HTML/CSS is highly recommended Contents HTML 5 1. Overview of the New Web Standard How It All Started What Is New? What Has Become Obsolete? And What About XHTML? Can I Start Using HTML5 Now?

3 2. Structure and Semantics for Documents Header with header and hgroup Content with article Footer with footer and nav Sidebar with aside and section The Outline Algorithm Figures with figure and figcaption Text-Level Semantics More New Tags 3. Intelligent Forms New Input Types o The Input Types tel and search o The Input Types url and o Date and Time with datetime, date, month, o week, time, and datetime-local o The Input Types number and range o The Input Type color o The New Input Types in Action Useful Attributes for Forms o Focusing with autofocus o Placeholder Text with placeholder o Compulsory Fields with required o Even More Attributes for the input Element New Elements o Displaying Measurements with meter o Displaying the Progress of a Task with progress o Lists of Options with datalist o Calculations with output o Client-Side Form Validation o The invalid Event o The checkvalidity Function o Error Handling with setcustomvalidity() o Summary of Validity Checks

4 4. Video and Audio First Example The video Element and Its Attributes Video Codecs Which Format for Which Browser? Interim Solutions for Older Browsers Video and Scripting A Simple Video Player 5. Canvas First Example Rectangles Colors and Shadows Gradients Paths Text Embedding Images Pixel Manipulation Compositing Patterns Transformations Base64 Encoding with canvas.todataurl() save() and restore() Animations 6. Geolocation Introduction to Geolocation A First Experiment: Geolocation in the Browser Technical Background of Determining Position Display of Current Position on OpenStreetMap Location Tracking with Google Maps Example: Geonotes Browser Support 7. Web Storage and Offline Web Applications Storage

5 Offline Web Applications Browser Support 8. WebSockets The WebSocket Server 9. Web Workers Introduction to Web Workers Search for Leap Years Calculate Altitude Profiles with Canvas 10. Global Attributes News for the class Attribute Defining Custom Attributes with data-* The hidden Attribute The classlist Interface Drag and Drop with the draggable Attribute Drag and Drop in Combination with the FileAPI The Attributes contenteditable and spellcheck CSS3 What's new in CSS 3? Effects Animations Selectors Box Model Web Fonts JQuery Introduction to jquery Selecting, Decorating, and Enhancing Animating, Scrolling, and Resizing Images and Slideshows Menus, Tabs, Tooltips, and Panels Construction, Ajax, and Interactivity Forms, Controls, and Dialogs

6 Lists, Trees, and Tables Plugins, Themes, and Advanced Topics