Download - Contenido interactivo Web
![Page 1: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/1.jpg)
Contenido interactivo
Carlos Suárez [email protected] facebook: /zerausolrac twitter: @zerausolrac
Web8º Congreso de Innovación y Tecnología Educativa
![Page 2: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/2.jpg)
Puntos a considerar
• Etiquetado vs Estructura • Estilo • Control de eventos • Herramientas
![Page 3: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/3.jpg)
¿Lo nuevo?
![Page 4: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/4.jpg)
Etiquetado
“identificar” “Dejar un mensaje”“Clasificar”
Estructura
“Posición” “Orden” “Localización”
![Page 5: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/5.jpg)
HTML
“identificar” “Dejar un mensaje”“Clasificar”
“Jerarquía” “Orden” “Localización”
Párrafo: ¡Hola mundo! <p> </p> <p>¡Hola mundo!</p>
<body> <p>¡Hola mundo!</p> </body>
<html> <title></title> <head></head> <body> <p>¡Hola mundo!</p> </body> </html>
<html> <title></title> <head></head> <body> <p id=“texto1”>¡Hola mundo!</p> </body> </html>
Estructura
Etiquetado
![Page 6: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/6.jpg)
!<tag id=“identificador” class=“identificador” atributo=“valor”> … </tag>
Estructura de documento
HTML
![Page 7: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/7.jpg)
CSS
!#caja1{ atributo: valor; } !!.caja2 { atributo:valor; }
Hojas de estilo
-webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value;
![Page 8: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/8.jpg)
CSS
!/*Safari/ Chrome -webkit-border-radius: 12px; ! /* Firefox 1-3.6 */ -moz-border-radius: 12px; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4 border-radius: 12px;
boder-radius
border-radius: curva curva curva curva;
![Page 9: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/9.jpg)
CSS
!-moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888;
Box-shadow
box-shadow: Horizontal vertical Blur Alcance color;
![Page 10: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/10.jpg)
CSS
!.class { transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; } !-webkit-transition: background-color 2s ease-out; -moz-transition: background-color 2s ease-out; -o-transition: background-color 2s ease-out; transition: background-color 2s ease-out;
Transición
![Page 11: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/11.jpg)
CSS!#div1 { transform: transform-function } !transform: rotate(angle); transform: scale(value, [value]); transform: translate(value [, value]); transform: translate(value [, value]); ! -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value;
Transformación
![Page 12: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/12.jpg)
CSS
!@keyframes nombre-animacion { 0% { opacity: 0; } 100% { opacity: 1; } }
Animation [keyframe]
-webkit-animation: nombre-animacion 5s infinite; -moz-animation: nombre-animacion 5s infinite; -ms-animation: nombre-animacion 5s infinite; -o-animation: nombre-animacion 5s infinite;
@-webkit-keyframes infinite-spinning { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
![Page 13: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/13.jpg)
CSS
@media screen and (max-width: 600px) { .class { background: #ccc; } . . . }
Media queries: resolución
![Page 14: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/14.jpg)
CSSFrameworks
!blueprint bootstrap
![Page 15: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/15.jpg)
Javascript
!<script language=“javascipt” type=“text/javascipt” src=“js/archivo.js”> . . . </script>
Control eventos
![Page 16: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/16.jpg)
Javascript
<script> ! var elementoId = document.getElementById(“id”); var elementoClass = document. getElementsByClassName(“class”); ! fuinction mifuncion(){ alert(“mi función”); } !</script>
!
!
Core
![Page 17: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/17.jpg)
Javascript
!jQuery AngularJS Node.js
Frameworks
![Page 18: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/18.jpg)
Javascript!jQuery Frameworks
<script> $( document ).ready(function(){ ! $(“#elemento”).metodo !}); </script>
DOM: Document Object Model
![Page 19: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/19.jpg)
Documento Web
HTML Estructura documento Etiquetado de contenido Identificación de elementos
CSS Estilo por identificador de elemento Diseño responsable Transformación y Transición
JS Control de elementos Gestión de eventos y mensajes Interactividad
![Page 20: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/20.jpg)
<!doctype html> <html> <title></title> <head> <style> <!- - Estilo en elementos y contendo - -> </style> ! <script> <!- - Programación y control - -> </script> </head> !<body> <p>¡Hola mundo!</p> </body> </html>
Estructura de documento versión 1
![Page 21: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/21.jpg)
<!doctype html> <html> <title></title> <head> <link rel="stylesheet" type="text/css" href="theme.css"> <script src=“script.js type=“text/javascript”> </script> </head> !<body> <p>¡Hola mundo!</p> </body> </html>
Estructura de documento versión 2
![Page 22: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/22.jpg)
Elementos Web
![Page 23: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/23.jpg)
Distribución
<DIV> <div> </div> <div> </div> <div> </div> </DIV>
<DIV> <div> <div> </div> <div> </div> </div> <div> </div> </DIV>
<DIV> <div> </div> </DIV>
![Page 24: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/24.jpg)
Formulario
<input type=“submit” value=“enviar”/>
<form method=“get” action=“registro.php”> </form>
<input type=“text” size=“10” name=“nombre”/>
<form method=“get” action=“registro.php”> <input type=“text” size=“10” name=“nombre”/> <input type=“submit” value=“enviar”/> </form>
![Page 25: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/25.jpg)
Video/Audio
controls
<video src=“http://misitio.com/video.ogg” controls> No soporta el codec <code>video</code> </video>
<embed type="video/quicktime" src="movie.mov" width="640" height="480">
<audio src="/carpeta/audio.ogg"> No soporta el codec <code>video</code> </audio>
OGG MP4 (H.264) plug-in en navegador
![Page 26: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/26.jpg)
Imágenes<img src=“misitio.com/video.jpg” />
JPG (compresión) GIF (animado) PNG (opacidad)
width=“120” height=“120”
![Page 27: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/27.jpg)
Tipografía<font face=“Arial” size=“4”> </font><p id=“texto1”> Texto uno </p>
<p class=“texto2”> Texto dos </p>
@font-face { font-family: mifuente; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); } !!#texto1{ font-family:mifuente; }
Arial Helvetica Verdana
Google font (http://www.google.com/fonts )
Font2Web (http://www.font2web.com/ ) Converter (http://www.kirsle.net/wizards/ttf2eot.cgi
![Page 28: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/28.jpg)
¿Cómo crearlo?
• Diseño • Comunicación
visual • Identidad
corporativa • Flujo de servicio
• Contenido • Estructura • Alcance • Nivel de servicio
• Lenguajes • Sintaxis • Tecnologías • Desarrollo de
servicio
• Mejorar el proceso
• Herramientas • Integración
plataformas
![Page 29: Contenido interactivo Web](https://reader034.vdocuments.co/reader034/viewer/2022051314/54bb83bf4a7959780f8b45c4/html5/thumbnails/29.jpg)
Enlaces de interés• HTML5 Estándar W3C http://dev.w3.org/html5/markup/input.text.html
• jQuery http://jquery.com/
• jQery UI http://jqueryui.com/
• PHP myAdmin http://www.phpmyadmin.net/home_page/index.php
• GIMP http://www.gimp.org/
• Google App Engine https://developers.google.com/appengine/?hl=es