HTML5 & Friends. And How They Change A Developer s Life

Size: px
Start display at page:

Download "HTML5 & Friends. And How They Change A Developer s Life"

Transcription

1 HTML5 & Friends And How They Change A Developer s Life Yang Piao yp@cmu.edu

2 2

3 HTML5? 3

4 What is HTML5 The markup language 5 th major version of HTML successor of HTML 4.01 Or a set of cutting-edge web technologies the HTML markup language a series of JavaScript APIs CSS3 Basically, it rocks... 4

5 Life-changing? 5

6 Let s start with an example Select an arbitrary element in JS 6

7 ! The Old Way <div id= elemid ></div>! var elem =! "document.getelementbyid( elemid );! 7

8 ! The Old Way <ul class= menu >! "<li class= menu-item ></li>! "<li class= menu-item ></li>! "<li class= menu-item ></li>! </ul>! But what about this? 8

9 ! The Old Way Somebody said the word library? var menuitems = $(.menu-item );! What s behind this single line of code? 9

10 The Old Way More than 1,000 lines of code! And extra file(s) jquery is 32KB after minified and gzipped 10

11 The Better Way Selectors API [document/element].queryselector [document/element].queryselectorall var cells = document.queryselectorall(! " ""#score>tbody>tr>td:nth-of-type(2)"); var firsttextinput = formelement.queryselector(! " "'input[type="text"]');! 11

12 The Better Way No need to rely on other libraries smaller page size shorter load time Better performance browser native APIs are much faster than JS 12

13 The Better Way Other DOM / JavaScript APIs like this: getelementsbyclassname classlist dataset children, childelementcount first / lastelementchild outerhtml insertadjacenthtml matchesselector and more... 13

14 Not Convincing? 14

15 HTML5 Features Semantic Tags 15

16 ! Semantic Tags We wrote pages like this: <div id="container">! <div class="content">! <div class="post"></div>! <div class="post"></div>! </div>! <div class="sidebar"></div>! </div>! 16

17 ! Semantic Tags Now we can write pages like this: <div id="container">! <section>! <article></article>! <article></article>! </section>! <aside></aside>! </div>! 17

18 Semantic Tags New tags that have meanings: header footer nav section article aside address figure, figcaption

19 HTML5 Features Better Form 19

20 Better Form Forms in HTML4 / XHTML1.1 field types are limited no validation HTML5 supports these things! 20

21 Better Form More types of fields number range date & time color search tel url datalist 21

22 Better Form Number field <input type="number" min="0" max="10" value="5">! Range field <input type="range" min="0" max="100"! value="0" step="2">! 22

23 Better Form Output element <form onsubmit="return false! oninput="o.value = r.valueasnumber">! <input name="r" id="r" type="range" min="0" max="100" value="0">! <output for="r" name="o">0</output>/100! </form>! 23

24 Better Form Output element <form onsubmit="return false" oninput="! o.value = a.valueasnumber + b.valueasnumber">! <input name="a" id="a" type="number"> +! <input name="b" id="b" type="number"> =! <output name="o" for="a b"></output>! </form> 24

25 !!!!! Better Form Date & time <input type="date">! <input type="time" step="1">! 25

26 Better Form Color Field <input type="color">! 26

27 Better Form Progress & meter (not just for forms) <progress value="22" max="100"></progress>! <meter value="2" min="0" max="10"></meter>! <meter value="0.6"></meter>! 27

28 Better Form Validation required attribute <input type="text" required> type, like pattern <input type="text" pattern="[a-z]{3}[0-9]{3}">! 28

29 HTML5 Features User Interaction 29

30 User Interaction HTML5 improves interaction drag & drop touch events geolocation fullscreen API device orientation 30

31 ! User Interaction Drag & drop draggable & dropzone attributes events elem.addeventlistener('dragstart', fn, false);! elem.addeventlistener('dragenter', fn, false);! elem.addeventlistener('dragover', fn, false);! elem.addeventlistener('dragleave', fn, false);! elem.addeventlistener('drop', fn, false);! elem.addeventlistener('dragend', fn, false);! 31

32 User Interaction Touch events on mobile devices events: touchstart, touchmove, touchend Geolocation navigator.geolocation.getcurrentposition(! successcallback, errorcallback)! 32

33 ! User Interaction Fullscreen API can make an element fullscreen simple code requestfullscreen()! webkitrequestfullscreen()! mozrequestfullscreen()! cancelfullscreen()! webkitcancelfullscreen()! mozcancelfullscreen()! 33

34 User Interaction Fullscreen API 34

35 User Interaction Device orientation not just for mobile devices! 35

36 HTML5 Features Multimedia & Graphics 36

