Actualizarse Web UI

Ademas de HTML5 / CSS3, responsive, UX, framworks MVC, javascritp, Jquery ufffffffffffffffffffffffffffff me agoté, se puede saber todo?, no se peeeeeeero aca hay links para ver si tenes tiempo [quien tuviera amplia disponibilidad del mismo!] y ganas, aptitudes y sapiensia para usarlos.

JAVASCRIPT
Este es un tutorial online muy completo que va por todos los puntos esenciales de Javascript, a su derecha pueden ver que tiene una tabla de contenidos para ir seleccionando el tema y al final de cada página también pueden navegar hacia el siguiente. Les recomiendo que jueguen con los ejemplos.
http://www.learn-javascript-tutorial.com/JavaScriptBasics.cfm#.UWRV_UlhMQc

Coding standards en Javascript
https://github.com/rwldrn/idiomatic.js (disponible en español)

OOP, Mixins y otras yerbas
Links a modo de introducción al prototipado:
http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/

Y OOP:
http://killdream.github.io/blog/2011/10/understanding-javascript-oop/index.html
Mixins:
http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/

Para una lectura más avanzada, les dejo el genial libro de Addy Osmani (reverencia):
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
En este libro pueden encontrar incluso un vistazo de introducción a JS frameworks y templates. Es largo, como para ir leyendo de a poco, pero es muy recomendable. Como para extender el tema de patrones en Javascript, les paso este link que también incluye patrones en jQuery:
http://shichuan.github.io/javascript-patterns/

Lecturas para profundizar conocimientos en HTML y CSS
http://learn.shayhowe.com/html-css/
http://reference.sitepoint.com/css/boxmodel
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

HTML5/CSS3:
http://diveintohtml5.info/semantics.html
http://slides.html5rocks.com/#landing-slide
http://playground.html5rocks.com/#localstorage
http://html5doctor.com/native-drag-and-drop/

AMD, frameworks y templates
Comenzando por frameworks:
http://michaux.ca/articles/mvc-architecture-for-javascript-applications
http://documentcloud.github.io/backbone/
http://ricostacruz.com/backbone-patterns/
Y otro genial libro de Addy Osmani (reverencia) sobre desarrollo de apps usando Backbone:
https://github.com/addyosmani/backbone-fundamentals

Una buena lectura sobre AMD es recomendada, para optimizar la carga de los Javascript:
http://snook.ca/archives/javascript/no-love-for-module-pattern
http://unscriptable.com/code/Using-AMD-loaders/#0
http://requirejs.org/
http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/

And a bit of knowledge about different templating tools in Javascript:
http://handlebarsjs.com/
http://documentcloud.github.io/underscore/ (recomiendo que le peguen un vistazo a las distintas funcionalidades que provee Underscore para manejo de objetos y arrays, son muy útiles)
http://akdubya.github.io/dustjs/
http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more
Y una buena lectura comprativa de distintos templates:
http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more

Como para resumir todas estas herramientas, les dejo este buen artículo de un arquitecto que cuenta como fue construyendo su aplicación:
http://aaronhardy.com/javascript/javascript-architecture-the-basics/

BOOTSTRAP
buen tutorial que explica todas las capacidades de bootstrap paso por paso:
http://www.w3resource.com/twitter-bootstrap/tutorial.php
Este tiene videos:
http://okwucreative.com/webdesign/2-bootstrap/bootstrap-01-intro-grid/
Y otros más:
http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-introduction/

Resumiendo, bootstrap sigue una filosofía similar a jQuery UI, en donde define un conjunto de clases a ser usadas en el sitio, con estilos básicos que pueden sobreescritos con estilos propios de tu sitio, y estas mismas clases son usadas por el javascript para hacer tu diseño responsive, moviendo y acomodando cada sección.

Regressive enhancement, responsive design y jQuery Mobile
Regressive enhancement: soportar nuevas características de HTML5/CSS3 en navegadores viejos
http://www.sitepoint.com/regressive-enhancement-with-modernizr-and-yepnope/

Responsive design: diseño que se ajusta al tamaño de pantalla, permitiendo que un diseño pueda ser visto tanto desde un browser desktop como desde uno mobile
http://alistapart.com/article/responsive-web-design
http://www.lukew.com/ff/entry.asp?1514
http://www.maxdesign.com.au/articles/css-layouts/
http://mediaqueri.es/

jQuery Mobile: versión lightweight de jQuery para mobile, que provee una serie de widgets y soporte de eventos
http://jquerymobile.com/demos/1.1.0-rc.1/docs/about/getting-started.html

CROSSBROWSING
http://www.browserstack.com/automated-browser-testing-api
http://crossbrowsertesting.com/
http://www.modern.ie/es-es
http://www.quirksmode.org.

Rapidez de Performance, Carga y Stress del sitio en cuestion.
http://loads.in/
https://developers.google.com/speed/pagespeed/
http://gtmetrix.com
algunas extensiones como “Chrome Inspector”, “Firebug”, “YSLOW”

 

 

uuufffffffff ahi termine, me falta mucho!

About The Author

Diseñadora grafica / Desarrolladora web / wordpress themes y mas

No Comments