HTML 5

LOS NUEVOS ELEMENTOS ESTRUCTURALES
  • <header>
    El elemento de encabezado contiene información introductoria a una sección o página. Esto puede implicar cualquier cosa, desde nuestros encabezados de documentos normales (información de marca) hasta toda una tabla de contenido .
  • <nav>
    El elemento nav está reservado para una sección de un documento que contiene enlaces a otras páginas o enlaces a secciones de la misma página. No todos los grupos de enlaces deben estar contenidos dentro del elemento <nav>, solo la navegación primaria .
  • <section>
    El elemento de sección representa un documento genérico o una sección de aplicación . Actúa de la misma manera que una <div>separación de una parte del documento.
  • <article>
    El elemento de artículo representa una parte de una página que puede estar sola, como por ejemplo: una entrada en un blog, una entrada en un foro, comentarios enviados por el usuario o cualquier elemento independiente de contenido .
  • <aside>
    Aparte, representa el contenido relacionado con el área principal del documento. Esto se expresa generalmente en barras laterales que contienen elementos como mensajes relacionados, nubes de etiquetas, etc. También pueden usarse para citas de trazo .
  • <footer>
    El elemento de pie de página es para marcar el pie de página, no sólo la página actual, sino cada sección contenida en la página. Por lo tanto, es muy probable que utilice el elemento <pie de página> varias veces dentro de una página.

Documento de estructura HTML5

  • Sección de raíz : una raíz de seccionamiento es un contenedor que proporciona un ámbito para las secciones de contenido discreto que se definirá en él. Cada raíz seccionadora obtiene su propioesquema individual. La raíz seccionadora de nivel superior de cualquier página está formada por sus<body>etiquetas, por lo que siempre hay un esquema generado para cualquier página web, empezando por las<body>etiquetas y trabajando a través de las secciones en las que se divide.
    • Seccionar las etiquetas de raíz: <body><blockquote><figure><td><details><dialog>,<fieldset>
  • Sección de contenido : Cada raíz de sección se divide en una serie de secciones de contenido. Estas secciones se crean colocando etiquetas de elemento de seccionamiento de secciones sobre partes discretas de contenido. Sección de elementos de contenido son nestable y semántica. El tipo que debe utilizarse depende de la naturaleza del contenido que contendrá. (Discutiremos cómo usar cada elemento de sección de contenido más adelante.)
    • Seccionar etiquetas de contenido: <section><article><nav>,<aside>
  • Contenido de título : Etiquetas de sólo texto para secciones de contenido. En ausencia de etiquetas de contenido seccionadas, la presencia de una etiqueta de encabezado seguirá siendo interpretada como el comienzo de una nueva sección de contenido.
    • Etiquetas del título: <h1><h2><h3><h4><h5>,<h6>

 

  SEMANTICS

HTML 5 New Structure

HTML 5 recognizes that Web pages have a structure, just like books have a structure or other XML documents. In general, Web pages have navigation, body content, and sidebar content plus headers, footers, and other features. And HTML 5 has created tags to support those elements of the page.

  •   <section> – to define sections of pages
  •   <header> – defines the header of a page
  •   <footer> – defines the footer of a page
  •   <nav> – defines the navigation on a page
  •   <article> – defines the article or primary content on a page
  •   <aside> – defines extra content like a sidebar on a page
  •   <figure> – defines images that annotate an article

HTML 5 New Inline Elements

These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:

  • <mark> – to indicate content that is marked in some fashion
  •  <time> – to indicate content that is a time or date
  •  <meter> – to indicate content that is a fraction of a known range – such as disk usage
  • <progress> – to indicate the progress of a task towards completion

 

HTML 5 New Inline Elements

These inline elements define some basic concepts and keep them semantically marked up, mostly to do with time:

  •  <mark> – to indicate content that is marked in some fashion
  •   <time> – to indicate content that is a time or date
  •   <meter> – to indicate content that is a fraction of a known range – such as disk usage
  •   <progress> – to indicate the progress of a task towards completion
  • HTML 5 New Dynamic Pages Support

HTML 5 was developed to help Web application developers, so there are a lot of new features to make it easy to create dynamic HTML pages:

  •   Context menus – HTML 5 will support the creation and use of context menus within Web pages and applications
  •   href is not required on a tag – this allows you to use the a tag with scripts and in Web applications without needing a place to send that anchor
  •   async attribute – This is added to the script tag to tell the browser that the script should be loaded asynchronously so that it doesn’t slow down the load and display of the rest of the page.
  •   <details> – provides details about an element. This would be like tooltips in non-Web applications.
  •   <datagrid> – creates a table that is built from a database or other dynamic source
  •   <menu> – an old tag brought back and given new life allowing you to create a menu system on your Web pages
  •   <command> – defines actions that should happen when a dynamic element is activated

