Upload
facundo-ferrero
View
2.788
Download
14
Embed Size (px)
DESCRIPTION
Presentación introductoria a html5, css3 y js, con algunas herramienta útiles Version interactiva : http://facundoferrero.com.ar/presentacion/ (sin errores :D)
Citation preview
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
<!DOCTYPE html><html><body>
<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):
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
6 of 77
<!DOCTYPE html><html><body>
<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:
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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
<!DOCTYPE html><html><body>
<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
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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.
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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
<!DOCTYPE html><html><body>
<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:
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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
<!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>
Your Result:
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
20 of 77
<!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>
Your Result:
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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(20px,20px)
translate(50px,50px)
translate(100px,100px)
translate(-25px,-25px)
none
Result:
CSS Code:
#myDIV{background-color:lightblue;
transform: translate(10px);
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
#myDIV{background-color:lightblue;
transform: scale(1.1);
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
#myDIV{background-color:lightblue;
transform: rotate(10deg);
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
#myDIV{background-color:lightblue;
transform: skew(10deg,10deg));
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
#myDIV{background-color:lightblue;
transform: matrix(0.866,0.5,-0.5,0.866,0,0);
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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.
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
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.
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
Note: This example does not work in Internet Explorer.
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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.
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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:
Note: This example does not work in Internet Explorer.
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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
<!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>
Your Result:
Edit the code above and click to see the result. W3Schools.com - Try it yourself
W3SCHOOLS BOOKS
New Books:
HTML, CSS
JavaScript, and Ajax
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