Html5, css3 y js

1 of 77

HTML5, tags nuevos y deprecadosCSS3 animaciones, transformaciones, Media QueriesAdaptabilidad de sitio para mobile browsersPatrones de diseño JSJavascript Client Side (DOM)Javascript Server Side (Node.js y NoSQL)Aplicaciones mobile nativas/híbridas basadas en JSParadigmas y tendencias para buenas prácticas

2 of 77

HTML5 es la evolución de HTML4.01Pero...No es un lenguaje propiamente dicho, sino que es una conjunciónde tecnologías que fueron volviendose estándares con laevolució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

<!DOCTYPE html><html><body>

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

</body></html>

Your Result:

E-mail:

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

W3SCHOOLS BOOKS

New Books:

HTML, CSS

JavaScript, and Ajax

5 of 77


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

</body></html>

Your Result:

Quantity (between 1 and 5):


W3SCHOOLS BOOKS

New Books:

HTML, CSS


6 of 77


<form action="demo_form.asp"> Add your homepage: <input type="url" name="homepa ge" /><br /> <input type="submit" /></form>

</body></html>

Your Result:

Add your homepage:


W3SCHOOLS BOOKS

New Books:

HTML, CSS


7 of 77

Beautiful math in all browsers

MathML SamplesThis 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 FormulaThe Quadratic Formula

Cauchy's Integral FormulaCauchy's Integral Formula

x =−b ± − 4acb2− −−−−−−

√

2a

f(z)

8 of 77


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

Your Result:

My first SVG


W3SCHOOLS BOOKS

New Books:

HTML, CSS


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, sufinalidad y las relaciones que existen.No tienen especial impacto en la visualización, se orientan abuscadores.Permite incorporar a las páginas archivos RDF / OWL (conmeta información) para describir relaciones entre los términosutilizados.

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

<!DOCTYPE HTML><html><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>

Your Result:

Drag the W3Schools image into the rectangle:


W3SCHOOLS BOOKS

New Books:

HTML, CSS


13 of 77

<!DOCTYPE html><html manifest="demo_html.appcache"><body><script type="text/javascript" src="demo_time.js"></script><p id="timePara"><button onclick="getDateTime()">Ge t 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 reload the page. The script and the image should st ill work.</p></body></html>

Your Result:

Try opening this page, then go offline, and reload the page. Thescript and the image should still work.


W3SCHOOLS BOOKS

New Books:

HTML, CSS


14 of 77

<!DOCTYPE html><html><body><p id="demo">Click the button to get your coordinat es:</p><button onclick="getLocation()">Try It</button><script>var x=document.getElementById("demo");function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPositi on); } else{x.innerHTML="Geolocation is not supported by this browser.";} }function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitu de + "<br />Longitude: " + position.coords.longitude; }</script></body>

Your Result:

Click the button to get your coordinates:


W3SCHOOLS BOOKS

New Books:

HTML, CSS


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

(index.html)Firefox 17Windows

(echo.html )

Does your browsersupport WebSocket?

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

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

Links

Home (index.html)

Demos (demos.html)

Echo Test (echo.html)

Demos on the Web

(demos.html)

All About WebSocket

(aboutwebsocket.html)

Benefits of WebSocket

(quantum.html)

WebSocket API (http://dev.w3.org

/html5/websockets/)

WebSocket Protocol

(http://datatracker.ietf.org

/doc/rfc6455/?include_text=1)Location:ws://echo.websocket.org

Use secure WebSocket (TLS)

Connect Disconnect

Message:Rock it with HTML5 WebSocket

Send

Log:

Echo TestThe first section of this page will let you do an HTML5 WebSocket test against the echo server. The secondsection walks you through creating a WebSocket application yourself.

You can also inspect WebSocket messages (http://blog.kaazing.com/2012/05/09/inspecting-websocket-traffic-with-chrome-developer-tools/) using your browser.

Try it out

WebSocket.org (index.html)

Are you plugged in?

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

This browser supports WebSocket.

17 of 77


<p>Count numbers: <output id="result"></output></p><button onclick="startWorker()">Start Worker</butto n> <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.d ata; }; }else {

Your Result:

Count numbers:


W3SCHOOLS BOOKS

New Books:

HTML, CSS


18 of 77

Audio Define un contenido de sonidoVideoDefine un contenido de videoSource Define múltiples opciones para audio o videoembedContenedor para una aplicación externa o contenidointeractivo (un plug in)TrackDefine track de texto (subtítulos)

19 of 77


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

Your Result:


W3SCHOOLS BOOKS

New Books:

HTML, CSS


20 of 77


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

Your Result:


W3SCHOOLS BOOKS

New Books:

HTML, CSS


21 of 77

TransformacionesTransicionesAnimacionesMedia Queries

22 of 77

TrasladarEscalarRotarSkew (oblicuar, torcer)Matriz de transformaciónPerspectivaNinguna

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

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

CSS Property:

transform:

translate(10px)

translate(20px)

translate(20px,10px)




translate(-25px,-25px)

none

Result:

CSS Code:

#myDIV{background-color:lightblue;

transform: translate(10px);

W3SCHOOLS BOOKS

New Books:

HTML, CSS


myDIV

25 of 77

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

CSS Property:

transform:

scale(1.1,1.1)

scale(1.5,1.5)

scale(2,2)

scale(2,3)

scale(0.5,2)

none

Result:

CSS Code:


transform: scale(1.1);

W3SCHOOLS BOOKS

New Books:

HTML, CSS


myDIV

26 of 77

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

CSS Property:

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)

