SlideShare a Scribd company logo
BEST FRIENDS
- They make our site more
HTML CSS JavaScript
Images source Xbox.com
Build prefect site with CSS,
JS and HTML
Images source Xbox.com
Here is the Website ;)
Images source Xbox.com
HTML : Help to show content in browsers
CSS : Help to style the content
JS : Help to interact with content

Recommended for you

Html & CSS
Html & CSSHtml & CSS
Html & CSS

The document discusses HTML and CSS. HTML is the markup language used to create webpages, while CSS describes how HTML elements are displayed. It provides definitions of HTML 5 and CSS 3, the current major versions. Free courses for learning HTML and CSS are listed from YouTube, Khan Academy, and W3Schools. Paid course options are also listed from Coursera, Udemy, and Pluralsight. Experts in HTML and CSS mentioned include Tim Berners-Lee and Bucky Roberts. Contact information is provided at the end.

htmlhtml5css
Javascript 101
Javascript 101Javascript 101
Javascript 101

This document provides an introduction to JavaScript, covering basic concepts like data types, variables, operators, conditionals, loops, functions, arrays, and objects. It explains that JavaScript is an interpreted language that allows dynamic and interactive functionality on websites. Key points are demonstrated through examples, like using alert to output "Hello World" and basic math operations with variables.

javascripttutorial
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help

CSS stands for Cascading Style Sheets Styles define how to display HTML elements External Style Sheets can save a lot of work Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

#assignmenthelp#css
What is in Next Slides? (about HTML5)
• What and Why HTML5
• New Elements
• New Attributes
• Storage
• Offline
• What's good and bad
What is in Next Slides? (about CSS3)
• Background
• Animations
• Media query
What is in Next Slides? (about JS)
• Web workers
• Web socket
What is HTML5?
• It’s not just next version of HTML
• Make web more powerful
• Easy for developers and computer program
“HTML5 was proposed by Opera Software and Mozilla Foundation in June,2004”- WWW

Recommended for you

Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap

This document provides an overview and introduction to responsive design using Bootstrap. It defines responsive design as designs that work on any resolution and are user friendly. It explains Bootstrap's grid system and standard device resolutions for extra small, small, medium, and large devices. Key Bootstrap components are summarized like the grid system, Glyphicons, and JavaScript plugins. The basic differences between HTML, CSS, and Bootstrap are outlined. Finally, the main purposes of using Bootstrap are listed as decreasing costs and code while providing an excellent and understandable user experience.

designbootstrap responsiveux
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design

This document discusses responsive web design using CSS3 media queries. It begins with an introduction to media queries and their syntax for modifying CSS based on screen width. It then covers examples of adapting layouts, images, and other design elements for different screen sizes. Finally, it addresses techniques for supporting older browsers that do not support media queries, such as using conditional comments or JavaScript libraries.

web designmedia queriesresponsive web design
Java script
Java scriptJava script
Java script

This document provides an introduction and overview of JavaScript. It discusses that JavaScript is a client-side scripting language that can be inserted into HTML pages and run by web browsers to provide interactive and dynamic features. It covers JavaScript basics like data types, variables, operators, functions, and events. It also explains how to write JavaScript code directly in HTML pages or externally and shows examples of built-in functions and how to create user-defined functions.

Why HTML5?
“Web developers be proud, what we wrote will run in any device*”- Evol
*Conditions apply ;)
OLD HTML
Access to the local system's
resources/GPU 
Works in Offline 
Heavy graphics and quality UI 
So, we need to depend on plugins (Like Flash and Silverlight)
Why HTML5?
“Web developers be proud, what we wrote will run in any device*”- Evol
*Conditions apply ;)
OLD HTML HTML5
Access to the local system's
resources/GPU  
Works in Offline  
Heavy graphics and quality UI  
So, we need to depend on plugins (Like Flash and Silverlight)
So, it comes with..
Graphics
Location
Database
Speed
Audio
Video
Offline
Basic HTML5 structure
<header>
<nav>
<footer>
<section>
<section>
<article>
<article>
<aside>

Recommended for you

Javascript
JavascriptJavascript
Javascript

JavaScript is a scripting language that allows adding interactivity to HTML pages. It can be used for client-side form validation and integration with user plugins. JavaScript is case-sensitive and allows variables, functions, conditional statements, and objects. Common uses include pop-up boxes, event handling, and cookies.

wt
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets

Advanced CSS by: Alexandra Vlachakis Sandy Creek High School, Fayette County Schools Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media COURSE: Advanced Web Design UNIT 6: BCS-AWD-6 Advanced CSS

web designcascading style sheets
CSS
CSSCSS
CSS

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML. CSS controls the layout of multiple documents from a single style sheet and allows for more precise control over layouts and different styles for different media like screens and print. CSS syntax uses selectors to apply styles denoted by properties and values to HTML elements. Styles can be applied inline, internally in the <style> tag, or externally in a separate .css file linked via the <link> tag.

New Elements
• <canvas> and <svg>
• <video> and <audio>
• New Form inputs
• Datalist
“HTML5 could do everything Flash did”- Steve Jobs
Canvas and SVG
Canvas (scriptable image tag) SVG
HTML:
<canvas id="myCanvas" width="200" height="100">
Your browser does not support the HTML5 canvas tag.
</canvas>
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,200,100);
Output :
HTML:
<svg width="400" height="110">
<rect width=“200" height="100"
style="fill:rgb(255,0,0); ">
Sorry, your browser does not support inline SVG.
</svg>
JavaScript:
//For now need any action
Output :
WHEN<canvas>
<svg>
…Please use web to get more content about topic.
“In this world there are 30+ browsers”- WWW
<Video>
• Help to add video to our site.
• HTML :
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
http://www.w3schools.com/tags/tag_video.asp

