HTML 5 amp CSS 3

Expositor Tec Henrry Osmar Torres Andonaire

E-mail Laboral htorresadylconsultingcom

E-mail Personal osmar1hotmailcom

Sitio Web wwwfacehotvacaucom

Facebook HeOsToAnd

Twitter Henrry_Osmar

Pimentel - Peruacute

Octubre del 2014

iquestQueacute es una Paacutegina Web

iquestQueacute es un Web Master

iquestQueacute necesito para crear una

Paacutegina Web

bull Un editor de Coacutedigo HTML

iquestQueacute necesito para crear una

Paacutegina Web

bull Un editor de imaacutegenes

iquestQueacute necesito para crear una

Paacutegina Web

bull Navegadores de Internet

iquestQueacute necesito para crear una

Paacutegina Web

bull Un dominio y hosting

iquestQueacute necesito para crear una

Paacutegina Web

bull Servidor Web Local

iquestQueacute necesito para crear una

Paacutegina Web

bull Gestor de Archivos FTP

Los CMSrsquos (Sistemas Gestores de

Contenido)

Otras Tecnologiacuteas Web

Otras Tecnologiacuteas Web

La Web y las Tecnologiacuteas Moacuteviles

iquestQueacute es HTML 5

bull El HTML5 (HyperText Markup Language) es la quinta revisioacuten

del lenguaje de marcas de hipertexto de la World Wide Web

Esta nueva versioacuten pretende remplazar al actual (X)HTML

VERSIONES HTML

bull HTML 20

bull HTML 32

bull HTML 40

HTML 5 y la compatibilidad con

los Navegadores

Intenciones del HTML 5

bull Actualmente es abusivo el uso de elementos DIV para estructurar una web en bloques

bull Asi mismo el empleo de tablas en exceso generaba inconvenientes ya sea para adaptar a un dispositivo moacutevil

bull Nos brinda varios elementos que perfeccionan esta estructuracioacuten estableciendo queacute es cada seccioacuten eliminando asiacute ltdivgt innecesarios

bull Este cambio en la semaacutentica hace que la estructura de la web sea maacutes coherente y faacutecil de entender por otras personas

bull Los navegadores podraacuten darle maacutes importancia a las secciones de la web facilitaacutendole la tarea del posicionamiento SEO asiacute como cualquier otra aplicacioacuten que interprete sitios web

Primeros pasos en HTML 5

bull Indicarle al navegador web que el documento que estaacute

abriendo es un documento html Para ello se emplea la liacutenea

de coacutedigo

En esta versioacuten el Doctype es mucho maacutes simplificado y

compatible con HTML y XHTML

Primeros pasos en HTML 5

bull Colocar nuestra etiqueta de cabecera ltheadgtltheadgt de HTML alli podremos adjuntar nuestras hojas de estilo (CSS3) nuestro coacutedigos de JavaScript (JS) libreriacuteas externas como Jquery entre otros

bull Asi mismo tendremos que indicar el lenguaje alfabeacutetico en la que estaraacute elaborada nuestra pagina web

bull Finalmente crearemos el cuerpo de nuestra paacutegina web Lo codificamos como ltbodygtltbodygt

Primeros pasos en HTML 5

ETIQUETAS CONOCIDAS

bull lta href=laquomi_rutaraquogtltagt

bull ltbgtltbgt

bull ltbrgt

bull ltbuttongt

bull ltcentergtltcentergt

bull ltcitegtltcitegt

bull ltdirgtltdirgt

bull ltdivgtltdivgt

bull ltfont size=laquo12raquo family=laquoArialraquogtltfontgt

bull ltframegtltframegt

bull ltiframe src=laquoruta_paginaraquo gtltiframegt

Primeros pasos en HTML 5

ETIQUETAS CONOCIDAS

bull lth1gtlth1gt

bull lth2gtlth2gt

bull lth3gtlth3gt

bull lth4gtlth4gt

bull lth5gtlth5gt

bull lth6gtlth6gt

bull ltheadgtltheadgt

bull lthrgt

bull ltinput type=laquotipo_de_cajaraquo gt

bull ltlabelgt

bull ltligtltligt

Primeros pasos en HTML 5

ETIQUETAS CONOCIDAS

bull ltulgtltulgt

bull ltmetagtltmetagt

bull ltobject src=laquoruta_de_objetoraquo gtltobjectgt

bull ltolgtltolgt

bull ltpgtAca va mi parrafoltpgt

bull ltscriptgtltscriptgt

bull ltsmallgtltsmallgt

bull ltspangtltspangt

