Html5, css3 y js

HTML5, tags nuevos y deprecados
CSS3 animaciones, transformaciones, Media Queries
Adaptabilidad de sitio para mobile browsers
Patrones de diseño JS
Javascript Client Side (DOM)
Javascript Server Side (Node.js y NoSQL)
Aplicaciones mobile nativas/híbridas basadas en JS
Paradigmas y tendencias para buenas prácticas

2 of 77

HTML5 es la evolución de HTML4.01
Pero...
No es un lenguaje propiamente dicho, sino que es una conjunción
de tecnologías que fueron volviendose estándares con la
evolución de la web

3 of 77

Incorpora tags de manera nativa (canvas 2D y 3D, audio, video) con codecs para mostrar
los contenidos multimedia.
Etiquetas para manejar grandes conjuntos de datos: Datagrid(deprecado por no
implementación),Command, menu(redefinido en html5, pero no implementado).
Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime …) y
facilidades para validar el contenido sin Javascript.
Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales).

4 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS
JavaScript, and Ajax

Your Result:
<!DOCTYPE html>
<html> E-mail:
<body>

<form action="demo_form.asp">
E-mail: <input type="email" name="usremail" /><br />
<input type="submit" />
</form>

</body>
</html>

Edit the code above and click to see the result. W3Schools.com - Try it yourself

5 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html> Quantity (between 1 and 5):
<body>

Quantity (between 1 and 5): <input type="number"
name="quantity" min="1" max="5" />
</form>

</body>
</html>


6 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html> Add your homepage:
<body>

Add your homepage: <input type="url" name="homepage"
/><br />
</form>

</body>
</html>


7 of 77

Beautiful math in all browsers
MathML Samples
This page contains sample equations represented by MathML markup. The page has been configured to always
use HTML-CSS mode with web fonts to display the equations, which produces uniform layout and typesetting
across browsers.

Note that MathJax can also be configured to use native MathML rendering when available in a browser, and only
fall back to HTML-CSS mode when native rendering is not available.

Select the rendering mode:

The Quadratic Formula

−−−−−−−
−b ± √ b2 − 4ac
x=
2a

Cauchy's Integral Formula

f(z)

8 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html>
<body>
My first SVG
<h1>My first SVG</h1>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>

</body>
</html>


9 of 77

Añade tags para manejar la Web Semántica (Web 3.0): header,
footer, article, nav, time( fecha del contenido),etc.
Describen el significado del contenido. Por ej: importancia, su
finalidad y las relaciones que existen.
No tienen especial impacto en la visualización, se orientan a
buscadores.
Permite incorporar a las páginas archivos RDF / OWL (con
meta información) para describir relaciones entre los términos
utilizados.

10 of 77

"applet". Se reemplaza por "object"
Relacionados con formateo de estilos (center,big,strike)
"frames", "frameset" y "noframes" Lista
completa

11 of 77

API para hacer Drag & Drop.. Mediante eventos.ej
API para trabajar Off-Line. Permite descargar todos los contenidos necesarios y trabajar en
local.
API de Geoposicionamiento para dispositivos que lo soporten.
API Storage. Facilidad de almacenamiento persistente en local, con bases de datos (basadas
en SQLite) o con almacenamiento de objetos por aplicación o por dominio Web (Local
Storage, Session Storage y Global Storage). Se dispone de una Base de datos con la
posibilidad de hacer consultas SQL (cayendo en desuso).

12 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE HTML>
<html> Drag the W3Schools image into the rectangle:
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px
solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

13 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script type="text/javascript" src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">Get
Date and Time</button></p>
<p><img src="img_logo.gif" width="336" height="69"
/></p>
<p>Try opening <a href="tryhtml5_html_manifest.htm"
target="_blank">this page</a>, then go offline, and
Try opening this page, then go offline, and reload the page. The
reload the page. The script and the image should still script and the image should still work.
work.</p>
</body>
</html>


14 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html> Click the button to get your coordinates:
<body>
<p id="demo">Click the button to get your coordinates:
</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{

navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by
this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude
+
"<br />Longitude: " +
position.coords.longitude;
}
</script>
</body>

15 of 77

WebSockets. API de comunicación bidireccional entre páginas. Similar a los Sockets de C.
WebWorkers . Hilos de ejecución en paralelo.
ESTÁNDAR FUTURO. System Information API. Acceso al hardware a bajo nivel: red,
archivos, CPU, Memoria, puertos USB, cámaras, micrófonos