Recommended for you

Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript

This document provides an overview of web programming with JavaScript. It discusses topics like: - HTML and CSS which are used to structure and style web pages - How browsers interpret HTML, CSS, and JavaScript to display web pages - What backend and frontend development involve - Common JavaScript concepts like variables, operators, functions, and events - Tools that can be used for web development like text editors, browsers, and version control software - Resources for learning more about JavaScript and web programming

javascriptprogrammingintroduction
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript

With the commercialization of the web, web development has become one of the blooming industries. Learning web development enables you to create attractive websites using HTML, CSS, JQuery and JavaScript. Web development includes developing simple and complex web-based applications, electronic businesses and social networking sites. Being a web developer you can deliver applications as web services which is only available in desktop applications.

javascripthtml5css3
Responsive web design
Responsive web designResponsive web design
Responsive web design

Responsive web design involves creating layouts that adapt to different screen sizes using flexible grids and media queries. It allows for a device-agnostic approach and is easier to build than separate mobile sites. Key aspects of responsive design include planning with a mobile-first approach, prototyping, using consistent breakpoints based on content, usability testing, writing for different screens, designing visually hierarchical layouts, and addressing images and media. Testing is important throughout the process. While responsive design is a good base, other solutions like responsive or native apps may still be needed, and the job requires ongoing review.

responsive web designresponsiveweb
Video file format V/S Browser
http:/www.w3schools.com/html/html5_video.asp and http://www.w3.org/2010/05/video/mediaevents.html
MP4 WebM OGG
  
  
  
  
  
<audio>
• Help to add audio to our site.
• HTML :
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.wav" type="audio/wav">
Your browser does not support the audio element.
</audio> http://www.w3schools.com/tags/tag_audio.asp
“The first web browser was called WorldWideWeb (Nexus), invented in 1990 -
1991 and had 4 million users.”- WWW
Audio file format V/S Browser
MP3 Wav OGG
  
  
  
  
  
New Form inputs

Recommended for you

Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh

The document provides an overview of Bootstrap, including: - Bootstrap is an open-source HTML, CSS, and JS framework for developing responsive mobile-first websites and web apps. - It contains utilities for typography, forms, buttons, navigation, and other interface components, as well as optional JavaScript extensions. - The document describes various Bootstrap components like grids, navigation, buttons, forms, images, alerts, progress bars, and panels. It provides code examples for how to implement these components.

Java script
Java scriptJava script
Java script

JavaScript was designed to add interactivity to HTML pages. It is a scripting language that is usually embedded directly into HTML pages and allows for dynamic text, event handling, reading/writing HTML elements, and validating form data. JavaScript supports both client-side and server-side scripting and was originally developed by Netscape under the name LiveScript before being renamed. It provides programming capabilities to HTML authors and allows for dynamic content, user interaction, and validation without server requests.

Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)

The document discusses an HTML5 presentation given by Peter Lubbers at STC12. It provides an agenda for the presentation that includes discussing what HTML5 is, its features, tools for HTML5, and a Q&A. It also shares quotes about the growing adoption of HTML5 and discusses several HTML5 topics like new elements, forms, multimedia, and CSS3.

techcomtechnical writinghtml5 boilerplate
New Form inputs
<datalist>
• This tag specifies a list of pre-defined options for an <input> element.
• HTML :
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Demo : http://www.w3schools.com/TAgs/tag_datalist.asp
New Attributes
• autocomplete
• autofocus
• pattern (regexp)
• placeholder
• required
Demo : http://www.w3schools.com/html/html5_form_attributes.asp
and http://www.w3schools.com/tags/ref_eventattributes.asp
“Custom attributes use data- prefix. E.g. :- data-SOMETHING”
Local Storage
• window.localStorage - stores data with no expiration date
• code.sessionStorage - stores data for one session (data is lost when the tab
is closed)
• JavaScript:
if(typeof(Storage)!=="undefined")
{
// Code for localStorage/sessionStorage.
}
else
{
// Sorry! No Web Storage support..
}

Recommended for you

Javascript
JavascriptJavascript
Javascript

This document provides an introduction to JavaScript and discusses its uses, places to insert code, variables, operators, and the Document Object Model (DOM). JavaScript is an object-based scripting language used mainly for client-side validation, dynamic drop-downs, displaying data and time, and pop-ups. Code can be inserted between HTML tags, in external JavaScript files, or between the <head> tags. The DOM represents the HTML document as a tree structure that can be modified.

#javascriptweb designcodes
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets

The document discusses an agenda for a class on CSS (Cascading Style Sheets). The agenda includes learning what CSS is and its importance, understanding CSS grammar and syntax, linking a CSS file to HTML, creating a designer's toolbox, designing a basic webpage with CSS, and commenting in CSS. It also provides examples of CSS code, instructions on adding CSS to HTML pages, and homework of creating a basic webpage and CSS file.

Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop

You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that. We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.

