Upload
karthikeyan-dhanasekaran-csm
View
273
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Basics of HTML5, CSS & Why & What is UX/UI
Citation preview
Session on HTML, CSS & UI/UX DesignBy Karthikeyan 10-31-2014
2
Agenda for next 2 hrs
• Quick revision on HTML & CSS• Few Standards & Practices on HTML & CSS• Introduction to HTML 5 • HTML 5 Best Practices on Semantics Elements
&• What is UI/UX• Why UX is important• Few UI Principles to follow…
3Lets get started with the quick revision of HTML & CSS
4HTML ? !
• What is HTML? • HTML is a language for describing webpages• HTML Stands for Hyper Text Markup Language
• When it is started and how it is growing up?• HTML 1.0 - 1993• HTML 2.0 -1995• HTML 3.2 - 1997• HTML 4.0 - 1998• HTML 4.01 - 1999• XHTML – Combination of XML & HTML ( Very Strict) 2000• HTML 5 – 2004 – its still growing
5Use of HTML
• USE of HTML & CSS • Website is a way to present your content to the world, using HTML &
CSS to present that content & make it look neat.
• Your content • HTML: Structure +• CSS: Presentation = Website
6Content - Example
• A paragraph is your content.• Putting your content into an html tag to make it look
like a paragraph is a structure.
<p>I am a Paragraph </p>
Make the font of your paragraph “blue” and “18px” is presentation which you will be using CSS
7Structures of an HTML
• Element• An individual component of HTML is
• Paragraph, Table & Lists
• Tag • Markers that signal the beginning and end of an element.
• Opening tag and Closing Tag
<p> this is my sample text </p>
8
• Container Element• An element that can contain other elements or content• A paragraph <p> contains text
• Standalone Element• An element that cnnot contain anything else• <hr/>• <img/>
Structures of an HTML
9
• Attribute• Each elements can have a variety of attributes
• For Ex;- Language, style, identity, source, input
• Value• Value is the value assigned to a given attribute ( For Ex:-
• For Ex:- <p lang=“fr”> C’est ;a vie </p>• <img src=“my.picture.jpg”/>
Structures of an HTML
10Review CSS
• CSS = Cascading Style Sheets
• CSS used to style the elements on your page.
• CSS is works in conjunction with HTML, but is not HTML itself.
113 Types of StyleSheets
① Inline Styles
② Internal Style
③ External Style ( Recommended way to use )
12CSS Rule
Selector {
Property:value;
}
• A block of css is Rule Block• The rule starts with a selector.• And It has sets of properties & Values
13CSS Syntax
• Property and value of style you plan to use on HTML element.
• Value ends with a semicolon ;
• So these declaration can be grouped and surrounded by curly brackets.
Selector{
Property:value;
Property:value;
}
14Selector Element
P{
Property:value;
}
Selects all paragraph elements.
Img{
Property: value;
}
Selects all image elements
15Selector ID
#footer {
Property:value;
}
Selects all elements with an id of “footer”
<p id=“footer”> Copyrights 2014 </p>
The associated HTML
16Selector Class
.warning {
color: red;
}
Selects all elements with a class of “warning”
<p class=“ warning”> run away </p>
The associated HTML
17Selector Position .End
p em{
color: green;
}
Selects all em elements that are withing a paragraph
<p> This is <em> important. </em></p>
The Associated HTML
18Standard Practices
19Standard Practices
• Reset CSS Files• Standard widths and sizes• Wrappers
20Reset Css
• Even though HTML is the structure and CSS is the design, some HTML elements have their own default style values.
• Few Examples:• Bulleted list <li> </li> have standard bullets style.• Paragraph <p></p> have default padding• Links <a></a> are blue and underlined by default
21Reset Css
• Most Elements:
Margin:0;
Padding:0;
Border:0;
Font-size:100%;
Font:inherit;
Vertical Align:baseline;
• Lists
List-style:none;
22Standard widths & Sizes
Some sizes that are good to know about
• A standard font size is usually 12px• Screens vary greatly in width! Standardize your design a
couple ways• Set the body width to a specific width• Set the content width to 100%, with max-width of around
1200px/1400px and <min-width of around 960px.
23Wrappers .End
• Wrappers are a good way to center content if the screen width is wider than your content.
.wrapper{
Width:100%;
Max-width:1400px;
Margin: 0 auto;
}
24HTML 5
25HTML5 What is it
• Formally HTML5 is the W3c specification for the next version of html
• Informally people use HTML5 to refer to whole set of new web standards and abilities
• HTML5, CSS3 & Javascript
26HTML Specification
HTML Specifications
• 2004 – started • 2008- first public working draft• 2011 – last call• 2012 working draft• 2014 – planned for stable recommendation
Finally HTML5 became the W3C Standards on ( October 29 2014 )
27Supported Broswers
• Chrome• Firefox• IE ( After Ver-8 few features ) • Safari• Opera
28New in Html5 & CSS3
What's so cool about it?
Few old elements have been obsolete
• Frame, Frameset, no frames• Presentational elements and attributes replaced by CSS
e.g.font, big,center)
29
• Redefines a few things
• It gives semantic meaning to few old elements and separates them from presentation ( eg. B, I, strong, em)
New in Html5 & CSS3
30HTML 4 to HTML5
Semantics: Html5 now includes new tags that describe parts of a document. Not there are dedicated tags for navigations elements, articles, sections, headers & footers.
New Form Elements: Forms have some major updates. There are several new versions of the <input> elements, allowing user to pick colors, numbers, e-mail addresses & dates with easy –to use elements. Made it more user friendly ( even you don’t need to add a JavaScript to validations forms) if you use a proper input types.
Media Elements: At long last, they have native support for audio & video with tags similar to the <img>tags.
Canvas tag: It allows the developer to build graphics interactively. This capability will allow for very intriguing capabilities like custom gaming and interface elements.
31CSS and HTML5
• Embedded Font support: with this you can include a font with a webpage, and it will render even if the user doesn’t have the font installed on her operating system.
• New selectors : Selectors are used to describe a chunk of code to be modified. CSS3 now supports new selectors that let choose every other element, as well as specific sub elements ( different types of input tags)
• Columns: Html has never had decent support columns and all kinds of hacks have been used to overcome this shortcoming. Finally , CSS includes the ability to break an element into any number of columns easily.
• Visual Enhancements: CSS has a number of interesting new capabilities : Transparency, shadows, rounded corners animation, gradients & transformations. These provide a profound new level of control over the appearance of a page.
32JAVASCRIPT & HTML5
• Local Storage Mechanism: HTML 5 now allows the developer to store data on the client. There is even a built in database manager that accepts SQL Commands.
• Geo-location: This interesting features uses a variety of mechanism to determine where the user is located.
• And lot more.. ….
33HTML5 Doctype
<!doctype html>
Minimum information required to ensure that a broser renders using a standards mode
Old doctypes
<!doctype htmll public “-w3c … 4.01 bla bla blaa
>
34Semantic HTML
The use of HTML markup to re-inforce the semantics or meaning of the information in webpages rather than merely to define its presentation (look)
Semantics
Give meaning to structure
35Not Semantic
<div id=“header”></div
<div class=“nav”> </div
<div id=“fopoter”></div>
Semantic<header></header>
<nav></nav>
<footer></footer>
36New Structural Elements
<Section>
Group together thematically related to content
Similar to prior use of the div, but div has no semantic meaning
37
<Header>Container for group of a introductory or navigational aids
Document can have multiple header elements• E.g One for the page, one for each section
New Structural Elements
38
<Footer>
Contains information about its containing element• E.g who wrote it.. copyright links to related content
Document can have multiple footer elements• Eg one for the page one for the each section.
New Structural Elements
39
<aside>
Tangentially related content• E.g sidebar, pull quotes
<nav>
Contains major navigational information
Usually a list of links
Often lives in the header• E.g site navigation
New Structural Elements
40New Structural Elements
<Article>
Self- contained related content• E.g blog posts, news stories, comments , reviews, forum posts
41Not Semantic
42Semantic
43What is the use Semantics Markups and advantages
• Accessibility• Searchability• Internationalization
It also helps treat the plague of div-itis
44Hack for old browsers END..
• HTML5SHIV
• HTML5shiv IE enabling script
• <!– if it ie 9!?• <script src=“html5shjiv.js></script.• <!9endig)
• Polyfill (n) javascripts shim that replicated the standard api for older broswers
45UI/UX ?
46What is UX/UI?
UX is about satisfaction
UI is about functionality
UX is designing for user to come back to the site
UI is designing for customers to reach their goal when onsite
UX focuses on the structure & layout of content navigation and how users interact with them.
UI focuses on functionality with nice look and feel
47Why UX
UX measures the ROI of usability to look for
• More frequent visits to your website/product• Increased return visits to your site
• User staying longer on your site• Increased sales
• Decreases user errors• Decreased customer support costs
• Reduced word of mouth complaints
48Few UI Principles need to be followed
49Keep it Simple
Interface elements on demand
50Make it Straight forward..
IN-page editing, drage & drop
51Stay on Context
52Guide User
For First time user! Tell them what to do next
53Always Provide Feedback
Always keep informed the users. What's happening!
54Don’t forget Aesthetics
55Increase Efficiency
By Providing Keyboard Shortcuts
56
Good UI is obvious
Great UI is invisible
So always Inspire others work and try to adapt new patterns & Trends.
57Completing todays session with my favorite Quote
Think for the user, don't make them think!