rotate(140deg)

rotate(150deg)

rotate(160deg)

rotate(170deg)

Result:

CSS Code:


transform: rotate(10deg);

W3SCHOOLS BOOKS

New Books:

HTML, CSS


myDIV

27 of 77

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

CSS Property:

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)

skew(140deg,140deg)

skew(150deg,150deg)

skew(160deg,160deg)

skew(170deg,170deg)

Result:

myDIV

CSS Code:


transform: skew(10deg,10deg));

W3SCHOOLS BOOKS

New Books:

HTML, CSS


28 of 77

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

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

29 of 77

CSS Property:

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)

matrix(0.586,0.8,-0.8,0.586,20,0)

matrix(0.586,0.8,-0.8,0.586,30,0)

matrix(0.586,0.8,-0.8,0.586,40,0)

matrix(0.586,0.8,-0.8,0.586,40,10)

Result:

CSS Code:


transform: matrix(0.866,0.5,-0.5,0.866,0,0);

W3SCHOOLS BOOKS

New Books:

HTML, CSS


myDIV

#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 contenidoejemplo completo

31 of 77

Se ejecutan al realizar un cambio en alguna propiedad de unobjeto

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

<!DOCTYPE html><html><head><style type="text/css"> div{width:100px;height:100px;background:red;transition-property:width;transition-duration:1s;transition-timing-function:linear;transition-delay:2s;/* Firefox 4 */-moz-transition-property:width;-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;

Your Result:

Note: This example does not work in Internet Explorer.

Hover over the div element above, to see the transition effect.

Note: The transition effect will wait 2 seconds before starting.


W3SCHOOLS BOOKS

New Books:

HTML, CSS


33 of 77

<!DOCTYPE html><html><head><style type="text/css"> div{width:100px;height:100px;background:red;transition-property:width 1s linear 2s;/* Firefox 4 */-moz-transition:width 1s linear 2s;/* Safari and Chrome */-webkit-transition:width 1s linear 2s;/* Opera */-o-transition:width 1s linear 2s;}

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

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

Your Result:


Hover over the div element above, to see the transition effect.

Note: The transition effect will wait 2 seconds before starting.


W3SCHOOLS BOOKS

New Books:

HTML, CSS


34 of 77

Define comportamiento similar a transiciones encadenadas sobrelas 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 ciclosalternados. 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

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

@keyframes animationname {keyframes-selector {css-s tyles;}}

36 of 77

<!DOCTYPE html><html><head><style type="text/css"> 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;}}

Your Result:



W3SCHOOLS BOOKS

New Books:

HTML, CSS


37 of 77

<!DOCTYPE html><html><head><style type="text/css"> 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{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:green;}}