javascripthtmlcss3
Local Storage
• window.localStorage - stores data with no expiration date
• code.sessionStorage - stores data for one session (data is lost when the tab
is closed)
• JavaScript:
if(typeof(Storage)!=="undefined") //('localStorage' in window && window['localStorage'] !== null)
{
localStorage.setItem("lastname", "Smith");
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else
{
// Sorry! No Web Storage support..
}
Local Storage
• Web SQL Database works in Safari, Chrome and Opera (!IE and !FF)
• JavaScript:
openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024,
function (db) {
db.changeVersion('', '1.0', function (t) {
t.executeSql('CREATE TABLE docids (id, name)');
}, error);
});
• IndexDB -- https://dvcs.w3.org/hg/IndexedDB/raw-
file/tip/Overview.html
Local Storage
Offline
• Offline browsing
• Speed
• Reduced server load
• HTML:
<!DOCTYPE HTML>
<html>
<body>
The content of the document......
</body>
</html>

Recommended for you

Smartphone - The life changer
Smartphone - The life changerSmartphone - The life changer
Smartphone - The life changer

Here is my feeling how the smartphone changed our life and world. There are something good and bad too.

lifestylesmartphone
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)

Joseph R. Lewis of Sandia National Laboratories gave a presentation on HTML5 and CSS3 at Oak Ridge National Laboratory. The presentation provided an overview of the history that led to the development of HTML5, described new HTML5 semantic elements and attributes, and covered features of HTML5 like Canvas, SVG, and MathML. It also covered new CSS3 properties and exercises for attendees to experiment with the new technologies.

html5css3mobile
Web designing
Web designingWeb designing
Web designing

Tech Altum provides a 4-month web design course covering HTML, CSS, JavaScript, jQuery, Photoshop, responsive layouts and Bootstrap. The course objectives are to provide concepts, technologies and skills for front-end web development. It covers topics such as HTML5 fundamentals, CSS3, responsive websites, Bootstrap framework, and implementing a sample project. The training is conducted by experienced corporate trainers and includes placement assistance and opportunities for live project training.

css3web designinghtml
Offline
• Offline browsing
• Speed
• Reduced server load
• HTML:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html>
Offline - Manifest File
CACHE MANIFEST
# v1.0 – Update by Harish
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Offline - Updating the cache triggers
• The user clears the browser's cache
• The manifest file is modified
• The application cache is programmatically updated
Demo : http://www.bennadel.com/blog/2029-using-html5-offline-
application-cache-events-in-javascript.htm and
www.htmlgoodies.com/html5/tutorials/introduction-to-offline-web-
applications-using-html5.html
2012 2013 2014 2015 2016
HTML 5.0 Candidate Rec Call for Review Recommendation
HTML 5.1
1st Working
Draft
Last Call Candidate Rec Recommendation
HTML 5.2
1st Working
Draft
- Wiki

Recommended for you

Css ppt
Css pptCss ppt
Css ppt

CSS stands for cascading style sheet. It is not a language. It is a pat of design. CSS is a heart of HTML. There are 3 ways to attach CSS to a page,

HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery

The document provides an overview of HTML, CSS, JavaScript and jQuery. It describes what each technology is, examples of common tags and syntax, and how they are used together. HTML is a markup language used to define the structure and layout of web pages using tags. CSS is used to style and lay out HTML elements, and can be linked externally or embedded internally or inline. JavaScript can be used to add interactive elements and dynamic behavior to HTML pages client-side. jQuery is a JavaScript library that simplifies tasks like HTML document traversal and manipulation, events, animations and Ajax.

Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteTutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 Site

A simple tutorial on how to create a basic page using HTML5 and CSS3

htmlsimplecss
What's good and bad?
“Betting on HTML5 was a mistake”- Mark Zuckenberg
“We have definity shifted from HTML5 to native”- LinkedIn
…Please use web to get more content about topic.
What is CSS?
According to me,
“If HTML is Girl…
What is CSS?
…CSS is her makeup kit ”
Background
• Multiple Background Images
• Background origin
• Background size
• Background clip
Demo http://www.w3schools.com/css/css3_backgrounds.asp

Recommended for you

Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS

This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.

htmlcssweb
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script

HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark headings and paragraphs. CSS is used to style and lay out HTML elements, using selectors, declarations, and properties to change things like colors and positioning. JavaScript can be added to HTML pages with <script> tags and is used to add interactive elements and dynamic behavior by manipulating HTML and responding to user input. It has data types like strings and numbers and control structures like if/else statements.

html learninghtmlcss learning
HyperText Markup Language - HTML
HyperText Markup Language - HTMLHyperText Markup Language - HTML
HyperText Markup Language - HTML

The document provides an introduction to HTML basics, including: - HTML document structure with <head> and <body> sections - Common tags like headings, paragraphs, hyperlinks and images - Attributes that can be added to tags - How to add comments and formatting to text - Examples of basic HTML pages using different tags

A B
X Y
Animations will help us for better user experience (UX)
Animations
• animation: myfirst 5s; /*@keyframe name and time delay (s/ms) */
• We can also set timing function, delay, iteration count, direction
• About @Keyframe rule is “where the animation is created”.
• CSS:
Demo http://www.w3schools.com/css/css3_animations.asp
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
CSS Hacks
Property
@keyframes 10.0 4.0 -webkit-
16.0
5.0 -moz-
4.0 -webkit-
15.0 -webkit-
12.1
12.0 -o-
animation 10.0 4.0 -webkit-
16.0
5.0 -moz-
4.0 -webkit-
15.0 -webkit-
12.1
12.0 -o-
• Opacity, in IE 8 or older -- filter:Alpha(opacity=50);

Recommended for you

Google Analytics 가이드 (한국어)
Google Analytics 가이드 (한국어)Google Analytics 가이드 (한국어)
Google Analytics 가이드 (한국어)

