Contenido interactivo Web

Contenido interactivo

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

Carlos Suárez

carlos.suarez@itesm.mx

facebook: /zerausolrac twitter: @zerausolrac

Puntos a considerar
• Etiquetado vs Estructura
• Estilo
• Control de eventos
• Herramientas

Etiquetado
“identiﬁcar”

“Clasiﬁcar”

“Dejar un mensaje”

Estructura
“Posición”

“Orden”

“Localización”

HTML
Etiquetado
“identiﬁcar”

“Clasiﬁcar”

“Dejar un mensaje”

Párrafo: ¡Hola mundo!

<p> </p>

<p>¡Hola mundo!</p>

Estructura
“Jerarquía”
<body>
</body>

“Orden”
<html>
<title></title>
<head></head>
<body>
</body>
</html>

“Localización”
<html>
<title></title>
<head></head>
<body>
<p id=“texto1”>¡Hola mundo!</p>
</body>
</html>

HTML
Estructura de documento
!

<tag id=“identiﬁcador” class=“identiﬁcador” atributo=“valor”>
…
</tag>

CSS
Hojas de estilo
!

#caja1{
atributo: valor;
}
!
!

.caja2 {
atributo:valor;
}

-webkit-transform: value;
-moz-transform: value;
-ms-transform: value;
-o-transform:
value;
transform:
value;

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;

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;

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;

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;

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);
}
}

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. getElementsByClassName(“class”);
fuinction mifuncion(){
alert(“mi función”);
}

!

</script>

!
!

Javascript
Frameworks

!

jQuery AngularJS Node.js

Javascript
!

FrameworksjQuery

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

$(“#elemento”).metodo
!

});
</script>

Documento Web
HTML

CSS

Estructura documento
Etiquetado de contenido
Identiﬁcación de elementos

Estilo por identiﬁcador de elemento
Diseño responsable
Transformación y Transición

JS
Control de elementos
Gestión de eventos y mensajes
Interactividad

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>
</body>
</html>

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>
</body>
</html>

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
<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>

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

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('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

¿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

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

Contenido interactivo Web

Recomendados

Recomendados

Más contenido relacionado

Similar a Contenido interactivo Web

Similar a Contenido interactivo Web (20)

Último

Último (15)

Contenido interactivo Web