Html5&css3

661 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
661
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5&css3

  1. 1. HTML5
  2. 2. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5HEAD New DTD Short character encoding<!doctype html><meta charset=utf-8> HTML5 is not an XML language, so you don’t need to quote or self close elements. All of these are equally valid HTML5: <META CHARSET=UTF-8> <meta charset=utf-8 /> <META CHARSET=UTF-8 /> <meta charset=”utf-8”> <META CHARSET=”UTF-8”> <meta charset=”utf-8” /> <META CHARSET=”UTF-8” /> <MeTa CHARset=utF-8> <meta charset=utf-8> 2
  3. 3. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5 Common attributesAttribute Descriptionaccesskey Specifies a shortcut key to activate/focus an element Specifies one or more classnames for an element (refers to a class in aclass style sheet)contenteditableNew Specifies whether the content of an element is editable or not Specifies a context menu for an element. The context menu appears whencontextmenu New a user right-clicks on the elementdir Specifies the text direction for the content in an elementdraggableNew Specifies whether an element is draggable or not Specifies whether the dragged data is copied, moved, or linked, whendropzoneNew droppedhiddenNew Specifies that an element is not yet, or is no longer, relevantid Specifies a unique id for an elementlang Specifies the language of the elements content Specifies whether the element is to have its spelling and grammar checkedspellcheckNew or notstyle Specifies an inline CSS style for an elementtabindex Specifies the tabbing order of an elementTitle Specifies extra information about an element http://www.w3schools.com/html5/html5_ref_globalattrib 3
  4. 4. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5New structural elements http://code.google.com/intl/es-ES/webstats/2005-12/classes.html 4
  5. 5. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5New structural elements<header><h1>My interesting life</h1></header><nav><h2>Menu</h2><ul><li><a href=”last-week.html”>Last week</a></li><li><a href=”archive.html”>Archives</a></li></ul></nav><article><h2>Yesterday</h2><p>Today I drank coffee for breakfast. 14 hours later, I went to bed.</p></article><article><h2>Tuesday</h2><p>Ran out of coffee, so had orange juice for breakfast. It was from concentrate.</p></article><footer><p><small>This is copyright by Bruce Sharp. Contact me to negotiate the movierights.</small></p></footer> 5
  6. 6. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5New structural elements header The header element represents a group of introductory ornavigational aids ...Note: A header element is intended to usually contain the section’sheading (an h1–h6 element or an hgroup element), but this is notrequired. The header element can also be used to wrap a section’stable of contents, a search form, or any relevant logos. <header> <hgroup> <h1>Thai cookery school></h1> <h2>Learn authentic Thai cookery in your own home</h2> </hgroup> <nav> <ul> <li>Home</li> <li><a href=”courses.html”>Cookery courses</a></li> <li><a href=”contact.html”>Contact</a></li> </ul> </nav> </header> 6
  7. 7. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5New structural elements nav The <nav> element is designed to mark up navigation. Navigation isdefined as being links around a page or within a site.The contents of a <nav> element will probably be a list of links, markedup as an unordered list or, in the case of breadcrumb trails, an orderedlist. Note that the <nav> element is a wrapper; it doesn’t replace the<ol> or <ul> element, but wraps around it. asidecan be used for typographical effects like pull quotes or sidebars,for advertising, for groups of nav elements, and for othercontent that is considered separate from the main content ofthe page. 7
  8. 8. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5New structural elements footer A footer for its nearest ancestor sectioning content or sectioning rootelement. There can be more than one footer on a page, when thenearest ancestor sectioning content or sectioning root element is thebody element, then it applies to the whole page. article The article element represents a component of a page that consists ofa self-contained composition in a document, page, application, or siteand that is intended to be independently distributable or reusable, e.g.,in syndication <article> <h3>My article</h3> <p>Blah blah</p> </article> 8
  9. 9. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5article<article><header><h2>Memoirs of a Parisian lion-tamer</h2><time datetime=2010-01-24>January 24th,2010</time></header><p>Article text</p><footer>Posted in <a href=”/?cat=3” >Bookscategory</a>.<a href=”/?p=34#respond”>No Comments</a></footer></article> 9
  10. 10. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5time<time> is a new element for unambiguously encoding dates andtimes for machines, while still displaying them in a human-readableway. pubdate is a Boolean attribute to indicate that this particular <time> is the publication date of an <article> or the whole <body> content. 10
  11. 11. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5section The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters or the numbered sections of a thesis. A Web sites home page could be split into sections for an introduction, news items, and contact information. 11
  12. 12. Forms
  13. 13. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Forms New input values <input type=“search”> <input type=“number”> <input type=“range”> <input type=“color”> <input type=“tel”> <input type=“url”> <input type=“email”> <input type=“date”> <input type=“month”> <input type=“week”> <input type=“time”> <input type=“datetime”> <input type=“datetime-local”> 13
  14. 14. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Forms – New attributes autofocus The autofocus Boolean provides a declarative way to focus a formcontrol during page load. Previously done by JavaScript using focus()method. required The required attribute can be used on <textarea> and most inputfields (except when the type attribute is hidden, image, or some buttontypes such as submit). The browser will not allow the user to submit theform if required fields are empty. multiple (webkit) multiple attribute used in <input type=file>, the user can uploadmultiple files. It can also be used with any other input type: for example,<input type=email multiple> allows the user to enter multiple emailaddresses. 14
  15. 15. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Forms – New attributes placeholder placeholder atribute allows placing text in an input field as a hint forthe user, removing the text when the user focuses on the field, andrestoring the text when focus leaves the field (if empty). pattern pattern attribute allows to specify a custom regular expression thatthe input must match. So, if the user must always enter a single digitplus three uppercase alphabetic characters, the regular expressionwould be one number [0–9] and three letters[A–Z]{3}<input pattern=“ [0-9][A-Z]{3}” name=“part” title=“Apart number is a digit followed by three uppercaseletters.” placeholder=“9AAA”> 15
  16. 16. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Forms – New attributes min, max and step with <input type=number>, these attributes constrain the range ofvalues that can be entered in an input; user can’t submit the form with anumber smaller than min or larger than max. It can also be used withdate: <input type=date min=2010-01-01 max=2010-12-31>step controls the level of granularity of input. So if you want the user toenter a percentage between 0 and 100, but only to the nearest 5, youcan specify <input type=number min=0 max=100 step=5> 16
  17. 17. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Forms – New attributes listThe <datalist> is reminiscent of a select box, but allows users to entertheir own text if they don’t want to choose one of the predefinedoptions. The list is contained in a new <datalist> element, the id ofwhich is referenced in the value of the list attribute:<input id=form-person-title type=text list=mylist><datalist id=mylist> <option label=Mr value=Mr> <option label=Ms value=Ms> <option label=Prof value=”Mad Professor”></datalist><datalist> has no rendering of its own, but instead shows up as valuesin a select-like field. 17
  18. 18. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Example<form><label for=form-name>Name</label><input type=text name=form-name id=form-name required><label for=form-email>Email</label><input name=form-email id=form-email type=email required><label for=form-url>URL</label><input name=form-url id=form-url type=url><label for=form-comment>Comment</label><textarea name=form-comment id=form-comment required></textarea><input type=submit></form> 18
  19. 19. CSS3
  20. 20. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5CSS3– What’s new CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers support CSS2. CSS3 Modules CSS3 is split up into "modules". The old specification has been split into smaller pieces, and new ones are also added. http://www.css3.info/modules/ 20
  21. 21. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Media queries CSS2 added support for the media="screen" way of defining which stylesheet to use for which representation of the data. CSS3 adds a new feature to this functionality, by adding media queries. Basically, this means you can change stylesheets based on for instance the width and height of the viewport. by using Media Queries, presentations can be tailored to a specific range of output devices without changing the content itself. @media allows us to specify that a certain set of CSS rules should only apply to certain types of device. So the definitions within the rule block @media screen {...} Only would be interpreted by devices connected to computer monitors and the rule @media projection {... } Only apply to projectors. 21
  22. 22. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Media queries CSS3 adds significant new capabilities that allow us to define sets of styles depending on common properties of the devices that access to our sites. Properties such as the height and width or aspect ratio or the number of colors available. @media rules can be used to adapt our sites, not only for common devices, but for all kinds of devices that our visitors use to access to our website 22
  23. 23. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Media queriesMain properties: - Aspect ratio: Look at the relative dimensions of the device expressed as an aspect ratio: 16:9 for example. - Width and height: Look at the size of the viewing area. They can also be expressed in minimum and maximum values​​. - Orientation: See if the layout is wide (the width is greater than the height) or vertical (height is greater than the width). This allows us to adjust the designs for devices with rotational properties of the screen as the iPhone and other smartphones and tablets. - Resolution: Look at the density of the pixels in the output device. This is especially useful when you want to take advantage of the benefits of the devices with a higher resolution to 72 dpi. - Color, monochrome and color-index: find the number of bits per color or color. This allows us to create specific designs for devices monochromatic.http://caniuse.com/css-mediaquerieshttp://www.w3.org/TR/css3-mediaqueries/#media0http://www.w3.org/TR/css3-mediaqueries/#media1 23
  24. 24. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Example @media (max-width:500px) { #muestra{ background-color:#06F; } } @media (min-width:510px) { #muestra{ background-color:#F00; } } 24
  25. 25. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Attribute selectors An attribute selector will match elements on the basis of either the presence of an attribute, or the exact or partial match of an attribute value. Attribute selectors are delimited by square brackets; the simplest form of an attribute selector consists of an attribute name surrounded by square brackets: - [href] { declarations } - a[href] { declarations } • This selector matches any a element that has an href attribute - input[type="submit"] { declarations } • This selector matches any input element that has a type attribute with a value equal to "submit". Default attributes: Attribute selectors can only match attributes and values that exist in the document tree, and there’s no guarantee that a default value specified in a DTD (or similar) can be matched. Do not rely on default attributes. 25
  26. 26. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Attribute selectors We can use the |= operator to cause an attribute selector to match elements which have an attribute containing a list of words that begin with a specific value: - [class|="en"] { declarations } We can use the ~= operator to make an attribute selector match elements that have an attribute that contains a list of space-separated words, one of which is the specified value: - [class~="warning"] { declarations } 26
  27. 27. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Vendor prefixes Prefixes were introduced because the CSS3 specification is still in development. Prefixes provide a way of adding in what are, in essence, experimental and unfinished properties in a way that a) won’t harm or affect the rest of your code, b) can be overridden once the spec is finished and implemented, c) avoid any confusion over what is unfinished and what isn’t. Prefix Organisation -ms- Microsoft mso- Microsoft Office -moz- Mozilla Foundation (Gecko-based browsers) -o- Opera Software -atsc- Advanced Television Standards Committee -wap- The WAP Forum -webkit- Safari (and other WebKit-based browsers) -khtml- Konqueror browser http://reference.sitepoint.com/css/vendorspecific 27
  28. 28. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Borders Rounded corners div { border:2px solid; border-radius:25px; -moz-border-radius:25px; /* Firefox 3.6 and earlier */ } Box-shadow div { box-shadow: 10px 10px 5px #888888; /* H V Blur Color */ } http://www.css3.info/preview/box-shadow/ Border-image: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border- image 28
  29. 29. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5BackgroundBackground-size The background-size property specifies the size of the background image. You can specify the size in pixels or in percentages. If you specify the size as a percentage, the size is relative to the width and height of the parent element. - background-size:80px 60px;Background-origin The background-origin property specifies the positioning area of the background images. The background image can be placed within the content-box, padding-box, or border-box area. - background-origin:content-box; 29
  30. 30. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5ColorRGB/RGBA Red (R), Green (G), Blue (B) Alpha (A) - An element with opacity/alpha value of 1.0 is fully visible (opaque) while an element with opacity value 0.0 is completely invisible. - background:rgba(153, 134, 117, 0.2);HSL/HSLA Hue (H), Saturation (S), Lightness (L) / Alpha (A) - Hue is a degree on the color wheel: 0 & 360 – red, around 120 – green, 240 – blue. - Saturation is a percentage: 0% – grayscale, 100% – full color. - Lightness is a percentage: 0% – dark, 50% – the average, 100% – light. - background:rgba(153, 134, 117, 0.2); 30
  31. 31. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5Text Effects The ‘text-shadow’ property: h1 { text-shadow: 2px 5px 2px #FF0000; /* H V Blur Color */ } Text overflow control by word wrap: p {word-wrap:break-word;}http://www.w3.org/TR/css3-text/#overflow-wrap0 p {overflow-wrap:break-word;} normal | [ break-word || hyphenate ] 31
  32. 32. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5 Web Fonts When you have found/bought the font you wish to use, simply include the font file in the web site, and it will be downloaded automatically to the user when needed. You will have to describe your selected font with the new CSS3 @font-face rule. @font-face { font-family: myFirstFont; src: url(Sansation_Light.ttf), url(Sansation_Light.eot) format("opentype"); /* IE */ } div { font-family:myFirstFont; } 32
  33. 33. Semana 10 Asignatura Aplicaciones Web de Última Generación Tema HTML5 Columnsdiv{-moz-column-count:3; /* Firefox */-webkit-column-count:3; /* Safari and Chrome */column-count:3;}div{-moz-column-count: 3;-moz-column-gap: 1em;-moz-column-rule: 1px solid black;-webkit-column-count: 3;-webkit-column-gap: 1em;-webkit-column-rule: 1px solid black;column-count:3;column-gap: 1em;column-rule: 1px solid black;} 33

×