Summary of Google Analytics Guide (ver.Korean) 구글 애널리틱스 가이드 (매뉴얼)를 한국어 버전으로 정리한 자료입니다. 참고로 구글에서 제공하는 가이드는 웹 분석 (Commerce 서비스를 대표 예시로 설명)을 기반으로 진행됩니다. 이 자료는 바풀 사내 세미나에서 사용된 자료인데 다른 분들께도 도움이 될 수 있을 것 같아 공유합니다 :) www.bapul.net

마케팅구글애널리틱스분석
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics

The document provides an introduction to HTML basics including HTML document structure, common tags, and formatting. It discusses the <!DOCTYPE> declaration, <head> and <body> sections, common text formatting tags, headings, paragraphs, comments, and includes code examples.

HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics

This document provides an overview of HTML and CSS for website development. It discusses how websites use HTML for content, CSS for presentation, and JavaScript for behavior. It then covers basic HTML tags and structure, as well as CSS selectors, the box model, positioning, and floats. The goal is to teach the essentials of using HTML to structure content and CSS to style and position that content for websites.

htmlcsslearn
• Web fonts allow to use font that are not installed on the end user
computer.
• Google is providing free fonts
e.g. : http://fonts.googleapis.com/css?family=Butterfly+Kids:400
• CSS:
Custom fonts
@font-face
{
font-family: myFont;
src: url(sansation_light.woff);
}
Demo : http://www.w3schools.com/css/css3_fonts.asp
Media query
• The @media rule allows different style rules for different media in the
same style sheet.
• CSS:
Demo http://www.w3schools.com/css/css_mediatypes.asp
@media screen { /* …. */ }
@media print { /* …. */ }
@media screen,print { /* …. */ }
Media query
• We can even apply different styles based on device
• width and height
• Orientation
• Aspect ratio / Pixel ratio
• CSS:
Demo http://www.w3schools.com/css/css_mediatypes.asp
@media only screen and (max-device-
width: 480px) { /* …. For mobile device
less than 480 px width*/ }
@media only screen and (min-device-
width: 768px) and (max-device-width:
1024px) { /* styles for iPad */ }
CSS ready frameworks
• Twitter bootstrap
http://getbootstrap.com/
• jQuery mobile
http://jquerymobile.com/
• Foundation
http://foundation.zurb.com/
• jQuery UI
http://jqueryui.com/

Recommended for you

Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3

A presentation to Refresh DC about the emerging HTML 5 and CSS 3 standards, namely about aspects that are beginning to become applicable to web design and development. Given by Jason Garber and M. Jackson Wilkinson.

mjacksonwilkinsonjacksonwilkinsonjasongarber
Html Ppt
Html PptHtml Ppt
Html Ppt

HTML (Hypertext Markup Language) is used to define the structure and layout of web pages using a variety of tags and attributes. Some key points covered are: - HTML documents use tags like <html> enclosed in angle brackets to describe headings, paragraphs, links, images, and other content. - Tags normally come in pairs with opening and closing tags. - HTML can be used to format text, add images and tables, create lists and forms, structure pages using divs and frames, and more. - CSS (Cascading Style Sheets) is often used to define styles and layouts, separate from HTML content. - Forms allow users to enter data through

htmlhtml ppthtml example
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics

This document provides an introduction to HTML document structure. It discusses the <!DOCTYPE> declaration, <head> and <body> sections, common text formatting tags, hyperlinks using the <a> tag, and comments. Examples are provided to illustrate HTML elements, tags, and attributes. The document aims to explain basic HTML structure and elements in depth for creating web pages.

JavaScript
According to me,
“Without JavaScript our site will be lifeless ”
JavaScript – Two new things
• Web workers
• Web socket
“2% or less disable JavaScript support”- Yahoo
Web workers
Web workers
• A web worker is a JavaScript that runs in the background,
independently of other scripts, without affecting the performance of
the page. You can continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in the background.

Recommended for you

Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML

Week 9 Lecture slides and audio for ITB/N Organisational Databases, Semester 1, 2008, QUT, Brisbane, Australia.

Html5 CSS3 jQuery Basic
Html5 CSS3 jQuery BasicHtml5 CSS3 jQuery Basic
Html5 CSS3 jQuery Basic

The document provides an overview of new features in HTML5, including several new semantic elements (e.g., <header>, <nav>, <article>), multimedia elements (<video>, <audio>), form controls, and APIs (e.g., geolocation, local storage). It also compares the <canvas> and <svg> elements, and discusses features like offline application caching, drag and drop, and web workers.

HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview

Slides from an HTML5 overview session I presented at work... This presentation has an accompanying sample webapp project: http://code.google.com/p/html5-playground

htmlhtml5css
Web workers
• A web worker is a JavaScript that runs in the background,
independently of other scripts, without affecting the performance of
the page. You can continue to do whatever you want: clicking,
selecting things, etc., while the web worker runs in the background.
Demo : http://www.w3schools.com/html/html5_webworkers.asp and
Mozilla link
// in demo_workers.js
var i = 0;
onmessage = function (oEvent) {
timedCount();
postMessage("Hi " + oEvent.data);
};
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
if(typeof(w) == "undefined" && typeof(Worker) !== "undefined")
{
w = new Worker("demo_workers.js");
}
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
function stopWorker() { w.terminate(); }
w. postMessage(“Started”);
Web socket
• WebSocket is a protocol providing full-duplex communications
channels over a single TCP connection.
• That makes it possible to open an interactive communication session
between the user's browser and a server.
Socket : http://docs.oracle.com/javase/tutorial/networking/sockets/definition.html
Web socket - Example
if ("WebSocket" in window)
{
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
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() {alert("Connection is closed..."); };
}
Demo http://www.tutorialspoint.com/html5/html5_websocket.htm and
https://www.youtube.com/watch?v=Z897fkPn7Rw
NAGA HARISH M
Software engineer
E: nagaharish.movva@gmail.com
W: www.shareourideas.com
facebook.com/shareourideas twitter.com/nagaharishmovva

