Diseño e implementación de un sitio web interactivo como ...
Contenido interactivo Web
29
Contenido interactivo Carlos Suárez [email protected] facebook: /zerausolrac twitter: @zerausolrac Web 8º Congreso de Innovación y Tecnología Educativa
-
Upload
carlos-suarez -
Category
Technology
-
view
737 -
download
3
description
Congreso de Innovación y Tecnología Educativa
Transcript of Contenido interactivo Web
Contenido interactivo
Carlos Suárez [email protected] facebook: /zerausolrac twitter: @zerausolrac
Web8º Congreso de Innovación y Tecnología Educativa
Puntos a considerar
• Etiquetado vs Estructura • Estilo • Control de eventos • Herramientas
¿Lo nuevo?
Etiquetado
“identificar” “Dejar un mensaje”“Clasificar”
Estructura
“Posición” “Orden” “Localización”
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
!<tag id=“identificador” class=“identificador” atributo=“valor”> … </tag>
Estructura de documento
HTML
CSS
!#caja1{ atributo: valor; } !!.caja2 { atributo:valor; }
Hojas de estilo
-webkit-transform: value; -moz-transform: value; -ms-transform: value; -o-transform: value; transform: value;
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;
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;
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
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
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); } }
CSS
@media screen and (max-width: 600px) { .class { background: #ccc; } . . . }
Media queries: resolución
CSSFrameworks
!blueprint bootstrap
Javascript
!<script language=“javascipt” type=“text/javascipt” src=“js/archivo.js”> . . . </script>
Control eventos
Javascript
<script> ! var elementoId = document.getElementById(“id”); var elementoClass = document. getElementsByClassName(“class”); ! fuinction mifuncion(){ alert(“mi función”); } !</script>
!
!
Core
Javascript
!jQuery AngularJS Node.js
Frameworks
Javascript!jQuery Frameworks
<script> $( document ).ready(function(){ ! $(“#elemento”).metodo !}); </script>
DOM: Document Object Model
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
<!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
<!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
Elementos Web
Distribución
<DIV> <div> </div> <div> </div> <div> </div> </DIV>
<DIV> <div> <div> </div> <div> </div> </div> <div> </div> </DIV>
<DIV> <div> </div> </DIV>
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>
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
Imágenes<img src=“misitio.com/video.jpg” />
JPG (compresión) GIF (animado) PNG (opacidad)
width=“120” height=“120”
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
¿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
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
