The document provides an overview of HTML5 and CSS. It discusses how HTML5 simplifies document types and elements. It introduces new HTML5 elements like header, nav, section, article, aside, footer, video, figure and time. It demonstrates common HTML5 page structures using semantic elements. It also covers HTML5 forms, audio/video embedding, and CSS pseudo-classes.
The document summarizes new features in HTML5 including less header code needed, more semantic HTML tags, media tags for embedding video and audio, geolocation capabilities, the canvas element for drawing, new input types for forms, drag and drop, local storage, cross-domain messaging, web sockets, and the eventual ability to do 3D graphics with canvas. It provides examples and explanations of how to use many of these new features.
A quick overview of the ePUB 3 format and various implementations of it in e-book publishing. This is the talk given at HTML5 meetup in Vancouver on April 12, 2012.
HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors
The document discusses the differences between ePub 2 and ePub 3 formats. ePub 3 includes new features such as support for HTML5, CSS3, SVG, audio and video, JavaScript, and alternative navigation documents. It also describes layout types in ePub including reflowable and fixed layout. Fixed layout does not reflow content to fit different screens and may require metadata for proper display on devices.
Creating GUI Component APIs in Angular and Web ComponentsRachael L Moore
So you’ve embraced architecting your Angular application with reusable components – cheers to you! But you have UI components that need to communicate with each other or expose public methods, and you’re wondering about your options. In this talk, we’ll cover how new web component standards, like Custom Elements, handle this. Next, we’ll walk through how to accomplish it today in Angular 1.x – and bring it all together into what a solution will look like in upcoming Angular 2. Afterwards, you'll know how to design and implement the public HTML and JavaScript interfaces of GUI components.
Talk presented at Angular Connect in October 2015.
This document provides an overview of Angular and TypeScript. It begins with an introduction to Angular and its features like cross-platform support, speed, productivity tools, and full development story. It then compares Angular, AngularJS, and React. Next it discusses tools like NodeJS, Angular CLI, and Visual Studio Code. It covers TypeScript fundamentals like data types, variables, functions, tuples, unions, interfaces, classes, namespaces and modules. It explains Angular architecture components like components, directives, routes, services and NgModule. Finally, it wraps up with a discussion of components in Angular and the topics that will be covered in the next session.
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
The document discusses using HTML and CSS for prototyping. It provides guidance on setting expectations and only prototyping necessary features. HTML5 semantic tags and structures are covered, along with tips for styling buttons and forms with CSS3 features like gradients, shadows and rounded corners. The document also addresses browser compatibility issues and includes resources for further information.
The document provides an overview of HTML5 and CSS. It discusses how HTML5 simplifies document types and elements. It introduces new HTML5 elements like header, nav, section, article, aside, footer, video, figure and time. It demonstrates common HTML5 page structures using semantic elements. It also covers HTML5 forms, audio/video embedding, and CSS pseudo-classes.
The document summarizes new features in HTML5 including less header code needed, more semantic HTML tags, media tags for embedding video and audio, geolocation capabilities, the canvas element for drawing, new input types for forms, drag and drop, local storage, cross-domain messaging, web sockets, and the eventual ability to do 3D graphics with canvas. It provides examples and explanations of how to use many of these new features.
A quick overview of the ePUB 3 format and various implementations of it in e-book publishing. This is the talk given at HTML5 meetup in Vancouver on April 12, 2012.
HTML5 is a language for structuring and presenting content for the World Wide Web. it is the fifth revision of the HTML standard (created in 1990 and standardized as HTML4 as of 1997) and as of February 2012 is still under development. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). It improves interoperability and reduces development costs by making precise rules on how to handle all HTML elements, and how to recover from errors
The document discusses the differences between ePub 2 and ePub 3 formats. ePub 3 includes new features such as support for HTML5, CSS3, SVG, audio and video, JavaScript, and alternative navigation documents. It also describes layout types in ePub including reflowable and fixed layout. Fixed layout does not reflow content to fit different screens and may require metadata for proper display on devices.
Creating GUI Component APIs in Angular and Web ComponentsRachael L Moore
So you’ve embraced architecting your Angular application with reusable components – cheers to you! But you have UI components that need to communicate with each other or expose public methods, and you’re wondering about your options. In this talk, we’ll cover how new web component standards, like Custom Elements, handle this. Next, we’ll walk through how to accomplish it today in Angular 1.x – and bring it all together into what a solution will look like in upcoming Angular 2. Afterwards, you'll know how to design and implement the public HTML and JavaScript interfaces of GUI components.
Talk presented at Angular Connect in October 2015.
This document provides an overview of Angular and TypeScript. It begins with an introduction to Angular and its features like cross-platform support, speed, productivity tools, and full development story. It then compares Angular, AngularJS, and React. Next it discusses tools like NodeJS, Angular CLI, and Visual Studio Code. It covers TypeScript fundamentals like data types, variables, functions, tuples, unions, interfaces, classes, namespaces and modules. It explains Angular architecture components like components, directives, routes, services and NgModule. Finally, it wraps up with a discussion of components in Angular and the topics that will be covered in the next session.
Progressive Prototyping w/HTML5, CSS3 and jQueryTodd Zaki Warfel
The document discusses using HTML and CSS for prototyping. It provides guidance on setting expectations and only prototyping necessary features. HTML5 semantic tags and structures are covered, along with tips for styling buttons and forms with CSS3 features like gradients, shadows and rounded corners. The document also addresses browser compatibility issues and includes resources for further information.
The document discusses using HTML and CSS for prototyping. It covers HTML5 elements and structures, CSS3 features like gradients and shadows, and integrating HTML5 shiv and Modernizer to support older browsers. Recommendations include using semantic HTML5 elements instead of divs, updating reset styles, and simple jQuery examples. The goal is to leverage modern web standards for interactive prototyping.
Creating GUI container components in Angular and Web ComponentsRachael L Moore
So you've embraced architecting your Angular application with reusable components--cheers to you! But you have UI components that need multiple entry points for user markup, and regular ng-transclude left you hanging. In this talk, we'll cover how new web component standards, like the Shadow DOM, handle this. Next, we'll walk through how to accomplish it today in Angular 1.3 -- and also give you a brief glimpse into what a solution will look like in upcoming Angular 2. Afterwards, you'll know how to make layout scaffold components with custom elements that serve as containers for arbitrary user-provided HTML content.
Talk presented at ng-conf in March 2015.
This document discusses progressive prototyping as a design process. It emphasizes that prototyping allows designers to fail in a low-cost environment and iterate on their designs through testing. Different levels of prototyping fidelity are presented, from simple sketches to higher-fidelity visual prototypes. The document recommends starting with simple sketches and adding more details in subsequent rounds of graybox prototyping. It also provides examples of HTML5 and CSS3 techniques that can be used to create interactive prototypes, including new HTML5 input types, CSS3 selectors, and properties for styling buttons. Overall, the document promotes prototyping as a better way to validate designs through an iterative process of testing and refining ideas.
Polymer - pleasant client-side programming with web componentspsstoev
Polymer is a new library for the web, built on top of Web Components. This new project from Google makes client-side programming with web components easy and pleasant. You can use these technologies to increase the expressiveness of HTML by creating new tags that can help you get straight to your task. Polymer also adds other instruments like two-way data-binding and a lot of shortcuts that make your code more declarative and easier to extend and maintain. Many people think that web components are the future of web programming, and Polymer allows you to harness that power right now. Already excited!?
This document provides instructions for creating a basic template in Joomla. It discusses the file structure of a basic Joomla template which includes folders for CSS, images, and template files. It then outlines 4 steps to create a template: designing the layout, adding HTML markup, writing CSS code, and "Joomlafying" the code to integrate Joomla functions. The goal is to provide a basic understanding of what is required to build a functional Joomla template.
- HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web.
- Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations.
- Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.
Presentation on various definitions for JSON including JSON-RPC, JSPON, JSON Schema, JSONP and tools for working these definitions including Persevere client and server..
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
This document summarizes Nicholas C. Zakas's presentation on maintainable JavaScript. The presentation discusses why maintainability is important, as most time is spent maintaining code. It defines maintainable code as code that works for five years without major changes and is intuitive, understandable, adaptable, extendable, debuggable and testable. The presentation covers code style guidelines, programming practices, code organization techniques and automation tools to help write maintainable JavaScript.
This document summarizes an introductory workshop on web technologies including HTML, CSS, and the document object model (DOM). It provides an overview of the history and basics of HTML, how to set up a basic website, and introductions to CSS, the DOM, and additional web technologies covered in the workshop like forms and positioning.
This document provides an introduction to JavaScript. It discusses that JavaScript is an object-oriented scripting language based on ECMAScript standards. The document outlines JavaScript's history and versions. It describes how JavaScript can be used to add interactivity to HTML pages through dynamic HTML, event handling, validation, and more. Examples of JavaScript uses include AJAX-based sites and Google Web Toolkit. The document concludes with a discussion of JavaScript compatibility issues and possibilities.
Web Visualization with HTML5, CSS3, and JavaScript is the course with the rapidly changing web development technologies, it has become important to stay in line with them to progress within the industry, which is why this course in web virtualization has been brought to you to spruce up your web designing and animating skills using HTML5, CSS3, and JavaScript. The latest features of HTML5, CSS3 and JavaScript are set to be provided to you through this course, hence, it is desired that you have basic knowledge on these programming languages for a smoother learning experience. This course will start off by walking you through the CSS3 virtualization techniques to design and animate webs. You will be taught how to create a 3D element using CSS transition and to transform animates into 2D and 3D, along with an insight into the elements of scalable vector graphics which is needed to create basic images and polygons and to animate. Our tutors will further take you through the canvas aspects of HTML5 to start drawing grids and animations using it. You will also get to learn how to create a callback and create and activate a queue that is needed in animating and the animation libraries that will be essential to your web designing projects. By the end of this course, you will have an outstanding knowledge of web visualization using HTML5, CSS3, and JavaScript to secure yourself a prominent place within the web development industry.
This document provides an overview of client-side programming with JavaScript. It discusses JavaScript versus other scripting languages like JScript and VBScript. It covers common JavaScript tasks like form validation, image rollovers, and handling cookies. It then details various JavaScript concepts like data types, expressions, control statements, functions, strings, and arrays. It also discusses how to define and use functions as well as JavaScript libraries.
The document discusses the Document Object Model (DOM) and its core concepts. It covers how the DOM represents an HTML document as nodes organized in a tree structure, with different node types like elements, text, and attributes. It also describes common DOM manipulation methods for selecting, inserting, and removing nodes to modify the document. Key interfaces and inheritance are explained, along with how to work with different node types, events, and document fragments.
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
The document discusses how to rapidly prototype user interfaces using Bootstrap, a popular front-end framework. It outlines the benefits of prototyping with Bootstrap over traditional wireframing or jumping straight to development. Prototyping with Bootstrap allows building interactive prototypes quickly in hours using responsive design principles. The prototypes can then be used as the basis for the final site design rather than being discarded. The document introduces key concepts like responsive design, prototyping, and frameworks. It also provides an overview of features in Bootstrap like grids, components, and how they can be combined for prototyping.
The document provides an overview of Smarty, a widely used PHP templating system. It discusses that Smarty was created by Andrei Zmievski and separates display logic from controller logic for improved security and ease of use. Key features covered include literal tags, modifiers, and capture/cycle functions that allow for powerful templating capabilities. Examples demonstrate how to output variables, format dates, and alternate content display. Resources listed provide more documentation on Smarty syntax and usage.
This document provides a summary of best practices for front-end development. It discusses semantic HTML, CSS organization and specificity, responsive images, JavaScript performance, and other optimization techniques. Key recommendations include writing semantic HTML first before styling, avoiding inline styles, properly structuring CSS with comments and organization, reducing requests by combining files and using sprites, and placing JavaScript before the closing body tag.
This document provides an overview of Polymer and web components. It introduces key concepts like custom elements, shadow DOM, HTML imports, and templates. It demonstrates how to define a custom element and component API. It also covers Polymer features like data binding, DOM repeat, and CSS styling. Various tools for Polymer development are presented, like the Polymer CLI, Bower, and Web Components Tester. Examples of implementing common elements and integrating Polymer in applications are given.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
The document discusses using HTML and CSS for prototyping. It covers HTML5 elements and structures, CSS3 features like gradients and shadows, and integrating HTML5 shiv and Modernizer to support older browsers. Recommendations include using semantic HTML5 elements instead of divs, updating reset styles, and simple jQuery examples. The goal is to leverage modern web standards for interactive prototyping.
Creating GUI container components in Angular and Web ComponentsRachael L Moore
So you've embraced architecting your Angular application with reusable components--cheers to you! But you have UI components that need multiple entry points for user markup, and regular ng-transclude left you hanging. In this talk, we'll cover how new web component standards, like the Shadow DOM, handle this. Next, we'll walk through how to accomplish it today in Angular 1.3 -- and also give you a brief glimpse into what a solution will look like in upcoming Angular 2. Afterwards, you'll know how to make layout scaffold components with custom elements that serve as containers for arbitrary user-provided HTML content.
Talk presented at ng-conf in March 2015.
This document discusses progressive prototyping as a design process. It emphasizes that prototyping allows designers to fail in a low-cost environment and iterate on their designs through testing. Different levels of prototyping fidelity are presented, from simple sketches to higher-fidelity visual prototypes. The document recommends starting with simple sketches and adding more details in subsequent rounds of graybox prototyping. It also provides examples of HTML5 and CSS3 techniques that can be used to create interactive prototypes, including new HTML5 input types, CSS3 selectors, and properties for styling buttons. Overall, the document promotes prototyping as a better way to validate designs through an iterative process of testing and refining ideas.
Polymer - pleasant client-side programming with web componentspsstoev
Polymer is a new library for the web, built on top of Web Components. This new project from Google makes client-side programming with web components easy and pleasant. You can use these technologies to increase the expressiveness of HTML by creating new tags that can help you get straight to your task. Polymer also adds other instruments like two-way data-binding and a lot of shortcuts that make your code more declarative and easier to extend and maintain. Many people think that web components are the future of web programming, and Polymer allows you to harness that power right now. Already excited!?
This document provides instructions for creating a basic template in Joomla. It discusses the file structure of a basic Joomla template which includes folders for CSS, images, and template files. It then outlines 4 steps to create a template: designing the layout, adding HTML markup, writing CSS code, and "Joomlafying" the code to integrate Joomla functions. The goal is to provide a basic understanding of what is required to build a functional Joomla template.
- HTML, CSS, and JavaScript are becoming the new standard for building applications and interactive experiences on the web.
- Best practices include using semantic HTML, clean CSS with a focus on maintainability, and JavaScript performance optimizations.
- Key techniques discussed are image sprites, progressive enhancement, and jQuery selector chaining to reduce DOM lookups.
Presentation on various definitions for JSON including JSON-RPC, JSPON, JSON Schema, JSONP and tools for working these definitions including Persevere client and server..
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...Nicole Sullivan
The cascade is a poker game, but we've been playing our cards all wrong. Here Nicole suggests we stop trying to play to win to prevent code bloat, and simplify the cascade, using the order of the rulesets to allow overrides.
This document summarizes Nicholas C. Zakas's presentation on maintainable JavaScript. The presentation discusses why maintainability is important, as most time is spent maintaining code. It defines maintainable code as code that works for five years without major changes and is intuitive, understandable, adaptable, extendable, debuggable and testable. The presentation covers code style guidelines, programming practices, code organization techniques and automation tools to help write maintainable JavaScript.
This document summarizes an introductory workshop on web technologies including HTML, CSS, and the document object model (DOM). It provides an overview of the history and basics of HTML, how to set up a basic website, and introductions to CSS, the DOM, and additional web technologies covered in the workshop like forms and positioning.
This document provides an introduction to JavaScript. It discusses that JavaScript is an object-oriented scripting language based on ECMAScript standards. The document outlines JavaScript's history and versions. It describes how JavaScript can be used to add interactivity to HTML pages through dynamic HTML, event handling, validation, and more. Examples of JavaScript uses include AJAX-based sites and Google Web Toolkit. The document concludes with a discussion of JavaScript compatibility issues and possibilities.
Web Visualization with HTML5, CSS3, and JavaScript is the course with the rapidly changing web development technologies, it has become important to stay in line with them to progress within the industry, which is why this course in web virtualization has been brought to you to spruce up your web designing and animating skills using HTML5, CSS3, and JavaScript. The latest features of HTML5, CSS3 and JavaScript are set to be provided to you through this course, hence, it is desired that you have basic knowledge on these programming languages for a smoother learning experience. This course will start off by walking you through the CSS3 virtualization techniques to design and animate webs. You will be taught how to create a 3D element using CSS transition and to transform animates into 2D and 3D, along with an insight into the elements of scalable vector graphics which is needed to create basic images and polygons and to animate. Our tutors will further take you through the canvas aspects of HTML5 to start drawing grids and animations using it. You will also get to learn how to create a callback and create and activate a queue that is needed in animating and the animation libraries that will be essential to your web designing projects. By the end of this course, you will have an outstanding knowledge of web visualization using HTML5, CSS3, and JavaScript to secure yourself a prominent place within the web development industry.
This document provides an overview of client-side programming with JavaScript. It discusses JavaScript versus other scripting languages like JScript and VBScript. It covers common JavaScript tasks like form validation, image rollovers, and handling cookies. It then details various JavaScript concepts like data types, expressions, control statements, functions, strings, and arrays. It also discusses how to define and use functions as well as JavaScript libraries.
The document discusses the Document Object Model (DOM) and its core concepts. It covers how the DOM represents an HTML document as nodes organized in a tree structure, with different node types like elements, text, and attributes. It also describes common DOM manipulation methods for selecting, inserting, and removing nodes to modify the document. Key interfaces and inheritance are explained, along with how to work with different node types, events, and document fragments.
Rapid and Responsive - UX to Prototype with BootstrapJosh Jeffryes
The document discusses how to rapidly prototype user interfaces using Bootstrap, a popular front-end framework. It outlines the benefits of prototyping with Bootstrap over traditional wireframing or jumping straight to development. Prototyping with Bootstrap allows building interactive prototypes quickly in hours using responsive design principles. The prototypes can then be used as the basis for the final site design rather than being discarded. The document introduces key concepts like responsive design, prototyping, and frameworks. It also provides an overview of features in Bootstrap like grids, components, and how they can be combined for prototyping.
The document provides an overview of Smarty, a widely used PHP templating system. It discusses that Smarty was created by Andrei Zmievski and separates display logic from controller logic for improved security and ease of use. Key features covered include literal tags, modifiers, and capture/cycle functions that allow for powerful templating capabilities. Examples demonstrate how to output variables, format dates, and alternate content display. Resources listed provide more documentation on Smarty syntax and usage.
This document provides a summary of best practices for front-end development. It discusses semantic HTML, CSS organization and specificity, responsive images, JavaScript performance, and other optimization techniques. Key recommendations include writing semantic HTML first before styling, avoiding inline styles, properly structuring CSS with comments and organization, reducing requests by combining files and using sprites, and placing JavaScript before the closing body tag.
This document provides an overview of Polymer and web components. It introduces key concepts like custom elements, shadow DOM, HTML imports, and templates. It demonstrates how to define a custom element and component API. It also covers Polymer features like data binding, DOM repeat, and CSS styling. Various tools for Polymer development are presented, like the Polymer CLI, Bower, and Web Components Tester. Examples of implementing common elements and integrating Polymer in applications are given.
HTML 5 is the latest version of the HTML standard. It includes several new elements and features to improve structure and behavior. Some key changes include new semantic elements like <article>, <aside>, <header>, and <footer>; built-in support for audio and video; the <canvas> element for drawing graphics; and forms with new input types. HTML 5 aims to simplify HTML and separate structure and presentation, making code cleaner and pages more accessible. It is developed jointly by the WHATWG and W3C organizations.
HTML5 introduces many new features for improving the semantic structure of documents, incorporating multimedia and graphics, and interacting with forms and graphical objects. These include new elements like <video>, <audio>, <canvas>, and <svg> for embedding multimedia and graphics, as well as new form controls. CSS3 also introduces new selectors and properties for effects like rounded corners, shadows, gradients, and transformations. JavaScript APIs allow access to features like geolocation, offline storage, and communication between frames. Browser support for HTML5 features is increasing but not yet complete, so techniques like feature detection and polyfills are recommended.
Introducción rápida a HTML5, repasando brevemente la historia de HTML, qué APIs se añaden a HTML5, y qué avances en HTML, CSS y JavaScript rodean a este estándar.
HTML5 is the latest evolution of the standard markup language for the World Wide Web with new semantics and APIs, including new form types like color pickers and date pickers. It introduces features like local storage, video and audio playback, 2D drawing, and geolocation. WebSockets provide a standardized way for the web to establish two-way communications between a client and server. The Canvas element allows for dynamic, scriptable rendering of 2D shapes and bitmap images. Overall, HTML5 aims to make web-based applications more capable and powerful.
The document provides an overview of HTML5 including:
- New tags such as article, aside, audio, canvas, and video
- The structure of an HTML5 page including the doctype, meta charset, and link types
- Forms with new input types and validation attributes
- Playing audio and video with HTML5 tags and controlling them with JavaScript
- Drawing graphics on a canvas using JavaScript
- Web workers for running scripts in background threads
- Options for data storage including web storage, web SQL, and IndexedDB
This document summarizes new HTML5 form elements and attributes. It introduces new input types like color, date, and range. It also describes new form attributes like autocomplete, autofocus, and validation attributes. Styles are demonstrated for required, valid, invalid, and placeholder text. Issues with validation dialogs and international characters are discussed. The document encourages keeping forms simple and provides additional resources.
HTML5 - The 2012 of the Web - Adobe MAXRobert Nyman
HTML5 introduces new semantic elements like <header>, <nav>, <article>, and <footer> that divide a document into sections. It also includes new form input types, storage APIs like Web Storage and IndexedDB, multimedia with <video> and <canvas>, offline web apps, and real-time communication with Web Sockets. While HTML5 is still evolving, its new features are being adopted widely on the modern web thanks to its potential to create richer applications and experiences within browsers.
This document provides an introduction to JavaScript including:
- JavaScript is an object-oriented scripting language that is a dialect of ECMAScript.
- It was originally designed to add interactivity to HTML pages through dynamic HTML, reacting to events, and data validation.
- JavaScript is now heavily used in AJAX-based sites to asynchronously retrieve and display data without reloading pages.
- The document discusses JavaScript compatibility issues and provides examples of basic JavaScript concepts like variables, comparisons, repetition, and popup boxes.
Spring Web Service, Spring Integration and Spring BatchEberhard Wolff
This presentation shows Spring Web Services, Spring Integration and Spring Batch applied to a typical scenario. It walks through the advantages of the technologies and their sweet spots.
The document discusses MVC frameworks in JavaScript and covers topics like why use MVC, Backbone and Spine fundamentals, Backbone views, models, collections, routers and history, as well as tips and tricks for using Backbone including bootstrapping data, handling nested models, custom ajax requests, and testing with Jasmine. It provides code examples and explanations of concepts to illustrate how to build applications using the MVC pattern with Backbone.js.
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichRobert Nyman
The document discusses HTML5 and CSS3 features for mobile development, including CSS media queries, flexbox, transitions, animations, and new HTML5 form elements. It also covers JavaScript techniques like geolocation, web storage, offline applications, and the history API. Additional topics include mobile performance optimization, debugging with Weinre, and link protocols.
Model-Driven Software Development - Strategies for Design & Implementation of...Eelco Visser
Lecture 5 of course on Model-Driven Software Development about Strategies for Design & Implementation of Domain-Specific Languages, discussing design and implementation of WebDSL
Strategies for Design & Implementation of Domain-Specific LanguagesEelco Visser
This document summarizes strategies for designing and implementing domain-specific languages. It discusses deductive vs inductive language design approaches. It describes the compiler architecture as syntax checking, static semantics checking, model transformations, and code generation. It provides examples of how WebDSL translates entities, templates, and access control to implementation code. It discusses compilation by normalization and how WebDSL handles entities, queries, pages, forms, and access control through model transformations and code generation.
Selenium is a tool for automating web browsers. It can be used to create macros for repetitive browser tasks, web scraping, testing web applications, and more. Additional "power tools" like WebDriverManager, ShutterBug, Tesseract, Faker, WireMock and PDFBox can extend Selenium's capabilities by automating browser driver management, taking and comparing screenshots, extracting text from images, generating fake test data, mocking web services, and working with PDF files. These open source tools allow Selenium to be used for browser automation, testing, and robotic process automation.
HTML5 e Css3 - 7 | WebMaster & WebDesignerMatteo Magni
The document discusses HTML5 and CSS3 forms features such as placeholders, autofocus, email and url input types, number inputs with min/max/step attributes, and date/time inputs. It recommends using Modernizr to detect browser support for these features and fallback options like jQuery UI for unsupported browsers. Form validation features like required and novalidate attributes are also covered.
Tornado is a Python web framework and asynchronous networking library. It is a scalable, non-blocking web server that allows applications to handle multiple requests simultaneously using a single thread. Some key features include lightweight and fast templates, asynchronous request handlers, and integrations with databases, caches and other services. Tornado is best suited for building real-time web services and can be used alongside other front-end web servers.
This document discusses optimizing Meetup's performance by reducing page load times. It recommends reducing JavaScript, image, DOM, and CSS files. Specific techniques include externalizing and concatenating JavaScript, lazy loading images and scripts, minimizing DOM elements, writing efficient CSS selectors, and profiling code to optimize loops and DOM manipulation. Reducing page weight through these techniques can improve the user experience by speeding up load times and drop in member activity.
This document provides an introduction to PHP (Personal Home Page Hypertext Preprocessor), which is a server-side scripting language designed for web development. It discusses key features of PHP including its open source nature, speed of development, performance, and portability. The document also provides examples of basic PHP syntax and how to work with variables, data types, operators, conditional statements, and loops.
This document summarizes a presentation about the Yesod web framework for Haskell. It introduces key concepts of Yesod like routing, handlers, and composability. It also discusses building Yesod applications using tools like Cabal and Stack, and deploying to production using Nix for reproducible, immutable infrastructure. Specific features highlighted include Persistent for safe database access and Esqueleto for type-safe SQL queries. A case study demonstrates how to integrate third-party services like Transloadit through composition.
3. • HTML5 is a markup language for structuring and
presenting content for the World Wide Web.
• HTML5 is the next major revision of the HTML
standard superseding HTML 4.01, XHTML 1.0, and
XHTML 1.1.
• HTML5 is a cooperation between the World Wide
Web Consortium (W3C) and the Web Hypertext
Application Technology Working Group
(WHATWG).
4.
5.
6. • <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• <!DOCTYPE html>
7. The <meta> tag
The <meta> tag
• <meta http-equiv="Content-
Type" • <meta charset="UTF-8">
content="text/html;charset=UTF-
8">
The <script> tag
The <script> tag • <link rel="stylesheet"
• <script type="text/javascript“ src="file.js"> href="file.css">
</script>
8. • Content-editable
• contextmenu
Elements Attributes • draggable
• dropzone
• Hidden
• data
• spellcheck
9.
10. Event handlers in Javascript or vbscript to specify values of event tag attribute.
Attributes can be used to trigger any javascript or vbscript code of given value, when
there is any event occurring for any HTML5 element.
Documentation:- Action:- Media:- Windows and forms:-
Oncanplay
offline/online/onoffline Onclick/ondbclick Onabort/onblur/onfocus
oncanplaythrough
onoine/ononline
Ondrag/ondragend Onplay/onpause/onplaying Onerror/oninvalid
onbeforeprint/onafterprint ondragcenter/ondragleave
ondragover/ondragstart Onemptied/onended
ondrop Onformchange/onforminput
Onbeforeonload/onload
onunload Onloadeddata/onprogress
Onkeydown/onkeypress
Oninput/onsubmit
onkeyup
Onratechange
Onhaschange onreadystatechange
Onmousedown
Onpopstate/onresize
onmousemove
Onseeked/onseeking
Onredo/onundo onsuspend/ontimeupdate
Onmouseout/onmouseover
onselect
onmouseup
Onvolumechange/onwaiting
Onstorage
Onmousewheel
11. Web Form 2.0 provides a greater degree of semantic mark-up than
HTML4 and remove a great deal of the need for tedious scripting and
styling.
New <input> new in HTML5
<input> typesattributes in HTML5
Month step
readonly
min
Color formaction
Date autocomplete Time
week list
Range
list multiple url max
placeholder
required pattern formenctype
Search Email
Tel
formnovalidate Datetime-local
formmethod
Datetime
Number form autofocus
15. form attribute
form="notMyParentForm"
Note: form=" disassociates a form element from its parent form. “
color attribute
<input name="color"
type="color" />
<input id="color"
name="color“
type="color"
placeholder="#FFFFFF"
pattern="#[0-9A-Fa-f]{6}"
required />
16. url attribute
<input name="website" type="url" />
<input
id="website"
name="url“
type="url“
placeholder="http://www.domain.com"
pattern="(http|https|ftp)://[a-zA-Z0-9-./]*"/>
Different dynamic keyboards displayed
based on input type.
23. Persistent local storage is one of the areas where native
client applications have held an advantage over web
applications. For native applications, the operating
system typically provides an abstraction layer for storing
and retrieving application-specific data like preferences
or runtime state.
Logo for localstorage
25. For receiving and storing
interface Storage {
getter any getItem(in DOMString key);
setter creator void setItem(in DOMString key, in any
data);
};
var foo = localStorage.getItem("bar");
// ... localStorage.setItem("bar", foo);
For removing
interface Storage {
deleter void removeItem(in DOMString key);
void clear();
};
For total number of values
interface Storage {
readonly attribute unsigned long length;
getter DOMString key(in unsigned long index);
};
26. Property Type Description
key string the named key that was added, removed, or modified
the previous value (now overwritten), or null if a new item was
oldValue any
added
newValue any the new value, or null if an item was removed
url* string the page which called a method that triggered this change
27. var Socket = new WebSocket(url, [protocal] );
Attributes
Socket.readyState
Socket.bufferedAmount
Events
Open Socket.onopen
Message Socket.onmessage
Error Socket.onerror
Close Socket.onclose
Methods
Socket.send()
Socket.close()
28. // Let us open a web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function() {
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
ws.onmessage = function (evt) {
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function() {
// websocket is closed. alert("Connection is closed...");
};
29. HTML 5 defines the <canvas> element as “a resolution-dependent
bitmap canvas which can be used for rendering graphs, game graphics,
or other visual images on the fly.” A canvas is a rectangle in your page
where you can use JavaScript to draw anything you want.
Simple shapes
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
30. var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
/ ctx.strokeText("Hello World",10,50);
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
/ var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
32. The geolocation API lets you share your location
with trusted web sites.
The geolocation API centers around a new property on the global navigator
object: navigator.geolocation.
The simplest use of the geolocation API looks like this:
function get_location() {
navigator.geolocation.getCurrentPosition(show_
map); }
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let's show a map!
}
33. Property Type Notes
coords.latitude double decimal degrees
coords.longitude double decimal degrees
meters above the reference
coords.altitude double or null
ellipsoid
coords.accuracy double meters
coords.altitudeAccuracy double or null meters
degrees clockwise from true
coords.heading double or null
north
coords.speed double or null meters/second
timestamp DOMTimeStamp like a Date() object
34. Microdata is a standardized way to provide additional
semantics in your web pages.
<div itemscope>
<p>My name is <span
itemprop="name">Zara</span>.</p> </div>
<div itemscope>
<p>My name is <span
itemprop="name">Nuha</span>.</p>
</div>
35. Drag and drop is a very common feature. It is when you
"grab" an object and drag it to a different location.
<img draggable="true">
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id); event.preventDefault()
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
36. <video src=myVideo.ogv
width=320 height=240
controls poster=image.jpg>
</video>
<video src=myVideo.ogv
width=320 height=240
controls poster=image.jpg>
Download my awesome video in
<a href=myVideo.ogg>Ogg</a>
or <a href=myVideo.mp4>MP4</a> format </video>
<audio src="audio.mp3“
controls preload>
</audio>
37. HTML5 can be used as an alternative to Adobe Flash.
38.
39. •Stability, faster processes and sponsorship deals.
•WHATWG/W3C 'split'?
•W3C work to ensure the spec doesn't become forked
•How soon will HTML5 become a 'stable standard'? Targeting
2014…!!!
•Browser vendors rapidly providing updates
•Sponsorship deal for w3c