Recommended for you

Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

cssweb design and developmentresponsive
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3

The document discusses using Java with HTML5 and related technologies like CSS3 and WebSockets. It provides an overview of HTML5 features like Canvas, SVG, CSS3 animations, and WebSockets. It describes how these features can be used to build interactive client-side applications and how Java servers can integrate with HTML5 apps by saving/retrieving application state and graphics from the client. Java servers can generate graphics like SVG dynamically based on data from HTML5 clients.

websockethtml5java
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr

Modernizr is a small JavaScript library that detects whether browsers support HTML5 and CSS3 features. It allows developers to write progressive enhancement code that provides a baseline experience for all browsers while enhancing functionality for modern browsers. Modernizr tests over 20 features and adds corresponding classes to the HTML element. This allows developers to target styles and scripts based on a browser's capabilities. It is a useful tool for building websites that work across a wide range of browsers without needing to sniff browser versions.

html5modernizrjavascript

More Related Content

What's hot

Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
MuhammadRehan856177
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
Lanh Le
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
Amit Kumar Singh
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
JainilSampat
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
Shlomi Komemi
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
casestudyhelp
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
1amitgupta
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
Zoe Gillenwater
 
Java script
Java scriptJava script
Java script
Sadeek Mohammed
 
Javascript
JavascriptJavascript
Javascript
Nagarajan
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
fantasticdigitaltools
 
CSS
CSSCSS
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
T11 Sessions
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Russ Weakley
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
Mukesh Kumar
 
Java script
Java scriptJava script
Java script
Abhishek Kesharwani
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
Peter Lubbers
 
Javascript
JavascriptJavascript
Javascript
Mayank Bhatt
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
St. Petersburg College
 

What's hot (20)

Introduction to JavaScript (1).ppt
Introduction to JavaScript (1).pptIntroduction to JavaScript (1).ppt
Introduction to JavaScript (1).ppt
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
CSS for Beginners
CSS for BeginnersCSS for Beginners
CSS for Beginners
 
Html & CSS
Html & CSSHtml & CSS
Html & CSS
 
Javascript 101
Javascript 101Javascript 101
Javascript 101
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
CSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive DesignCSS3, Media Queries, and Responsive Design
CSS3, Media Queries, and Responsive Design
 
Java script
Java scriptJava script
Java script
 
Javascript
JavascriptJavascript
Javascript
 
Advanced Cascading Style Sheets
Advanced Cascading Style SheetsAdvanced Cascading Style Sheets
Advanced Cascading Style Sheets
 
CSS
CSSCSS
CSS
 
Introduction to web programming with JavaScript
Introduction to web programming with JavaScriptIntroduction to web programming with JavaScript
Introduction to web programming with JavaScript
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Bootstrap PPT by Mukesh
Bootstrap PPT by MukeshBootstrap PPT by Mukesh
Bootstrap PPT by Mukesh
 
Java script
Java scriptJava script
Java script
 
Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)Getting Started with HTML5 in Tech Com (STC 2012)
Getting Started with HTML5 in Tech Com (STC 2012)
 
Javascript
JavascriptJavascript
Javascript
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 

Viewers also liked

Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
Shay Howe
 
Smartphone - The life changer
Smartphone - The life changerSmartphone - The life changer
Smartphone - The life changer
Naga Harish M
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
Web designing
Web designingWeb designing
Web designing
Avinash Malhotra
 
Css ppt
Css pptCss ppt
Css ppt
Nidhi mishra
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
FAKHRUN NISHA
 
Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteTutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 Site
Adam Stewart
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Ferdous Mahmud Shaon
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
HyperText Markup Language - HTML
HyperText Markup Language - HTMLHyperText Markup Language - HTML
HyperText Markup Language - HTML
Sun Technlogies
 
Google Analytics 가이드 (한국어)
Google Analytics 가이드 (한국어)Google Analytics 가이드 (한국어)
Google Analytics 가이드 (한국어)
Min Hee Lee
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
M. Jackson Wilkinson
 
Html Ppt
Html PptHtml Ppt
Html Ppt
vijayanit
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
Minea Chem
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
MayaLisa
 
Html5 CSS3 jQuery Basic
Html5 CSS3 jQuery BasicHtml5 CSS3 jQuery Basic
Html5 CSS3 jQuery Basic
Ravi Yelluripati
 

Viewers also liked (18)

Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS WorkshopModular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
 
Smartphone - The life changer
Smartphone - The life changerSmartphone - The life changer
Smartphone - The life changer
 
Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)Introduction to HTML5 and CSS3 (revised)
Introduction to HTML5 and CSS3 (revised)
 
Web designing
Web designingWeb designing
Web designing
 
Css ppt
Css pptCss ppt
Css ppt
 
HTML/CSS/java Script/Jquery
HTML/CSS/java Script/JqueryHTML/CSS/java Script/Jquery
HTML/CSS/java Script/Jquery
 
Tutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 SiteTutorial: Html5 And Css3 Site
Tutorial: Html5 And Css3 Site
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java ScriptAn Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
 
HyperText Markup Language - HTML
HyperText Markup Language - HTMLHyperText Markup Language - HTML
HyperText Markup Language - HTML
 
Google Analytics 가이드 (한국어)
Google Analytics 가이드 (한국어)Google Analytics 가이드 (한국어)
Google Analytics 가이드 (한국어)
 
HTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts BasicsHTML, CSS and Java Scripts Basics
HTML, CSS and Java Scripts Basics
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3Up to Speed on HTML 5 and CSS 3
Up to Speed on HTML 5 and CSS 3
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
4. html css-java script-basics
4. html css-java script-basics4. html css-java script-basics
4. html css-java script-basics
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
Html5 CSS3 jQuery Basic
Html5 CSS3 jQuery BasicHtml5 CSS3 jQuery Basic
Html5 CSS3 jQuery Basic
 

Similar to About Best friends - HTML, CSS and JS

HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra Um
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
Helder da Rocha
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
Michael Enslow
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
Lohith Goudagere Nagaraj
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
Frédéric Harper
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
Diacode
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
Gill Cleeren
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
Vera Kovaleva
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
GaziAhsan
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
Guillermo Paz
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
Doris Chen
 
Html5
Html5Html5
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
Marcelio Leal
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
Denise Jacobs
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
Jamshid Hashimi
 
HTML5 Hacking - Yahoo! Open Hack Day
HTML5 Hacking - Yahoo! Open Hack DayHTML5 Hacking - Yahoo! Open Hack Day
HTML5 Hacking - Yahoo! Open Hack Day
Ted Drake
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
elliando dias
 
Html5 public
Html5 publicHtml5 public
Html5 public
doodlemoonch
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
David Wesst
 

Similar to About Best friends - HTML, CSS and JS (20)

HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3JavaONE 2012 Using Java with HTML5 and CSS3
JavaONE 2012 Using Java with HTML5 and CSS3
 
It's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking ModernizrIt's a Mod World - A Practical Guide to Rocking Modernizr
It's a Mod World - A Practical Guide to Rocking Modernizr
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
HTML5, the new buzzword
HTML5, the new buzzwordHTML5, the new buzzword
HTML5, the new buzzword
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
Rwd slidedeck
Rwd slidedeckRwd slidedeck
Rwd slidedeck
 
Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.Responsive Web Design tips and tricks.
Responsive Web Design tips and tricks.
 
HTML5: Introduction
HTML5: IntroductionHTML5: Introduction
HTML5: Introduction
 
Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016Practical tipsmakemobilefaster oscon2016
Practical tipsmakemobilefaster oscon2016
 
Html5
Html5Html5
Html5
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
HTML5 Hacking - Yahoo! Open Hack Day
HTML5 Hacking - Yahoo! Open Hack DayHTML5 Hacking - Yahoo! Open Hack Day
HTML5 Hacking - Yahoo! Open Hack Day
 
Javascript Libraries
Javascript LibrariesJavascript Libraries
Javascript Libraries
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
Rich and Beautiful: Making Attractive Apps in HTML5 [Wpg 2013]
 

More from Naga Harish M

Css few small tips and information
Css few small tips and informationCss few small tips and information
Css few small tips and information
Naga Harish M
 
How to Avoid app store rejection
How to Avoid app store rejectionHow to Avoid app store rejection
How to Avoid app store rejection
Naga Harish M
 
Make app more visible in App store or marketplace
Make app more visible in App store or marketplaceMake app more visible in App store or marketplace
Make app more visible in App store or marketplace
Naga Harish M
 
iOS Distribution and App store pushing and more
iOS Distribution and App store pushing and moreiOS Distribution and App store pushing and more
iOS Distribution and App store pushing and more
Naga Harish M
 
Native vs cross platform vs html5
Native vs cross platform vs html5Native vs cross platform vs html5
Native vs cross platform vs html5
Naga Harish M
 
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titanium
Naga Harish M
 
Windows phone 8
Windows phone 8Windows phone 8
Windows phone 8
Naga Harish M
 
Mobile website --- Web is in pocket....
Mobile website --- Web is in pocket....Mobile website --- Web is in pocket....
Mobile website --- Web is in pocket....
Naga Harish M
 
HTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerfulHTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerful
Naga Harish M
 
Naming standards and basic rules in .net coding
Naming standards and basic rules in .net codingNaming standards and basic rules in .net coding
Naming standards and basic rules in .net coding
Naga Harish M
 
Developers role in web site seo optimization
Developers role in web site seo optimizationDevelopers role in web site seo optimization
Developers role in web site seo optimization
Naga Harish M
 
Silverlight
SilverlightSilverlight
Silverlight
Naga Harish M
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
Naga Harish M
 
Windows presentation foundation
Windows presentation foundationWindows presentation foundation
Windows presentation foundation
Naga Harish M
 

More from Naga Harish M (14)

Css few small tips and information
Css few small tips and informationCss few small tips and information
Css few small tips and information
 
How to Avoid app store rejection
How to Avoid app store rejectionHow to Avoid app store rejection
How to Avoid app store rejection
 
Make app more visible in App store or marketplace
Make app more visible in App store or marketplaceMake app more visible in App store or marketplace
Make app more visible in App store or marketplace
 
iOS Distribution and App store pushing and more
iOS Distribution and App store pushing and moreiOS Distribution and App store pushing and more
iOS Distribution and App store pushing and more
 