bull ltstronggtltstronggt

bull ltstylegtAca van mis clases y mis estilosltstylegt

bull ltsubgtltsubgt

Primeros pasos en HTML 5

ETIQUETAS CONOCIDAS

bull ltsupgtltsupgt

bull lttablegtlttablegt

bull lttdgtlttdgt

bull lttrgtlttrgt

bull lttextareagtlttextareagt

bull ltthgt

bull lttitlegtTitulo de mi Pagina Weblttitlegt

bull ltugtltugt

bull ltigtltigt

bull ltform method=laquometodo_envio_datosraquo action=laquoarchivo_redireccionraquo gtltformgt

bull ltlink src=laquoruta_objeto_webraquo rel=laquotipo_objetoraquo gt

Las Nuevas Etiquetas HTML 5

bull ltarticlegt Define un articulo

bull ltasidegt Define el contenido lateral del contenido de una paacutegina

bull ltaudiogt Define contenido con sonido

bull ltcanvasgt Usada para dibujar graacuteficos por script en el aire (con JavaScript)

bull ltdetailsgt Especifica en un input una lista pre definida de opciones

bull ltdatalistgt Especifica en un input una lista pre definida de opciones

bull ltembedgt Define un contenedor de una aplicacioacuten externa (no-HTML)

bull ltfigcaptiongt Define un tiacutetulo para una figura ltfiguregt elemento

bull ltfiguregt Especifica contenido auto-contenido

bull ltfootergt Define un pie paacutegina en un documento o seccioacuten

Las Nuevas Etiquetas HTML 5

bull ltheadergt Define un encabezado para un documento o seccioacuten

bull lthgroupgt Grupo de encabezado (lth1gt a lth6gt) elemento

bull ltkeygengt Define un campo generador de par de claves (para formularios)

bull ltmarkgt Define texto resaltado o marcado

bull ltnavgt Define un link de navegacioacuten

bull ltsectiongt Define una seccioacuten en un documento

bull lttimegt Define una fechahora

bull ltvideogt Define un video o peliacutecula

bull ltwbrgt Define un posible salto de liacutenea

bull ltsvggtltsvggt Scalable Vector Graphics etiqueta para insertar dibujos y animaciones vectoriales

Etiquetas Baacutesicas en HTML 5

iexclMejoras en los formularios

bull ltinput type=rdquosearchrdquogt Para cajas de buacutesqueda

bull ltinput type=rdquonumberrdquogt Para adicionar o restar nuacutemeros mediante botones

bull ltinput type=rdquorangerdquogt Para seleccionar un valor entre dos valores predeterminados

bull ltinput type=rdquocolorrdquogt Seleccionar un color

bull ltinput type=rdquotelrdquogt Nuacutemeros telefoacutenicos

bull ltinput type=rdquourlrdquogt Direcciones web

bull ltinput type=rdquoemailrdquogt Direcciones de email Lo nuevo es que se auto valida

bull ltinput type=rdquodaterdquogt Para seleccionar un diacutea en un calendario

bull ltinput type=rdquomonthrdquogt Para meses

bull ltinput type=rdquoweekrdquogt Para semanas

bull ltinput type=rdquotimerdquogt Para fechas

bull ltinput type=rdquodatetimerdquogt Para una fecha exacta absoluta y tiempo

bull ltinput type=rdquodatetime-localrdquogt Para fechas locales y frecuencia

iexclMejoras en los formularios

bull Placeholder

bull Autofocus

bull Autocomplete

bull Search

ltinput type=rdquosearchrdquo x-webkit-speechgt

iexclMejoras en los formularios

bull Tel

bull Url

iexclMejoras en los formularios

bull Email

bull Datetime

iexclMejoras en los formularios

bull Date

bull Week

bull Time

bull Number =gt ltinput type=ldquonumberrdquo name=ldquonumerordquo min=rdquo0rdquo

max=rdquo12rdquogt

bull Range =gt ltinput type=ldquorangerdquo name=ldquorangordquo min=rdquo0rdquo

max=rdquo69rdquogt

iexclMejoras en los formularios

bull Color

Coacutedigo Limpio con HTML 5

ltdiv id=newsgt

ltdiv class=sectiongt

ltdiv class=articlegt

ltdiv class=headergt

lth1gt demostracioacuten Sopa de Divlth1gt

ltpgt Publicado el 05 de Abril 2012ltpgt

ltdivgt

ltdiv class=contentgt

ltpgt texto Lorem ipsum bla bla bla ltpgt

ltpgt texto Lorem ipsum bla bla bla ltpgt