HTML 5 New Form Types

HTML 5 supports all the standard form input types, but it adds a few more:

  datetime,   datetime-local,  date,  month.   week,   time,  number,   range,   email,   url

HTML 5 new Graphics and Multimedia Elements

There are a few exciting new elements in HTML 5:

  • <canvas> – an element to give you a drawing space in JavaScript on your Web pages. It can let you add images or graphs to tool tips or just create dyanmic graphs on your Web pages, built on the fly.
  • <video> – add video to your Web pages with this simple tag.
  • <audio> – add sound to your Web pages with this simple tag.

Improvement in <iframe>

sing the sandbox, seamless, and srcdoc attributes, authors can now be precise about the level of security and the wished rendering of an <iframe> element.

ELIMINADOS

acronym,   applet,   basefont,   big,   center,   dir,   font,  frame,   frameset,   isindex

noframes,   noscript,   s,   strike,   tt,   u.

New APIs

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs) that can be used with JavaScript. Existing document object model (DOM) interfaces are extended for features documented. There are also new APIs, such as:

  • The canvas element for immediate mode 2D drawing.
  • Timed media playback
  • Offline Web Applications
  • Document editing
  • Drag-and-drop
  • Cross-document messaging
  • Browser history management
  • MIME type and protocol handler registration
  • Microdata
  • Web Storage, a key-value pair storage framework that provides behaviour similar to cookies but with larger storage capacity and improved API.

Not all of the above technologies are included in the W3C HTML5 specification, though they are in the WHATWG HTML specification. Some related technologies, which are not part of either the W3C HTML5 or the WHATWG HTML specification, are as follows. The W3C publishes specifications for these separately:

  • Geolocation
  • Web SQL Database, a local SQL Database (no longer maintained).
  • The Indexed Database API, an indexed hierarchical key-value store (formerly WebSimpleDB).
  • HTML5 File API, handles file uploads and file manipulation.
  • Directories and System, an API intended to satisfy client-side-storage use cases not well served by databases.
  • File Writer, an API for writing to files from web applications.
  • Web Audio API, a high-level JavaScript API for processing and synthesizing audio in web applications.
  • ClassList API

HTML5 cannot provide animation within web pages. Additional JavaScript or CSS3 functionality is necessary for animating HTML elements. Animation is also possible using JavaScript and HTML 4 and within SVG elements through SMIL, although browser support of the latter remains uneven as of 2011.

Connectivity

Web Sockets

Allows creating a permanent connection between the page and the server and to exchange non-HTML data through that means.

Server-sent events

Allows a server to push events to a client, rather than the classical paradigm where the server could send data only in response to a client’s request.

WebRTC

This technology, where RTC stands for Real-Time Communication, allows connecting to other people and controlling videoconferencing directly in the browser, without the need for a plugin or an external application.

Offline & Storage

Offline resources: The application cache

HTML5 provides an application caching mechanism that lets web-based applications run offline. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.

Online and offline events

In online and offline events, which let applications and extensions detect whether or not there’s an active Internet connection, as well as to detect when the connection goes up and down.

WHATWG client-side session and persistent storage (aka DOM storage)

Client-side session and persistent storage allows web applications to store structured data on the client side.

IndexedDB

IndexedDB is a web standard for the storage of significant amounts of structured data in the browser and for high performance searches on this data using indexes.

Using files from web applications

Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the <input> of type file HTML element’s new multiple attribute. There also is FileReader.

 

BY http://world-html5.blogspot.mx/2015/12/part-1-html5-getting-started.html

 

Html Html5
Doctype declaration in Html is too longer
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;
DOCTYPE declaration in Html5 is very simple “<!DOCTYPE html>
character encoding in Html is also longer
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
character encoding (charset) declaration is also very simple <meta charset=”UTF-8″>
Audio and Video are not part of HTML4 Audio and Videos are integral part of HTML5 e.g. <audio> and <video> tags.
Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash etc Vector graphics is integral part of HTML5 e.g. SVG and canvas
It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices. JS GeoLocation API in HTML5 helps identify location of user browsing any website (provided user allows it)
Html5 use cookies. It provides local storage in place of cookies.
Not possible to draw shapes like circle, rectangle, triangle. Using Html5 you can draw shapes like circle, rectangle, triangle.
Does not allow JavaScript to run in browser. JS runs in same thread as browser interface. Allows JavaScript to run in background. This is possible due to JS Web worker API in HTML5
Works with all old browsers Supported by all new browser.