Native vs cross platform vs html5
Native vs cross platform vs html5Native vs cross platform vs html5
Native vs cross platform vs html5
 
Getting started with titanium
Getting started with titaniumGetting started with titanium
Getting started with titanium
 
Windows phone 8
Windows phone 8Windows phone 8
Windows phone 8
 
Mobile website --- Web is in pocket....
Mobile website --- Web is in pocket....Mobile website --- Web is in pocket....
Mobile website --- Web is in pocket....
 
HTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerfulHTML5 - Let’s make the WEB more powerful
HTML5 - Let’s make the WEB more powerful
 
Naming standards and basic rules in .net coding
Naming standards and basic rules in .net codingNaming standards and basic rules in .net coding
Naming standards and basic rules in .net coding
 
Developers role in web site seo optimization
Developers role in web site seo optimizationDevelopers role in web site seo optimization
Developers role in web site seo optimization
 
Silverlight
SilverlightSilverlight
Silverlight
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
Windows presentation foundation
Windows presentation foundationWindows presentation foundation
Windows presentation foundation
 

Recently uploaded

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Bert Blevins
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
SynapseIndia
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 

Recently uploaded (20)

Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly DetectionAdvanced Techniques for Cyber Security Analysis and Anomaly Detection
Advanced Techniques for Cyber Security Analysis and Anomaly Detection
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptxRPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
RPA In Healthcare Benefits, Use Case, Trend And Challenges 2024.pptx
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 

