SlideShare a Scribd company logo
1 of 106
Conferencia HTML5 y CSS3 por Alexandra García Milan
 HTML
(Hypertext Markup Lenguage)
Conferencia HTML5 y CSS3 por Alexandra García Milan
 CSS
(Cascading Style Sheets)
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
 NOVEDADES HTML 5
MEJOR ESTRUCTURA
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
<header>
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
<nav>
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
<section>
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
<article>
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
<aside>
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
VIDEO & AUDIO
autoplay

   autobuffer                  width

controls    <Video>               poster

           height
                           loop
VIDEO

Demo:	
  http://html5demos.com/video 	
  	
  
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
•  Texto de advertencia

•  Agregando etiquetas source

•  Combinar con Flash
•  Texto de advertencia

•  Agregando etiquetas source

•  Combinar con Flash
•  Texto de advertencia

•  Agregando etiquetas source

•  Combinar con Flash
SIN CODEC DE VIDEO Y AUDIO
OGG Vorbis (Audio)

POLÉMICA
           OGGTheora (Video)
APPLE




H.264
OPERA Y MOZILLA




H.264       OGGTheora
GOOGLE




OGGTheora y H.264    VP8
Conferencia HTML5 y CSS3 por Alexandra García Milan
autobuffer                           autoplay


                 <Audio>
controls
                                         loop


Demo:	
  http://01audiovideo.free.fr/ogg/1vs0_JuniorGroove.ogg	
  
Conferencia HTML5 y CSS3 por Alexandra García Milan
INTERACCIÓN CON LA
ETIQUETA VIDEO & AUDIO
•  Etiqueta <device>



                             <device type=“media”/>



•  Acceso del video de la webcam / audio del mic
• 	
  Mostrando el video al propio
usuario
•  Grabando video / audio
•  Enviar y recibir imágenes
CANVAS
Ejemplos
 http://www.ernestdelgado.com/public-­‐tests/canvasphoto/demo/canvas.html	
  
 http://html9ive.appspot.com/static/draw.html	
  
 http://html5demos.com/canvas-­‐grad	
  
 http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html	
  
 http://www.feedtank.com/labs/html_canvas/	
  
http://www.findmebyip.com/#target-selector
Conferencia HTML5 y CSS3 por Alexandra García Milan
CODIFICACIÓN
!DOCTYPE
HTML 4.01
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
 xhtml1/DTD/xhtml1-strict.dtd">
HTML 4.01
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/
 xhtml1/DTD/xhtml1-strict.dtd"> 	




HTML 5
  <!DOCTYPE html>
ELEMENTO RAIZ
HTML 4.01

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 	
  
HTML 4.01

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 	
  



HTML 5

  <html lang="en"> 	
  
 CODIFICACIÓN
HTML 4.01

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 	
  
HTML 4.01

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 	
  



HTML 5

 <meta charset="utf-8"/> 	
  
LINK
HTML 4.01

 <link rel="stylesheet" type="text/css" href="style-original.css"/> 	
  
HTML 4.01

 <link rel="stylesheet" type="text/css" href="style-original.css"/> 	
  



HTML 5

  <link rel="stylesheet" href="style-original.css"/> 	
  
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
Más control sobre la forma
NOVEDADES CSS3
BORDER
- webkit-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;"

               - moz-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;


border-color   - border: 8px solid #000;"
-­‐webkit-­‐border-­‐image:	
  url(images/border.png)	
  27	
  repeat;	
  

               -­‐moz-­‐border-­‐image:	
  url(images/border.png)	
  27 repeat; 	

border-image
-­‐webkit-­‐border-­‐radius:	
  5px;	
  

                -­‐moz-­‐border-­‐radius:	
  5px;	
  


border-radius
                 -­‐webkit-­‐border-­‐radius:0px	
  5px	
  0px	
  5px;	
  

                 -­‐moz-­‐border-­‐radius:0px	
  5px	
  0px	
  5px;	
  
-­‐moz-­‐box-­‐shadow:3px	
  3px	
  6px	
  #888888;	
  

             -­‐webkit-­‐box-­‐shadow:3px	
  3px	
  6px	
  #888888;	
  
box-shadow
BACKGROUNDS
background-­‐origin:	
  border-­‐box;	
      background-­‐origin:	
  padding-­‐box;	
  




padding-box
                       boder-box

<background-origin>
                                                           background-­‐origin:	
  content-­‐box;	
  

         content-box
background-­‐color:#456;	
  	
  

                    border:	
  10px	
  dashed	
  #ABC; 	
  



                    -­‐moz-­‐background-­‐clip:	
  border;	
  	
  

                    -­‐webkit-­‐background-­‐clip:	
  border;	
  


           boder

<background-clip>
padding             -­‐moz-­‐background-­‐clip:	
  padding;	
  	
  

                    -­‐webkit-­‐background-­‐clip:	
  padding;	
  