37 Multimedia & Graphics Native multimedia support <video> <audio> say buy to Flash! Graphics canvas WebGL 37

38 Multimedia & Graphics Camera API 38

39 CSS3! 39

40 CSS3 Features Modern Styles 40

41 Modern Styles Border radius (rounded corner) Text & box shadow Gradient Border images

42 Modern Styles You can draw a lot of shapes 42

43 Modern Styles And even more 43

44 CSS3 Features Media Queries 44

45 ! Media Queries The very basic part of Responsive Design /* Large desktop (min-width: 1130px) {}! /* tablet landscape and below (max-width: 1000px) {}! /* Landscape phone to portrait tablet (max-width: 767px) print and (min-width: 1130px) {}! 45

46 Media Queries 46

47 Media Queries 47

48 Media Queries 48

49 CSS3 Features Transitions & Animations 49

50 Transitions & Animations Transitions 50

51 Transitions & Animations Animations/Transitions 51

52 Not The End... 52

53 Thanks for your attention! 53

CLASSROOM WEB DESIGNING COURSE

CLASSROOM WEB DESIGNING COURSE About Web Trainings Academy CLASSROOM WEB DESIGNING COURSE Web Trainings Academy is the Top institutes in Hyderabad for Web Technologies established in 2007 and managed by ITinfo Group (Our Registered

More information

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer

HTML5 & CSS3. ( What about SharePoint? ) presented by @kyleschaeffer HTML5 & CSS3 ( What about SharePoint? ) presented by @kyleschaeffer The Agenda HTML5 What is it? What can it do? Does SharePoint do HTML5? CSS3 What is it? What can it do? Does SharePoint do CSS3? HTML5

More information

THE SAS OUTPUT DELIVERY SYSTEM: BOLDLY TAKE YOUR WEB PAGES WHERE THEY HAVE NEVER GONE BEFORE! CHEVELL PARKER, SAS INSTITUTE INC.

THE SAS OUTPUT DELIVERY SYSTEM: BOLDLY TAKE YOUR WEB PAGES WHERE THEY HAVE NEVER GONE BEFORE! CHEVELL PARKER, SAS INSTITUTE INC. THE SAS OUTPUT DELIVERY SYSTEM: BOLDLY TAKE YOUR WEB PAGES WHERE THEY HAVE NEVER GONE BEFORE! CHEVELL PARKER, SAS INSTITUTE INC. Copyright 2012, SAS Institute Inc. All rights reserved. Overview Mobile

More information

Web Browser. Fetches/displays documents from web servers. Mosaic 1993

Web Browser. Fetches/displays documents from web servers. Mosaic 1993 HTML5 and CSS3 Web Browser Fetches/displays documents from web servers Mosaic 1993 Firefox,IE,Chrome,Safari,Opera,Lynx,Mosaic,Konqueror There are standards, but wide variation in features Desktop Browser

More information

Web Designing with UI Designing

Web Designing with UI Designing Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for Web Designing Given below is the brief description for the course you are looking for: Web Designing with UI Designing

More information

WEB DEVELOPMENT COURSE (PHP/ MYSQL)

WEB DEVELOPMENT COURSE (PHP/ MYSQL) WEB DEVELOPMENT COURSE (PHP/ MYSQL) COURSE COVERS: HTML 5 CSS 3 JAVASCRIPT JQUERY BOOTSTRAP 3 PHP 5.5 MYSQL SYLLABUS HTML5 Introduction to HTML Introduction to Internet HTML Basics HTML Elements HTML Attributes

More information

HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features

HTML5 and CSS3. new semantic elements advanced form support CSS3 features other HTML5 features HTML5 and CSS3 new semantic elements advanced form support CSS3 features other HTML5 features fallback solutions HTML5 and CSS3 are new and evolving standards two levels of fallback different browsers

More information

Responsive Web Design Creative License

Responsive Web Design Creative License Responsive Web Design Creative License Level: Introduction - Advanced Duration: 16 Days Time: 9:30 AM - 4:30 PM Cost: 2197 Overview Web design today is no longer just about cross-browser compatibility.

More information

WebCenter User experience. John Sim @JRSim_UIX

WebCenter User experience. John Sim @JRSim_UIX WebCenter User experience ipads - Xbox John Sim @JRSim_UIX About Fishbowl Solutions Specializing on portals & content management for 13 years Customers throughout North America & EMEA Enterprise-wide consulting

More information

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you

More information

Programming in HTML5 with JavaScript and CSS3

Programming in HTML5 with JavaScript and CSS3 Course 20480B: Programming in HTML5 with JavaScript and CSS3 Course Details Course Outline Module 1: Overview of HTML and CSS This module provides an overview of HTML and CSS, and describes how to use

More information

HTML5 & CSS3. Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger.

HTML5 & CSS3. Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger. HTML5 & CSS3 and beyond Jens Jäger Freiberuflicher Softwareentwickler JavaEE, Ruby on Rails, Webstuff Blog: www.jensjaeger.com Mail: mail@jensjaeger.com 1 Content A short of history Html New Markup Webforms

More information

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00

Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Page - Page 1 of 12 Mobile Web Design with HTML5, CSS3, JavaScript and JQuery Mobile Training BSP-2256 Length: 5 days Price: $ 2,895.00 Course Description Responsive Mobile Web Development is more

More information

Mobile on the web. SICS Open House Stockholm 2011-05/05

Mobile on the web. SICS Open House Stockholm 2011-05/05 1 Mobile on the web SICS Open House Stockholm 2011-05/05 World Wide Web Consortium (W3C) Swedish Institute of Computer Science (SICS) 1/14 2 About this slide set A few slides identifying web technologies

More information

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication HTML5 HTML5 is the most recent version of Hypertext Markup Language. It's evolution

More information

Differences between HTML and HTML 5

Differences between HTML and HTML 5 Differences between HTML and HTML 5 1 T.N.Sharma, 2 Priyanka Bhardwaj, 3 Manish Bhardwaj Abstract: Web technology is a standard that allow developing web applications with the help of predefined sets of

More information

Unlocking the Java EE Platform with HTML 5

Unlocking the Java EE Platform with HTML 5 1 2 Unlocking the Java EE Platform with HTML 5 Unlocking the Java EE Platform with HTML 5 Overview HTML5 has suddenly become a hot item, even in the Java ecosystem. How do the 'old' technologies of HTML,

More information

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE

SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE SAULT COLLEGE OF APPLIED ARTS AND TECHNOLOGY SAULT STE. MARIE, ONTARIO COURSE OUTLINE COURSE TITLE: Introduction to Web Development CODE NO. : SEMESTER: 1 PROGRAM: AUTHOR: IT Studies Dennis Ochoski DATE:

More information

Professional iphone and ipod touch Programming. Building Applications for Mobile Safari

Professional iphone and ipod touch Programming. Building Applications for Mobile Safari Professional iphone and ipod touch Programming Building Applications for Mobile Safari Richard Wagner WILEY Wiley Publishing, Inc. Acknowledgments Introduction xvii xix Chapter 1: Introducing the iphone

More information

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation

Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Course Information Course Number: IWT 1229 Course Name: Web Development and Design Foundation Credit-By-Assessment (CBA) Competency List Written Assessment Competency List Introduction to the Internet

More information

Study on Parallax Scrolling Web Page Conversion Module

Study on Parallax Scrolling Web Page Conversion Module Study on Parallax Scrolling Web Page Conversion Module Song-Nian Wang * and Fong-Ming Shyu Department of Multimedia Design, National Taichung University of Science and Technology phenombox@gmail.com, fms@nutc.edu.tw

More information

Facebook Twitter YouTube Google Plus Website Email. o Zooming and Panning. Panel. 3D commands. o Working with Canvas

Facebook Twitter YouTube Google Plus Website Email. o Zooming and Panning. Panel. 3D commands. o Working with Canvas WEB DESIGN COURSE COURSE COVERS: Photoshop HTML 5 CSS 3 Design Principles Usability / UI Design BOOTSTRAP 3 JAVASCRIPT JQUERY CSS Animation Optimizing of Web SYLLABUS FEATURES 2 Hours of Daily Classroom

More information

WEB DESIGN COURSE CONTENT

WEB DESIGN COURSE CONTENT WEB DESIGN COURSE CONTENT INTRODUCTION OF WEB TECHNOLOGIES Careers in Web Technologies How Websites are working Domain Types and Server About Static and Dynamic Websites Web 2.0 Standards PLANNING A BASIC

More information

Research on HTML5 in Web Development

Research on HTML5 in Web Development Research on HTML5 in Web Development 1 Ch Rajesh, 2 K S V Krishna Srikanth 1 Department of IT, ANITS, Visakhapatnam 2 Department of IT, ANITS, Visakhapatnam Abstract HTML5 is everywhere these days. HTML5

More information

HTML5 Features on Tizen. Wonsuk Lee, Samsung Electronics

HTML5 Features on Tizen. Wonsuk Lee, Samsung Electronics HTML5 Features on Tizen Wonsuk Lee, Samsung Electronics Table of Contents Brief overview of HTML5 Introducing Tizen web framework New HTML5 features on Tizen Upcoming cutting-edge HTML5 features 2 Brief

More information

Making the Most of Existing Public Web Development Frameworks WEB04

Making the Most of Existing Public Web Development Frameworks WEB04 Making the Most of Existing Public Web Development Frameworks WEB04 jquery Mobile Write less, do more 2 The jquery Suite UI Overhaul Look and Feel Transitions Interactions Touch, Mouse, Keyboard Don t

More information

Interactive Data Visualization for the Web Scott Murray

Interactive Data Visualization for the Web Scott Murray Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding

More information

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator.

This document will describe how you can create your own, fully responsive. drag and drop email template to use in the email creator. 1 Introduction This document will describe how you can create your own, fully responsive drag and drop email template to use in the email creator. It includes ready-made HTML code that will allow you to

More information

Step into the Future: HTML5 and its Impact on SSL VPNs

Step into the Future: HTML5 and its Impact on SSL VPNs Step into the Future: HTML5 and its Impact on SSL VPNs Aidan Gogarty HOB, Inc. Session ID: SPO - 302 Session Classification: General Interest What this is all about. All about HTML5 3 useful components

More information

Coding for Desktop and Mobile with HTML5 and Java EE 7

Coding for Desktop and Mobile with HTML5 and Java EE 7 Coding for Desktop and Mobile with HTML5 and Java EE 7 Coding for Desktop and Mobile with HTML5 and Java EE 7 Geertjan Wielenga - NetBeans - DukeScript - VisualVM - Jfugue Music Notepad - Java - JavaScript

More information

Introduction to Tizen SDK 2.0.0 Alpha. Taiho Choi Samsung Electronics

Introduction to Tizen SDK 2.0.0 Alpha. Taiho Choi Samsung Electronics Introduction to Tizen SDK 2.0.0 Alpha Taiho Choi Samsung Electronics Contents Web technologies of Tizen Components of SDK 2.0.0 Alpha Hello world! Debugging apps Summary 1 Web technologies on Tizen Web

More information

Vector Web Mapping Past, Present and Future. Jing Wang MRF Geosystems Corporation

Vector Web Mapping Past, Present and Future. Jing Wang MRF Geosystems Corporation Vector Web Mapping Past, Present and Future Jing Wang MRF Geosystems Corporation Oct 27, 2014 Terms Raster and Vector [1] Cells and Pixel Geometrical primitives 2 Early 2000s From static to interactive

More information

UNDERSTANDING AND DEVELOPING MULTIMEDIA - SYLLABUS FALL 2014

UNDERSTANDING AND DEVELOPING MULTIMEDIA - SYLLABUS FALL 2014 UNDERSTANDING AND DEVELOPING MULTIMEDIA - SYLLABUS FALL 2014 DGMD- 20 (formerly CSCI E- 14) Last Updated: 8/12/14 COURSE DESCRIPTION This course provides students with a hands- on exploration of the world

More information

<Insert Picture Here>

<Insert Picture Here> Oracle Application Express: Mobile User Interfaces Marc Sewtz Senior Software Development Manager Oracle Application Express Oracle USA Inc. 520 Madison Avenue,

More information

jquery Tutorial for Beginners: Nothing But the Goods

jquery Tutorial for Beginners: Nothing But the Goods jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning

More information

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY

Advanced Web Development SCOPE OF WEB DEVELOPMENT INDUSTRY Advanced Web Development Duration: 6 Months SCOPE OF WEB DEVELOPMENT INDUSTRY Web development jobs have taken thе hot seat when it comes to career opportunities and positions as a Web developer, as every

More information

^/ CS> KRIS. JAMSA, PhD, MBA. y» A- JONES & BARTLETT LEARNING

^/ CS> KRIS. JAMSA, PhD, MBA. y» A- JONES & BARTLETT LEARNING %\ ^/ CS> v% Sr KRIS JAMSA, PhD, MBA y» A- JONES & BARTLETT LEARNING Brief Contents Acknowledgments Preface Getting Started with HTML Integrating Images Using Hyperlinks to Connect Content Presenting Lists

More information

CS297 Report. JavaScript Game Engine for Mobile using HTML5

CS297 Report. JavaScript Game Engine for Mobile using HTML5 CS297 Report JavaScript Game Engine for Mobile using HTML5 by Nakul Vishwas Natu Nakul.natu@gmail.com Fall 2011 Advisor: Dr. Chris Pollett San José State University Department of Computer Science One Washington

More information

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication

Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Advanced Online Media Dr. Cindy Royal Texas State University - San Marcos School of Journalism and Mass Communication Using JQuery to Make a Photo Slideshow This exercise was modified from the slideshow

More information

HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries

HTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Libraries HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Libraries twitter #hashtag #cilhtml5 pinboard.in #tag pinboard.in/u:jasonclark/t:cil-html5/

More information

Elective Type: FA/G. Credit Hours: 3 Corequisites: Developmental: (yes/no) No. Lecture: 2 Clinical: 0. Studio 2 Other: 0 TOTAL: 4 Other Requirements:

Elective Type: FA/G. Credit Hours: 3 Corequisites: Developmental: (yes/no) No. Lecture: 2 Clinical: 0. Studio 2 Other: 0 TOTAL: 4 Other Requirements: COURSE SYLLABUS Course Title: Web Design II Department: Art Curriculum: Graphic Design Date submitted: Fall 2014 AAC: 14-124 Course Descriptors: Make certain that the course descriptors are consistent

More information

INFORMATION TECHNOLOGY STANDARD

INFORMATION TECHNOLOGY STANDARD COMMONWEALTH OF PENNSYLVANIA DEPARTMENT OF PUBLIC WELFARE INFORMATION TECHNOLOGY STANDARD Name Of Standard: Mobile Website Development Domain: Application Number: Category: STD-EASS010 Date Issued: Date

More information

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.

We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file. Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded

More information

Website Builder Documentation

Website Builder Documentation Website Builder Documentation Main Dashboard page In the main dashboard page you can see and manager all of your projects. Filter Bar In the filter bar at the top you can filter and search your projects

More information

Upgrade to Microsoft Web Applications

Upgrade to Microsoft Web Applications Upgrade to Microsoft Web Applications Description Customers demand beautiful, elegant apps that are alive with activity. Demonstrate your expertise at designing and developing the fast and fluid Store

More information

Optimizing Sites for Mobile Devices

Optimizing Sites for Mobile Devices Optimizing Sites for Mobile Devices James Williamson Senior Author lynda.com OPTIMIZING SITES FOR MOBILE DEVICES...1 Exercise 1: Developing a Mobile Strategy...2 Exercise 2: Defining Media Queries...5

More information

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING

COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016

More information

Mobile Publishing. Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland

Mobile Publishing. Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland Mobile Publishing MARCO GIARDINA a,b a Academy of Journalism and Media, Faculty of Economic Sciences, University of Neuchâtel Switzerland b Sensiel Research, Bern, Switzerland Faculty of Economic Sciences,

More information

Building Web Applications with HTML5, CSS3, and Javascript: An Introduction to HTML5

Building Web Applications with HTML5, CSS3, and Javascript: An Introduction to HTML5 Building Web Applications with HTML5, CSS3, and Javascript: An Introduction to HTML5 Jason Clark Head of Digital Access & Web Services Montana State University Library pinboard.in #tag pinboard.in/u:jasonclark/t:lita-html5/

More information

Designing for the Mobile Web Lesson 3: HTML5 Web Apps

Designing for the Mobile Web Lesson 3: HTML5 Web Apps Designing for the Mobile Web Lesson 3: HTML5 Web Apps Michael Slater, CEO Andrew DesChenes, Dir. Services course-support@webvanta.com 888.670.6793 www.webvanta.com Welcome! Four sessions 1: The Mobile

More information

Principles of Web Design 6 th Edition. Chapter 12 Responsive Web Design

Principles of Web Design 6 th Edition. Chapter 12 Responsive Web Design Principles of Web Design 6 th Edition Chapter 12 Responsive Web Design Objectives Recognize the need for responsive web design Use media queries to apply conditional styles Build a basic media query Create

More information

Mobile Web Applications using HTML5. L. Cotfas 14 Dec. 2011

Mobile Web Applications using HTML5. L. Cotfas 14 Dec. 2011 Mobile Web Applications using HTML5 L. Cotfas 14 Dec. 2011 Reasons for mobile web development Many different platforms: Android, IPhone, Symbian, Windows Phone/ Mobile, MeeGo (only a few of them) Reasons

More information

Responsive Web Design in Application Express

Responsive Web Design in Application Express Insert Information Protection Policy Classification from Slide 13 1 Responsive Web Design in Application Express using HTML5 and CSS3 Shakeeb Rahman @shakeeb Principal Member of Technical Staff Oracle

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

CIS 467/602-01: Data Visualization

CIS 467/602-01: Data Visualization CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful

More information

Course Description. Course Objectives

Course Description. Course Objectives MONTGOMERY COLLEGE Business, Accounting, Economics, Computer Applications, and Paralegal Studies Department Germantown Campus CMAP272 Professional Web Site Development Instructor: John Coliton Spring,

More information

Responsive Web Design for Drupal

Responsive Web Design for Drupal Responsive Web Design for Drupal www.responsivewebdesignguild.com @emmajanedotnet emma@designtotheme.com I am IAM Sorry A boot eh? Drupal drupal.org/user/1773 Photo: morten.dk Legs: walkah Author / Trainer

More information

Web Development I & II*

Web Development I & II* Web Development I & II* Career Cluster Information Technology Course Code 10161 Prerequisite(s) Computer Applications Introduction to Information Technology (recommended) Computer Information Technology

More information

Responsive Web Design: Media Types/Media Queries/Fluid Images

Responsive Web Design: Media Types/Media Queries/Fluid Images HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.

More information

HTML5 the new. standard for Interactive Web

HTML5 the new. standard for Interactive Web WHITE PAPER HTML the new standard for Interactive Web by Gokul Seenivasan, Aspire Systems HTML is everywhere these days. Whether desktop or mobile, windows or Mac, or just about any other modern form factor

More information

IE Class Web Design Curriculum

IE Class Web Design Curriculum Course Outline Web Technologies 130.279 IE Class Web Design Curriculum Unit 1: Foundations s The Foundation lessons will provide students with a general understanding of computers, how the internet works,

More information

SYST35300 Hybrid Mobile Application Development

SYST35300 Hybrid Mobile Application Development SYST35300 Hybrid Mobile Application Development Native, Web and Hybrid applications Hybrid Applications: Frameworks Native, Web and Hybrid Applications Mobile application development is the process by

More information

Building Responsive Websites with the Bootstrap 3 Framework

Building Responsive Websites with the Bootstrap 3 Framework Building Responsive Websites with the Bootstrap 3 Framework Michael Slater and Charity Grace Kirk michael@webvanta.com 888.670.6793 1 Today s Presenters Michael Slater President and Cofounder of Webvanta

More information

Uniface Road Map and Product Update Michael Taylor Product Manager

Uniface Road Map and Product Update Michael Taylor Product Manager Uniface Road Map and Product Update Michael Taylor Product Manager December 1, 2015 Advanced Development Technology Agenda Reengineering the lab Uniface 9.7 Uniface 9.6 Uniface Anywhere Uniface 10 Reengineering

More information

HTML5 - Key Feature of Responsive Web Design

HTML5 - Key Feature of Responsive Web Design Volume A.13-10 Publish Date: 09 th August 2013 Author(s): Gateway Team HTML5 - Key Feature of Responsive Web Design ARTICLE Gateway TechnoLabs Pvt. Ltd. (ISO 9001:2008) B 81, Corporate House, Judges Bungalow

More information

1. About the Denver LAMP meetup group. 2. The purpose of Denver LAMP meetups. 3. Volunteers needed for several positions

1. About the Denver LAMP meetup group. 2. The purpose of Denver LAMP meetups. 3. Volunteers needed for several positions 1. About the Denver LAMP meetup group 1.Host a presentation every 1-3 months 2.Cover 1-3 related topics per meeting 3.Goal is to provide high quality education and networking, for free 2. The purpose of

More information

Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20

Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20 Responsive Web Design (RWD) Best Practices Guide Version: 2013.11.20 This document includes best practices around responsive web design (RWD) when developing hybrid applications. Details on each checklist

More information

Sizmek Formats. IAB Mobile Pull. Build Guide

Sizmek Formats. IAB Mobile Pull. Build Guide Sizmek Formats IAB Mobile Pull Build Guide Table of Contents Overview...3 Supported Platforms... 6 Demos/Downloads... 6 Known Issues... 6 Implementing a IAB Mobile Pull Format...6 Included Template Files...

More information

Transitioning Computer Courseware to Mobile Web Apps

Transitioning Computer Courseware to Mobile Web Apps Transitioning Computer Courseware to Mobile Web Apps RE: http://vanat.cvm.umn.edu/mneuroconcepts/ Thomas F. Fletcher, DVM, PhD Synopsis: To exploit the learning potential of mobile devices, we are converting

More information

Progressive Enhancement With GQuery and GWT. Ray Cromwell ray@timefire.com

Progressive Enhancement With GQuery and GWT. Ray Cromwell ray@timefire.com Progressive Enhancement With GQuery and GWT Ray Cromwell ray@timefire.com Web Application Models Web 1.0, 1 Interaction = 1 Page Refresh Pure JS, No Navigation Away from Page Mixed Model, Page Reloads

More information

HTML5 and CSS3 Web Coding for Designers Lesson 4: The Cool New Stuff

HTML5 and CSS3 Web Coding for Designers Lesson 4: The Cool New Stuff HTML5 and CSS3 Web Coding for Designers Lesson 4: The Cool New Stuff Michael Slater, CEO Lisa Irwin, Sr. Developer course-support@webvanta.com 888.670.6793 www.webvanta.com Welcome! Four sessions 1: Semantic

More information

CREATING RESPONSIVE UI FOR WEB STORE USING CSS

CREATING RESPONSIVE UI FOR WEB STORE USING CSS CREATING RESPONSIVE UI FOR WEB STORE USING CSS Magdalena Wiciak Bachelor s Thesis May 2014 Degree Programme in Information Technology Technology, communication and transport DESCRIPTION Author(s) WICIAK,

More information

Developing Mobile Websites with Responsive Web Design and jquery Mobile

Developing Mobile Websites with Responsive Web Design and jquery Mobile Developing Mobile Websites with Responsive Web Design and jquery Mobile Duration: 5 Days Price: CDN$2875 *Prices are subject to GST/HST Course Description: This hands-on course conveys the fundamental

More information

HOW Interactive Design Conference 2013

HOW Interactive Design Conference 2013 HOW Interactive Design Conference 2013 Photoshop to HTML Chris Converse Use this QR code to get the mobile schedule for this conference. Get session and speaker info, lunch ideas, and links for getting

More information

Making Web Application using Tizen Web UI Framework. Koeun Choi

Making Web Application using Tizen Web UI Framework. Koeun Choi Making Web Application using Tizen Web UI Framework Koeun Choi Contents Overview Web Applications using Web UI Framework Tizen Web UI Framework Web UI Framework Launching Flow Web Winsets Making Web Application

More information

The Essential Guide to HTML Email Design

The Essential Guide to HTML Email Design The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters

More information

Modern Web Development From Angle Brackets to Web Sockets

Modern Web Development From Angle Brackets to Web Sockets Modern Web Development From Angle Brackets to Web Sockets Pete Snyder Outline (or, what am i going to be going on about ) 1.What is the Web? 2.Why the web matters 3.What s unique about

More information

Coding Tips You Should Know Before Distributing Your HTML5 Web App on Mobile Devices

Coding Tips You Should Know Before Distributing Your HTML5 Web App on Mobile Devices Coding Tips You Should Know Before Distributing Your HTML5 Web App on Mobile Devices Russell Beattie, Amazon November 15, 2013 2013 Amazon.com, Inc. and its affiliates. All rights reserved. May not be

More information

How To Develop An Html5 Based Mobile App

How To Develop An Html5 Based Mobile App July 2012 HTML5 in MobiLe DeveLopMenT introduction HTML5 is soon to be the no. 3 mobile platform after Apple s ios and Google s Android. Not being a popular technology within enterprise world at first,

More information

Dashboard Skin Tutorial. For ETS2 HTML5 Mobile Dashboard v3.0.2

Dashboard Skin Tutorial. For ETS2 HTML5 Mobile Dashboard v3.0.2 Dashboard Skin Tutorial For ETS2 HTML5 Mobile Dashboard v3.0.2 Dashboard engine overview Dashboard menu Skin file structure config.json Available telemetry properties dashboard.html dashboard.css Telemetry

More information

IAB Full page flex Mobile Rising Star Ad Unit

IAB Full page flex Mobile Rising Star Ad Unit IAB Full page flex Mobile Rising Star Ad Unit Style Guide and Tech Specs Created By IAB Full Page Flex Ad Unit - Style Guide and Tech Specs. V3 January 2013 0 I. Description The IAB Full page flex Ad Unit

More information

RIA Technologies Comparison

RIA Technologies Comparison RIA Technologies Comparison Focus Since the subject is huge I will first present a general view and then focus on more ( hopefully ) interesting parts Also, some key points need to be established: Technologies

More information

BEYOND RESPONSIVE. by Marcus Morba (drupal.org/user/710680 = mori) Sunday 24 November 13

BEYOND RESPONSIVE. by Marcus Morba (drupal.org/user/710680 = mori) Sunday 24 November 13 BEYOND RESPONSIVE by Marcus Morba (drupal.org/user/710680 = mori) 1 my first responsive mobile experience was in 2004 2 2 target devices target resolutions: 240 x 320 and 480 x 640 one code base for layout

More information

HYBRID APPLICATION DEVELOPMENT IN PHONEGAP USING UI TOOLKITS

HYBRID APPLICATION DEVELOPMENT IN PHONEGAP USING UI TOOLKITS HYBRID APPLICATION DEVELOPMENT IN PHONEGAP USING UI TOOLKITS RAJESH KUMAR Technical Lead, Aricent PUNEET INDER KAUR Senior Software Engineer, Aricent HYBRID APPLICATION DEVELOPMENT IN PHONEGAP USING UI

More information

Peers Technologies Pvt. Ltd. Web Application Development

Peers Technologies Pvt. Ltd. Web Application Development Page 1 Peers Technologies Pvt. Ltd. Course Brochure Web Application Development Overview To make you ready to develop a web site / web application using the latest client side web technologies and web

More information

Skills for Employment Investment Project (SEIP)

Skills for Employment Investment Project (SEIP) Skills for Employment Investment Project (SEIP) Standards/ Curriculum Format For Web Design Course Duration: Three Months 1 Course Structure and Requirements Course Title: Web Design Course Objectives:

More information

Develop highly interactive web charts with SAS

Develop highly interactive web charts with SAS ABSTRACT Paper 1807-2014 Develop highly interactive web charts with SAS Rajesh Inbasekaran, Naren Mudivarthy, Neetha Sindhu Kavi Associates LLC, Barrington IL Very often there is a need to present the

More information

HTML5 DESIGNING RICH INTERNET APPLICATIONS MATTHEW DAVID

HTML5 DESIGNING RICH INTERNET APPLICATIONS MATTHEW DAVID HTML5 HTML5 DESIGNING RICH INTERNET APPLICATIONS MATTHEW DAVID AMSTERDAM BOSTON HEIDELBERG LONDON NEW YORK OXFORD PARIS SAN DIEGO SAN FRANCISCO SINGAPORE SYDNEY TOKYO Focal Press is an imprint of Elsevier

More information

Responsive Web Design. birds of feather

Responsive Web Design. birds of feather Responsive Web Design birds of feather Approaches to Mobile Development 1. No Mobile Approach 2. Native Mobile Applications 3. Mobile Websites 4. Responsive (universal) design No Mobile Approach Website

More information

STATEMENT OF PURPOSE

STATEMENT OF PURPOSE WEB DESIGN STATEMENT OF PURPOSE This course is intended for the student interested in learning how to create web pages for the World Wide Web. Instruction on how to program using the HTML language is provided.

More information

Firefox for Android. Reviewer s Guide. Contact us: press@mozilla.com

Firefox for Android. Reviewer s Guide. Contact us: press@mozilla.com Reviewer s Guide Contact us: press@mozilla.com Table of Contents About Mozilla Firefox 1 Move at the Speed of the Web 2 Get Started 3 Mobile Browsing Upgrade 4 Get Up and Go 6 Customize On the Go 7 Privacy

More information

HTML5: Separating Fact and Fiction. www.wipconnector.com @caaarlo #wipjam

HTML5: Separating Fact and Fiction. www.wipconnector.com @caaarlo #wipjam HTML5: Separating Fact and Fiction www.wipconnector.com @caaarlo #wipjam Announcements What is HTML5? Agenda What can HTML5 do? What can t it do? Pure HTML5/Native vs. Hybrid approaches Guest Developer

More information

Web Design Specialist

Web Design Specialist UKWDA Training: CIW Web Design Series Web Design Specialist Course Description CIW Web Design Specialist is for those who want to develop the skills to specialise in website design and builds upon existing

More information

Foundations. Web Development and Design. with HTML5. [Terry Ann Felke-Morris, Ed.D.J. 6th Edition. Harper College. Piyali Sengupta.

Foundations. Web Development and Design. with HTML5. [Terry Ann Felke-Morris, Ed.D.J. 6th Edition. Harper College. Piyali Sengupta. 6th Edition Web Development and Design Foundations with HTML5 [Terry Ann Felke-Morris, Ed.D.J Professor Harper College International Edition contributions by Piyali Sengupta PEARSON Boston Columbus Indianapolis

More information

Republic Polytechnic School of Infocomm C308 Web Framework. Module Curriculum

Republic Polytechnic School of Infocomm C308 Web Framework. Module Curriculum Republic Polytechnic School of Infocomm C308 Web Framework Module Curriculum This document addresses the content related abilities, with reference to the module. Abilities of thinking, learning, problem

More information

Creating Effective Mobile Advertising Campaigns

Creating Effective Mobile Advertising Campaigns Creating Effective Mobile Advertising Campaigns This document pertains specifically to creating Mobile Display Ad Campaigns running on the Google Ads network. It is intended to provide recommendations

More information

Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps. JK (JayaKumar Pedapudi) Principal Consultant NTT DATA, Inc.

Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps. JK (JayaKumar Pedapudi) Principal Consultant NTT DATA, Inc. Going Beyond SAP ITS Mobile Apps to a Responsive Design Mobile Apps JK (JayaKumar Pedapudi) Principal Consultant NTT DATA, Inc. Introduction. Learning Points. What is Responsive Design and its Role? Design

More information

Developing Your School Website

Developing Your School Website Developing Your School Website Why do you need a website Determining website requirements Developing the website Ongoing maintenance of the site Why does your school need a website? Promotion and status

More information