Contenido interactivo Web
•
0 recomendaciones•1,135 vistas
El documento proporciona información sobre el desarrollo de contenido interactivo para la web. Explica conceptos clave de HTML, CSS y JavaScript como la estructura y etiquetado de documentos, estilos, transformaciones, animaciones y control de eventos. También menciona herramientas como frameworks y plataformas que pueden utilizarse para crear contenido interactivo para la web.
Recomendados
Más contenido relacionado
Similar a Contenido interactivo Web
Similar a Contenido interactivo Web (20)
Último
Último (20)
Contenido interactivo Web
- 1. Contenido interactivo Web 8º Congreso de Innovación y Tecnología Educativa Carlos Suárez carlos.suarez@itesm.mx facebook: /zerausolrac twitter: @zerausolrac
- 2. Puntos a considerar • Etiquetado vs Estructura • Estilo • Control de eventos • Herramientas
- 3. ¿Lo nuevo?
- 4. Etiquetado “identificar” “Clasificar” “Dejar un mensaje” Estructura “Posición” “Orden” “Localización”
- 5. HTML Etiquetado “identificar” “Clasificar” “Dejar un mensaje” Párrafo: ¡Hola mundo! <p> </p> <p>¡Hola mundo!</p> Estructura “Jerarquía” <body> <p>¡Hola mundo!</p> </body> “Orden” <html> <title></title> <head></head> <body> <p>¡Hola mundo!</p> </body> </html> “Localización” <html> <title></title> <head></head> <body> <p id=“texto1”>¡Hola mundo!</p> </body> </html>
- 6. HTML Estructura de documento ! <tag id=“identificador” class=“identificador” atributo=“valor”> … </tag>
- 7. CSS Hojas de estilo ! #caja1{ atributo: valor; } ! ! .caja2 { atributo:valor; } -webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value;
- 8. CSS boder-radius border-radius: curva curva curva curva; ! /*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;
- 9. CSS Box-shadow box-shadow: Horizontal vertical Blur Alcance color; ! -moz-box-shadow: 10px 10px 5px #888; -webkit-box-shadow: 10px 10px 5px #888; box-shadow: 10px 10px 5px #888;
- 10. CSS Transición ! .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;
- 11. CSS Transformación ! #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;
- 12. CSS Animation [keyframe] ! @keyframes nombre-animacion { 0% { opacity: 0; } 100% { opacity: 1; } } -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); } }
- 13. CSS Media queries: resolución @media screen and (max-width: 600px) { .class { background: #ccc; } . . . }
- 15. Javascript Control eventos ! <script language=“javascipt” type=“text/javascipt” src=“js/ archivo.js”> ... </script>
- 16. Javascript Core <script> ! ! var elementoId = document.getElementById(“id”); var elementoClass = document. getElementsByClassName(“class”); fuinction mifuncion(){ alert(“mi función”); } ! </script> ! !
- 18. Javascript ! FrameworksjQuery DOM: Document Object Model <script> $( document ).ready(function(){ ! $(“#elemento”).metodo ! }); </script>
- 19. Documento Web HTML CSS Estructura documento Etiquetado de contenido Identificación de elementos Estilo por identificador de elemento Diseño responsable Transformación y Transición JS Control de elementos Gestión de eventos y mensajes Interactividad
- 20. Estructura de documento versión 1 <!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>
- 21. Estructura de documento versión 2 <!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>
- 22. Elementos Web
- 23. Distribución <DIV> <div> <div> </div> <div> </div> </div> <div> </div> </DIV> <DIV> <div> </div> <div> </div> <div> </div> </DIV> <DIV> <div> </div> </DIV>
- 24. Formulario <form method=“get” action=“registro.php”> </form> <input type=“text” size=“10” name=“nombre”/> <input type=“submit” value=“enviar”/> <form method=“get” action=“registro.php”> <input type=“text” size=“10” name=“nombre”/> <input type=“submit” value=“enviar”/> </form>
- 25. Video/Audio <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"> controls <audio src="/carpeta/audio.ogg"> No soporta el codec <code>video</code> </audio> OGG MP4 (H.264) plug-in en navegador
- 26. Imágenes <img src=“misitio.com/video.jpg” /> width=“120” height=“120” JPG (compresión) GIF (animado) PNG (opacidad)
- 27. Tipografía <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; } Google font (http://www.google.com/fonts ) Font2Web (http://www.font2web.com/ ) Converter (http://www.kirsle.net/wizards/ttf2eot.cgi <font face=“Arial” size=“4”> </font> Arial Helvetica Verdana
- 28. ¿Cómo crearlo? • • • • Contenido Estructura Alcance Nivel de servicio • Diseño • Comunicación visual • Identidad corporativa • Flujo de servicio • • • • Lenguajes Sintaxis Tecnologías Desarrollo de servicio • Mejorar el proceso • Herramientas • Integración plataformas
- 29. 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