ltpgt texto Lorem ipsum bla bla bla ltpgt

ltdivgt

ltdiv classfootergt

ltpgtEtiqueta HMTL coacutedigo demo ltpgt

ltdivgt

ltdivgt

ltdiv class=asidegt

ltdiv class=headergt

lth1gt informacioacuten tangencial lt h1gt

ltdivgt

ltdiv class=contentgt

ltpgt texto Lorem ipsum bla bla bla ltpgt

ltpgt texto Lorem ipsum bla bla bla ltpgt

ltpgt texto Lorem ipsum bla bla bla ltpgt

ltdivgt

ltdiv class=footergt

ltpgtEtiqueta HMTL coacutedigo demo lt pgt

ltdivgt

ltdivgt

ltdivgt

ltdivgt

ltsectiongt

ltsectiongt

ltarticlegt

ltheadergt

lth1gtDemostracioacuten de Sopa de Divlth1gt

ltpgtPublicado el 28 de diciembre de 2011ltpgt

ltheadergt

ltsectiongt

ltpgtLorem ipsum text bla bla blaltpgt

ltpgtLorem ipsum text bla bla blaltpgt

ltpgtLorem ipsum text bla bla blaltpgt

ltsectiongt

ltfootergt

ltpgtEtiqueta HMTL code demoltpgt

ltfootergt

ltarticlegt

ltasidegt

ltheadergt

lth1gtInformacioacuten tangenciallth1gt

ltheadergt

ltsectiongt

ltpgtLorem ipsum text bla bla blaltpgt

ltpgtLorem ipsum text bla bla blaltpgt

ltpgtLorem ipsum text bla bla blaltpgt

ltsectiongt

ltfootergt

ltpgt Etiqueta HMTL code demo ltpgt

ltfootergt

ltasidegt

ltsectiongt

ltsectiongt

iquestQueacute es CSS3

bull Hoja de estilo en cascada o CSS es el lenguaje usado para

definir la presentacioacuten de un documento estructurado

escrito en HTML es aquel que nos permitiraacute definir el

disentildeo de nuestra pagina web en los diferentes

navegadores de internet

bull La idea que se encuentra detraacutes del desarrollo de CSS es

separar la estructura de un documento de su presentacioacuten

Formas de usar CSS

bull Un estilo en liacutenea (inline)

bull Una hoja de estilo interna

bull Una hoja de estilo externa

Prefijos para navegadores

Si deseas que aparezca en todos los navegadores el prefijo es

el que sigue

bull -webkit- Chrome y Safari

bull -moz- Firefox

bull -o- Opera

bull -ms- Internet Explorer 9

Selectores

bull elemento[atributo^=cadena] selecciona todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada

bull elemento[atributo$=laquocadena] selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada

bull elemento[atributo=cadena] selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada

Selectores

Los pseudo-elementos de CSS 21 se mantienen en CSS 3 pero cambia su sintaxis y ahora se utilizan en vez de delante del nombre de cada pseudo-elemento

bull first-line selecciona la primera liacutenea del texto de un elemento

bull first-letter selecciona la primera letra del texto de un elemento

bull before selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado

bull after selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado

CSS 3 antildeade ademaacutes un nuevo pseudo-elemento

bull selection selecciona el texto que ha seleccionado un usuario con su ratoacuten o teclado

Pseudo-clases

bull elementofirst-child selecciona el primer elemento hijo

bull elementolast-child selecciona el ultimo elemento hijo

bull elementolink selecciona los enlaces que aun no son navegados

bull elementovisited selecciona los enlaces que ya fueron enlazados

bull elementohover permite crear un evento al pasar el mouse

bull elementofocus permite activar el elemnto

bull elementoactive selecciona el ultimo enlace

Backgrounds

bull ejemplo_con_fondos

background-color 000

background-image url(a-gradgif) url(a-blgif) url(a-

trgif)

background-repeat repeat-x no-repeat no-repeat

background-position 0 0 100 0 100

Bordes

bull border-top-left-radius 5px

bull border-top-right-radius 5px

bull border-bottom-right-radius 5px

bull border-bottom-left-radius 5px

bull border-radius 5px

Sombras

bull -webkit-box-shadow 1px 2px 3px 2px rgba

(1021021021)

bull -moz-box-shadow 1px 2px 3px 2px rgba

(1021021021)

bull -o-box-shadow 1px 2px 3px 2px rgba

(1021021021)

bull -ms-box-shadow 1px 2px 3px 2px rgba

(1021021021)