-­‐moz-­‐background-­‐size:	
  100%	
  50%;	
  	
     -­‐moz-­‐background-­‐size:	
  50%	
  100%;	
  	
  
                                       -­‐o-­‐background-­‐size:	
  100%	
  50%;	
  	
       -­‐o-­‐background-­‐size:	
  50%	
  100%;	
  
                                       -­‐webkit-­‐background-­‐size:	
  100%	
  50%;	
      -­‐webkit-­‐background-­‐size:	
  50%	
  100%;	
  



contain (eventual)
                           height

   <background-size>
width                auto (eventual)
                                         -­‐moz-­‐background-­‐size:	
  contain;	
  
        cover (eventual)                                                                     -­‐moz-­‐background-­‐size:	
  cover;	
  
MULTIPLES BACKGROUNDS
Conferencia HTML5 y CSS3 por Alexandra García Milan
HTML 4                                                CSS 2

                                                          #fondo1{	
  
   <div	
  id="fondo1">	
                                 	
  	
  	
  background-­‐image:	
  url(fondo1.gif);	
  
   	
  	
  	
  <div	
  id="fondo2">	
                     	
  	
  	
  width:	
  300px;	
  
   	
  	
  	
  	
  	
  	
  <div	
  id="fondo3">	
         }	
  
                                                          #fondo2{	
  
   	
  	
  	
  	
  	
  	
  	
  	
  	
  ….	
  
                                                          	
  	
  	
  background-­‐image:	
  url(fondo2.png);	
  
   	
  	
  	
  	
  	
  	
  	
  	
  	
  ...	
              	
  	
  	
  background-­‐repeat:	
  no-­‐repeat;	
  
   	
  	
  	
  	
  	
  	
  </div>	
                       	
  	
  	
  background-­‐position:	
  bottom	
  right;	
  
   	
  	
  	
  </div>	
                                   }	
  
                                                          #fondo3{	
  
   </div>	
  	
  
                                                          	
  	
  	
  background-­‐image:	
  url(fondo3.png);	
  
                                                          	
  	
  	
  background-­‐repeat:	
  no-­‐repeat;	
  
                                                          	
  	
  	
  background-­‐position:	
  center;	
  
                                                          }	
  
HTML	
  5	

                                                CSS3	


                                                            #fondos{	
  
   <div	
  id="fondos">	
  
   	
  	
  	
  texto	
  de	
  un	
  único	
  elemento	
     	
  	
  	
  	
  	
  	
  background:	
  url(fondo3.png)	
  	
  bottom	
  right	
  no-­‐repeat,	
  	
  
   	
  	
  	
  ...	
                                        	
  	
  	
  	
  	
  	
  url(fondo2.png)	
  center	
  no-­‐repeat,	
  	
  
                                                            	
  	
  	
  	
  	
  	
  url(fondo1.gif)	
  center	
  repeat;	
  
   </div>	
  	
  
                                                            	
  	
  	
  	
  	
  	
  width:	
  300px;	
  
                                                            }	
  
COLOR
Color:#f00;	
  	
  	
  opacity:1.0;	
  




opacity                                      Color:#f00;	
  	
  	
  opacity:1.0;	
  


Valores	
  entre:	
  	
  

         	
  -­	
  0	
  (transparente)	
  
         	
  -­	
  1	
  (opaco)	
  