16 of 77

Does your browser

(index.html) WebSocket.org Are you plugged in?
support WebSocket?
Firefox 17
(index.html) Windows

Home (index.html) Demos (demos.html) All About WebSocket (aboutwebsocket.html) Benefits of WebSocket (quantum.html) (echo.html)

This website powered by (http://kaazing.com

(http://www.w3.org/html/logo/

Links
Echo Test
Home (index.html)
Demos (demos.html) The first section of this page will let you do an HTML5 WebSocket test against the echo server. The second
Echo Test (echo.html) section walks you through creating a WebSocket application yourself.
Demos on the Web
You can also inspect WebSocket messages (http://blog.kaazing.com/2012/05/09/inspecting-websocket-traffic-
(demos.html)
with-chrome-developer-tools/) using your browser.
All About WebSocket
(aboutwebsocket.html)
Benefits of WebSocket
Try it out
(quantum.html)

WebSocket API (http://dev.w3.org This browser supports WebSocket.
/html5/websockets/)
WebSocket Protocol
(http://datatracker.ietf.org Location: Log:
/doc/rfc6455/?include_text=1) ws://echo.websocket.org
Use secure WebSocket (TLS)

Connect Disconnect

Message:
Rock it with HTML5 WebSocket

Send

17 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html> Count numbers:
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br /><br />

<script>
var w;

function startWorker()
{
if(typeof(Worker)!=="undefined")
{
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
w.onmessage = function (event) {

document.getElementById("result").innerHTML=event.data;
};
}
else
{

18 of 77

Audio Define un contenido de sonido
VideoDefine un contenido de video
Source Define múltiples opciones para audio o video
embedContenedor para una aplicación externa o contenido
interactivo (un plug in)
TrackDefine track de texto (subtítulos)

19 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html>
<body>

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

</body>
</html>


20 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

</body>
</html>


21 of 77

Transformaciones
Transiciones
Animaciones
Media Queries

22 of 77

Trasladar
Escalar
Rotar
Skew (oblicuar, torcer)
Matriz de transformación
Perspectiva
Ninguna

div{
transform:transformacion_a_aplicar;
-ms-transform:transformacion_a_aplicar; /* IE 9 */
-moz-transform:transformacion_a_aplicar; /* Firefox */
-webkit-transform:transformacion_a_aplicar; /* Safari and Chrome */
-o-transform:transformacion_a_aplicar; /* Opera */

23 of 77

translate(x,y), translateX(x), translateY(y), translateZ(z)
translate3d(x,y,z) (no soportado por todos los browsers)

24 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

CSS Property: Result:
myDIV
transform:

translate(10px)
translate(20px)
translate(20px,10px)
translate(-25px,-25px)
none

CSS Code:
#myDIV
{
background-color:lightblue;
transform:translate(10px);

scale(x,y),scaleX(x),scaleY(y),scaleZ(z),
scale3d(x,y,z)(no soportado por todos los browsers)

25 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

myDIV
transform:

scale(1.1,1.1)
scale(1.5,1.5)
scale(2,2)
scale(2,3)
scale(0.5,2)
none

CSS Code:
#myDIV
{
transform:scale(1.1);

rotate(angle),rotateX(angle),rotateY(angle),rotateZ(angle)
rotate3d(x,y,z,angle)ej ej completo

26 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

myDIV
transform:

rotate(10deg)
rotate(20deg)
rotate(30deg)
rotate(40deg)
rotate(45deg)
rotate(50deg)
rotate(60deg)
rotate(70deg)
rotate(80deg)
rotate(90deg)
rotate(100deg)
rotate(110deg)
rotate(120deg)
rotate(130deg) CSS Code:
rotate(140deg) #myDIV
rotate(150deg) {
rotate(160deg)
transform:rotate(10deg);
rotate(170deg)

skew(x-angle,y-angle),skewX(angle),skewY(angle)

27 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

myDIV
transform:

skew(10deg,10deg)
skew(20deg,20deg)
skew(30deg,30deg)
skew(40deg,40deg)
skew(45deg,45deg)
skew(50deg,50deg)
skew(60deg,60deg)
skew(70deg,70deg)
skew(80deg,80deg)
skew(90deg,90deg)
skew(100deg,100deg)
skew(110deg,110deg)
skew(120deg,120deg)
skew(130deg,130deg) CSS Code:
skew(140deg,140deg) #myDIV
skew(150deg,150deg) {
skew(160deg,160deg)
transform:skew(10deg,10deg));
skew(170deg,170deg)

transform: perspective( 400px ) ; perspective: 400px;

28 of 77

Perspective 1
#red .box {
background-color: red;
transform: perspective( 600px ) rotateY( 45deg );
}

#blue {
perspective: 600px;
}

#blue .box {
background-color: blue;
transform: rotateY( 45deg );
}

Sorry, your browser does not support CSS 3D transforms. Try viewing this page in Safari, Chrome, Firefox Aurora, or on an iOS device.

Example for Intro to CSS 3D transforms by David DeSandro

matrix(n,n,n,n,n,n),matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

29 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS
my
DI
V
transform:

matrix(0.866,0.5,-0.5,0.866,0,0)
matrix(0.866,0.5,-0.6,0.866,0,0)
matrix(0.866,0.5,-0.7,0.866,0,0)
matrix(0.866,0.5,-0.8,0.866,0,0)
matrix(0.866,0.6,-0.8,0.866,0,0)
matrix(0.866,0.7,-0.8,0.866,0,0)
matrix(0.866,0.8,-0.8,0.866,0,0)
matrix(0.786,0.8,-0.8,0.866,0,0)
matrix(0.686,0.8,-0.8,0.866,0,0)
matrix(0.586,0.8,-0.8,0.866,0,0)
matrix(0.586,0.8,-0.8,0.786,0,0)
matrix(0.586,0.8,-0.8,0.686,0,0)
matrix(0.586,0.8,-0.8,0.586,0,0)
matrix(0.586,0.8,-0.8,0.586,10,0) CSS Code:
matrix(0.586,0.8,-0.8,0.586,20,0) #myDIV
matrix(0.586,0.8,-0.8,0.586,30,0) {
matrix(0.586,0.8,-0.8,0.586,40,0)
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
matrix(0.586,0.8,-0.8,0.586,40,10)

#transformedObject {
transform: matrix(0.9, -0.05, -0.375, 1.375, 220, 20);

}

30 of 77

Se aplica la transformación a cada punto del elemento,
incluyendo el contenido
ejemplo completo

31 of 77

Se ejecutan al realizar un cambio en alguna propiedad de un
objeto
transition-property: Propiedad sobre la cual se va a aplicar la transición
transition-duration: Tiempo de duración de la transición. Default 0
transition-timing-function: Efecto temporal que se va a aplicar. Default "ease"
transition-delay:Tiempo de espera antes de empezar la transición. Default 0
transition: permite definir las propiedades anteriores en una sola línea

32 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html> Note: This example does not work in Internet Explorer.
<head>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear; Hover over the div element above, to see the transition effect.
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
Note: The transition effect will wait 2 seconds before starting.
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;

33 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<head>
div
{
width:100px;
height:100px;
background:red;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s; Hover over the div element above, to see the transition effect.
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
Note: The transition effect will wait 2 seconds before starting.
-o-transition:width 1s linear 2s;
}

div:hover
{
width:200px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet

34 of 77

Define comportamiento similar a transiciones encadenadas sobre
las propiedades de estilos de un objeto
@keyframes especifica la animación
animation-name especifica el nombre de la animación definida por @keyframes
animation-duration tiempo en segundos o milisegundos para completar el ciclo de
animación. Default 0
animation-timing-function Análogo al caso de transicion. Default "ease"
animation-delay Análogo al caso de transicion. Default 0
animation-iteration-count cantidad de veces que se ejecuta la animación. Default 1

35 of 77

animation-direction Especifica si la animación de debe o no ejecutar en reversa o ciclos
alternados. Default "normal"
animation-play-state especifica si la animación está ejecutando o pausada. Default
"running"
animation Forma corta de especificar las propiedades anteriores, excepto animation-
play-state

Definición @keyframes

@keyframes animationname {keyframes-selector {css-styles;}}

animationname Requerido. Define el nombre de la animación.
keyframes-selector Requerido. guía para el keyframe en el momento de la animación.
Valores permitidos:
0-100%
from (lo mismo que 0%)
to (lo mismo que 100%)
css-styles Requerido. Una o más propiedades css válidas

36 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<head>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}


37 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html> ote: This example does not work in Internet Explorer.
<head>
div Note: When an animation is finished, it changes back to its
{ original style.
width:100px;
height:100px;
background:red;
}

@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}

{
0% {background:red;}
25% {background:yellow;}

38 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<head>
div
{
width:100px;
height:100px;
background:red;
position:relative;
}

@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

{

39 of 77

MÁS EJEMPLOS CSS3

40 of 77

This is a demo, learn how it works or take a peek at the CSS behind it. Fork on Github.

Accordion Demo

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

41 of 77

portfolio arte blog vínculos contacto contact

Program
Prepare for a
Career in 3D
Animation at
Tribeca
Flashpoint!
www.TribecaFlashpoint…

The Entry I Didn’t Submit To Js1k
1k Rose
This blog is for sale
Trabajar para Motorola
I don’t want a chrome anymore
How I did the 1kb Christmas Tree
Relighting Sylvia
My Trip To Germany
Dancing Typography
Pure CSS3 Page Flip Effect
A Tribute to The Beatles

42 of 77

s T
rm Ha h is d
sfo
ran e ye esi
s a gn
3 T th nd i
SS k to us s bas
h C ac es
w it o b c le . the ed on
ted . G ti Gr
au one b
ea aper 3 ar
r p
ec S b
Dr lau W y Pa
ub Sand n CS
c s oid u
A cs Ma Sa eb a l

T w n b i d r i e
h r o t d
d gent

H n d w th , a sh a r d

is y t - e e i f e . . O r s
ns nd

a
an A

is k o h s o l r on
(a e f s e n h
fon

t h . I -r a n o pr u e a i f h .
s y os ea s e
id o e s o t
er

lu s c a y P

e t c n l o e s h a se e
a rp p l t
ts.
Us

n

b o do gy e ve f r
p d a m f in

lo n m . n
u , b

e e n a b p

g ta ) F t e a r g f e
a r l
d

o i n t h ee d n y i v rs
f s o l fo t e t
h ms
e e

Z m u f r hi h o
h

o o g re y n i
i

l e h

lt s h e o g m
a t t
n l y s t o u r t o if
"D r on u o
u a n c se w n
L d o li e
a m n
c
"
i

t
Ca

o e
te

t
←
go
Ge rie
Te n e r
s s er
ch al
ow
Br
no An
l o no Yes, this is a
CS gi e u n s- E! n d
Fo S
s ce
os I scrollbar, and yes,
C r i n a s b em e t h S 3
m e o
nt en it works. If you are
HT s ts
ed en i t h n a d C
S
M using an older
L
a n c E v d a bi n g oa n c eS S version of Chrome
Im
ag
HT
M
L5
d v 3 — t h a nw o r k a div l e C
A S on on use ult p or Safari, you may
Ja e
C Sl a s t m i nlg p e r sn g e . . . .
va s m not see the
XM S k
L c ri p or e o usi or scrollbars, but they
t e w
T h n t de v o ut M L5 do work.
pe elp ith ead M
SV
G
s
h w R HT Unfortunately, it
t o ct s ie s. er doesn't appear in
ws
fe t
ef per
p ro ro rop
B D
Opera :-(

o ss nd
Cr g a
a
Dr

43 of 77

This is a demo, learn how it works. Fork on Github.

Permite definir una visualización selectiva
según la pantalla/viewport/media del dispositivo que está viendo el sitio
Si el dispositivo cumple la regla de estilo, se aplica (simplemente true o false)
Soporta conectores lógicos "and" "not" y "," (or)
MEDIAS (dispositivos) EN HTML4:
‘aural’, ‘braille’, ‘handheld’, ‘print’, ‘projection’, ‘screen’, ‘tty’, ‘tv’
MEDIAS CSS2:
CSS2 define la misma lista, pero ‘aural’ es deprecado y agrega ‘embossed’, ‘speech’ y ‘all’

46 of 77

Es el mismo comportamiento, simplemente agrega más valores posibles
width / height (con prefijos opcionales "min-" y "max-") aplicables a display/viewport
Example: media="screen and (min-width:500px)"

device-width/device-height("min-" y "max-") ancho/alto de PANTALLA/PAPEL.
Example: media="screen and (device-height:500px)"
orientation: "portrait" or "landscape"

Example: media="all and (orientation: landscape)"

aspect-ratio: ("min-" and "max-") Relación entre ancho y alto del display/viewport

Example: media="screen and (aspect-ratio:16/9)"

device-aspect-ratio: ("min-" and "max-") Ídem pero con la relación ancho/alto del dispositivo

CSS3 Media queries (cont)

48 of 77

color: "min-" and "max-" :bits por color del display.
Example: media="screen and (color:3)"
color-index: ("min-" and "max-") número de colores que el dispositivo puede soportar.
monochrome: ("min-" and "max-") bits por pixel buffer monocromo.
Example: media="screen and (monochrome:2)"
resolution:(dpi or dpcm) ("min-" and "max-")densidad del display/papel.
Example: media="print and (resolution:300dpi)"
scan:("progressive" and "interlace") método de escaneo del display de tv
Example: media="tv and (scan:interlace)"
grid:("1" ó "0") si el dispositivo de salida es una grilla o mapa de bits "1" para grid, and "0"
cualquier otro.
Example: media="handheld and (grid:1)"

El foco de las media queries está puesto en el "Responsive web design"

49 of 77

Pepper Digital Responsive Demo

Home
About Responsive Design
Gallery
Get in touch

Evolve your website - make it responsive.
Responsive websites adapt seamlessly to new browsing habits, bringing your content cost-effectively to more people.

Intrigued? This site is responsive - have a play.
Stretch it. Squeeze it.

Grab the corner of your web browser and make the window bigger or smaller – you’ll see the site layout change as you go.

Try it on a smartphone.

Got an iPad, iPhone or a recent Android or Blackberry? If not, ask (nicely) to borrow one and load the demo site.

Rotate it. Flip it.

Now try rotating the smartphone or tablet and watch the site adapt to a different orientation.

Want to find out more?
Contact us to find out how responsive web design can help your business.

50 of 77

Frankie Roberto A‑Z Index

Responsive text
Some websites now contain 'responsive images'. These scale (or crop) depending upon your screen's viewing area, so the image sizes
remain appropriate whether you're looking at the website on a mobile phone, or on a huge flat screen monitor.

This is an example of responsive text.

The amount of textual detail scales relative to your screen size.

The effect is achieved using simple HTML class names and CSS media queries which show or hide the content depending upon the
current screen width.

It's a bit of an experiment, and I'm not really sure how useful it really is, but I think it's an interesting idea.

It could also perhaps be combined with some form of a user interface that allows you to control how much text you want to read. This
might be really useful for news articles, for instance – you could decide whether to read full quotes and a detailed backstory, or just the
gist.

+50 Recommend this on Google

Published on Wednesday 15 February 2012, at 22:31 GMT

51 of 77

Variables: Objetos:

var name='pepe';
"html5, css3 y JS",
"Presentación en html"
Funciones:

function (p){...}

"CLASES"
Arreglos:

];

52 of 77

Como objeto literal:

var presentacion = {
this.titulo = 'HTML5,CSS3 Y JS';
this.tipo = 'Presentación';
this.autor = 'F.Ferrero';
this.getInfo = function() {
return this.titulo +
' Dictado por: ' + this.author +
' tipo de clase:' this.type;
};
}
alert (presentacion.getInfo());

No hay necesidad de instanciación por new (LA CLASE YA ESTÁ EN MEMORIA)

53 of 77

Como funciones:

'Presentación', 'F.Ferrero');

54 of 77

¿Cómo evitar sobreescribir una clase existente?, por ej, de otra librería

CapabilityNetCentric= CapabilityNetCentric || {};
CapabilityNetCentric.Clase= function (title,type,author) {
this.titulo = title;this.tipo = type;this.autor = author;
this.getInfo = function() {
return this.titulo +
' Dictado por: ' + this.author +
' tipo de clase:' this.type;
};
}

var presentación=new CapabilityNetCentric.Clase('HTML5,CSS3 Y JS','Presentación', 'F.Ferrero');
alert (presentacion.getInfo());

55 of 77

Canvas
2D
WebGL
DOM
Gráficas basadas en Node Tree (html standard) D3
Estrategias para armado de documento óptimo Reflow
Debugging avanzado

56 of 77

W3SCHOOLS BOOKS

New Books:
HTML, CSS

Your Result:
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

</script>

</body>
</html>


57 of 77

Overview Examples Documentation Source

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to See more examples.

life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of
modern browsers without tying yourself to a proprietary framework, combining powerful visualization

58 of 77

Para minimizar reflows, conviene agrupar las operaciones que
disparan el repaint
function paintSlow() {
var left1 = $('#elem1').css('left');
$('#otherElem1').css('left', left);

59 of 77

}

function paintFast() {

}

60 of 77

Cartografía
datos visualizados de manera intuitiva utilizando
geolocalización cartodb philogl
Accesibilidad Voice-search ; Text to speech
Frameworks de inyección de dependencias Backbone

61 of 77

CartoDB
Tour Maps Developers Pricing Sign in

Map, analyze and build applications with your data.
Sign up now - it's free! -

Create dynamic maps with ease.

Upload and visualize your data within minutes, and share your stories on the internet.

Learn more

Analyze your data with the power of PostGIS.

Use SQL based spatial operations to tell stories, generate new insights or build business inteligence.

Learn more

Build location aware applications.

Our rich APIs reduce development time for building web and mobile applications.

Learn more

Featured use case // Taxono.my

62 of 77

Home Demos API Docs Discuss Blog About

Explore Wind Patterns
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development.
Download
Current Release: 1.5.1
Features

Idiomatic JavaScript

Ejemplo de Chrome voice Search
<input type="text" name="s" id="s" x-webkit-speech="" onwebkitspeechchange="alert(this.value);">

63 of 77

Demo
Text:

Amplitude:

Pitch:

Speed:

Word gap:

This demo is 100% clientside JavaScript. It users eSpeak, an open source speech synthesizer, which was compiled from C++
to JavaScript using Emscripten. The project page source code for this demo can be found here.

Browser requirement:

65 of 77

Backbone.js gives structure to web applications by providing models with key-value
binding and custom events, collections with a rich API of enumerable functions, views
with declarative event handling, and connects it all to your existing API over a RESTful
JSON interface.

The project is hosted on GitHub, and the annotated source code is available, as well as
an online test suite, an example application, a list of tutorials and a long list of real-world
projects that use Backbone. Backbone is available for use under the MIT software
license.

You can report bugs and discuss features on the GitHub issues page, on Freenode IRC
in the #documentcloud channel, post questions to the Google Group, add pages to the
wiki or send tweets to @documentcloud.

Backbone is an open-source component of DocumentCloud.

66 of 77

Amplia comunidad de desarrolladores avanzados.
Experiencia de usuario rica.
Tecnologías open source.
Curva de aprendizaje de cortos plazos.
Alta escalabilidad con sólo instalar o actualizar el browser.
Constante evolución

67 of 77

Evolución muy rápida;
Difícil adaptar grandes equipos
Métricas difícilmente adaptables al cambio de paradigma
Cumplir con certificaciones:
Seguridad
Estándares de trazabilidad

68 of 77

Node.js

BBDD NoSQL

69 of 77

Mismo lenguaje tanto clientside como server
Curva de aprendizaje mínima.
Rápida implementación.
Reutilización de buenas prácticas.
Altamente escalable (host resolver / balanceo)
Descentralización de datos.
Bajo costo de implementación.
Fácil aprendizaje.
Creación de datos ad hoc.

70 of 77

Escasa madurez como herramienta consolidada
Necesarios plugins para extender funcionalidad no standard.
Tuning
Poca familiaridad con el paradigma

71 of 77

Aplicaciones híbridas con look & feel símil nativos Cordova

72 of 77

About Contribute Mailing List Download

Apache Cordova is a
platform
for building native mobile
applications using HTML,
CSS
and JavaScript

73 of 77

Existen Herramientas que permiten establecer un standard de calidad en el código:
Lint:
JSLint. Herramienta orientada a la detección de posibles problemas (Warnings).
JSHint. Similar a JSLint, pero orientado a las convenciones de trabajo en grupo.
Orientado a Testing (TDD):
SeleniumHerramienta para armar test units ejecutables en todos los browsers instalados en la
pc.
Sauce Versión "cloud" de selenium.

74 of 77

Minify:
Google Closure CompilerHerramienta que transforma nuestro
código en uno más optimo
Uglify Herramienta basada en node.js que permite, además de
minimizar el código, hacer "beautify" de un código ya
comprimido
Polyfills:
ModernizrHerramienta para agregar funcionalidad a navegadores
que no la tienen.(Ej, IE y Android browser)

75 of 77

Este enfoque de desarrollo provee alternativas ágiles y altamente
flexibles
Es necesaria una estandarización de la forma de trabajo
Buenas prácticas
Estudio de patrones de diseño aplicables
Mucha documentación
Comunidad de colaboración
Frameworks y herramientas nuevas constantemente

76 of 77

facundo.a.ferrero@accenture.com

@facundo_ferrero

77 of 77

Html5, css3 y js

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

En vedette

En vedette (20)

Similaire à Html5, css3 y js

Similaire à Html5, css3 y js (20)

Dernier

Dernier (20)

Html5, css3 y js