About Best friends - HTML, CSS and JS

  • 1. BEST FRIENDS - They make our site more
  • 2. HTML CSS JavaScript Images source Xbox.com
  • 3. Build prefect site with CSS, JS and HTML Images source Xbox.com
  • 4. Here is the Website ;) Images source Xbox.com HTML : Help to show content in browsers CSS : Help to style the content JS : Help to interact with content
  • 5. What is in Next Slides? (about HTML5) • What and Why HTML5 • New Elements • New Attributes • Storage • Offline • What's good and bad
  • 6. What is in Next Slides? (about CSS3) • Background • Animations • Media query
  • 7. What is in Next Slides? (about JS) • Web workers • Web socket
  • 8. What is HTML5? • It’s not just next version of HTML • Make web more powerful • Easy for developers and computer program “HTML5 was proposed by Opera Software and Mozilla Foundation in June,2004”- WWW
  • 9. Why HTML5? “Web developers be proud, what we wrote will run in any device*”- Evol *Conditions apply ;) OLD HTML Access to the local system's resources/GPU  Works in Offline  Heavy graphics and quality UI  So, we need to depend on plugins (Like Flash and Silverlight)
  • 10. Why HTML5? “Web developers be proud, what we wrote will run in any device*”- Evol *Conditions apply ;) OLD HTML HTML5 Access to the local system's resources/GPU   Works in Offline   Heavy graphics and quality UI   So, we need to depend on plugins (Like Flash and Silverlight)
  • 11. So, it comes with.. Graphics Location Database Speed Audio Video Offline
  • 13. New Elements • <canvas> and <svg> • <video> and <audio> • New Form inputs • Datalist “HTML5 could do everything Flash did”- Steve Jobs
  • 14. Canvas and SVG Canvas (scriptable image tag) SVG HTML: <canvas id="myCanvas" width="200" height="100"> Your browser does not support the HTML5 canvas tag. </canvas> JavaScript: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,200,100); Output : HTML: <svg width="400" height="110"> <rect width=“200" height="100" style="fill:rgb(255,0,0); "> Sorry, your browser does not support inline SVG. </svg> JavaScript: //For now need any action Output :
  • 15. WHEN<canvas> <svg> …Please use web to get more content about topic.
  • 16. “In this world there are 30+ browsers”- WWW <Video> • Help to add video to our site. • HTML : <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video> http://www.w3schools.com/tags/tag_video.asp
  • 17. Video file format V/S Browser http:/www.w3schools.com/html/html5_video.asp and http://www.w3.org/2010/05/video/mediaevents.html MP4 WebM OGG               
  • 18. <audio> • Help to add audio to our site. • HTML : <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.wav" type="audio/wav"> Your browser does not support the audio element. </audio> http://www.w3schools.com/tags/tag_audio.asp “The first web browser was called WorldWideWeb (Nexus), invented in 1990 - 1991 and had 4 million users.”- WWW
  • 19. Audio file format V/S Browser MP3 Wav OGG               
  • 22. <datalist> • This tag specifies a list of pre-defined options for an <input> element. • HTML : <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> Demo : http://www.w3schools.com/TAgs/tag_datalist.asp
  • 23. New Attributes • autocomplete • autofocus • pattern (regexp) • placeholder • required Demo : http://www.w3schools.com/html/html5_form_attributes.asp and http://www.w3schools.com/tags/ref_eventattributes.asp “Custom attributes use data- prefix. E.g. :- data-SOMETHING”
  • 24. Local Storage • window.localStorage - stores data with no expiration date • code.sessionStorage - stores data for one session (data is lost when the tab is closed) • JavaScript: if(typeof(Storage)!=="undefined") { // Code for localStorage/sessionStorage. } else { // Sorry! No Web Storage support.. }
  • 25. Local Storage • window.localStorage - stores data with no expiration date • code.sessionStorage - stores data for one session (data is lost when the tab is closed) • JavaScript: if(typeof(Storage)!=="undefined") //('localStorage' in window && window['localStorage'] !== null) { localStorage.setItem("lastname", "Smith"); sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; } else { // Sorry! No Web Storage support.. }
  • 26. Local Storage • Web SQL Database works in Safari, Chrome and Opera (!IE and !FF) • JavaScript: openDatabase('documents', '1.0', 'Local document storage', 5*1024*1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }, error); }); • IndexDB -- https://dvcs.w3.org/hg/IndexedDB/raw- file/tip/Overview.html
  • 28. Offline • Offline browsing • Speed • Reduced server load • HTML: <!DOCTYPE HTML> <html> <body> The content of the document...... </body> </html>
  • 29. Offline • Offline browsing • Speed • Reduced server load • HTML: <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
  • 30. Offline - Manifest File CACHE MANIFEST # v1.0 – Update by Harish /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html/ /offline.html
  • 31. Offline - Updating the cache triggers • The user clears the browser's cache • The manifest file is modified • The application cache is programmatically updated Demo : http://www.bennadel.com/blog/2029-using-html5-offline- application-cache-events-in-javascript.htm and www.htmlgoodies.com/html5/tutorials/introduction-to-offline-web- applications-using-html5.html
  • 32. 2012 2013 2014 2015 2016 HTML 5.0 Candidate Rec Call for Review Recommendation HTML 5.1 1st Working Draft Last Call Candidate Rec Recommendation HTML 5.2 1st Working Draft - Wiki
  • 33. What's good and bad? “Betting on HTML5 was a mistake”- Mark Zuckenberg “We have definity shifted from HTML5 to native”- LinkedIn …Please use web to get more content about topic.
  • 34. What is CSS? According to me, “If HTML is Girl…
  • 35. What is CSS? …CSS is her makeup kit ”
  • 36. Background • Multiple Background Images • Background origin • Background size • Background clip Demo http://www.w3schools.com/css/css3_backgrounds.asp
  • 37. A B
  • 38. X Y Animations will help us for better user experience (UX)
  • 39. Animations • animation: myfirst 5s; /*@keyframe name and time delay (s/ms) */ • We can also set timing function, delay, iteration count, direction • About @Keyframe rule is “where the animation is created”. • CSS: Demo http://www.w3schools.com/css/css3_animations.asp @keyframes myfirst { from {background: red;} to {background: yellow;} } @keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
  • 40. CSS Hacks Property @keyframes 10.0 4.0 -webkit- 16.0 5.0 -moz- 4.0 -webkit- 15.0 -webkit- 12.1 12.0 -o- animation 10.0 4.0 -webkit- 16.0 5.0 -moz- 4.0 -webkit- 15.0 -webkit- 12.1 12.0 -o- • Opacity, in IE 8 or older -- filter:Alpha(opacity=50);
  • 41. • Web fonts allow to use font that are not installed on the end user computer. • Google is providing free fonts e.g. : http://fonts.googleapis.com/css?family=Butterfly+Kids:400 • CSS: Custom fonts @font-face { font-family: myFont; src: url(sansation_light.woff); } Demo : http://www.w3schools.com/css/css3_fonts.asp
  • 42. Media query • The @media rule allows different style rules for different media in the same style sheet. • CSS: Demo http://www.w3schools.com/css/css_mediatypes.asp @media screen { /* …. */ } @media print { /* …. */ } @media screen,print { /* …. */ }
  • 43. Media query • We can even apply different styles based on device • width and height • Orientation • Aspect ratio / Pixel ratio • CSS: Demo http://www.w3schools.com/css/css_mediatypes.asp @media only screen and (max-device- width: 480px) { /* …. For mobile device less than 480 px width*/ } @media only screen and (min-device- width: 768px) and (max-device-width: 1024px) { /* styles for iPad */ }
  • 44. CSS ready frameworks • Twitter bootstrap http://getbootstrap.com/ • jQuery mobile http://jquerymobile.com/ • Foundation http://foundation.zurb.com/ • jQuery UI http://jqueryui.com/
  • 45. JavaScript According to me, “Without JavaScript our site will be lifeless ”
  • 46. JavaScript – Two new things • Web workers • Web socket “2% or less disable JavaScript support”- Yahoo
  • 48. Web workers • A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.
  • 49. Web workers • A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background. Demo : http://www.w3schools.com/html/html5_webworkers.asp and Mozilla link // in demo_workers.js var i = 0; onmessage = function (oEvent) { timedCount(); postMessage("Hi " + oEvent.data); }; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } if(typeof(w) == "undefined" && typeof(Worker) !== "undefined") { w = new Worker("demo_workers.js"); } w.onmessage = function(event){ document.getElementById("result").innerHTML = event.data; }; function stopWorker() { w.terminate(); } w. postMessage(“Started”);
  • 50. Web socket • WebSocket is a protocol providing full-duplex communications channels over a single TCP connection. • That makes it possible to open an interactive communication session between the user's browser and a server. Socket : http://docs.oracle.com/javase/tutorial/networking/sockets/definition.html
  • 51. Web socket - Example if ("WebSocket" in window) { var ws = new WebSocket("ws://localhost:9998/echo"); ws.onopen = function() { 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() {alert("Connection is closed..."); }; } Demo http://www.tutorialspoint.com/html5/html5_websocket.htm and https://www.youtube.com/watch?v=Z897fkPn7Rw
  • 52. NAGA HARISH M Software engineer E: nagaharish.movva@gmail.com W: www.shareourideas.com facebook.com/shareourideas twitter.com/nagaharishmovva