Contenido interactivo

Web
8º Congreso de Innovación y Tecnología Educativa

Carlos Suárez

carlos.suarez@itesm.mx

facebo...
Puntos a considerar
• Etiquetado vs Estructura
• Estilo
• Control de eventos
• Herramientas
¿Lo nuevo?
Etiquetado
“identificar”

“Clasificar”

“Dejar un mensaje”

Estructura
“Posición”

“Orden”

“Localización”
HTML
Etiquetado
“identificar”

“Clasificar”

“Dejar un mensaje”

Párrafo: ¡Hola mundo!

<p> </p>

<p>¡Hola mundo!</p>

Estru...
HTML
Estructura de documento
!

<tag id=“identificador” class=“identificador” atributo=“valor”>
…
</tag>
CSS
Hojas de estilo
!

#caja1{
atributo: valor;
}
!
!

.caja2 {
atributo:valor;
}

-webkit-transform: value;
-moz-transfor...
CSS
boder-radius
border-radius: curva curva curva curva;
!

/*Safari/ Chrome
-webkit-border-radius: 12px;
!

/* Firefox 1-...
CSS
Box-shadow
box-shadow: Horizontal vertical Blur Alcance color;

!

-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-sh...
CSS
Transición
!

.class {
transition: [transition-property] [transition-duration] [transition-timing-function] [transitio...
CSS
Transformación
!

#div1 {
transform: transform-function
}
!
transform: rotate(angle);
transform: scale(value, [value])...
CSS
Animation [keyframe]
!
@keyframes nombre-animacion {
	
0% { opacity: 0; }
	
100% { opacity: 1; }
}

-webkit-animation:...
CSS
Media queries: resolución
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
.
.
.
}
CSS
Frameworks

!

blueprint bootstrap
Javascript
Control eventos
!

<script language=“javascipt” type=“text/javascipt” src=“js/
archivo.js”>
...
</script>
Javascript
Core
<script>

!
!

var elementoId = document.getElementById(“id”);
var elementoClass = document. getElementsBy...
Javascript
Frameworks

!

jQuery AngularJS Node.js
Javascript
!

FrameworksjQuery

DOM: Document Object Model
<script>
$( document ).ready(function(){
!

$(“#elemento”).meto...
Documento Web
HTML

CSS

Estructura documento
Etiquetado de contenido
Identificación de elementos

Estilo por identificador ...
Estructura de documento versión 1

<!doctype html>
<html>
<title></title>
<head>
<style>
<!- - Estilo en elementos y conte...
Estructura de documento versión 2

<!doctype html>
<html>
<title></title>
<head>
<link rel="stylesheet" type="text/css" hr...
Elementos Web
Distribución
<DIV>
<div>
<div> </div>
<div> </div>
</div>
<div> </div>
</DIV>

<DIV>
<div> </div>
<div> </div>
<div> </div...
Formulario
<form method=“get” action=“registro.php”>
</form>

<input type=“text” size=“10” name=“nombre”/>

<input type=“s...
Video/Audio
<video src=“http://misitio.com/video.ogg” controls>
No soporta el codec <code>video</code>
</video>

<embed ty...
Imágenes
<img src=“misitio.com/video.jpg” />

width=“120”
height=“120”

JPG (compresión)
GIF (animado)
PNG (opacidad)
Tipografía
<p id=“texto1”> Texto uno </p>
<p class=“texto2”> Texto dos </p>

@font-face {
font-family: mifuente;
src: url(...
¿Cómo crearlo?

•
•
•
•

Contenido
Estructura
Alcance
Nivel de servicio

• Diseño
• Comunicación
visual
• Identidad
corpor...
Enlaces de interés
• HTML5 Estándar W3C http://dev.w3.org/html5/markup/input.text.html

• jQuery http://jquery.com/

• jQe...
Upcoming SlideShare
Loading in …5
×

Contenido interactivo Web

1,031 views

Published on

Congreso de Innovación y Tecnología Educativa

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,031
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Contenido interactivo Web

  1. 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. 2. Puntos a considerar • Etiquetado vs Estructura • Estilo • Control de eventos • Herramientas
  3. 3. ¿Lo nuevo?
  4. 4. Etiquetado “identificar” “Clasificar” “Dejar un mensaje” Estructura “Posición” “Orden” “Localización”
  5. 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. 6. HTML Estructura de documento ! <tag id=“identificador” class=“identificador” atributo=“valor”> … </tag>
  7. 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. 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. 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. 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. 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. 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. 13. CSS Media queries: resolución @media screen and (max-width: 600px) { .class { background: #ccc; } . . . }
  14. 14. CSS Frameworks ! blueprint bootstrap
  15. 15. Javascript Control eventos ! <script language=“javascipt” type=“text/javascipt” src=“js/ archivo.js”> ... </script>
  16. 16. Javascript Core <script> ! ! var elementoId = document.getElementById(“id”); var elementoClass = document. getElementsByClassName(“class”); fuinction mifuncion(){ alert(“mi función”); } ! </script> ! !
  17. 17. Javascript Frameworks ! jQuery AngularJS Node.js
  18. 18. Javascript ! FrameworksjQuery DOM: Document Object Model <script> $( document ).ready(function(){ ! $(“#elemento”).metodo ! }); </script>
  19. 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. 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. 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. 22. Elementos Web
  23. 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. 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. 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. 26. Imágenes <img src=“misitio.com/video.jpg” /> width=“120” height=“120” JPG (compresión) GIF (animado) PNG (opacidad)
  27. 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. 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. 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

×