76
Date: 11-January-2013 GENERAL TECH. TALK on HTML5 , CSS3 , RESPONSIVE WEB DEVELOPMENT at Link plus offshore (P.) Ltd. By : Madhukar Adhikari
| Date post: | 25-Dec-2015 |
| Category: |
Documents |
| Upload: | dominic-fowler |
| View: | 216 times |
| Download: | 2 times |
Date: 11-January-2013
GENERAL TECH. TALK on
HTML5 , CSS3 , RESPONSIVE WEBDEVELOPMENT
at
Link plus offshore (P.) Ltd. By : Madhukar Adhikari
HTML Web Development to the next level !
A MORE POWERFUL WEB
HTML 5 A CHANCE TO DO THINGS DIFFERENTLY
TIMELINE OF WEB TECHNOLOGIES 1991 HTML 1994 HTML 2 1996 CSS1 + JAVASCRIPT 1997 HTML4 1998 CSS2 1999 HTML 4.01 2000 XHTML1 2002 TABLELESS WEB DESIGN 2005 AJAX 2009 HTML5
HTML 5
HTML5 is The New HTML Standard or new version of hypertext markup language.
The previous version of HTML, HTML 4.01, came in 1999. The web has changed a lot since then.
HTML5 is still a work in progress. However, the major browsers support many of the new HTML5 elements and APIs.
MAJOR BROWSER
5 major browser are Internet explorer, Firefox, Google Chrome , Safari and Opera. Most people use these browser at this time.
You can see user ratio of browser on next slide
BROWSER USER
2009 2010 2011 20120.00%
5.00%
10.00%
15.00%
20.00%
25.00%
30.00%
35.00%
40.00%
45.00%
50.00%
Internet Explorer
Firefox
Chrome
Safari
Opera
HTML5 HTML + CSS + JSBased on
MORE SPEED
HOW DID HTML5 GET STARTED?
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML.
Some rules for HTML5 were established:
New features should be based on HTML, CSS, DOM, and JavaScript
Reduce the need for external plugins (like Flash)
Better error handling More markup to replace scripting HTML5 should be device independent The development process should be visible to
the public.
HTML5 W3C RECOMMENDATION TABLE
In September 2012 the W3C proposed a plan to release a stable HTML5 Recommendation by the. end of 2014 and an HTML 5.1 specification Recommendation by the end of 2016.
2012 2013 2014 2015 2016
HTML 5.0 Candidate Rec Call for Review
Recommendation
HTML 5.1 1st Working Draft
Candidate Rec Recommendation
HTML 5.2 1st Working Draft
SEMANTICS & MARKUP
More meaningful elements
NEW SEMANTIC ELEMENTSIN HTML5
<article> Defines an article. <footer> Defines a footer for a document or
section <header> Defines a header for a
document or section <nav> Defines navigation links <section> Defines a section in a document <aside> Defines content aside from the
page content <figure> Specifies self-contained content,
like illustrations, diagrams, photos, code listings, etc.
o <figcaption> Defines a caption for a <figure> element
o <time> Defines a date/timeo <bdi> Isolates a part of text that might be
formatted in a different direction from other text outside it
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<command> Defines a command button that a user can invoke
<details> Defines additional details that the user can view or hide
<summary> Defines a visible heading for a <details> element
THE NEW <FORM> ELEMENT
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation
NEW MEDIA ELEMENTS
<audio> Defines sound content <video> Defines a video or movie <source> Defines multiple media
resources for <video> and <audio> <embed> Defines a container for an
external application or interactive content (a plug-in)
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
4.1 element rewrite with more specification in html5 and some of The following HTML 4.01 elements are removed
from HTML5:
<acronym>,<applet>,<basefont>,<big>,<center>,<dir>,<font>,<frame>,
<frameset>,<noframes>,<strike>,<tt>
THE NEW <CANVAS> ELEMENT
STRUCTURE
<DOCTYPE html> HTML5
The <!DOCTYPE > declaration must be the very first thing in your HTML document, before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML
Html 4.1 Defined as an application of Standard Generalized Markup Language (SGML).
<Html Lang=‘en’> Every thing Defines within this tag </html>
<head>
<meta charset=“utf-8”> utf-8 (UCS Transformation Format 8-bits) can represent every character in the Unicode character set.
Charset utf-8 make IE happy.
<meta name="viewport" content="width=device-width, initial-scale=1">
The most important part of the viewport tag is telling the browser what's the width of your website. If we code it like this.
@ Css …link with css file and @js link tag setting “ css hacking” etc..
</head>
<body> <header> <hgroup> <h1>Page title</h1> <h2>Page subtitle</h2> </hgroup> </header>
<nav> <ul> Navigation... </ul> </nav>
<section> <article> <header> <h1>Title</h1> </header> <section> Content... </section> </article> <article>
<header> <h1>Title</h1> </header> <section> Content... </section> </article>
</section>
<aside> Top links... </aside>
<figure> <img src="..."/> <figcaption>Chart 1.1</figcaption> </figure>
<footer> Copyright © <time datetime="2010-11-08">2010</time>. </footer></body>
NEW FORM ELEMENTHTML5 has several new input types for forms. These new features allow
better input control and validation
<input type="text" required />
<input type="email" value="[email protected]" />
<input type="date" min="2010-08-14" max="2011-08-14" value="2010-08-14"/>
<input type="range" min="0" max="50" value="10" />
<input type="search" results="10" placeholder="Search..." />
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="color" placeholder="e.g. #bbbbbb" />
<input type="number" step="1" min="-5" max="10" value="0" />
Code Example max-min<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
HTML FORM FIELD TYPES ON MOBILE
VIEW ON BROWSER
SPEECH INPUT HTML5
Getting users to fill in lots of forms can be frustrating so why not use speech to speed up the process? Google has recently implemented HTML 5 speech into its Chrome browser and other browser makers are set to follow
HTML JS AUDIO + VIDEO
HTML 5 makes<video> as easy as <img>
<audio id="audio" src="sound.mp3" controls></audio>
document.getElementById("audio").muted = false;
<video id="video" src="movie.webm" autoplay controls></video>
document.getElementById("video").play();
HTML + JS + CANVAS 2D(WEBGL)
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics
and 2D graphics within any compatible web browser without the use of plug-ins.
The CANVAS element is used to draw graphics, on the fly, on a web page
Canvas JavaScript API ("Scriptable Image Tag")
Examples:-<canvas id="canvas" width="838"
height="220"></canvas>
<script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke();</script>
Output { Drawing } Canvas on the fly.
SVG (SCALABLE VECTOR GRAPHICS)
Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics.
Html 5 SVG tag support graphic xml based graphic
Example:<svg width="200" height="200">
<rectx="0" y="0"width="100" height="100"fill="blue" stroke="red"stroke-width="5px"rx="8" ry="8"id="myRect" class="chart" />
</svg>
SVG AND CANVAS
SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
CANVAS Resolution dependent No support for event handlers Poor text rendering capabilities You can save the resulting image as .png or .jpg Well suited for graphic-intensive games
SVG Resolution independent Support for event handlers Best suited for applications with large rendering areas (Google
Maps) Slow rendering if complex (anything that uses the DOM a lot will be
slow) Not suited for game applications
HTML5 GEOLOCATION
HTML5 Geolocation is used to locate a user's position
Geolocation is the art of figuring out where you are in the world and (optionally) sharing that information with people you trust. There is more than one way to figure out where you are — your IP address, your wireless network connection, which cell tower your phone is talking to, or dedicated GPS hardware that calculates latitude and longitude from information sent by satellites in the sky.
Geolocation API
The geolocation API lets you share your location with trusted web sites. The latitude and longitude are available to JavaScript on the page, which in turn can send it back to the remote web server and do fancy location-aware things like finding local businesses or showing your location on a map.
APPLICATION CACHE
database and app cache store user data and
app resources locally
HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages: Offline browsing - users can use the application when
they're offline Speed - cached resources load faster Reduced server load - the browser will only download
updated/changed resources from the server
To enable application cache, include the manifest attribute in the document's <html> tag
EXAMPLE
<!DOCTYPE html>
<html manifest="demo_html.appcache">
// page content start
<header>
<nav>
</nav>
<section>
</section>
<footer>
</footer
</header>
<body>
</body>
</html>
HTML5 DRAG AND DROPDrag and Drop is powerful User Interface concept which makes it easy
to copy, reorder and deletion of items with the help of mouse clicks. This allows the user to click and hold the mouse button down over an element, drag it to another location, and release the mouse button to drop the element there.
To achieve drag and drop functionality with traditional HTML4, developers would either have to use complex JavaScript programming or other JavaScript frameworks like jQuery etc.
Now HTML 5 came up with a Drag and Drop API that brings native Drag and drop support to the browser making it much easier to code up.
HTML 5 Drag and Drop is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.
JAVASCRIPT EXAMPLE
<script>
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
CODE ON HTML BODY
<div id="wrap">
<h1> Html5 Drag and Drop (DnD) </h1>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="dragndrop.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
</div>
Output of drag and drop
SSE (SERVER SENT EVENT)
Conventional web applications generate events which are dispatched to the web server. For example a simple click on a link requests a new page from the server.
The type of events which are flowing from web browser to the web server may be called client-sent events.
Along with HTML5, WHATWG Web Applications 1.0 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Using SSE you can push DOM events continuously from your web server to the visitor's browser.
The event streaming approach opens a persistent connection to the server, sending data to the client when new information is available
HTML5 GAME DEVELOPMENT
Html 5 game is One of the challenging feature in html5.
Combination of html5 (API ‘like canvas etc.’) JavaScript and css3 with game development also possible .
Example:-
http://www.puma.com/runpumarun
Is one of the html 5 game
Html5 mobile farming game.
A MORE POWERFUL WEB == MORE POWERFUL APPS
SEO (SEARCH ENGINE OPTIMIZATION)
Take control of your web site’s rankingsWith search engine optimization (SEO)
ABOUT SEO
SEO stands for “search engine optimization.” It is the process of getting traffic listings on search engines. All major search engines such as
Google Yahoo and Bing have such results, where web pages and other content such as videos or local listings are shown and ranked based on what the search engine considers most relevant to users.
SEO has two parts:
on-page and off-page
This is also called online and offline and on-site and off-site.With on-line, you do something ON your site that helps for rankingsWith off-line, you do something FOR your site (on other sites) that helps for rankings.
On-line: With on-page optimization, you optimize the Page Title, meta tags, heading tags, images , etc. on your site
Off-line: with off-page optimization, you go with directory submission, article submission, press-release submission and doing that you brand/market your services
HTML5 IMPACT ON SEO
How might HTML5 change the way we approach SEO? What are the possible impacts of HTML5 in search engine algorithms?
Web Page Segmentation and Increased Semantics
One key component of HTML5 is that it adds new elements that help us better express what’s on a web page. This helps improve web page segmentation so that different parts — such as the header, footer, main content area, etc. — can be easily be distinguished from one another.
Once HTML5 becomes more widely adopted, search engines can use these new elements to help them find page elements of interest to them.
Currently, we use <div> elements to organize and segment a web page.
<div class=“header”> <div class=“wrap”> <div class=“footer”>
<div class=“sidebar”>
The issue with using <div> elements is that the element is meaningless. It doesn’t add semantic value or give context to what’s inside it.
With new elements such as <header>, <article>, <aside> and <footer>, the segmentation of the web page becomes more meaningful.
<header>
content here------
</header>
<article>
content here----
</article>
<aside>
Content here---
</aside>
<footer>
Content here---
</footer>
The benefit of this is that it will allow search engines to easily crawl the website, possibly skipping sections such as <footer> or <header> or using them for different indexing purposes (such as identifying copyright information or finding the site’s name or logo). Search engine indexing will thus be more efficient, meaningful and possibly more advanced.
HTML5 ELEMENTS THAT CAN AFFECT SEARCH ENGINE INDEXING
Some new HTML5 elements that can have a direct impact on SEO,
<article>The new <article> element is probably one of the most important
additions to HTML5 when it comes to SEO. It allows you to indicate the main content of a web page.
One potential change to search engine indexing is that search engines may put more weight on the content inside the <article> element
<section>
The <section> element is meant to indicate various sections on a page. The advantage is that each section can have its separate HTML heading. This can give search engines a better understanding of how the web page is segmented and structured.
<header>
The <header> element can give search engines a clue as to where the site name and logo is on a web page or where the primary navigation is
<footer>
In web design, a footer usually contains auxiliary information such as copyright information, licensing terms, privacy policy information, links to static pages, and links to social media profiles. This section could be used by search engine spiders to identify items related to copyright, terms of use, privacy policies and social media profiles.
Since <footer> contains auxiliary information, will its content be heavily discounted in search engine algorithms? Possibly
Link TypesOne of the ways search engine rankings are determined
is through hyperlinks in a web page. Search engines study links in a web page to see what web pages it points to as well as to see what web pages point to it.
Link types in HTML5 allow us to give our links better meaning. This gives search engines greater context for each link they encounter.
New attribute values like rel="author" and rel="license" essentially allow us to describe our links better.
CSS3
Latest version of Css
CSS 2, 2.1, 3
CSS stands for Cascading Style Sheets.
Styles define how to display HTML elements.
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!
CSS3 is the latest standard for CSS. CSS3 is completely backwards compatible, so you will
not have to change existing designs. Browsers will always support CSS2.
CSS SELECTORS
Style and new rules on css.
Selectors:-.row:nth-child(even) {
background: #dde;}.row:nth-child(odd) { background: white;}
Image-like display:-
div { display: inline-block;}
Specific attributes
input[type="text"] { background: #eee;}
More specific Targettingh2:first-child { ... }
div.text > div { ... } h2 + header { ... }
WEB FONTS
There are many web supported font format which can use in web document via custom cs3 style.
Some fonts list are :-EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD,
PRO, XSF, and the list goes on.
Main font format for web:-TrueType
Open Type
EOT
WOFF
SVG
FONT DESCRIPTION True type font:- This format was developed in the late 1980s as a
competitor to Adobe’s Type 1 fonts used in PostScript. As a scalable outline format, it replaced the common bitmap fonts that were used for screen display at that time. Microsoft took up the TrueType format as well and it soon evolved into the standard format for system fonts due to the fact that it offered fine-tuned control for a precise display of font in particular sizes.
Open type font:- Microsoft and Adobe teamed up in developing this font format. Based on the TrueType format . There are two different versions of OpenType fonts, depending on the outline technology used. There are:
o OpenType fonts with TrueType Outlines (OpenType TT) ando OpenType fonts with PostScript Outlines (OpenType PS) (CFF = compact file
format).
Eot:- Internet Explorer has supported the proprietary Embedded OpenType (EOT) standard from the late 1990s.
Woff :- Unlike EOT, the Web Open Font Format (WOFF) is in the process of being standardized as a recommendation by the W3C which published WOFF as a working draft back in July 2010.
Svg:- SVG is the only format that can be used for the iPhone and iPad prior to
iOS 4.2.
STYLE RULE IN CSS3 FILE
@font-face { font-family: "FontAwesome";
src: url('../fonts/fontawesome-webfont.eot'); /* IE9 Compatibility Modes ‘1190’ */
src: url('../fonts/fontawesome-webfont.eot?#iefix') format('eot'), /* IE6-IE8 */
url('../fonts/fontawesome-webfont.woff') format('woff'), /* Modern Browsers ‘2010’ */
url('../fonts/fontawesome-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/fontawesome-webfont.svg#FontAwesome') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal; }
CSS3 COLUMN
With CSS3, you can create multiple columns for laying out text - like in newspapers!
In this chapter you will learn about the following multiple column properties:
column-count column-gap column-rule
-webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb;-webkit-column-gap: 2em;
Internet Explorer does not yet support the multiple columns properties.
CSS3 BORDER With CSS3, you can create rounded borders, add shadow to boxes, and use
an image as a border - without using a design program, like Photoshop.
In this chapter you will learn about the following border properties:
border-radius box-shadow border-image
div.border-radius
{
border:2px solid #a1a1a1;
padding:10px 40px;
border-radius:25px;
width : 50%;
-moz-border-radius:25px; /* Old Firefox */}
CSS3 BOX SHADOW & IMAGE
div.shadow
{
width:300px;
height:100px;
background-color:lime;
-moz-box-shadow: 10px 10px 5px #888888; /* Old Firefox */
box-shadow: 5px 5px 5px #888888;
}
#round
{
-moz-border-image:url(border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}
#stretch
{
-moz-border-image:url(border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 stretch; /* Opera */
border-image:url(border.png) 30 30 stretch;
}
CSS GRADIENTS
BACKGROUND ENHANCEMENTSBackground sizing properties style are:-
Ground-size: contain;Ground-size: auto;Ground-size: cover;Ground-size: 100%;
FLEXIBLE BOX MODEL
Css 3 support flexible box model
.box { display: -webkit-box: -webkit-box-pack: -webkit-box-align: center;
-webkit-box-align: start;
-webkit-box-align: end;
-webkit-box-align: strech; }
CSS3 TRANSITIONSWith CSS3, we can add an effect when changing from one style to
another, without using Flash animations or JavaScripts.
Div .transition
{
width:100px;
height:100px;
background:lime;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
Div .transition:hover
{
width:300px;
}
CSS TRANSFORMS
A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.
2Dtransform method are:- translate() rotate() scale() skew() matrix()
div.transform{margin-top:50px;margin-left:50px;width:200px;height:100px;background-color:lime;/* Rotate div */transform:rotate(30deg);-ms-transform:rotate(30deg); /* IE 9 */-moz-transform:rotate(30deg); /* Firefox */-webkit-transform:rotate(30deg); /* Safari and Chrome
*/-o-transform:rotate(30deg); /* Opera */}
CSS3 ANIMATION
With CSS3, we can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages.
RESPONSIVE WEB DEVELOPMENT
The whole world in your palm !
ABOUT RESPONSIVE DEVELOPMENTResponsive web design is an approach to web design in which a site
is crafted to provide an optimal viewing experience-easy reading and navigation with a minimum of resizing, panning, and scrolling-across a wide range of devices (from desktop computer monitors to mobile phones)
A site designed with RWD uses CSS3 media queries an extension of the @media rule, to adapt the layout to the viewing environment—along with fluid proportion-based grids and flexible images.
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser
The fluid grid concept calls for page element sizing to be in relative units like percentages or Ems, rather than absolute units like pixels or points.
Flexible images are also sized in relative units (up to 100%), so as to prevent them from displaying outside their containing element.
RESPONSIVE VIEWON
DIFFERENT DEVICES
TABLET VIEWS PORTRAIT
TABLET LANDSCAPE VIEW
TABLET LANDSCAPE VIEW
Your question ?
Thank you !
The End !