@-moz-keyframes myfirst /* Firefox */{0% {background:red;}25% {background:yellow;}

Your Result:

ote: This example does not work in Internet Explorer.

Note: When an animation is finished, it changes back to itsoriginal style.


W3SCHOOLS BOOKS

New Books:

HTML, CSS


38 of 77

<!DOCTYPE html><html><head><style type="text/css"> div{width:100px;height:100px;background:red;position:relative;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}

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

@-moz-keyframes myfirst /* Firefox */{

Your Result:



W3SCHOOLS BOOKS

New Books:

HTML, CSS


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

The Entry I Didn’t Submit To Js1k1k RoseThis blog is for saleTrabajar para MotorolaI don’t want a chrome anymoreHow I did the 1kb Christmas TreeRelighting SylviaMy Trip To GermanyDancing TypographyPure CSS3 Page Flip EffectA Tribute to The Beatles

ProgramPrepare for aCareer in 3DAnimation at

TribecaFlashpoint!

www.TribecaFlashpoint…

42 of 77

A cube created with CSS3 Transforms

and cssSandpaper. Go back to the

User Agent M

an CSS3 article.

This design is based on one by Paul

Hayes and uses the Graublau Web and

Droid Sans fonts.

←Yes, this is ascrollbar, and yes,it works. If you areusing an olderversion of Chromeor Safari, you maynot see thescrollbars, but theydo work.Unfortunately, itdoesn't appear inOpera :-(

This is the blog of Zoltan "Du Lac"

Hawryluk. I t contains mostly random

(and not-so-random) thoughts on client

side web technology. Feel free to use

any of the ideas presented for your own

purposes, and i f you have anything to

add, please share. Please forgive him if

he rambles on a bit. Or i f he refers to

himself in the third person.

CategoriesGeneral Announcements

TechnologiesCSSFontsHTML

HTML5ImagesJavaScript

XML

SVG

Advanced Cross-B

rowser

CSS3 — E

ven in IE

!

The last m

onth and a bit has been

spent working on w

orking on a method

to help developers use advanced CSS3

effects w

ithout u

sing mult ip

le CSS

propert i

es. Read M

ore. ..

.

Cross Browser H

TML5

Drag and Drop

43 of 77

44 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

dentro de la hoja de estilo, se puede definir un estilo selectivo para una pantalla

<link rel="stylesheet" type="text/css" media="scree n" href="sans-serif.css"><link rel="stylesheet" type="text/css" media="print " href="serif.css">

@media screen { * { font-family: sans-serif }

}

@media all and (min-width:500px) { … }@media (min-width:500px) { … } /*(Hacen lo mismo)*/

47 of 77

CSS3 Media queries (cont)

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

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

HomeAbout Responsive DesignGalleryGet 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 sizesremain 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 thecurrent 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. Thismight be really useful for news articles, for instance – you could decide whether to read full quotes and a detailed backstory, or just thegist.

+50 Recommend this on Google

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

51 of 77

Variables:

Funciones:

Arreglos:

var name= 'pepe' ;

function (p){...}

];

Objetos:

"html5, css3 y JS" ,

"Presentación en html"

"CLASES"

52 of 77

Como objeto literal:

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

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

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 = a uthor;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

Canvas2DWebGL

DOMGráficas basadas en Node Tree (html standard) D3Estrategias para armado de documento óptimo Reflow

Debugging avanzado

56 of 77


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

Your Result:


W3SCHOOLS BOOKS

New Books:

HTML, CSS


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

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

See more examples.

58 of 77

Para minimizar reflows, conviene agrupar las operaciones quedisparan el repaint

function paintSlow() { var left1 = $( '#elem1' ).css( 'left' ); $( '#otherElem1' ).css( 'left' , left);

59 of 77

var left2 = $( '#elem2' ).css( 'left' ); $( '#otherElem2' ).css( 'left' , left);}

function paintFast() { var left1 = $( '#elem1' ).css( 'left' ); var left2 = $( '#elem2' ).css( 'left' );

$( '#otherElem1' ).css( 'left' , left); $( '#otherElem2' ).css( 'left' , left);}

60 of 77

Cartografíadatos visualizados de manera intuitiva utilizandogeolocalización cartodb philogl

Accesibilidad Voice-search ; Text to speechFrameworks de inyección de dependencias Backbone

61 of 77

CartoDBTour 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

Ejemplo de Chrome voice Search

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

Home Demos API Docs Discuss Blog About

PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development.DownloadCurrent Release: 1.5.1Features

Idiomatic JavaScript

Explore Wind Patterns

63 of 77

64 of 77

Text:

Amplitude:

Pitch:

Speed:

Word gap:

Demo

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 equiposMétricas difícilmente adaptables al cambio de paradigma

Cumplir con certificaciones:SeguridadEstándares de trazabilidad

68 of 77

Node.js

BBDD NoSQL

69 of 77

Mismo lenguaje tanto clientside como serverCurva 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 consolidadaNecesarios plugins para extender funcionalidad no standard.

TuningPoca familiaridad con el paradigma

71 of 77

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

72 of 77

Apache Cordova is aplatform

for building native mobile

applications using HTML,CSS

and JavaScript

About Contribute Mailing List Download

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 nuestrocódigo en uno más optimoUglify Herramienta basada en node.js que permite, además deminimizar el código, hacer "beautify" de un código yacomprimidoPolyfills:ModernizrHerramienta para agregar funcionalidad a navegadoresque no la tienen.(Ej, IE y Android browser)

75 of 77

Este enfoque de desarrollo provee alternativas ágiles y altamenteflexiblesEs necesaria una estandarización de la forma de trabajo

Buenas prácticasEstudio de patrones de diseño aplicables

Mucha documentaciónComunidad de colaboraciónFrameworks y herramientas nuevas constantemente

76 of 77

[email protected]

@facundo_ferrero

77 of 77

Technology

Html5, css3 y js