Fuentes Font-face

Descriptor fuente Valor Descripcioacuten

Font-family Nombre Obligado Define el nombre de la fuente

scr url Obligado Define la URL donde se encuentra la fuente para ser

utilizada

font-stretch

Normal Condensed

ultra-condensed extra-condensed Semi-condensed

Expanded semi-expanded extra-expanded ultra-expanded

Opcional Define coacutemo la fuente debe ser estirada El valor por defecto es ldquonormalrdquo

font-style Normal

Italic oblique

Opcional Define coacutemo la fuente debe ser estilizada El valor por defecto es ldquonormalrdquo

font-weight Normal

Bold 100hellip hasta 900

Opcional Define el peso de la fuente El valor por defecto es ldquonormalrdquo

Columnas

bull -moz-column-width 200px

bull -webkit-column-width 200px

bull -webkit-column-count 3

bull -webkit-column-gap 15px

bull -webkit-column-rule 2px solid red

RGBA

bull rgba(77653007)

Animaciones Transition

bull Con esta regla CSS3 se pueden crear cualquier tipo de

animaciones como girar aumentar el tamantildeo color de

sombra cambiar el color de fondo color de letra etc La

sintaxis es la siguiente

transition-property[Propiedad CSS]

transition-duration[Duracioacuten]

transition-timing-function[Funcioacuten de Tiempo]

transition-delay[Retardo]

Animaciones Transition

Funcioacuten de tiempo (timing-function)

bull linear La animacioacuten se realiza de manera uniforme

bull ease La animacioacuten se acelera al principio se retarda en medio y se acelera nuevamente al final

bull ease-in La animacioacuten se retarda al inicio y se repone al final

bull ease-out La animacioacuten se celera al inicio y se retarda al final

bull ease-in-out La animacioacuten se retarda al inicio se acelera en medio y se retarda al final

Animaciones Transform

bull Rotate

Para girar el ltdivgt Horizontal la sintaxis es

transform rotateX(Ndeg)

Para girar el ltdivgt vertical la sintaxis es

transform rotateY(Ndeg)

bull Skew

transform skew(12deg)

Animaciones Transform

bull Scale

Para aplicar propiedad de scale solo horizontal entonces la

sintaxis seraacute

transform scaleX(N)

De la misma manera para aplicar propiedad de scale solo

vertical entonces la sintaxis seraacute

transform scaleY(N)

Animaciones Transform

bull Translate

transform translate(Xpx Ypx)

Para desplazar un objeto solo horizontal entonces la sintaxis

seraacute

transform translateX(Npx)

De la misma manera para desplazar un objeto solo vertical

entonces la sintaxis seraacute

transform translateY(Npx)

Animaciones Keyframe

bull -webkit-keyframes NAME-YOUR-ANIMATION

0 opacity 0

100 opacity 1

bull -moz-keyframes NAME-YOUR-ANIMATION

0 opacity 0

100 opacity 1

bull -o-keyframes NAME-YOUR-ANIMATION

0 opacity 0

100 opacity 1

bull keyframes NAME-YOUR-ANIMATION

0 opacity 0

100 opacity 1

Animaciones Keyframe

bull keyframes infinite-spinning

from transform rotate(0deg)

to transform rotate(360deg)

Animaciones Keyframe

box

-webkit-animation NAME-YOUR-ANIMATION 5s infinite Safari 4+

-moz-animation NAME-YOUR-ANIMATION 5s infinite Fx 5+

-o-animation NAME-YOUR-ANIMATION 5s infinite Opera 12+

animation NAME-YOUR-ANIMATION 5s infinite IE 10+ Fx 29+

o

box

animation-name NAME-YOUR-ANIMATIO

animation-duration 4s

animation-iteration-count 10

animation-direction alternate

animation-timing-function ease-out

animation-fill-mode forwards

animation-delay 2s

Web Responsive Desing

MEDIA QUERIES

media (atributo query) Reglas CSS que se van a emacuteplear cuando este en la medida indicada

ATRIBUTOS MEDIA QUERIES

Min-width Npx

min-height Npx

max-width Npx

min-height Npx

APLICATIVOS ON-LINE

bull httpwwwfaviconcc

bull httpborder-radiuscom

bull httpwwwcolorzillacom

bull httpwwwfontsquirrelcomtoolswebfont-generator

bull httpwwwcssmaticcom

bull httpthe-echoplexnetflexyboxes

bull httpwwwthemeshockcomcss-text-shadow

bull httpwwwflash-to-html5nethomesindex

bull httpsicomoonio