Top Trends in elearning. September 15 & 16, Is HTML5 Ready for elearning? Debbie Richards, Creative Interactive Ideas
|
|
- Branden Sherman
- 6 years ago
- Views:
Transcription
1 Top Trends in elearning September 15 & 16, Is HTML5 Ready for elearning?
2 Is HTML5 Ready for elearning? Polls 1 and 3 2 Session 501 Is HTML5 Ready for elearning? Page 1
3 What s Covered in This Session? In this session you will learn: Why you should be interested in HTML5 How to evaluate browsers for HTML5 How to recognize HTML5 features in websites and web pages What tools are available to develop HTML5-based elearning projects About key HTML5 features; including video, audio, and geolocation attributes 3 HTML5 HTML5 is the 5 th major rev of Hypertext Markup Language (HTML), which is the core language of the web Session 501 Is HTML5 Ready for elearning? Page 2
4 Why All the Excitement? Unlike laptops and desktops, key smartphones (and Apple products) do not support Adobe Flash HTML5 has new tags that play video and audio in a browser without requiring a proprietary plugin such as Adobe's Flash, Microsoft's Silverlight, or Apple's QuickTime With these capabilities, HTML5 is an alternate for Adobe Flash and the Adobe Flash plugin Why All the Excitement? Makes it possible to design, develop, and publish once and display the published content via each device's browser Reduces cost 1 application for multiple devices ELearning Guild Report: Mobile Learning: Landscape and Trends Session 501 Is HTML5 Ready for elearning? Page 3
5 Where Can You Use HTML5? Web-based applications Apps for mobile (iphone, ipad, Android) A lot of web content currently in HTML Video and audio Articles, White Papers and ebooks (PDF.js in the works to replace PDF plug-in) On-the-go training (Mobile learning) HTML5: Desktop And Mobile Devices ipad Desktop iphone Healthcare Sample: First Aid Fundamentals Navigate to this URL from your computer or mobile device. (Flash and Mobile Course) 8 Session 501 Is HTML5 Ready for elearning? Page 4
6 PDF Reader in JavaScript 9 Challenges for HTML5 Adoption Adobe Flash will be the dominant medium for elearning content for a while A lot of elearning content is written in Flash and will remain that way A lot of Flash programmers work on creating elearning courses Web developers will adopt HTML5/CSS3/JavaScript combination, but they are not necessarily content developers Session 501 Is HTML5 Ready for elearning? Page 5
7 BROWSER Poll #13 12 Session 501 Is HTML5 Ready for elearning? Page 6
8 Browser Functionality The browser s main functionality is to present the web resource you choose, by requesting it from the server and displaying it on the browser window The resource is usually an HTML document, but may also be a PDF, image, or other type The location of the resource is specified by the user using a URI (Uniform Resource Identifier) 13 Browser Support There are five major browsers used today: Internet Explorer, Firefox, Safari, Chrome, and Opera. Session 501 Is HTML5 Ready for elearning? Page 7
9 Browser Support Test how well the browser in your computer and handheld devices support HTML point best Google Chrome 16 Session 501 Is HTML5 Ready for elearning? Page 8
10 Mozilla Firefox 17 Microsoft Internet Explorer 18 Session 501 Is HTML5 Ready for elearning? Page 9
11 Motorola XOOM Tablet with Android OS 19 Overall Tests - Desktop 20 Session 501 Is HTML5 Ready for elearning? Page 10
12 Overall Tests Tablet 21 Overall Tests Mobile Phone 22 Session 501 Is HTML5 Ready for elearning? Page 11
13 EXAMPLES HTML5 Samples Session 501 Is HTML5 Ready for elearning? Page 12
14 Tablet Reading Experience HTML5-based Book 20 Things I learned about the internet 26 Session 501 Is HTML5 Ready for elearning? Page 13
15 HTML5-based Book 20 Things I learned about the internet 27 Zoom and Panning Example 28 Session 501 Is HTML5 Ready for elearning? Page 14
16 ELEARNING DEVELOPMENT TOOLS Poll #14 30 Session 501 Is HTML5 Ready for elearning? Page 15
17 mlearning Studio Lectora Online 32 Session 501 Is HTML5 Ready for elearning? Page 16
18 Claro 33 Raptivity HTML5 TurboPack 20Sample%20Course/Index.html?15 Session 501 Is HTML5 Ready for elearning? Page 17
19 Articulate Storyline (in Beta) A standalone desktop authoring tool HTML Articulate Player with Video Session 501 Is HTML5 Ready for elearning? Page 18
20 HTML Articulate Player with Video Screenr Session 501 Is HTML5 Ready for elearning? Page 19
21 Adobe Captivate Publish To iphone From Captivate 5 To deploy a Captivate course on an iphone you need Adobe elearning Suite 2, or both Adobe Captivate 5 and Adobe Flash Professional. You also need to install the Packager for iphone from Adobe Labs. 1. Get an iphone developer certificate from Apple 2. Get Development Provisioning profile from Apple (a file that lets you test or distribute an iphone application. You obtain provisioning profile files from Apple. A provisioning profile is assigned to a specific development certificate, an application ID, and one or more device IDs). More details here 3. Create a Captivate project for the iphone form factor 320 * While publishing the SWF, turn ON this option in the publish dialog Enable SWF for conversion to iphone application Session 501 Is HTML5 Ready for elearning? Page 20
22 WEB DEVELOPMENT TOOLS Adobe Dreamweaver CS5 Dreamweaver CS5.5 incorporates native support for the new HTML5 structural elements and many of the CSS3 properties supported by the latest browsers Part of the Adobe elearning Suite Session 501 Is HTML5 Ready for elearning? Page 21
23 Aloha Editor 43 Export FLA To HTML5 Wallaby Code name for an experimental technology that converts the artwork and animation contained in Adobe Flash Professional (FLA) files into HTML Session 501 Is HTML5 Ready for elearning? Page 22
24 Adobe Edge A new web motion and interaction design tool that allows designers to bring animated content to websites, using web standards like HTML5, JavaScript, and CSS3 Google Swiffy Note: Swiffy currently does not convert SWF files larger than 1024 KB Session 501 Is HTML5 Ready for elearning? Page 23
25 UNDER THE HOOD HTML5 Stack HTML5 the markup language CSS3 (the latest version of Cascading Style Sheets) how it looks or is rendered JavaScript the programming language Session 501 Is HTML5 Ready for elearning? Page 24
26 Areas Of Focus The markup part of HTML5: focused on developing web sites and pages The API (application programming interface) part: focused on building web applications (think of Gmail as an example of a web application) Features New structural and semantic markup Such as header, footer, and nav elements The new canvas element Creating web based bitmap graphics using JavaScript New native audio and video elements, and related elements and attributes Embedding multimedia content that browsers can play without plugins <div id= header >. Header content </div> <header>. Header content </header> Session 501 Is HTML5 Ready for elearning? Page 25
27 Tags <audio> <canvas> <footer> <header> <nav> <time> <video> tag defines sound content tag defines graphics tag defines a footer for a section or page tag defines a header for a section or page tag defines navigation links tag defines a date/time tag defines a video Offline Web Application Enabling resources like HTML, CSS, and JavaScript to be cached, so that if a user goes offline, the browser will have kept these resources and the application can still be used, or even installed locally on a device Sending events to a web application when the user goes on and offline Session 501 Is HTML5 Ready for elearning? Page 26
28 Geolocation API function get_location() { navigator.geolocation.getcurrentposition(show_map);} Allows a web site or application to ask the browser where a user is located (including longitude, latitude, and altitude; but also potentially the direction they are facing, and their speed) Of course, whether the user wishes to share this information is at their discretion Examples Sketching: Drag and Drop: Demonstration of editable text and local Storage; edit text in the box, close the window, and then click the link again: Geolocation: Session 501 Is HTML5 Ready for elearning? Page 27
29 Recommended Reading 55 CODE Session 501 Is HTML5 Ready for elearning? Page 28
30 Canvas Example Source Code <html> <body> <canvas id="mycanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> </canvas> <script type="text/javascript"> var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> </body> </html> Session 501 Is HTML5 Ready for elearning? Page 29
31 Head <html> <head> </head> </html> Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>. Body <html> <head> </head> <body> The body element defines the document's body. The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. </body> </html> Session 501 Is HTML5 Ready for elearning? Page 30
32 Canvas <html> <head> </head> <body> <canvas id="mycanvas" width="200" height="100" </canvas> </body> </html> The HTML5 canvas element uses JavaScript to draw graphics on a web page. A canvas is a rectangular area, and you control every pixel of it. The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. Specify the id, width, and height of the element Draw With JavaScript <script type="text/javascript"> Var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript. JavaScript uses the ID to find the canvas element. Session 501 Is HTML5 Ready for elearning? Page 31
33 Draw With JavaScript <script type="text/javascript"> Var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> The getcontext("2d") object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images, and more. Draw With JavaScript <script type="text/javascript"> Var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> Draw a red rectangle. The fillstyle method makes it red. The fillrect method specifies the shape, position, and size. Session 501 Is HTML5 Ready for elearning? Page 32
34 Draw With JavaScript <script type="text/javascript"> Var c=document.getelementbyid("mycanvas"); var cxt=c.getcontext("2d"); cxt.fillstyle="#ff0000"; cxt.fillrect(0,0,150,75); </script> The fillrect method above had the parameters (0,0,150,75). This means: Draw a 150x75 rectangle on the canvas, starting at the top left corner (0,0). The canvas' X and Y coordinates are used to position drawings on the canvas. SVG Example SVG stands for Scalable Vector Graphics Session 501 Is HTML5 Ready for elearning? Page 33
35 Source Code <svg width="100%" height="100%" version="1.1" xmlns=" <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg> Canvas vs. SVG Think of the difference between canvas and svg as the difference between Photoshop and Illustrator (One deals with bitmaps and the other vector art With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap, you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors, you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects Session 501 Is HTML5 Ready for elearning? Page 34
36 SVG Advantages SVG files can be read and modified by a large range of tools (e.g. notepad) SVG files are smaller and more compressible than JPEG and GIF images SVG images are scalable SVG images can be printed with high quality at any resolution SVG images are zoomable (and the image can be zoomed without degradation) Text in SVG is selectable and searchable (excellent for making maps) SVG works with Java technology SVG is an open standard SVG files are pure XML Video Example Session 501 Is HTML5 Ready for elearning? Page 35
37 Source Code <video controls="controls"> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42e01e, mp4a.40.2"' /> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' /> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' /> <video> File vs. Video Formats One of the biggest sources of confusion about video is not realizing that the file format is completely different from the video format. So you're always dealing with two formats, not one Examples of file formats are.mp4,.flv, f4v,.ogv, or.avi. File formats are often called container formats because they're containers for the actual video The video format is the flavor of compression that's used on the video. This is often called a codec Session 501 Is HTML5 Ready for elearning? Page 36
38 MP4 The movie.mp4 file is a container that can hold video encoded as either MPEG-4 or H.264. Flash A movie.flv (Flash) file could also hold H.264 video, or it could hold video encoded with vp6 or Sorenson Spark. But it can't hold MPEG-4 video. Session 501 Is HTML5 Ready for elearning? Page 37
39 Codec A codec encodes a data stream or signal for transmission, storage or encryption, or decodes it for playback or editing The process of decoding what s inside the video container file varies To know how to decode a movie, the player (which is your web browser in the case of HTML5 video) has to know with which codec the movie was encoded Video File Formats Each format holds at minimum one video track, and most likely, one audio track When you watch a movie online, your video player decodes both the audio and video and sends the information to your screen and speakers Session 501 Is HTML5 Ready for elearning? Page 38
40 Three Parts To Video 1. The file format that holds the video, like.mp4,.flv,.f4v,.ogv, or.avi 2. The video format (aka codec), like H.264, MPEG-4, or Theora 3. The player that makes it available to your site visitors, such as the Adobe Flash plugin, or the new <video></video> tag Codec-Neutral HTML5 doesn t care what format your video file is. Whether it s MP4, WMV, MOV, or whatever it s all the same to HTML5 You can use an incredibly simple set of tags to play video on your web app: <video></video> There are equivalent tags for pretty much any form of media You ll no longer have to worry about whether or not a device can handle a particular kind of file 78 Session 501 Is HTML5 Ready for elearning? Page 39
41 SUMMARY Final Words For now, if you wish to deliver your interactive elearning on ipad (or iphone/itouch), consider HTML5 in the place of Flash Upgrade browsers to support HTML5 Check out the new HTML5 Rapid Development Tools and HTML5 demo websites Budget for gadgets tablets, smartphones, and ipads, so you can test on different platforms 80 Session 501 Is HTML5 Ready for elearning? Page 40
42 Other Cool Example Sites (Google site) Support When Can I Use HTML5 Doctor Introducing HTML5 Quirksmode covers HTML5 browser compatibility Wikipedia s HTML5 browser support guide Mobile Metrics report Session 501 Is HTML5 Ready for elearning? Page 41
43 Training (it s $10!) canvas-tutorials-2010/ tutorials-techniques/ canvas-drawing/?gclid=ciupku2li6scfwnetaodn1xxuq Books Developing with Web Standards Introducing HTML5 HTML5 for Web Designers Dive into HTML5 Session 501 Is HTML5 Ready for elearning? Page 42
44 Contact Info Debbie Richards Website: Blog: Tweets: 85 Session 501 Is HTML5 Ready for elearning? Page 43
HTML5 HTML & Fut ure o Web M edi dia Streami a est Work h op, ov 2010 Michael Dale Zohar Babin eve oper o Dev R l e t a i tions & C
HTML5 &F Future of fweb bmedia Streaming Media West Workshop, Nov. 2010 Michael Dale Zohar Babin Senior Developer Head of Dev Relations & Community michael.dale@kaltura.com zohar.babin@kaltura.com @michael_dale
More informationWhat is HTML5? The previous version of HTML came in The web has changed a lot since then.
What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since then. HTML5 is still a work in progress. However,
More informationLesson 5: Multimedia on the Web
Lesson 5: Multimedia on the Web Learning Targets I can: Define objects and their relationships to multimedia Explain the fundamentals of C, C++, Java, JavaScript, JScript, C#, ActiveX and VBScript Discuss
More informationLesson 5: Multimedia on the Web
Lesson 5: Multimedia on the Web Lesson 5 Objectives Define objects and their relationships to multimedia Explain the fundamentals of C, C++, Java, JavaScript, JScript, C#, ActiveX and VBScript Discuss
More informationHTML5 - INTERVIEW QUESTIONS
HTML5 - INTERVIEW QUESTIONS http://www.tutorialspoint.com/html5/html5_interview_questions.htm Copyright tutorialspoint.com Dear readers, these HTML5 Interview Questions have been designed specially to
More informationHTML5 MOCK TEST HTML5 MOCK TEST I
http://www.tutorialspoint.com HTML5 MOCK TEST Copyright tutorialspoint.com This section presents you various set of Mock Tests related to HTML5 Framework. You can download these sample mock tests at your
More information16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과
16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 목차 HTML5 Introduction HTML5 Browser Support HTML5 Semantic Elements HTML5 Canvas HTML5 SVG HTML5 Multimedia 2 HTML5 Introduction What
More informationFlash, Video. How to add Flash movies into your site How to add video and audio to your site HTML5 <video> and <audio> elements
9 Flash, Video & Audio XX XX X X How to add Flash movies into your site How to add video and audio to your site HTML5 and elements Flash is a very popular technology used to add animations,
More informationHTML 5 and CSS 3, Illustrated Complete. Unit K: Incorporating Video and Audio
HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio Objectives Understand Web video and audio Use the video element Incorporate the source element Control playback HTML 5 and CSS
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) Helper Applications & Plug-Ins
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 11 Web Multimedia and Interactivity Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More informationHTML5. Language of the Modern Web. By: Mayur Agrawal. Copyright TIBCO Software Inc.
HTML5 Language of the Modern Web By: Mayur Agrawal Copyright 2000-2015 TIBCO Software Inc. Content Exploring prior standards Why HTML5? HTML5 vs HTML4 Key Features of HTML5 HTML5 and Technical Writing
More informationLiving through Flash to ipad/html5 Conversion and Development
Living through Flash to ipad/html5 Conversion and Development Dave Goodman SoftAssist, Inc. 610.265.8484 ext 14 dgood@softassist.com www.softassist.com The Issue Your Courses How do we get from here to
More informationGetting Started. Most likely, if you ve purchased a copy of Adobe Flash CS3 Professional, Introducing Adobe Flash CS3 Professional 3
1 Getting Started Introducing Adobe Flash CS3 Professional 3 Why Use Flash CS3? 3 What s New in Flash CS3? 6 Flash, Flash Player, or Flash Lite? 7 File Types Associated with Flash CS3 8 Caution: Player
More informationWorking with Images and Multimedia
CHAPTER Working with Images and Multimedia You can make your web page more interesting by adding multimedia elements. You can download the files featured in this chapter from www.digitalfamily.com/tyv.
More informationMobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE
Mobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE COURSE TITLE WEB SITE DESIGN COURSE DURATION 19 Hours of Interactive Training COURSE OVERVIEW In this 7 session course Debbie will take you through the
More informationIDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 8 IDM 221: Web Authoring I 2 Media on the Web IDM 221: Web Authoring I 3 Before we cover how to include media files in a web page, you need to be familiar
More informationIGME-330. Rich Media Web Application Development I Week 1
IGME-330 Rich Media Web Application Development I Week 1 Developing Rich Media Apps Today s topics Tools we ll use what s the IDE we ll be using? (hint: none) This class is about Rich Media we ll need
More informationHTML5: MULTIMEDIA. Multimedia. Multimedia Formats. Common Video Formats
LEC. 5 College of Information Technology / Department of Information Networks.... Web Page Design/ Second Class / Second Semester HTML5: MULTIMEDIA Multimedia Multimedia comes in many different formats.
More informationADOBE CAPTIVATE 8. Content Planning Guide
ADOBE CAPTIVATE 8 Content Planning Guide Summer 2014 Table of Contents Using Captivate 8 on Your OnPoint Learning Platform... 2 What are the Advantages and Disadvantages of Captivate?... 2 Use Cases for
More informationCITS3403 Agile Web Development Semester 1, 2016
6 Video, Audio and Canvas CITS3403 Agile Web Development Semester 1, 2016 The audio Element Prior to HTML5, a plug- in was required to play sound while a document was being displayed Audio encoding algorithms
More informationInternet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information.
Internet: An international network of connected computers. The purpose of connecting computers together, of course, is to share information. WWW: (World Wide Web) A way for information to be shared over
More informationThe Next Step. DPS Adobe Digital Publishing Suite. Apple cofounder Steve Jobs stated in a 1983 speech
The Next Step DPS Adobe Digital Publishing Suite Apple cofounder Steve Jobs stated in a 1983 speech that his company s strategy is really simple. What we want to do is we want to put an incredibly great
More informationAdvanced High Graphics
VISUAL MEDIA FILE TYPES JPG/JPEG: (Joint photographic expert group) The JPEG is one of the most common raster file formats. It s a format often used by digital cameras as it was designed primarily for
More informationCOPYRIGHTED MATERIAL. Defining HTML5. Lesson 1
Lesson 1 Defining HTML5 What you ll learn in this lesson: Needs fulfilled by HTML5 The scope of HTML5 An overview of HTML5 Syntax An overview of HTML5 APIs and supporting technologies In this lesson, you
More informationScalable Vector Graphics (SVG) vector image World Wide Web Consortium (W3C) defined with XML searched indexed scripted compressed Mozilla Firefox
SVG SVG Scalable Vector Graphics (SVG) is an XML-based vector image format for twodimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed
More informationScalable Vector Graphics: SVG. The Little-Known Treasure of Document Viewing
Scalable Vector Graphics: SVG The Little-Known Treasure of Document Viewing 1 Introduction Most everyone has experienced that dreaded feeling of downloading an image from the web to use in a document or
More informationCS474 MULTIMEDIA TECHNOLOGY
CS474 MULTIMEDIA TECHNOLOGY Pr. G. Tziritas, Spring 2018 SVG Animation Tutorial G. Simantiris (TA) OVERVIEW Introduction Definitions SVG Creating SVGs SVG basics Examples Animation using software Examples
More informationVisual HTML5. Human Information Interaction for Knowledge Extraction, Interaction, Utilization, Decision making HI-I-KEIUD
Visual HTML5 1 Overview HTML5 Building apps with HTML5 Visual HTML5 Canvas SVG Scalable Vector Graphics WebGL 2D + 3D libraries 2 HTML5 HTML5 to Mobile + Cloud = Java to desktop computing: cross-platform
More informationHow to create interactive documents
Adobe InDesign Guide How to create interactive documents You can use Adobe InDesign to create dynamic web content or interactive documents. InDesign supports export to web-ready HTML or interactive PDF.
More informationCourse 20480: Programming in HTML5 with JavaScript and CSS3
Course 20480: Programming in HTML5 with JavaScript and CSS3 Overview About this course This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic HTML5/CSS3/JavaScript
More informationIntroduction to HTML 5. Brad Neuberg Developer Programs, Google
Introduction to HTML 5 Brad Neuberg Developer Programs, Google The Web Platform is Accelerating User Experience XHR CSS DOM HTML iphone 2.2: Nov 22, 2008 canvas app cache database SVG Safari 4.0b: Feb
More informationHow to create an animated face
Adobe Flash CS4 Activity 5.1 guide How to create an animated face This activity walks you step by step through the process of creating a simple animation by using Adobe Flash CS4. You use drawing tools
More informationCOURSE 20480B: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
ABOUT THIS COURSE This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic HTML5/CSS3/JavaScript programming skills. This course is an entry point into
More informationfooter, header, nav, section. search. ! Better Accessibility.! Cleaner Code. ! Smarter Storage.! Better Interactions.
By Sruthi!!!! HTML5 was designed to replace both HTML 4, XHTML, and the HTML DOM Level 2. It was specially designed to deliver rich content without the need for additional plugins. The current version
More informationAGENDA. :: Add Meta Tag for Viewport (inside of head element): :: Add Script that renders HTML5 elements for older versions of Internet Explorer
CLASS :: 14 12.10 2018 3 Hours AGENDA LECTURE :: Responsive Web Design [RWD] DOWNLOAD ASSETS [ CSS ] :: Media Query [rwd.css] ADD HTML META TAG & IE SCRIPT [ HTML ] :: Add Meta Tag for Viewport (inside
More informationProgramming in HTML5 with JavaScript and CSS3
Programming in HTML5 with JavaScript and CSS3 20480B; 5 days, Instructor-led Course Description This course provides an introduction to HTML5, CSS3, and JavaScript. This course helps students gain basic
More informationThe diverse software in Adobe Creative Suite 2 enables you to create
Chapter 1: Introducing Adobe Creative Suite 2 In This Chapter Looking over InDesign Drawing with Illustrator Introducing Photoshop Getting started with Acrobat Going over GoLive Integrating the programs
More information20480C: Programming in HTML5 with JavaScript and CSS3. Course Code: 20480C; Duration: 5 days; Instructor-led. JavaScript code.
20480C: Programming in HTML5 with JavaScript and CSS3 Course Code: 20480C; Duration: 5 days; Instructor-led WHAT YOU WILL LEARN This course provides an introduction to HTML5, CSS3, and JavaScript. This
More information11/5/16 WEB DESIGN. Branding Fall 2016
designschool.canva.com/blog/print-vs-web/ nngroup.com/articles/differences-between-print-design-and-web-design/ howdesign.com/web-design-resources-technology/top-content-management-systems-designers/ alchemyuk.com/design/74-top-10-web-design-tips
More informationver Wfl Adobe lif Sams Teach Yourself Betsy Bruce Robyn Ness SAMS 800 East 96th Street, Indianapolis, Indiana, USA WlM John Ray ^lg^
Betsy Bruce John Ray Robyn Ness Sams Teach Yourself Adobe Wfl lif ver W ^msssi^ mm WlM ^lg^ SAMS 800 East 96th Street, Indianapolis, Indiana, 46240 USA Table of Contents Introduction What Is Dreamweaver
More informationThe diverse software in the Adobe Creative Suite enables you to create
556010 Bk01Ch01.qxd 2/6/04 7:28 PM Page 9 Chapter 1: Introducing the Adobe Creative Suite In This Chapter Looking over InDesign Drawing with Illustrator Introducing Photoshop Getting started with Acrobat
More informationSoftware Development Life Cycle (SDLC) Policy ( ) Checklists November 5, 2013
Software Development Life Cycle (SDLC) Policy (4300-0003) Checklists November 5, 2013 Phase 4: Accessibility Checklist Reference Documentation: Applications need to be delivered and compliant with State
More informationCss Pdf Reader Software For Windows 7 64 Bit
Css Pdf Reader Software For Windows 7 64 Bit Oct 19, 2014. PS: I use windows 7 and my PDF viewer is Foxit Reader. I tried upgrading to I'm using Xfce (64-bit) and my pdf viewer is Okular as well. Sometimes
More informationNEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS
NEW WEBMASTER HTML & CSS FOR BEGINNERS COURSE SYNOPSIS LESSON 1 GETTING STARTED Before We Get Started; Pre requisites; The Notepad++ Text Editor; Download Chrome, Firefox, Opera, & Safari Browsers; The
More informationVideo Compression Secrets - Smaller Files, Better Quality UPDATED (Oct 15)
Video Compression Secrets - Smaller Files, Better Quality UPDATED (Oct 15) by Stephen Haskin, October 19, 2015 The best codec to keep file sizes small is Windows Media (WMV). Microsoft has done an excellent
More informationFundamentals of Website Development
Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science In this chapter History of HTML HTML 5-2- 1 The birth of HTML HTML Blows and standardization -3- -4-2 HTML 4.0
More informationTechnologies Web Côté client
Technologies Web Côté client INF228 2013 Multimedia and the Web 218 Multimedia Formats on the Web Images JPG, PNG, GIF, SVG, WebP, SVG Video Container vs. Codec Containers: MP4, OGG, MPEG-2, WebM Codecs:
More informationBasics of Web Technologies
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: Introduction to Web Technologies
More informationMovie Generation Guide
MadCap Mimic Movie Generation Guide Version 7 Copyright 2013 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document
More information1.1 Technical Evaluation Guidelines and Checklist:
1.1 Technical Guidelines and Checklist: This checklist is derived from the LRMDS Technical Specification. Refer to Section 10.2. Instructions: 1. Digital resources may be: a) digital and accessible online
More informationUnifying the Flash and HTML5 Video Experience
Unifying the Flash and HTML5 Video Experience Kaltura Inspire Webinar November 29, 2011 Twitter hashtag: #Kaltura Who uses Kaltura? Over 150,000 websites; over 20,000 community members Market leadership
More informationThis is the vector graphics "drawing" technology with its technical and creative beauty. SVG Inkscape vectors
1 SVG This is the vector graphics "drawing" technology with its technical and creative beauty SVG Inkscape vectors SVG 2 SVG = Scalable Vector Graphics is an integrated standard for drawing Along with
More informationUSING SVG XML FOR REPRESENTATION OF HISTORICAL GRAPHICAL DATA
Преглед НЦД 9 (2006), 39 45 Dušan Tošić, Vladimir Filipović, (Matematički fakultet, Beograd) Jozef Kratica (Matematički institut SANU, Beograd) USING SVG XML FOR REPRESENTATION OF HISTORICAL GRAPHICAL
More informationTime series in html Canvas
Time series in html Canvas In this tutorial, we will create an html document and use it to animate a time series. html html (Hypertext Markup Language) is used to make web pages. No software is needed
More informationAdobe AIR 3 (1) Adobe Air 3 for Flash CS5.5 Developers Course 1. Adobe InDesign CS5 (1) Adobe InDesign CS5: Fundamentals Course 2.
Skillsoft Curriculum Export as of 2017-10-11 Desktop Collections Collection Curriculum Series Asset Title Asset Type Hours DESKTOP COMPUTER SKILLS Adobe Adobe Reader X (1) Adobe Reader X Adobe AIR 3 (1)
More informationCity of Mobile GIS Web Mapping Applications: New Technology, New Expectations
City of Mobile GIS Web Mapping Applications: New Technology, New Expectations Presenters : Scott Kearney GIS Manager Patricia Creamer GIS Analyst Background: GIS Department Developing web mapping apps
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS3 to create a simple page layout. However, a more powerful technique is to use Cascading Style Sheets (CSS).
More informationM4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) DURATION: 03 Hrs
M4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) Max Marks: 100 DURATION: 03 Hrs M1-R4-01-19 1.3 Which of the following tag pair is used to list the text? (a) and (b) and (c)
More informationWeb Design. Basic Concepts
Web Design Basic Concepts Web Design Web Design: Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web. Web sites may be relatively simple, or highly
More informationPIC 40A. Lecture 4b: New elements in HTML5. Copyright 2011 Jukka Virtanen UCLA 1 04/09/14
PIC 40A Lecture 4b: New elements in HTML5 04/09/14 Copyright 2011 Jukka Virtanen UCLA 1 Sectioning elements HTML 5 introduces a lot of sectioning elements. Meant to give more meaning to your pages. People
More informationHTML 5: Fact and Fiction Nathaniel T. Schutta
HTML 5: Fact and Fiction Nathaniel T. Schutta Who am I? Nathaniel T. Schutta http://www.ntschutta.com/jat/ @ntschutta Foundations of Ajax & Pro Ajax and Java Frameworks UI guy Author, speaker, teacher
More informationFlash Domain 4: Building Rich Media Elements Using Flash CS5
Flash Domain 4: Building Rich Media Elements Using Flash CS5 Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Make rich media content development
More informationPop-up. File format/ size: Must provide (.gif or.jpg) still image - max. 75KB for Mobile - max. 400KB for Tablet
Pop-up Dimensions: Mobile: 640 (W) x 960 (H) pixels Tablet Portrait - 1536 (W) x 2048 (H) pixels [For mytv SUPER only] Tablet Landscape - 2048 (W) x 1536 (H) pixels [For mytv SUPER only] File format/ size:
More informationIn this lesson, you ll learn how to do the following: Understand runtime environments Understand the output files for different Animate
12 PUBLISHING Lesson Overview In this lesson, you ll learn how to do the following: Understand runtime environments Understand the output files for different Animate document types Modify the publish settings
More informationPart III: Survey of Internet technologies
Part III: Survey of Internet technologies Content (e.g., HTML) kinds of objects we re moving around? References (e.g, URLs) how to talk about something not in hand? Protocols (e.g., HTTP) how do things
More informationLeveraging the HTML5 Canvas/Javascript for web and mobile maps with CartoVista
Leveraging the HTML5 Canvas/Javascript for web and mobile maps with CartoVista Dany Bouchard, DBx GEOMATICS inc. ABSTRACT. Developing cross-browser mapping applications is a challenge that requires good
More informationHow to lay out a web page with CSS
How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block
More information1D CIW: Web Design Specialist. Course Outline. CIW: Web Design Specialist Apr 2018
Course Outline CIW: Web Design Specialist 22 Apr 2018 Contents 1. Course Objective 2. Pre-Assessment 3. Exercises, Quizzes, Flashcards & Glossary Number of Questions 4. Expert Instructor-Led Training 5.
More information[PACKT] HTML5, CSS3, and jquery. Dreamweaver CS5.5 Mobile. and Web Development with
Dreamweaver CS5.5 Mobile and Web Development with HTML5, CSS3, and jquery Harness the cutting edge features of Dreamweaver for mobile and web development David Karl ins [PACKT] PUBLISHING BIRMINGHAM -
More informationThe World In. Advertising specs
The World In Advertising specs Format Specifications This is a living document that will evolve as we are presented with new formats, and we ll update it periodically to reflect these changes. All media
More informationFirefox for Android. Reviewer s Guide. Contact us:
Reviewer s Guide Contact us: press@mozilla.com Table of Contents About Mozilla 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 and
More informationPUBLISHING 1231 Intermediate New Media Publishing (FLASH) Instructor: Mak (Mahmoud) Abdel-Hai Office: A248 Phone: 604-3
PUBLISHING 1231 Intermediate New Media Publishing (FLASH) Instructor: Mak (Mahmoud) Abdel-Hai Email: mabdelhai@langara.bc.ca Office: A248 Phone: 604-323-5648, ext. 1 Dates and times: s: 1.30 PM 7.25 PM
More informationHTML5 and CSS3: New Markup & Styles for the Emerging Web. Jason Clark Head of Digital Access & Web Services Montana State University Library
HTML5 and CSS3: New Markup & Styles for the Emerging Web Jason Clark Head of Digital Access & Web Services Montana State University Library Overview Revolution or Evolution? New Features and Functions
More informationNext... Next... Handling the past What s next - standards and browsers What s next - applications and technology
Next... Handling the past What s next - standards and browsers What s next - applications and technology Next... Handling the past What s next - standards and browsers What s next - applications and technology
More informationUSING SVG XML FOR REPRESENTATION OF HISTORICAL GRAPHICAL DATA
Преглед НЦД 9 (2006), 39 45 Dušan Tošić, Vladimir Filipović, (Matematički fakultet, Beograd) Jozef Kratica (Matematički institut SANU, Beograd) USING SVG XML FOR REPRESENTATION OF HISTORICAL GRAPHICAL
More informationUser Manual Version
Next FlipBook Maker for Windows User Manual Version 2.5.10 1 Content Cover 1 Content 2 1. Import PDF fires or images 3 2. Setting, Template, Scene and Bookmark 5 3. Publish local flipbook 19 4. Publish
More informationINTRODUCTION TO HTML5! HTML5 Page Structure!
INTRODUCTION TO HTML5! HTML5 Page Structure! What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in 1999. The web has changed a lot since
More informationWelcome to the world of Flash, one of today s hottest applications for
Chapter 1: Getting Started with Flash 9 In This Chapter Creating and saving new documents Getting familiar with the workspace and tools Managing your workspace and panels Thinking about FLA and SWF file
More information5Lesson 5: Multimedia on the Web
5Lesson 5: Multimedia on the Web Objectives By the end of this lesson, you will be able to: 1.5.7: Download and store files using a Web browser. 1.5.10: Install and upgrade common plug-ins, add-ons and
More informationDeveloping Web Applications for Smartphones with IBM WebSphere Portlet Factory 7.0
Developing Web Applications for Smartphones with IBM WebSphere Portlet Factory 7.0 WebSphere Portlet Factory Development Team 6 September 2010 Copyright International Business Machines Corporation 2010.
More informationExploring the Flash MX 2004 Workspace
1 Chapter Exploring the Flash MX 2004 Workspace COPYRIGHTED MATERIAL This first chapter is a warm-up to prepare you for your Flash MX 2004 adventure. It provides a quick introduction to Flash, and is a
More informationCOURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
COURSE OUTLINE MOC 20480: PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3 MODULE 1: OVERVIEW OF HTML AND CSS This module provides an overview of HTML and CSS, and describes how to use Visual Studio 2012
More informationITEC447 Web Projects CHAPTER 10 FLASH & SILVERLIGHT 1
ITEC447 Web Projects CHAPTER 10 FLASH & SILVERLIGHT 1 Working with Flash and Other Embeddable Content One of the major turning points in the evolution of web design was the introduction of Flash. By designing
More information1. Setup a root folder for the website 2. Create a wireframe 3. Add content 4. Create hyperlinks between pages and to external websites
A. Pre-Production of Webpage 1. Determine the specific software needed WYSIWYG- design software that manipulates components of the web page without the user writing or editing code Uses graphical layout
More informationVideo. Add / edit video
Video Videos greatly support learning in an e-earning setting. It is a rather complex topic though, due to the variety of formats, codecs, containers and combination of operating systems and browsers.
More informationHow to lay out a web page with CSS
Activity 2.6 guide How to lay out a web page with CSS You can use table design features in Adobe Dreamweaver CS4 to create a simple page layout. However, a more powerful technique is to use Cascading Style
More informationPublishing is no longer about just print. Documents exist in electronic
Chapter 24 Multimedia Project Basics In This Chapter Taking advantage of hyperlinks and cross-references Going the extra mile with sounds and video Getting fancy with buttons, rollovers, and other actions
More informationThe Economist Apps. Advertising Specs
The Economist Apps Advertising Specs Apps Overview This is a living document that will evolve as we are presented with new formats, and we ll update it periodically to reflect these changes. All media
More informationBuilding Responsive Websites
Building Responsive Websites (CSCI-GA.3033-011) Robert Grimm New York University In the Beginning: Introductions 2 This Course Is Experimental! 3 I Am Teaching This Course for the First Time Built two
More informationCIW: Web Design Specialist. Course Outline. CIW: Web Design Specialist. ( Add-On ) 16 Sep 2018
Course Outline 16 Sep 2018 ( Add-On ) Contents 1. Course Objective 2. Pre-Assessment 3. Exercises, Quizzes, Flashcards & Glossary Number of Questions 4. Expert Instructor-Led Training 5. ADA Compliant
More informationGraphic Design/Publishing Digital Marketing elearning Epub Microsoft Office
Eliquo Eliquo was established in 2002 as a training center dedicated to supporting digital experiences and digital marketing software and production practices. We provide certified training that addresses
More informationCertified HTML5 Developer VS-1029
VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the
More informationSTEP 1: DOWNLOAD THE PROGRAM
STEP 1: DOWNLOAD THE PROGRAM Note: The screen shots in this documents are using a Windows 7 operating system, images may be different on other versions and operating systems. A current version of Java
More informationQiufeng Zhu Advanced User Interface Spring 2017
Qiufeng Zhu Advanced User Interface Spring 2017 Brief history of the Web Topics: HTML 5 JavaScript Libraries and frameworks 3D Web Application: WebGL Brief History Phase 1 Pages, formstructured documents
More information5Lesson 5: Multimedia on the Web Objectives
5Lesson 5: Multimedia on the Web Objectives By the end of this lesson, you will be able to: 1.5.7: Download and store files using a Web browser. 1.5.10: Install and upgrade common plug-ins, add-ons and
More informationWEB GRAPHICS ADOBE PHOTOSHOP CS3. Learning Outcomes:
WEB GRAPHICS ADOBE PHOTOSHOP CS3 Learning Outcomes: At the end of the course the participant will Design layouts for web pages, Paper Adverts, Brouchers, CD Covers, Package Designing Event and Exhibition
More information20480B: Programming in HTML5 with JavaScript and CSS3
20480B: Programming in HTML5 with JavaScript and CSS3 Course Details Course Code: Duration: Notes: 20480B 5 days This course syllabus should be used to determine whether the course is appropriate for the
More informationfor Beginners COPYRIGHT NATIONAL SEMINARS TRAINING. ALL RIGHTS RESERVED.
HTML for Beginners COPYRIGHT NATIONAL SEMINARS TRAINING. ALL RIGHTS RESERVED. HTML FOR BEGINNERS History of HTML The Hypertext Markup Language (HTML) was created in the early 1990s as a text description
More informationCross Video Gallery 6.6 User Guide
http://dnnmodule.com/ Page 1 of 22 Cross Video Gallery 6.6 User Guide (DNN 7 Video & Audio & YouTube &Slideshow module) http://dnnmodule.com 10/27/2014 Cross Software, China Skype: xiaoqi98@msn.com QQ:
More informationDreamweaver Basics Workshop
Dreamweaver Basics Workshop Robert Rector idesign Lab - Fall 2013 What is Dreamweaver? o Dreamweaver is a web development tool o Dreamweaver is an HTML and CSS editor o Dreamweaver features a WYSIWIG (What
More information