Html5, css3 y js
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Html5, css3 y js

on

  • 3,079 views

Presentación introductoria a html5, css3 y js, con algunas herramienta útiles

Presentación introductoria a html5, css3 y js, con algunas herramienta útiles
Version interactiva : http://facundoferrero.com.ar/presentacion/ (sin errores :D)

Statistics

Views

Total Views
3,079
Views on SlideShare
3,079
Embed Views
0

Actions

Likes
1
Downloads
116
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5, css3 y js Presentation Transcript

  • 1. 1 of 77
  • 2. 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ácticas2 of 77
  • 3. 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 web3 of 77
  • 4. 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
  • 5. 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 yourself5 of 77
  • 6. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax Your Result: <!DOCTYPE html> <html> Quantity (between 1 and 5): <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> Edit the code above and click to see the result. W3Schools.com - Try it yourself6 of 77
  • 7. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax Your Result: <!DOCTYPE html> <html> Add your homepage: <body> <form action="demo_form.asp"> Add your homepage: <input type="url" name="homepage" /><br /> <input type="submit" /> </form> </body> </html> Edit the code above and click to see the result. W3Schools.com - Try it yourself7 of 77
  • 8. 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 Cauchys Integral Formula f(z)8 of 77
  • 9. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax 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> Edit the code above and click to see the result. W3Schools.com - Try it yourself9 of 77
  • 10. 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
  • 11. "applet". Se reemplaza por "object" Relacionados con formateo de estilos (center,big,strike) "frames", "frameset" y "noframes" Lista completa11 of 77
  • 12. 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
  • 13. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax 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> Edit the code above and click to see the result. W3Schools.com - Try it yourself13 of 77
  • 14. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax 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> Edit the code above and click to see the result. W3Schools.com - Try it yourself14 of 77
  • 15. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax 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> Edit the code above and click to see the result. W3Schools.com - Try it yourself15 of 77
  • 16. 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ófonos16 of 77
  • 17. 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 Send17 of 77
  • 18. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax 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 { Edit the code above and click to see the result. W3Schools.com - Try it yourself18 of 77
  • 19. 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
  • 20. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax 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> Edit the code above and click to see the result. W3Schools.com - Try it yourself20 of 77
  • 21. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax 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> Edit the code above and click to see the result. W3Schools.com - Try it yourself21 of 77
  • 22. Transformaciones Transiciones Animaciones Media Queries22 of 77
  • 23. 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
  • 24. translate(x,y), translateX(x), translateY(y), translateZ(z) translate3d(x,y,z) (no soportado por todos los browsers)24 of 77
  • 25. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax CSS Property: Result: myDIV transform: translate(10px) translate(20px) translate(20px,10px) translate(20px,20px) translate(50px,50px) translate(100px,100px) 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
  • 26. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax CSS Property: Result: 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 { background-color:lightblue; transform:scale(1.1); rotate(angle),rotateX(angle),rotateY(angle),rotateZ(angle) rotate3d(x,y,z,angle)ej ej completo26 of 77
  • 27. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax CSS Property: Result: 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) { background-color:lightblue; rotate(160deg) transform:rotate(10deg); rotate(170deg) skew(x-angle,y-angle),skewX(angle),skewY(angle)27 of 77
  • 28. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax CSS Property: Result: 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) { background-color:lightblue; skew(160deg,160deg) transform:skew(10deg,10deg)); skew(170deg,170deg) transform: perspective( 400px ) ; perspective: 400px;28 of 77
  • 29. 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
  • 30. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax my DI V CSS Property: Result: 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) { background-color:lightblue; 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
  • 31. Se aplica la transformación a cada punto del elemento, incluyendo el contenido ejemplo completo31 of 77
  • 32. 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ínea32 of 77
  • 33. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax Your Result: <!DOCTYPE html> <html> Note: This example does not work in Internet Explorer. <head> <style type="text/css"> 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; Edit the code above and click to see the result. W3Schools.com - Try it yourself33 of 77
  • 34. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax Your Result: <!DOCTYPE html> <html> Note: This example does not work in Internet Explorer. <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; 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 Edit the code above and click to see the result. W3Schools.com - Try it yourself34 of 77
  • 35. 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 135 of 77
  • 36. 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álidas36 of 77
  • 37. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax Your Result: <!DOCTYPE html> <html> Note: This example does not work in Internet Explorer. <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;} } Edit the code above and click to see the result. W3Schools.com - Try it yourself37 of 77
  • 38. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax Your Result: <!DOCTYPE html> <html> ote: This example does not work in Internet Explorer. <head> <style type="text/css"> div Note: When an animation is finished, it changes back to its { original style. 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;} Edit the code above and click to see the result. W3Schools.com - Try it yourself38 of 77
  • 39. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax Your Result: <!DOCTYPE html> <html> Note: This example does not work in Internet Explorer. <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 */ { Edit the code above and click to see the result. W3Schools.com - Try it yourself39 of 77
  • 40. MÁS EJEMPLOS CSS340 of 77
  • 41. 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 641 of 77
  • 42. 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 Beatles42 of 77
  • 43. 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 doesnt appear in ws fe t ef per p ro ro rop B D Opera :-( o ss nd Cr g a a Dr43 of 77
  • 44. 44 of 77
  • 45. This is a demo, learn how it works. Fork on Github.
  • 46. 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
  • 47. <link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css"> <link rel="stylesheet" type="text/css" media="print" href="serif.css"> dentro de la hoja de estilo, se puede definir un estilo selectivo para una pantalla @media screen { * { font-family: sans-serif } } @media all and (min-width:500px) { … } @media (min-width:500px) { … } /*(Hacen lo mismo)*/47 of 77
  • 48. 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
  • 49. 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
  • 50. 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
  • 51. Frankie Roberto A‑Z Index Responsive text Some websites now contain responsive images. These scale (or crop) depending upon your screens viewing area, so the image sizes remain appropriate whether youre 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. Its a bit of an experiment, and Im not really sure how useful it really is, but I think its 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 GMT51 of 77
  • 52. Variables: Objetos: var name=pepe; "html5, css3 y JS", "Presentación en html" Funciones: function (p){...} "CLASES" Arreglos: ];52 of 77
  • 53. 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
  • 54. Como funciones: Presentación, F.Ferrero);54 of 77
  • 55. ¿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
  • 56. Canvas 2D WebGL DOM Gráficas basadas en Node Tree (html standard) D3 Estrategias para armado de documento óptimo Reflow Debugging avanzado56 of 77
  • 57. W3SCHOOLS BOOKS New Books: HTML, CSS JavaScript, and Ajax 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> Edit the code above and click to see the result. W3Schools.com - Try it yourself57 of 77
  • 58. 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 visualization58 of 77
  • 59. 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
  • 60. 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
  • 61. Cartografía datos visualizados de manera intuitiva utilizando geolocalización cartodb philogl Accesibilidad Voice-search ; Text to speech Frameworks de inyección de dependencias Backbone61 of 77
  • 62. CartoDB Tour Maps Developers Pricing Sign in Map, analyze and build applications with your data. Sign up now - its 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.my62 of 77
  • 63. 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
  • 64. 64 of 77
  • 65. 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
  • 66. 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
  • 67. 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ón67 of 77
  • 68. 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 trazabilidad68 of 77
  • 69. Node.js BBDD NoSQL69 of 77
  • 70. 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
  • 71. Escasa madurez como herramienta consolidada Necesarios plugins para extender funcionalidad no standard. Tuning Poca familiaridad con el paradigma71 of 77
  • 72. Aplicaciones híbridas con look & feel símil nativos Cordova72 of 77
  • 73. About Contribute Mailing List Download Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript73 of 77
  • 74. 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
  • 75. 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
  • 76. 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 constantemente76 of 77
  • 77. facundo.a.ferrero@accenture.com @facundo_ferrero77 of 77