HTML 4                                                            HTML 5


                                                                   	
  -­	
  HLS:	
  color	
  (hue,	
  sturation,	
  lightness)	
  
	
  -­	
  RGB:	
  color	
  (red,	
  gren,	
  blue)	
  
                                                                   	
  -­	
  CMYK:	
  color	
  (cyan,	
  magenta,	
  yellow,	
  black)	
  
	
  -­	
  Hexadecimal:	
  color	
  (#abcdef)	
  
                                                                   	
  -­	
  HLSA:	
  color	
  (hue,	
  sturation,	
  lightness,	
  alpha)	
  
	
  -­	
  DeHinición:	
  color	
  (white,	
  red,	
  black)	
  
                                                                   	
  -­	
  RGBA:	
  color	
  (red,	
  gren,	
  blue,	
  alpha)	
  
TEXTO
distancia vertical

distancia horizontal                        text-­‐shadow:	
  10px	
  10px	
  10px	
  #333;	
  




        text-shadow
                          desenfoque
    color-sombra
text-­‐over9low:ellipsis	
  ;	
  	
  




text-overflow
LAYOUT
-­‐moz-­‐column-­‐width:	
  13em;	
  	
  
                                            -­‐webkit-­‐column-­‐width:	
  13em;	
  	
  
                                            -­‐moz-­‐column-­‐gap:	
  1em;	
  	
  
                                            -­‐webkit-­‐column-­‐gap:	
  1em;	
  
                       column-­‐width	
     moz-­‐column-­‐count:	
  3;	
  	
  
                                            -­‐webkit-­‐column-­‐count:	
  3;	
  	
  
column-­‐gap	
  


            Layout
                   column-­‐count	
  
@font-face { 	

                            	

font-family: Gentium; 	

                	

src: url(http://site/fonts/Gentium.ttf);	

                                       } 	

@font-face
             p { font-family: Gentium; }
TRANSFORMATION
Conferencia HTML5 y CSS3 por Alexandra García Milan
Conferencia HTML5 y CSS3 por Alexandra García Milan
Matrix 3D	

Perspective	

                                 Rotate 3D	


    3D TRANSFORMATION

 Scale 3D	

                          Translate 3D
PREFIJOS CROSS-BROWSING
-moz-box-shadow	


-webkit-box-shadow	


-o-box-shadow	


-ms-box-shadow
Conferencia HTML5 y CSS3 por Alexandra García Milan
RECURSO
   SHTML 5
      Frameworks basados en CSS3 y HTML5	

      http://52framework.com/	

      Páginas web realizadas en HTML5	

      http://html5gallery.com/	

      Demostraciones del uso de HTML 5 a través de múltiples ejemplos.	

      http://html5demos.com/	


    CSS 3

       Compatibilidad de los navegadores:	

       http://www.findmebyip.com/litmus/#target-selector	

       Te muestra ejemplos de CSS3	

       http://css3please.com/	

       Te genera el código y te pone con que navegador es compatible:	

       http://css3generator.com/	

       Blog Especializado:	

       http://www.css3.info/	

       Otro blog con gran catidad de información y recursos de calidad sobre CSS3.	

       http://www.css3.com/
REFERENCIAS
HTML 5

   http://www.neoteo.com/html-5-y-el-futuro-de-internet-16399.neoPáginas web realizadas en HTML5	

   http://www.elwebmaster.com/actualidad/html-5-%C2%BFque-novedades-trae-la-nueva-version-de-este-
   lenguaje	

   http://www.moio.org/blog/?p=125	

   http://www.findmebyip.com/#target-selector	

   http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3	

   http://www.conceptopixel.com/cdigos-de-css3-mas-propiedades-que-quiz-no-conocas-y-que-te-facilitaran-la-vida	

   http://vagabundia.blogspot.com/2010/02/las-etiquetas-audio-y-video.html	

   http://www.geeksdesdelau.com/2009/07/las-novedades-mas-importantes-de-html-5/	

   http://www.programacionweb.net/articulos/articulo/?num=762	

   http://www.craigward.net/
REFERNCIAS
CSS 3


   http://www.moio.org/blog/?p=125	

   http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3	

   http://www.maestrosdelweb.com/editorial/css-3-mas-social-que-nunca/	

   http://theproc.es/2010/1/29/12237/manual-sobre-lo-nuevo-en-css-3	

   http://vagabundia.blogspot.com/2010/05/la-propiedad-background-clip.html	

   https://developer.mozilla.org/en/CSS/-moz-background-origin	

   http://www.css3.info/preview/background-size/	

   http://serenomoreno.com/2010/01/font-face-incrustar-tipografias-en-una-pagina-web/
Conferencia HTML5 y CSS3 por Alexandra García Milan

More Related Content

Viewers also liked

Actividades de la carrera de analisis y desarrollo de sistemas de informacion
Actividades de la carrera de analisis y desarrollo de sistemas de informacionActividades de la carrera de analisis y desarrollo de sistemas de informacion
Actividades de la carrera de analisis y desarrollo de sistemas de informacionadsi1963
 
Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++ubshreenath
 
Informe de logros y avances en las esc para atps
Informe de logros y avances en las esc para atpsInforme de logros y avances en las esc para atps
Informe de logros y avances en las esc para atpsPedro Diaz
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5Derek Jacoby
 
Informe de Resultados de un Proyecto de Aprendizaje
Informe de Resultados de un Proyecto de AprendizajeInforme de Resultados de un Proyecto de Aprendizaje
Informe de Resultados de un Proyecto de Aprendizajeolinabrag
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
Informe Final del Proyecto de Aprendizaje P. A
Informe Final del Proyecto de Aprendizaje   P. AInforme Final del Proyecto de Aprendizaje   P. A
Informe Final del Proyecto de Aprendizaje P. AMARCO OSCAR NIETO MESA
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The WorldBuiltByHQ
 
Modelo de informe de actividades
Modelo de informe de actividadesModelo de informe de actividades
Modelo de informe de actividadespersonal
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignKoombea
 
Internet of Things
Internet of ThingsInternet of Things
Internet of ThingsVala Afshar
 

Viewers also liked (15)

Actividades de la carrera de analisis y desarrollo de sistemas de informacion
Actividades de la carrera de analisis y desarrollo de sistemas de informacionActividades de la carrera de analisis y desarrollo de sistemas de informacion
Actividades de la carrera de analisis y desarrollo de sistemas de informacion
 
Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++Web Front End - (HTML5, CSS3, JavaScript) ++
Web Front End - (HTML5, CSS3, JavaScript) ++
 
Photo and photo
Photo and photoPhoto and photo
Photo and photo
 
Informe de logros y avances en las esc para atps
Informe de logros y avances en las esc para atpsInforme de logros y avances en las esc para atps
Informe de logros y avances en las esc para atps
 
Untangling spring week5
Untangling spring week5Untangling spring week5
Untangling spring week5
 
Informe de Resultados de un Proyecto de Aprendizaje
Informe de Resultados de un Proyecto de AprendizajeInforme de Resultados de un Proyecto de Aprendizaje
Informe de Resultados de un Proyecto de Aprendizaje
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Informe Final del Proyecto de Aprendizaje P. A
Informe Final del Proyecto de Aprendizaje   P. AInforme Final del Proyecto de Aprendizaje   P. A
Informe Final del Proyecto de Aprendizaje P. A
 
How UX Design Has Changed The World
How UX Design Has Changed The WorldHow UX Design Has Changed The World
How UX Design Has Changed The World
 
Web Servers (ppt)
Web Servers (ppt)Web Servers (ppt)
Web Servers (ppt)
 
Informe corto
Informe cortoInforme corto
Informe corto
 
Modelo de informe de actividades
Modelo de informe de actividadesModelo de informe de actividades
Modelo de informe de actividades
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
Internet of Things
Internet of ThingsInternet of Things
Internet of Things
 

Similar to Conferencia HTML5 y CSS3 por Alexandra García Milan

Similar to Conferencia HTML5 y CSS3 por Alexandra García Milan (20)

CSS3
CSS3CSS3
CSS3
 
CSS3
CSS3CSS3
CSS3
 
Intro a Sass
Intro a Sass Intro a Sass
Intro a Sass
 
Estilo & CSS3
Estilo & CSS3Estilo & CSS3
Estilo & CSS3
 
Css3
Css3Css3
Css3
 
Conoce HTML5 y CSS3
Conoce HTML5 y CSS3Conoce HTML5 y CSS3
Conoce HTML5 y CSS3
 
Css3
Css3Css3
Css3
 
"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo"CSS Preprocessors Time!" por @nahuelsotelo
"CSS Preprocessors Time!" por @nahuelsotelo
 
Html5 css3
Html5 css3Html5 css3
Html5 css3
 
html5-css3
html5-css3html5-css3
html5-css3
 
Ria 03-html5-css3
Ria 03-html5-css3Ria 03-html5-css3
Ria 03-html5-css3
 
Variables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPressVariables nativas CSS, Front-End con superpoderes para tu WordPress
Variables nativas CSS, Front-End con superpoderes para tu WordPress
 
Introducción al Diseño
Introducción al DiseñoIntroducción al Diseño
Introducción al Diseño
 
Laboratorio 03
Laboratorio 03Laboratorio 03
Laboratorio 03
 
Frameworks CSS
Frameworks CSSFrameworks CSS
Frameworks CSS
 
Introducción a los Frameworks CSS
Introducción a los Frameworks CSSIntroducción a los Frameworks CSS
Introducción a los Frameworks CSS
 
Desarrollo web inteligente
Desarrollo web inteligenteDesarrollo web inteligente
Desarrollo web inteligente
 
SVG Dibujando en la Web
SVG Dibujando en la WebSVG Dibujando en la Web
SVG Dibujando en la Web
 
02. Interactuando con controles de UI
02. Interactuando con controles de UI02. Interactuando con controles de UI
02. Interactuando con controles de UI
 
Sass: CSS con Superpoderes
Sass: CSS con SuperpoderesSass: CSS con Superpoderes
Sass: CSS con Superpoderes
 

More from Andres Karp

Estrategia digital sector financiero
Estrategia digital sector financiero Estrategia digital sector financiero
Estrategia digital sector financiero Andres Karp
 
Testimonios Social Media por Lorca
Testimonios Social Media por LorcaTestimonios Social Media por Lorca
Testimonios Social Media por LorcaAndres Karp
 
CRM y Big Data: el nuevo cliente vitaminado
CRM y Big Data: el nuevo cliente vitaminadoCRM y Big Data: el nuevo cliente vitaminado
CRM y Big Data: el nuevo cliente vitaminadoAndres Karp
 
Mobile marketing business
Mobile marketing businessMobile marketing business
Mobile marketing businessAndres Karp
 
Usabilidad para Apicaciones Móviles
Usabilidad para Apicaciones MóvilesUsabilidad para Apicaciones Móviles
Usabilidad para Apicaciones MóvilesAndres Karp
 
Presentación Mobile Marketing Environment
Presentación Mobile Marketing EnvironmentPresentación Mobile Marketing Environment
Presentación Mobile Marketing EnvironmentAndres Karp
 
Aplicaciones Móviles Imprescindibles para Directivos
Aplicaciones Móviles Imprescindibles para DirectivosAplicaciones Móviles Imprescindibles para Directivos
Aplicaciones Móviles Imprescindibles para DirectivosAndres Karp
 
Presentacion Mobile Marketing
Presentacion Mobile MarketingPresentacion Mobile Marketing
Presentacion Mobile MarketingAndres Karp
 
Presentacion futuro del móvil
Presentacion futuro del móvilPresentacion futuro del móvil
Presentacion futuro del móvilAndres Karp
 
Presente y futuro del móvil
Presente y futuro del móvilPresente y futuro del móvil
Presente y futuro del móvilAndres Karp
 
Presentación sobre Geolocalización
Presentación sobre GeolocalizaciónPresentación sobre Geolocalización
Presentación sobre GeolocalizaciónAndres Karp
 
Geolocalización
GeolocalizaciónGeolocalización
GeolocalizaciónAndres Karp
 
Búsqueda de Trabajo en las Redes Sociales
Búsqueda de Trabajo en las Redes SocialesBúsqueda de Trabajo en las Redes Sociales
Búsqueda de Trabajo en las Redes SocialesAndres Karp
 
Html5 para Android
Html5 para AndroidHtml5 para Android
Html5 para AndroidAndres Karp
 
Presentación sobre desarrollo para iPhone
Presentación sobre desarrollo para iPhone Presentación sobre desarrollo para iPhone
Presentación sobre desarrollo para iPhone Andres Karp
 
Usabilidad para Móviles
Usabilidad para MóvilesUsabilidad para Móviles
Usabilidad para MóvilesAndres Karp
 
The Monday Reading Club: Haz Click Aquí!!!
The Monday Reading Club: Haz Click Aquí!!!The Monday Reading Club: Haz Click Aquí!!!
The Monday Reading Club: Haz Click Aquí!!!Andres Karp
 
Motivación y formación en la Empresa
Motivación y formación en la EmpresaMotivación y formación en la Empresa
Motivación y formación en la EmpresaAndres Karp
 
Presentación Conferencia de Javier Gosende y Fernando Macia sobre Buscadores
Presentación Conferencia de Javier Gosende y Fernando Macia sobre BuscadoresPresentación Conferencia de Javier Gosende y Fernando Macia sobre Buscadores
Presentación Conferencia de Javier Gosende y Fernando Macia sobre BuscadoresAndres Karp
 

More from Andres Karp (20)

Estrategia digital sector financiero
Estrategia digital sector financiero Estrategia digital sector financiero
Estrategia digital sector financiero
 
Testimonios Social Media por Lorca
Testimonios Social Media por LorcaTestimonios Social Media por Lorca
Testimonios Social Media por Lorca
 
CRM y Big Data: el nuevo cliente vitaminado
CRM y Big Data: el nuevo cliente vitaminadoCRM y Big Data: el nuevo cliente vitaminado
CRM y Big Data: el nuevo cliente vitaminado
 
Mobile marketing business
Mobile marketing businessMobile marketing business
Mobile marketing business
 
Usabilidad para Apicaciones Móviles
Usabilidad para Apicaciones MóvilesUsabilidad para Apicaciones Móviles
Usabilidad para Apicaciones Móviles
 
Presentación Mobile Marketing Environment
Presentación Mobile Marketing EnvironmentPresentación Mobile Marketing Environment
Presentación Mobile Marketing Environment
 
Aplicaciones Móviles Imprescindibles para Directivos
Aplicaciones Móviles Imprescindibles para DirectivosAplicaciones Móviles Imprescindibles para Directivos
Aplicaciones Móviles Imprescindibles para Directivos
 
Motivacion 2.0
Motivacion 2.0Motivacion 2.0
Motivacion 2.0
 
Presentacion Mobile Marketing
Presentacion Mobile MarketingPresentacion Mobile Marketing
Presentacion Mobile Marketing
 
Presentacion futuro del móvil
Presentacion futuro del móvilPresentacion futuro del móvil
Presentacion futuro del móvil
 
Presente y futuro del móvil
Presente y futuro del móvilPresente y futuro del móvil
Presente y futuro del móvil
 
Presentación sobre Geolocalización
Presentación sobre GeolocalizaciónPresentación sobre Geolocalización
Presentación sobre Geolocalización
 
Geolocalización
GeolocalizaciónGeolocalización
Geolocalización
 
Búsqueda de Trabajo en las Redes Sociales
Búsqueda de Trabajo en las Redes SocialesBúsqueda de Trabajo en las Redes Sociales
Búsqueda de Trabajo en las Redes Sociales
 
Html5 para Android
Html5 para AndroidHtml5 para Android
Html5 para Android
 
Presentación sobre desarrollo para iPhone
Presentación sobre desarrollo para iPhone Presentación sobre desarrollo para iPhone
Presentación sobre desarrollo para iPhone
 
Usabilidad para Móviles
Usabilidad para MóvilesUsabilidad para Móviles
Usabilidad para Móviles
 
The Monday Reading Club: Haz Click Aquí!!!
The Monday Reading Club: Haz Click Aquí!!!The Monday Reading Club: Haz Click Aquí!!!
The Monday Reading Club: Haz Click Aquí!!!
 
Motivación y formación en la Empresa
Motivación y formación en la EmpresaMotivación y formación en la Empresa
Motivación y formación en la Empresa
 
Presentación Conferencia de Javier Gosende y Fernando Macia sobre Buscadores
Presentación Conferencia de Javier Gosende y Fernando Macia sobre BuscadoresPresentación Conferencia de Javier Gosende y Fernando Macia sobre Buscadores
Presentación Conferencia de Javier Gosende y Fernando Macia sobre Buscadores
 

Recently uploaded

Los escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialesLos escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialeshanda210618
 
1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADODJElvitt
 
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...Unidad de Espiritualidad Eudista
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa
 
Anuncio de Remitido Colegio SEK a la comunidad pública
Anuncio de Remitido Colegio SEK a la comunidad públicaAnuncio de Remitido Colegio SEK a la comunidad pública
Anuncio de Remitido Colegio SEK a la comunidad públicaIvannaMaciasAlvarez
 
Xardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosXardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosAgrela Elvixeo
 
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdfceeabarcia
 
Presentación: Actividad de Diálogos adolescentes.pptx
Presentación: Actividad de  Diálogos adolescentes.pptxPresentación: Actividad de  Diálogos adolescentes.pptx
Presentación: Actividad de Diálogos adolescentes.pptxNabel Paulino Guerra Huaranca
 
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.docGLADYSPASTOR
 
U2_EA2_descargable TICS PRESENCIAL 2.pdf
U2_EA2_descargable TICS PRESENCIAL 2.pdfU2_EA2_descargable TICS PRESENCIAL 2.pdf
U2_EA2_descargable TICS PRESENCIAL 2.pdfJavier Correa
 
Tema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónTema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónIES Vicent Andres Estelles
 
explicacionsobrelasemanasanta-190411100653.ppt
explicacionsobrelasemanasanta-190411100653.pptexplicacionsobrelasemanasanta-190411100653.ppt
explicacionsobrelasemanasanta-190411100653.pptjosemanuelcremades
 
Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Ivie
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdfdiana593621
 

Recently uploaded (20)

Los escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comercialesLos escritos administrativos, técnicos y comerciales
Los escritos administrativos, técnicos y comerciales
 
1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO1ro Programación Anual D.P.C.C ACTUALIZADO
1ro Programación Anual D.P.C.C ACTUALIZADO
 
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
La Congregación de Jesús y María, conocida también como los Eudistas, fue fun...
 
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
La Gatera de la Villa nº 51. Revista cultural sobre Madrid..
 
Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...Sesión de clase ES: Adoración sin fin...
Sesión de clase ES: Adoración sin fin...
 
Actividad de bienestar docente 2016 Pereira
Actividad de bienestar docente 2016 PereiraActividad de bienestar docente 2016 Pereira
Actividad de bienestar docente 2016 Pereira
 
Anuncio de Remitido Colegio SEK a la comunidad pública
Anuncio de Remitido Colegio SEK a la comunidad públicaAnuncio de Remitido Colegio SEK a la comunidad pública
Anuncio de Remitido Colegio SEK a la comunidad pública
 
Xardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES MonelosXardín de San Carlos (A Coruña) IES Monelos
Xardín de San Carlos (A Coruña) IES Monelos
 
VISITA DE ESTUDO À CRUZ VERMELHA _
VISITA DE ESTUDO À CRUZ VERMELHA                   _VISITA DE ESTUDO À CRUZ VERMELHA                   _
VISITA DE ESTUDO À CRUZ VERMELHA _
 
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
21 MARZO DIA INTERNACIONAL DOS BOSQUES.pdf
 
Tema 6.- La identidad visual corporativa y el naming.pdf
Tema 6.- La identidad visual corporativa y el naming.pdfTema 6.- La identidad visual corporativa y el naming.pdf
Tema 6.- La identidad visual corporativa y el naming.pdf
 
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdfTema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
Tema 5.- BASES DE DATOS Y GESTIÓN DE LA INF. PARA EL MARKETING.pdf
 
Presentación: Actividad de Diálogos adolescentes.pptx
Presentación: Actividad de  Diálogos adolescentes.pptxPresentación: Actividad de  Diálogos adolescentes.pptx
Presentación: Actividad de Diálogos adolescentes.pptx
 
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
5°-CARPETA PEDAGÓGICA 2024-MAESTRAS DE PRIMARIA PERÚ-978387435.doc
 
U2_EA2_descargable TICS PRESENCIAL 2.pdf
U2_EA2_descargable TICS PRESENCIAL 2.pdfU2_EA2_descargable TICS PRESENCIAL 2.pdf
U2_EA2_descargable TICS PRESENCIAL 2.pdf
 
Tema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificaciónTema 4 Rocas sedimentarias, características y clasificación
Tema 4 Rocas sedimentarias, características y clasificación
 
explicacionsobrelasemanasanta-190411100653.ppt
explicacionsobrelasemanasanta-190411100653.pptexplicacionsobrelasemanasanta-190411100653.ppt
explicacionsobrelasemanasanta-190411100653.ppt
 
Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023Presentación contribuciones socioeconómicas del SUPV 2023
Presentación contribuciones socioeconómicas del SUPV 2023
 
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLAEL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
EL BRILLO DEL ECLIPSE (CUENTO LITERARIO). Autor y diseñador JAVIER SOLIS NOYOLA
 
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
1° GRADO UNIDAD DE APRENDIZAJE 0 - 2024.pdf
 

Conferencia HTML5 y CSS3 por Alexandra García Milan

  • 16. <nav>
  • 29. autoplay autobuffer width controls <Video> poster height loop
  • 33. •  Texto de advertencia •  Agregando etiquetas source •  Combinar con Flash
  • 34. •  Texto de advertencia •  Agregando etiquetas source •  Combinar con Flash
  • 35. •  Texto de advertencia •  Agregando etiquetas source •  Combinar con Flash
  • 36. SIN CODEC DE VIDEO Y AUDIO
  • 37. OGG Vorbis (Audio) POLÉMICA OGGTheora (Video)
  • 42. autobuffer autoplay <Audio> controls loop Demo:  http://01audiovideo.free.fr/ogg/1vs0_JuniorGroove.ogg  
  • 45. •  Etiqueta <device> <device type=“media”/> •  Acceso del video de la webcam / audio del mic
  • 46. •   Mostrando el video al propio usuario
  • 48. •  Enviar y recibir imágenes
  • 50. Ejemplos http://www.ernestdelgado.com/public-­‐tests/canvasphoto/demo/canvas.html   http://html9ive.appspot.com/static/draw.html   http://html5demos.com/canvas-­‐grad   http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html   http://www.feedtank.com/labs/html_canvas/  
  • 55. HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd">
  • 56. HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> HTML 5 <!DOCTYPE html>
  • 58. HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  
  • 59. HTML 4.01 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">   HTML 5 <html lang="en">  
  • 61. HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  • 62. HTML 4.01 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   HTML 5 <meta charset="utf-8"/>  
  • 63. LINK
  • 64. HTML 4.01 <link rel="stylesheet" type="text/css" href="style-original.css"/>  
  • 65. HTML 4.01 <link rel="stylesheet" type="text/css" href="style-original.css"/>   HTML 5 <link rel="stylesheet" href="style-original.css"/>  
  • 72. Más control sobre la forma
  • 75. - webkit-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;" - moz-border-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
 border-color - border: 8px solid #000;"
  • 76. -­‐webkit-­‐border-­‐image:  url(images/border.png)  27  repeat;   -­‐moz-­‐border-­‐image:  url(images/border.png)  27 repeat; border-image
  • 77. -­‐webkit-­‐border-­‐radius:  5px;   -­‐moz-­‐border-­‐radius:  5px;   border-radius -­‐webkit-­‐border-­‐radius:0px  5px  0px  5px;   -­‐moz-­‐border-­‐radius:0px  5px  0px  5px;  
  • 78. -­‐moz-­‐box-­‐shadow:3px  3px  6px  #888888;   -­‐webkit-­‐box-­‐shadow:3px  3px  6px  #888888;   box-shadow
  • 80. background-­‐origin:  border-­‐box;   background-­‐origin:  padding-­‐box;   padding-box boder-box <background-origin> background-­‐origin:  content-­‐box;   content-box
  • 81. background-­‐color:#456;     border:  10px  dashed  #ABC;   -­‐moz-­‐background-­‐clip:  border;     -­‐webkit-­‐background-­‐clip:  border;   boder <background-clip> padding -­‐moz-­‐background-­‐clip:  padding;     -­‐webkit-­‐background-­‐clip:  padding;  
  • 82. -­‐moz-­‐background-­‐size:  100%  50%;     -­‐moz-­‐background-­‐size:  50%  100%;     -­‐o-­‐background-­‐size:  100%  50%;     -­‐o-­‐background-­‐size:  50%  100%;   -­‐webkit-­‐background-­‐size:  100%  50%;   -­‐webkit-­‐background-­‐size:  50%  100%;   contain (eventual) height <background-size> width auto (eventual) -­‐moz-­‐background-­‐size:  contain;   cover (eventual) -­‐moz-­‐background-­‐size:  cover;  
  • 85. HTML 4 CSS 2 #fondo1{   <div  id="fondo1">        background-­‐image:  url(fondo1.gif);        <div  id="fondo2">        width:  300px;              <div  id="fondo3">   }   #fondo2{                    ….        background-­‐image:  url(fondo2.png);                    ...        background-­‐repeat:  no-­‐repeat;              </div>        background-­‐position:  bottom  right;        </div>   }   #fondo3{   </div>          background-­‐image:  url(fondo3.png);        background-­‐repeat:  no-­‐repeat;        background-­‐position:  center;   }  
  • 86. HTML  5 CSS3 #fondos{   <div  id="fondos">        texto  de  un  único  elemento              background:  url(fondo3.png)    bottom  right  no-­‐repeat,          ...              url(fondo2.png)  center  no-­‐repeat,                url(fondo1.gif)  center  repeat;   </div>                width:  300px;   }  
  • 87. COLOR
  • 88. Color:#f00;      opacity:1.0;   opacity Color:#f00;      opacity:1.0;   Valores  entre:      -­  0  (transparente)    -­  1  (opaco)  
  • 89. HTML 4 HTML 5  -­  HLS:  color  (hue,  sturation,  lightness)    -­  RGB:  color  (red,  gren,  blue)    -­  CMYK:  color  (cyan,  magenta,  yellow,  black)    -­  Hexadecimal:  color  (#abcdef)    -­  HLSA:  color  (hue,  sturation,  lightness,  alpha)    -­  DeHinición:  color  (white,  red,  black)    -­  RGBA:  color  (red,  gren,  blue,  alpha)  
  • 90. TEXTO
  • 91. distancia vertical distancia horizontal text-­‐shadow:  10px  10px  10px  #333;   text-shadow desenfoque color-sombra
  • 94. -­‐moz-­‐column-­‐width:  13em;     -­‐webkit-­‐column-­‐width:  13em;     -­‐moz-­‐column-­‐gap:  1em;     -­‐webkit-­‐column-­‐gap:  1em;   column-­‐width   moz-­‐column-­‐count:  3;     -­‐webkit-­‐column-­‐count:  3;     column-­‐gap   Layout column-­‐count  
  • 95. @font-face { font-family: Gentium; src: url(http://site/fonts/Gentium.ttf); } @font-face p { font-family: Gentium; }
  • 99. Matrix 3D Perspective Rotate 3D 3D TRANSFORMATION Scale 3D Translate 3D
  • 103. RECURSO SHTML 5 Frameworks basados en CSS3 y HTML5 http://52framework.com/ Páginas web realizadas en HTML5 http://html5gallery.com/ Demostraciones del uso de HTML 5 a través de múltiples ejemplos. http://html5demos.com/ CSS 3 Compatibilidad de los navegadores: http://www.findmebyip.com/litmus/#target-selector Te muestra ejemplos de CSS3 http://css3please.com/ Te genera el código y te pone con que navegador es compatible: http://css3generator.com/ Blog Especializado: http://www.css3.info/ Otro blog con gran catidad de información y recursos de calidad sobre CSS3. http://www.css3.com/
  • 104. REFERENCIAS HTML 5 http://www.neoteo.com/html-5-y-el-futuro-de-internet-16399.neoPáginas web realizadas en HTML5 http://www.elwebmaster.com/actualidad/html-5-%C2%BFque-novedades-trae-la-nueva-version-de-este- lenguaje http://www.moio.org/blog/?p=125 http://www.findmebyip.com/#target-selector http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 http://www.conceptopixel.com/cdigos-de-css3-mas-propiedades-que-quiz-no-conocas-y-que-te-facilitaran-la-vida http://vagabundia.blogspot.com/2010/02/las-etiquetas-audio-y-video.html http://www.geeksdesdelau.com/2009/07/las-novedades-mas-importantes-de-html-5/ http://www.programacionweb.net/articulos/articulo/?num=762 http://www.craigward.net/
  • 105. REFERNCIAS CSS 3 http://www.moio.org/blog/?p=125 http://www.slideshare.net/whafro/up-to-speed-on-html-5-and-css-3 http://www.maestrosdelweb.com/editorial/css-3-mas-social-que-nunca/ http://theproc.es/2010/1/29/12237/manual-sobre-lo-nuevo-en-css-3 http://vagabundia.blogspot.com/2010/05/la-propiedad-background-clip.html https://developer.mozilla.org/en/CSS/-moz-background-origin http://www.css3.info/preview/background-size/ http://serenomoreno.com/2010/01/font-face-incrustar-tipografias-en-una-pagina-web/