html,css & ui/ux design

Download Html,CSS & UI/UX design

Post on 23-Jun-2015




1 download

Embed Size (px)


Basics of HTML5, CSS & Why & What is UX/UI


  • 1. Session onHTML, CSS & UI/UXDesignBy Karthikeyan 10-31-2014

2. 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 followAgenda for next 2 hrs2 3. Lets get started with the quick revision ofHTML & CSS 3 4. 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 growingHTML ? !4 5. 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 = WebsiteUse of HTML5 6. A paragraph is your content. Putting your content into an html tag to make it looklike a paragraph is a structure.

I am a Paragraph

Make the font of your paragraph blue and 18px is presentation whichyou will be using CSSContent - Example6 7. 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

this is my sample text

Structures of an HTML7 8. Container Element An element that can contain other elements or content A paragraph

contains text Standalone Element An element that cnnot contain anything else

Structures of an HTML 8 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:-

Cest ;a vie

Structures of an HTML 9 10. CSS = Cascading Style Sheets CSS used to style the elements on your page. CSS is works in conjunction with HTML, but is not HTMLitself.Review CSS10 11. Inline Styles Internal Style External Style ( Recommended way to use )3 Types of StyleSheets11 12. Selector {Property:value;} A block of css is Rule Block The rule starts with a selector. And It has sets of properties & ValuesCSS Rule12 13. Property and value of style you plan to use on HTMLelement. Value ends with a semicolon ; So these declaration can be grouped and surrounded bycurly brackets.Selector{Property:value;Property:value;}CSS Syntax13 14. P{Property:value;}Selects all paragraph elements.Img{Property: value;}Selects all image elementsSelector Element14 15. #footer {Property:value;}Selects all elements with an id of footer

Copyrights 2014

The associated HTMLSelector ID15 16. .warning {color: red;}Selects all elements with a class of warning

run away

The associated HTMLSelector Class16 17. p em{color: green;}Selects all em elements that are withing a paragraph

This is important.

The Associated HTMLSelector Position .End17 18. Standard Practices 18 19. Reset CSS Files Standard widths and sizes WrappersStandard Practices19 20. Even though HTML is the structure and CSS is the design,some HTML elements have their own default style values. Few Examples: Bulleted list have standard bullets style. Paragraph

have default padding Links are blue and underlined by defaultReset Css20 21. Most Elements:Margin:0;Padding:0;Border:0;Font-size:100%;Font:inherit;Vertical Align:baseline; ListsList-style:none;Reset Css21 22. Some sizes that are good to know about A standard font size is usually 12px Screens vary greatly in width! Standardize your design acouple ways Set the body width to a specific width Set the content width to 100%, with max-width of around1200px/1400px and elements, allowing user to pick colors, numbers, e-mailaddresses & dates with easy to use elements. Made it more user friendly (even you dont need to add a JavaScript to validations forms) if you use aproper input types.Media Elements: At long last, they have native support for audio & video withtags similar to the tags.Canvas tag: It allows the developer to build graphics interactively. Thiscapability will allow for very intriguing capabilities like custom gaming andinterface elements.HTML 4 to HTML530 31. Embedded Font support: with this you can include a font with a webpage,and it will render even if the user doesnt have the font installed on heroperating system. New selectors : Selectors are used to describe a chunk of code to bemodified. CSS3 now supports new selectors that let choose every otherelement, as well as specific sub elements ( different types of input tags) Columns: Html has never had decent support columns and all kinds of hackshave been used to overcome this shortcoming. Finally , CSS includes theability 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 theappearance of a page.CSS and HTML531 32. Local Storage Mechanism: HTML 5 now allows the developer to store dataon the client. There is even a built in database manager that accepts SQLCommands. Geo-location: This interesting features uses a variety of mechanism todetermine where the user is located. And lot more.. .JAVASCRIPT & HTML532 33. Minimum information required to ensure that a broserrenders using a standards modeOld doctypes-w3c 4.01 bla bla blaa>HTML5 Doctype33 34. The use of HTML markup to re-inforce the semantics ormeaning of the information in webpages rather than merelyto define its presentation (look)SemanticsGive meaning to structureSemantic HTML34 35.

SemanticNot Semantic35 36. Group together thematically related to contentSimilar to prior use of the div, but div has no semanticmeaningNew Structural Elements36 37. Container for group of a introductory or navigational aidsDocument can have multiple header elements E.g One for the page, one for each sectionNew Structural Elements 37 38. Contains information about its containing element E.g who wrote it.. copyright links to related contentDocument can have multiple footer elements Eg one for the page one for the each section.New Structural Elements 38 39. Tangentially related content E.g sidebar, pull quotesContains major navigational informationUsually a list of linksOften lives in the header E.g site navigationNew Structural Elements 39 40. Self- contained related content E.g blog posts, news stories, comments , reviews, forum postsNew Structural Elements40 41. Not Semantic 41 42. Semantic 42 43. Accessibility Searchability InternationalizationIt also helps treat the plague of div-itisWhat is the use Semantics Markups andadvantages43 44. HTML5SHIV HTML5shiv IE enabling script