Scribd
Upload
49 views39 pages

Html5 Css3

This document discusses HTML5, CSS3, and social coding practices. It provides an overview of new features in HTML5 like semantic elements, audio/video support, canvas, drag and drop, local storage, and geolocation. It also covers CSS3 features and the use of vendor prefixes. The document then discusses social coding practices like using version control systems like Git for collaborative development. It describes features of distributed version control and how Git can be used to create and push repositories to GitHub. Finally, it mentions tools for task tracking and organizing work like Trello.

Uploaded by

Kepo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views39 pages

Html5 Css3

This document discusses HTML5, CSS3, and social coding practices. It provides an overview of new features in HTML5 like semantic elements, audio/video support, canvas, drag and drop, local storage, and geolocation. It also covers CSS3 features and the use of vendor prefixes. The document then discusses social coding practices like using version control systems like Git for collaborative development. It describes features of distributed version control and how Git can be used to create and push repositories to GitHub. Finally, it mentions tools for task tracking and organizing work like Trello.

Uploaded by

Kepo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 39

HTML5 and CSS3

Web Browser

→ —Fetches/displays documents from web servers

→ —Mosaic 1993

→ Firefox,IE,Chrome,Safari,Opera,Lynx,Mosaic,Konqueror
◦There are standards, but wide variation in features
Desktop Browser Market Share

http://www.w3schools.com/browsers/browsers_stats.asp
HTML5: New Features

●    Semantic elements and Markups


●    Audio and video support
●    Canvas
●    Drag and drop
●    Local data storage
●    Offline applications
●    Server events
●    Geolocation
Semantic elements

A semantic element clearly describes its


meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and


<span> - Tells nothing about its content.

Examples of semantic elements: <form>,


<table>, and <img> - Clearly defines its content.
Semantic elements: some other

<header> <nav>
<section> <article>
<aside> <figure>
<figcaption> <footer>
<details> <summary>
<mark> <time>
Semantic Element example & Markups

http://slides.html5rocks.com/#semantic-tags-1
Audio & Video
Audio
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Output: http://jsfiddle.net/mashiyat/g4hMX/
Canvas

<canvas> element is used to draw graphics, on


the fly, via scripting (usually JavaScript).

→ only a container for graphics. You must use a script


to actually draw the graphics.
Drag and drop

Drag and drop means when you "grab" an object


and drag it to a different location.

→ In HTML5, drag and drop is part of the standard,


and any element can be draggable.

Demo: http://slides.html5rocks.com/#native-drag-and-drop
Web Storage for local data storage & Offline app

Using HTML5 we can store data locally within the


user's browser.

→ Earlier, this was done with cookies. However, Web


Storage is more secure and faster.
→ The data is not included with every server request,
but used ONLY when asked for. It is also possible to store
large amounts of data, without affecting the website's
performance.
→ The data is stored in name/value pairs, and a web page
can only access data stored by itself.
→ Unlike cookies, the storage limit is far larger (at least
5MB) and information is never transferred.
Demo: http://slides.html5rocks.com/#web-storage
Web Storage for local data storage & Offline app

Use web store wisely!

Before using web storage, check browser support for


localStorage and sessionStorage:

if(typeof(Storage) !== "undefined") {


// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}
Server events

A server-sent event is when a web page automatically gets


updates from a server.

Before, the web page would have to ask if any updates


were available. With server-sent events, the updates come
automatically.

Examples: Facebook/Twitter updates, stock price updates,


news feeds, sport results, etc.
Geolocation

The HTML5 Geolocation API is used to get


the geographical position of a user.

Since this can compromise user privacy,


the position is not available unless the user
approves it.

Demo: http://slides.html5rocks.com/#geolocation
CSS3

http://www.w3schools.com/css/
css3_intro.asp

http://slides.html5rocks.com/#css3-title
CSS3 (Vendor prefix)

The CSS browser prefixes are:

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
CSS3 (Vendor prefix is temporary)

Just a few years ago, to set a rounded


corner on a box you had to write:

-moz-border-radius: 10px 5px;


-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 10px 5px;

But now you really only need the


standards version:

border-radius: 10px 5px;


References
1. http://www.w3schools.com/
2. http://slides.html5rocks.com/
3. http://www.cs.toronto.edu/~delara/courses/csc309/
4. http://uoft.fabspaces.cc/
5. http://jquery.com/
6. http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm
Social Coding
The Cathedral and the Bazaar
Eric S. Raymond

Cathedral model:

Source code is available with each


software release, but code developed
between releases is restricted to the code
developers.
The Cathedral and the Bazaar
Eric S. Raymond

Bazaar model:
Code is developed over the Internet in
view of the public.
The Bazaar

• Release early. Release often

• More transparent, users as co-


developers

• Greater visibility of bugs, lots of testers

• Recognize good ideas (from others)

• More scrutiny, and experimentation


possible.
Development is Collaborative
Development is Collaborative
Development is Collaborative
Development is Collaborative
Version Control System (VCS)
CVS, SVN, Git, Mercurial, Dropbox(!), etc.
Version Control System (VCS)
Local Version Control saves changes to files in a
database.

Centralized Version Control saves changes to


a shared server

Distributed Version Control allows for easier


sharing of files then LVC and also eliminates
problems that could occur if access to the server
is lost under a CVC system.
Distributed Version Control

DVC clients have a complete backup of the files


on their computer. If the server is lost the client
just waits to regain contact and then uploads
changes.

-- Each client has a complete history of all


changes stored locally.
-- The client can also access all changes made
to the files historically with a simple command.
-- Git monitors all file change, constantly.
DVC

Distributed systems like Mercurial and


Git are newer and are gradually
replacing centralized systems like CVS
and Subversion.
Git

• Created in 2005

• Designed for speed

• Support for many parallel branches

• Distributed, promotes local work

• Able to handle large projects


Git (Create a new repository)
touch  README.md  
git  init  
git  add  README.md  
git  commit  -­‐m  "first  commit"  

 
git  remote  add  origin  https://github.com/
mashiyat/CSC309.git  
git  push  -­‐u  origin  master  
Git (pushing existing repository)

git  remote  add  origin  https://github.com/


mashiyat/CSC309.git  

git  push  -­‐u  origin  hotfix  

 
File status lifecycle in Git
Git

For  free  private  repo  

https://bitbucket.org/  

 
Social Coding (Real Time)

For  real  time  collaboration  

https://c9.io/  
Task Tracking System

GitHub

https://github.com/jquery/jquery-mobile/issues

Other Free alternative

https://Freedcamp.com
Organizing your tasks and thoughts

Trello (https://trello.com)

https://www.youtube.com/watch?
v=aaDf1RqeLfo#t=15

Online Task Manager

https://www.online-task-manager.com/
-- Trello is weak in tracking time
estimations.
References
http://en.wikipedia.org/wiki/The_Cathedral_and_the_Bazaar
http://git-scm.com/book/en/Git-Basics-Recording-Changes-to-the-Repository
http://git-scm.com/book/en/Git-Branching-Basic-Branching-and-Merging
http://www.newthinktank.com/2014/04/git-video-tutorial/

You might also like