Post on 04-Oct-2020
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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