http://www.sitesbay.com/html5/html5-difference-between-html-and-html5

ALGUNOS CMBIOS

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Posted in PROGRAMACIÓN | Leave a comment

EDITORES

Sublime Text

Note pad ++

 

Posted in NOTAS | Leave a comment

Accesos directos

cmd

ncpa.cpl  muestra conexiones de red

 

windows + r

devmgmt.msc muestra administrador de dispositivos

 

C:\Users\Netsky\AppData\Local\Temp

Posted in NOTAS | Leave a comment

CSS – selectores

 

by   http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html

* {}  /* selector universal*/

p {   ... } /* selector de tipo o etiqueta*/

h1, h2, h3 {  /* selector multiple*/
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:

h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
 
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
/*selector descendente selector1 ... selectorN separados por espacios */
p span { color: red; }

Si el código HTML de la página es el siguiente:

<p>
  ...
  <span>texto1</span>
  ...
  <a href="">...<span>texto2</span></a>
  ...
</p>
p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>

/* El estilo se aplica solo a los elementos "em" que se
   encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
/* combinación de selectores */
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* combinación de selector descendente y universal */

solamente el segundo enlace se muestra de color rojo:

p * a { color: red; }
 
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>

La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.

/* selector de clase: para aplicar estilo solo a un parrafo, cualquier elemento de la página cuyo atributo class sea igual a destacado, por lo que solamente el primer párrafo cumple esa condición. */
.destacado { color: red; }
<body> 
<p class="destacado">Lorem ipsum dolor sit amet...</p> 
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p> 
</body>
/* el selector class puede ser utilizado por varios elementos que 
necesiten utilizar el valor  en el atributo class*/
<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
/* En ocasiones, es necesario restringir el alcance del 
selector de clase. */
p.destacado { color: red }
<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
/* recordatorios */
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
 
/* Todos los elementos con atributo class="aviso" que estén dentro
   de cualquier elemento de tipo "p" */
p .aviso { ... }
 
/* Todos los elementos "p" de la página y todos los elementos con
   atributo class="aviso" de la página */
p, .aviso { ... }
/*  es posible aplicar los estilos de varias clases CSS sobre un
 mismo elemento.*/
<p class="especial destacado error">Párrafo de texto...</p>
.error { color: red; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
<p class="especial destacado error">Párrafo de texto...</p>

Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un selector más avanzado:

.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial  { font-weight: bold; }
 
<p class="especial destacado error">Párrafo de texto...</p>

En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es que se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta como “aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y destacado.

Selectores de ID

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:

#destacado { color: red; }
 
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>

En el ejemplo anterior, el selector #destacado solamente selecciona el segundo párrafo (cuyo atributo id es igual a destacado).

No debe confundirse el selector de ID con los selectores anteriores:

/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... }
 
/* Todos los elementos con atributo id="aviso" que estén dentro
    de cualquier elemento de tipo "p" */
p #aviso { ... }
 
/* Todos los elementos "p" de la página y todos los elementos con
    atributo id="aviso" de la página */
p, #aviso { ... }

Combinación de selectores básicos

div.aviso span.especial { ... }

Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un atributo class="especial" que estén dentro de cualquier elemento de tipo <div> que tenga un atributo class="aviso".

ul#menuPrincipal li.destacado a#inicio { ... }

El anterior selector hace referencia al enlace con un atributo id igual a inicio que se encuentra dentro de un elemento de tipo <li> con un atributo class igual a destacado, que forma parte de una lista <ul>con un atributo id igual a menuPrincipal.


 
Posted in NOTAS, PROGRAMACIÓN | Leave a comment

HTML PROJECT

FIREFOX EXTENSIONES

  • COLOR ZILLA by Alex Sirota
  • WEBDEVELOPER

ctrl + u  para ver código fuente

 

HTML

https://www.w3schools.com/tags/tag_var.asp

https://www.w3schools.com/html/html_form_elements.asp

https://www.w3schools.com/tags/tag_meta.asp

https://www.w3schools.com/html/html_elements.asp

https://www.w3schools.com/html/html_examples.asp

css

https://www.w3schools.com/css/css3_gradients.asp

 

clores

https://www.w3schools.com/colors/colors_cmyk.asp

 

Posted in SOFTWARE | Leave a comment

PROVERBIO

  • The happiness travels of incognito; when it has only happened we know of her.
  • Nadie es tan feliz ni tan infeliz como cree. Francois De La Rochefouncauld.
Posted in NOTAS | Leave a comment

SAP

https://www.sap.com/latinamerica/community/topic/training-certification.html

Posted in NOTAS | Leave a comment