2010-06-25

20 Herramientas para valida tus proyectos web.

Validation tools

1.W3C markup validation service

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. This is an exclusive standards check for the document, so other checks are not available.

Checks done on:

  1. Syntax and style analysis – Yes
  2. Source code – Yes

2.CSS validator

Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets.The important thing is if you want to validate your CSS style sheet embedded in an (X)HTML document, you should first check that the (X)HTML you use is valid.

3.Checklink

Check links and anchors in Web pages or full Web sites.This Link Checker looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursively on a whole Web site. For best results, it is recommended to first ensure that the documents checked use Valid (X)HTML Markup and CSS.

4.Feed

This is the W3C Feed Validation Service, a free service that checks the syntax of Atom or RSS feeds.You can validate by URL or Validate by direct input.

5.Mobile checker

This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification. A Web Page is mobileOK when it passes all the tests. And find Is your Web site mobile-friendly?

6.Unicorn

Checks your site for all the general standards and see if there are rooms to improvement. It checks for the XHTML and CSS compatibility.

7.HTML Validator

The WDG HTML Validator is similar in many ways to the W3C HTML Validation Service. Most of the previous differences between the two validators have disappeared with recent development of the W3C validator. The errors reported are the same in virtually all cases.

8.Dr. Watson’s site validation check

Dr. Watson is a free service to analyze your web page on the Internet. Just give the URL of your page and Watson will get a copy of it directly from the web server. Watson can also check out many other aspects of your site, including link validity, download speed, search engine compatibility, and link popularity. It rolls many features into one, so if you are looking for a single stop for checks, this one is the place to be.

List of checks :

  1. Page load time check – Yes
  2. Syntax and style analysis – Yes
  3. Word counts – Yes
  4. Spelling checks – Yes
  5. Link checking – Yes
  6. Search Engine Optimization check – Yes
  7. Incoming links check – Yes
  8. Source code – Yes

9.XML well checker and validator

Use this form to check an XML document for well-formetness and (optionally) validity. External entity references are included, even when not validating.It checks for spaces and syntax errors, while pointing to the line number at which the error was spotted.

10.Robots checker

This tool checks if your Robots.txt file is valid. Thought it may show some exclusions you’ve done as errors, they are good pointers to check if the commands will be misinterpreted or not. Good one and it is simple,powerful and accurate one.

11.URL checker

While it’s important to know if your website is running and your host is providing a good service, it’s even more important to be proactive about getting it back online fast so you don’t lose search engine position, miss out on possible revenue or blow.InternetSupervision™ is a service that monitors the availability of HTML, FTP, SMTP, POP3 email servers), supervises the performance of website and e-commerce transactions (including website forms) and provides website content supervision (cyber-attack monitoring).

11.Web page reports

There are various online services offering automated web page checks. pinkjuice.com/check is just a simple tool generating links to the report pages of some of those services, including emulators, validators, and accessibility checkers.And it’s handy to have a list of all the results pages, for example when sending a status report to a client about a website that’s being worked on.

Accessibility and evaluation tools

12.Webaccessibility checker

This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by everyone. See the Handbook link to the upper right for more about the Web Accessibility Checker.

13.Color contrast

AccessColor tests the color contrast and color brightness between the foreground and background of all elements in the DOM to make sure that the contrast is high enough for people with visual impairments. AccessColor will find the relevant color combination within your HTML and CSS documents rather than requiring you to find each value to input yourself in order to test the contrast between each color combination.

14.Web accessibily evaluation tool-WAVE

WAVE is a free web accessibility evaluation tool provided by WebAIM. It is used to aid humans in the web accessibility evaluation process. Rather than providing a complex technical report, WAVE shows the original web page with embedded icons and indicators that reveal the accessibility of that page.

15.FAE – Functional Accessibility Evaluator

Use this tool to evaluate the functional accessibility of a single web page. It evaluate multiple pages via web crawling,Generate a Sitewide Report that identifies problem pages,Save reports in an account-specific Archived Reports list.

16.Accessibility with style

HERA is a tool to check the accessibility of Web pages according to the specification Web Content Accessibility Guidelines. HERA performs a preliminary set of tests on the page and identifies any automatically detectable errors or checkpoints met, and which checkpoints need further manual verification.

17.Section 508

The Section 508 checking tool automatically compares your HTML code against Section 508 checklist and shows your results quickly. Results are simple to understand too.

18.Adobe PDF conversion

This conversion service will convert to text Adobe PDF files that are in English.By submitting content through these tools, you understand and agree that Adobe may occasionally access the content you submit for purposes of quality control and administration of the conversion service.

Website performance checkers

19.Pingdom tools

The Full Page Test loads a complete HTML page including all objects (images, CSS, JavaScripts, RSS, Flash and frames/iframes). It mimics the way a page is loaded in a web browser.The load time of all objects is shown visually with time bars.

20.Webpage analyzer

Free web site speed test to improve website performance.The script calculates the size of individual elements and sums up each type of web page component. Based on these page characteristics the script then offers advice on how to improve page load time

Cross Browser Testing

21.Browser shots

Browsershots makes screen shots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website’s browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of distributed computers will open your website in their browser. Then they will make screenshots and upload them to our central dedicated servers for your review.

22.IE net renderer

IE NetRenderer allows you to check how a website is rendered by Internet Explorer 7, 6 or 5.5, as seen from a high-speed data center located in Germany.

23.Viewlike

viewlike allows you to check out how your website looks in the most popular resolution formats. It’s all powered by Ajax & PHP so no need to download anything! To Get started just type your URL in the box above. Free to use!

2010-06-24

Class para manupular archivos ODF de OpenOffice con PHP


Esta una clase para trabajar con los archivos ODF del OpenOffice desde el propio PHP.
La clase se llama, odtPHP
Link:
http://www.odtphp.com/index.php?i=tutorials

Recursos para crear Codigo de Barras con PHP

Link a Class o libreria:
http://www.mribti.com/barcode/sample.php
http://www.ashberg.de/php-barcode/download/

Script para la libreria FPDF que genera archivos PDF
http://www.fpdf.org/en/script/script5.php
http://www.fpdf.org/en/script/script27.php
http://www.fpdf.org/en/script/script46.php
http://www.fpdf.org/en/script/script67.php
http://www.fpdf.org/en/script/script68.php
http://www.fpdf.org/en/script/script85.php
http://www.fpdf.org/en/script/script88.php

TCPDF es una Libreria PDF para PHP
http://www.tecnick.com/public/code/cp_dpage.php?aiocp_dp=tcpdf_examples
http://www.tecnick.com/pagefiles/tcpdf/example_050.pdf
http://www.tecnick.com/pagefiles/tcpdf/example_027.pdf



QR-code




http://prgm.spipu.net/php_qrcode
http://www.tecnick.com/pagefiles/tcpdf/example_050.pdf
http://megaui.net/fukuchi/works/qrencode/index.en.html
http://www.kornnuts.com/dev/barcode/qrcode.php
http://www.swetake.com/qr/index-e.html
http://www.java4less.com/barcodes/QRCode/php/demo.shtml
http://translate.google.com.ar/translate?hl=es&sl=auto&tl=es&u=http%3A%2F%2Fwww.qrcode.com%2Findex.html
http://code.google.com/p/qrforall/

AztecCode
http://www.java4less.com/barcodes/AztecCode/php/demo.shtml

MaxiCode
http://www.java4less.com/RMaxiCode-php/demo.shtml

RDataMatrix
http://www.java4less.com/RDataMatrix-php/demo.shtml

RPDF417
http://www.java4less.com/RPDF417-php/demo.shtml

BarCodes 1D: "Code-39, Code-39 (Extended), UPCA, UPCE, EAN-8, EAN-13, CODE-128, EAN-128, Code 11, Code-93, Code-93 extended, Industrial 25, Interleaved 2 of 5 , Matrix 25, Postnet, Codabar and MSI"
http://www.java4less.com/barcodes/1D/php/demo.shtml

2010-06-22

Librerías Javascript para RIA

A continuación detallaré algunas de las librerías que me han parecido interesantes, y que os recomiendo probar para la creación de RIA y llegar al corazón del usuario, pensad siempre que por más funcional que sea una aplicación, si no es usable y agradable al usuario, probablemente no tenga usufructo dicha herramienta.

1 – UKI Framework

UKI es una librería sencilla, potente y muy pequeña que nos permite establecer controles, toolbars, popups, listas, etc. Esta escrita de forma clara, y si has utilizado jQuery alguna vez, no te será nada difícil comprenderla.

UKI Página de Inicio y Descargas »
UKI Controles, Demos y Ejemplos »

2 – Dijit, the Dojo Toolkit

Dijit es un sistema de widgets en capas de Dojo. Si eres nuevo en la experiencia Dojo, Dijit es un buen lugar para empezar. Puedes construir una impresionante interfaz gráfica Web 2.0 con muy poca o ninguna experiencia en JavaScript (aunque saberlo ayuda mucho). Todo Dijit está diseñado para ser accesible a nivel mundial – para dar cabida a los usuarios con diferentes lenguas y culturas, así como aquellos con capacidades diferentes.

Dijit Página de Inicio & Descargas »
Dijit Controles, Demos & Ejemplos »

3 – Yahoo! IU Library

El padre de la interfaz de usuario, con muchas prestaciones y muy popular Yahoo! YUI Library.
YUI se encuentra actualmente en su tercera edición, se actualiza constantemente (tiene una cantidad considerable de desarrolladores), una gran diversidad en componentes, utilidades, módulos y controles. Es uno de los frameworks más completos del mercado.

Biblioteca YUI Página de inicio y Descargas»
Introducción a YUI2 »
Introducción a YUI3 »
YUI3 Controles, Demos y Ejemplos »

4 – XUI

XUI es un ultrapequeño framework Javascript para desarrollar aplicaciones web para móviles.
La razón por la cual XUI es muy pequeño, se debe a la eliminación de todo el código de compatibilidad cruzada entre navegadores que se consideran no esenciales para el desarrollo de aplicaciones móviles. Su objetivo es ser un marco para la primera clase de los navegadores de dispositivos móviles tales como WebKit, Fennec y Opera, con vistas a futuro en estudio para IE Mobile y BlackBerry.

XUI & Página de inicio »Descargas

5 – IUI – iPhone User Interface Framework

IUI, consiste en una librería Javascript, CSS e Imágenes. Es un framework minimalista, ultra-pequeño que se utiliza para desarrollar aplicaciones para iPhone. Entre los cuales se consideran controles, menús de navegación con estilo iPhone, cambios orientados al teléfono y estilos iPhone que se pueden des-habilitar dando una mayor experiencia iPhone-like.

IIU & Página de inicio »Descargas

6 – AlloyIU

AlloyUI es un framework con muchas prestaciones RIA, construido sobre YUI3 parte de YUI2, que comprende una larga lista de componentes (más de sesenta en total), que abarcan desde utilidades para interfaces ricas hasta widgets de interfaz de usuario. En sus controles incluye galería de imágenes, diálogos, vista de árbol, paneles, auto-completado, botones, calendarios, barra de herramientas, y muchas otras cosas más.

AlloyIU Página de Inicio y Descargas »
AlloyIU Controles, Demos y Ejemplos »

7 – Script.aculo.us

script.aculo.us es un popular framework de interfaz de usuario que amplía a Prototype mediante la adición de efectos visuales, la interfaz de controles de usuario, y los servicios públicos a través del DOM.

Script.aculo.us Página de Inicio y Descargas »

8 – Qutensil

Qutensil está todavía en desarrollo, pero está mostrando algunas cosas muy prometedores en su roadmap. Se ha basado en Prototype y Scriptaculous y cuenta con un sistema de mensajería, un selector de color, regulador, sistema de información sobre herramientas, ventana arrastrable, etc.

Qutensil Página de Inicio y Descargas »
Qutensil Controles, Demos y Ejemplos »

9 – Jitsu

Jitsu cuenta con un lenguaje de enmarcado XML, compilador de páginas, motor de animación, Ajax, y el inspector de tiempo de ejecución, entre otras cosas. Su puesta en práctica de Ajax hace que sea fácil de diseño, que es crucial para la construcción de aplicaciones web. Tiene una estructura de datos de cara al cliente que permite hacer operaciones para hacer iteraciones rápidas, los cambios son fáciles de conseguir sin tener que reconstruir todo desde cero.
Otra característica es que incluye un compilador que convierte enmarcado a Javascript, tiempo de ejecución de Javascript, librería de plataforma cruzada y el soporte de botón de “Atrás”. Jitsu funciona mejor con Firefox e IE. No requiere ningún servidor back-end.

Jitsu y Descargas Página de inicio »
Jitsu Controles, Demos y Ejemplos »

10 – Prototype IU

Prototype IU es una librería de componentes de interfaz basados en Prototype y Script.aculo.us, muy amplia y muy fácil de usar. Prototype IU dispone de módulos como el carrousel, la ventana modal, sombras, menu de contexto que se puede utilizar como un paquete de forma independiente.

Prototype IU Página de Inicio y Descargas »
Prototype IU Controles, Demos y Ejemplos »

11 – jQuery IU

jQuery UI es un widget que interactúa y fue construída por encima de la librería jQuery, permite animar los diferentes elementos de una página dándole impresionantes interacciones, todas con relativa facilidad.
El paquete es básicamente una colección de funciones relacionadas que se pueden dividir en tres módulos: los widgets que contienen pre-compilados e interfaces de usuario personalizables, el efecto que son animaciones muy sencillas y la interacción del ratón con los elementos de la página (arrastrar y soltar).

jQuery UI Página de Inicio y Descargas »
jQuery UI Controles, Demos y Ejemplos »

12 – Sigma Ajax UI Builder

Escrito en PHP y Javascript, SigmaVisual está basado en la web visual WYSIWYG, es un constructor que tiene más de 40 componentes comunes, incluyendo fichas, de diálogo, de la red de árboles, la línea de tiempo y así sucesivamente.

Sigma Ajax UI Builder Página de Inicio y Descargas »
Sigma Ajax UI Builder Controles, Demos y Ejemplos »

Si deseas conocer más siempre podrás recurrir a la fuente. Espero que te haya sido de provecho.

Fuente: http://speckyboy.com/2010/05/17/15-javascript-web-ui-libraries-frameworks-and-libraries/

XUI FrameWork JavaScript que apunta a Navegadores para Celulares

XUI

Un marco Javascript y sencillos para crear aplicaciones web móviles.

¿POR QUÉ?!

Hemos oído sus palabras. ¿Por qué otro marco JavaScript?! Cuando el desarrollo de PhoneGap estaba en marcha nos dimos cuenta de tiempos de carga lenta para los modernos marcos de JavaScript (como Prototype, Mootools, YUI, Ext y (sí), incluso jQuery. Una gran razón por qué estas bibliotecas son tan grandes es porque es en su mayoría contienen una gran cantidad de navegador de código de compatibilidad cruzada. El espacio móvil tiene menos implementaciones de navegador (por ahora) y diferentes necesidades. Así XUI.

XUI se esfuerza por ser un marco para la primera clase de dispositivo móvil navegadores como WebKit, Fennec y Opera con el apoyo futuro en estudio para IE Mobile y BlackBerry.

Link: xuijs.com

2010-06-21

Devcheatsheet: descarga hojas de ayuda para desarrolladores

Las cheat sheets u hojas de referencia son una gran ayuda en el mundo de la programación. Por eso hoy les traigo un sitio que estoy seguro les va a encantar.

Les estoy hablando de Devcheatsheets, un excelente sitio web que recopila cientos de cheat sheets para desarrolladores.

En esta web podemos encontrar hojas de referencia de C, C++, C#, PHP, Javascript, Java, Visual Basic, CSS, HTML, Python, Ruby y otros lenguajes de programación.

Además hay cheatsheets de sistemas operativos (Windows, Linux, Mac OSX), servidores, redes, bases de datos, frameworks, aplicaciones y muchas más.

Devcheatsheets es sin duda, un sitio que no puede faltar en los marcadores de aquellas personas que se dediquen al desarrollo.

Estos son algunos:

Programming & Scripting Languages: ActionScript :: Ada :: AJAX :: C :: C# :: C++ :: CFScript :: Clojure :: COBOL :: ColdFusion :: Common Lisp :: Delphi :: Erlang :: F# :: Fortran :: Haskell :: Java :: JavaFX Script :: JavaScript :: Lisp :: Lua :: MATLAB :: Objective-C :: Pascal :: Perl :: PHP :: Prolog :: Python :: R :: Ruby :: Scala :: Scheme :: Server Side Includes (SSI) :: Tcl :: VB.NET :: VBScript :: Visual Basic (VB)
Markup Languages: CSS :: CSS 3 :: DocBook :: HTML :: HTML 5 :: JavaServer Pages (JSP) :: Markdown :: MathML :: Schematron :: Textile :: XAML :: XHTML :: XML :: XPath :: XSLT
Query Languages: LINQ :: PL/pgSQL :: PL/SQL :: SQL :: T-SQL :: XQuery :: Yahoo! Query Language (YQL)
Libraries & Frameworks: Adobe Integrated Runtime (AIR) :: ADO.NET :: ASP :: ASP.NET :: ASP.NET MVC :: Blueprint CSS :: CakePHP :: CodeIgniter :: Django :: Dojo Toolkit :: Drupal :: Enterprise JavaBeans (EJB) :: Ext JS :: Fusebox :: GNU Readline :: Google Web Toolkit (GWT) :: Grails :: Hiccup :: JavaServer Faces (JSF) :: Joomla! :: jQuery :: jQuery Validator :: JSTL :: Kohana :: Lift :: Lime Testing Framework :: Magento :: Microsoft .NET Framework :: MODx :: MooTools :: NetBeans Platform :: OpenGL :: OpenLayers :: OpenSSL :: Oracle ADF :: Papervision 3D :: Prototype :: Pygame :: Pylons :: rSpec :: Ruby on Rails :: Scriptaculous :: SimpleTest :: Smarty :: Spring :: Symfony :: Textpattern :: TYPO3 CMS :: Vaadin :: Watir :: web2py :: WebGL :: wxWidgets :: Yii PHP Framework :: YUI :: Zend Framework
Operating Systems: BackTrack :: Debian :: IBM AIX :: Kubuntu :: Linux :: Mac OS X :: Microsoft Windows :: OpenBSD :: Unix :: Windows Server 2008 :: Windows XP
Version Control: Bazaar :: ClearCase :: CVS :: Git :: Mercurial :: Perforce :: Subversion (SVN)
Servers: Apache :: .htaccess :: IBM Lotus Domino :: IIS :: Microsoft Exchange Server :: Microsoft Exchange Server 2007 :: Resin
Databases: Cassandra :: CouchDB :: DB2 :: Firebird SQL :: Informix :: Ingres :: Microsoft Access :: Microsoft SQL Server :: MySQL :: Oracle :: PostgreSQL :: SQLite :: Sybase
ORM: ActiveRecord :: Doctrine :: Hibernate :: NHibernate :: Propel
Blogs: Blogger :: Movable Type :: TypePad :: WordPress
Websites: Ask.com :: del.icio.us :: Digg :: Facebook :: Flickr :: Gmail :: Google :: Google Adwords :: Google Docs :: Google Maps :: Google Reader :: LinkedIn :: MySpace :: Rambler :: Reddit :: Shopify :: StumbleUpon :: Twitter :: Wikipedia :: Yahoo! :: Yandex :: YouTube
Text Editors: ed :: emacs :: E Text Editor :: MicroEmacs :: TextMate :: Vi :: Vim :: Vimperator :: x-emacs
Applications: 3D Studio Max :: AAV ColorLab :: Adobe Acrobat :: Adobe After Effects :: Adobe ColdFusion Builder :: Adobe Contribute :: Adobe Dreamweaver :: Adobe Fireworks :: Adobe Flash :: Adobe Flash Builder :: Adobe Framemaker :: Adobe Illustrator :: Adobe InCopy :: Adobe InDesign :: Adobe Photoshop :: Adobe Photoshop Elements :: Adobe Photoshop Lightroom :: Adobe Premiere Pro :: Adobe Soundbooth :: Aperture :: AppleWorks :: AutoHotKey :: Blender :: Capistrano :: Cinema 4D :: Eclipse :: Evernote :: Fgdump :: Final Cut Pro :: Firebug :: Front Row :: GIMP :: GNU Debugger (GDB) :: Google Chrome :: Google Talk :: Hping :: iCal :: IDA Pro :: IntelliJ IDEA :: Internet Explorer :: Intuit Quickbooks :: Ircle :: iTunes :: Keynote :: Lotus Notes :: Macromedia Freehand :: Maple :: Mathematica :: MediaWiki :: Metasploit :: Microsoft Entourage :: Microsoft Excel :: Microsoft Expression Blend :: Microsoft FrontPage :: Microsoft InfoPath :: Microsoft Office :: Microsoft OneNote :: Microsoft Outlook :: Microsoft PowerPoint :: Microsoft Project :: Microsoft Publisher :: Microsoft Silverlight :: Microsoft Visio :: Microsoft Visual Studio :: Microsoft Visual Web Developer :: Microsoft Word :: mIRC :: Mozilla Firefox :: Mozilla Thunderbird :: MPlayer :: Mutt :: Nessus :: NetBeans IDE :: Netcat :: Nmap :: OllyDbg :: Opera :: Oracle SQL*Plus :: Outlook Express :: Pages :: PGP :: PowerShell :: QuarkXPress :: Quicksilver :: Robocopy :: rsync :: Safari :: SharePoint Server :: Skype :: WinDbg :: Wireshark :: XChat :: Xcode :: Xmonad
Mobile Applications: FourSquare
Security: SQL Injection :: XSS
Networking: Border Gateway Protocol (BGP) :: Cisco IOS :: EIGRP :: First Hop Redundancy :: IEEE 802.11 :: IEEE 802.1X :: Internet Protocol (IP) :: IPsec :: IS-IS :: Multiprotocol Label Switching :: Networking :: OSPF :: Point-to-Point Protocol (PPP) :: Ports :: Quality of Service (QoS) :: Spanning tree protocol (STP) :: Subnetwork :: TCP/IP :: Virtual LAN (VLAN) :: Virtual Private Network (VPN) :: WLAN
Math: Algebra :: Calculus :: Trigonometry
Other: 960 Grid System :: Access Control List (ACL) :: Accessibility :: Adobe Apollo (AIR beta) :: Adobe Flex :: Agile :: Android :: apt-get :: Arduino :: ASCII :: awk :: Bash :: BPMN :: Character Codes :: chmod :: Colors :: Compter Hardware :: Country Codes :: Crontab :: cURL :: Design Patterns :: dig :: DOM :: DOS :: dpkg :: DTD :: esxtop :: Exim :: ExpressionEngine :: FFmpeg :: Fonts :: Freenode :: Funny :: Gnuplot :: Google Analytics :: Google Voice :: Google Wave :: grep :: HTML Entities :: HTTP :: Incanter :: Internationalization (I18N) :: Internet Relay Chat (IRC) :: iptables :: jQTouch :: Korn Shell (ksh) :: Language Codes :: LaTeX :: ldapsearch :: Marketing :: Microformats :: Mobile Applications :: mod_rewrite :: NetHack :: OAuth :: Org-Mode :: ParEdit :: Performance :: RAID :: RDF :: RDFa :: Regular Expressions :: Repo :: Reverse Engineering :: rpm :: RSS :: Ruby Javascript (RJS) :: Scalable Vector Graphics (SVG) :: screen :: Scrum :: Security :: sed :: SEO :: Shoulda :: snmpget :: snmpwalk :: Social Media :: Sphinx (documentation) :: Spring Web Flow :: Sprinkle :: SSH :: SSL :: ssldump :: tar :: tcpdump :: Testing :: TeX :: Thematic :: Top-Level Domain (TLD) :: TrixBox :: Tweener :: txt2tags :: Typography :: UML :: Unicode :: urpmi :: Usability :: UTF-8 :: Visualization :: VMware Infrastructure 3 :: VMware vSphere :: VOIP :: Wallpaper :: Web Design :: Website Launch :: Web Standards :: Win32 :: WPF :: x86 :: XML Schema (XSD) :: Yahoo! Search BOSS :: yum :: Zen Coding :: ZFS :: zypp

Enlace: Devcheatsheets

2010-06-19

Curso completo sobre Ext Js Framework JavaScript Completo en Castellano

ExtJS Framework



Author: Crysfel

I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter

A continuación se muestra el temario del curso, cada semana se estarán subiendo capitulos

Introducción

Presentación del ponente, definición de objetivos y alcance del curso, también se hacen delimitaciones, limitaciones y requisitos para tomar el curso.
Introducción (6:39 minutos).

Instalación

Conocimientos y conceptos básicos para comenzar a trabajar a tu manera, es importante saberlos para evitar problemas en el futuro.
¿Dónde conseguir ExtJS? ¿Hay que pagar? ¿es gratis? (3:49 minutos)
Instalación básica del framework (7:06 minutos)
Instalación de temas o “look and feel” (5:29 minutos)
Que son los adapters y en que me beneficia (6:03 minutos)
Definición de la imágen spacer y su importancia (5:48 minutos)
Quizz: Primer capitulo del curso de ExtJS

Localización

Mediante ExtJS, es posible internacionalizar los widgets en diferentes lenguajes, por defecto se utiliza el Ingles, pero es posible hacer traducciones a otros lenguajes o buscar si alguien mas ya la ha realizado.
Instalando tu idioma (8:54 minutos)
Varios idiomas en un mismo sitio (9:07 minutos)

JavaScript orientado a objetos

Se definen términos y conceptos para programar orientado a objetos en JavaScript utilizando algunas utilerías que ExtJS nos proporciona para una fácil implementación.
Referencias en JavaScript (9:39 minutos)
¿Que es el scope o alcance de una variable? (8:14 minutos)
¿Qué son los Closures? (12:32 minutos)
El contexto y la variable “this”
Creación de objetos y métodos públicos
Métodos privados y métodos privilegiados
Paquetes y namespace
Herencia en JavaScript
Quizz: Conceptos fundamentales de JavaScript (Parte I)
Quizz: JavaScript orientado a objetos (Parte II)

Trabajando con el DOM

Se muestran las utilerías de Ext para manipular el DOM, trabajar con efectos y animaciones, realizar búsquedas en el DOM y aplicar eventos.
Conociendo al objeto “Element” (13:17 minutos)
La clase “DomHelper” (16:11 minutos)
Buscar elementos en el DOM con selectores
Aplicar efectos visuales a Elementos (19:30 minutos)
Quizz: Trabajando con el DOM

Mensajes y eventos

Se muestra como mostrar mensajes al usuario, como crear eventos sobre elementos del DOM
Alertas y mensajes al usuario (20:55 minutos)
Manejo de eventos sobre Elementos y componentes
Quizz: Mensajes y Eventos

Ajax y el objeto Store

Se muestra como realizar peticiones Ajax al servidor, se define el concepto del store y su importancia para el intercambio de información.
El objeto Ajax, peticiones GET y POST
¿Qué es un store y cómo funciona?
Leer información de un XML
Leer información en formato JSON
Quizz: Ajax y el objeto Store

Paneles, Ventanas y Pestañas

El panel es uno de los componentes mas utilizados en el framework es de importancia comprender su funcionamiento, las ventanas son útiles para almacenar otros componentes.
¿Que es un panel, para que sirve y cómo se crean? (22:08 minutos)
Una ventana flotante (12:50 minutos)
Barras de herramientas en paneles y ventanas
Barra de status en paneles y ventanas
Las Pestañas o Tabs

Los Formularios

Se muestra como crear formularios, validaciones, diferentes controles para capturar información e interactuar con un servidor para obtener y guardar información.
Formularios y campos comunes en ExtJS
ComboBox cargados localmente y remotamente (Ajax)
Combos dependientes
Un calendario para capturar fechas
Llenar formularios con información del servidor
Guardar información en el servidor
Validaciones simples en formularios
Validaciones personalizadas

Gráficas

Uno de los nuevos componentes de ExtJS 3.0 nos permite crear gráficas de diferentes tipos, en este capítulo mostramos algunas
Gráficas en ExtJS 3
Graficando series

Las Tablas

Este componente es muy utilizado para desplegar información, permite realizar muchas tareas de manera fácil y rápida.
Una tabla básica con información cargada de un array
Mostrar información de un archivo XML
Información contenida en formato JSON
Paginado remoto en un Grid (Ajax)
Formatear la información y agregar html a las celdas
Utilizando fechas y tiempo en un Grid
Editar la fila de un Grid en un formulario

Edición de tablas

En ocasiones es conveniente poder editar la información directamente en una tabla, de esta manera evitamos abrir un formulario con la información en cada campo.
Editar las celdas de un grid
Editar una celda mediante un Combobox
• Modificar un fecha utilizando un calendario
Guardar los cambios del Grid editable usando Ajax
• Hacer un CRUD automáticamente con REST

Árboles con ExtJS

Los árboles son útiles para mostrar de forma visual una jerarquía de organización, por ejemplo un directorio de documentos, una familia o grupo de personas, etc. Ext proporciona el componente ideal para esta tarea.
El componente Tree Panel
Arboles generados con Ajax
Cambiar íconos de los nodos
Desplegar el sistema de archivos del servidor
Explorador de archivos para el servidor
Drag and Drop para ordenar los nodos (Guardarlos en MySQL)
• Modificar los nodos seleccionados

Layouts y maquetación

Los layout se utilizan para crear la maquetación de un sitio, ExtJS provee maneras diferentes para lograr este objetivo, en este capitulo se analizan algunas.
Border layout
Border layout (9:19)
Table Layout (9:31)
• El Viewport y sus regiones
• El acordeón
• Combinación de layouts

Plugins y extensiones

La comunidad de ExtJS es muy activa, prueba de ello es la cantidad de plugins que se han desarrollado y son ofrecidos de manera gratuita, aquí se muestran algunos de ellos y como integrarlos a tu proyecto.
Herencia con ExtJS

2010-06-15

37 jQuery Plugins

You can also take a look at the other jQuery Plugins in this series :

So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post.

jQuery Sliders

1) Slider Gallery- A similar effect used to showcase the products on the Apple web site. This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

J-12  in 37 More Shocking jQuery Plugins


2) Accessible slider- Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS.

J-22 in 37 More Shocking jQuery Plugins


jQuery Manipulating Images

3) crop, labelOver and pluck-Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there are 2 other plugins: LabelOver and Pluck.

J-15 in 37 More Shocking jQuery Plugins

  • Live Demo Of Crop: Here
  • Live Demo of LabelOver: Here

4) Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE 6.

J-16  in 37 More Shocking jQuery Plugins

  • Live Demo Of Crop: Here

5) Creating A Sliding Image Puzzle Plug-In- Creates sliding-image puzzles based on containers that have images. Running the demo page we get this output in the image below:

J-19 in 37 More Shocking jQuery Plugins


jQuery Navigation Menus

6) Digg Header- This is a replica of the Digg header. Fluid width (but only to a point!), drop down menus, attractive search, easy to change colors… There is a lot of smarts in a small place in this example!

J-7  in 37 More Shocking jQuery Plugins


7) IconDock- a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one.

J-31  in 37 More Shocking jQuery Plugins


jQuery Accordions

8 ) Horizontal Accordion- This plugin provides some simple options to alter the accordion look and behavior.

J-5  in 37 More Shocking jQuery Plugins


9) HoverAccordion- A jQuery Plugin for no-click two-level menus.

J-32 in 37 More Shocking jQuery Plugins


jQuery Image Viewer

10) Step Carousel Viewer- Displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand.

J-8  in 37 More Shocking jQuery Plugins


11) Featured Content Glider- You can showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow. Supports two different display modes- “manual” and “slideshow.”

J-26 in 37 More Shocking jQuery Plugins


jQuery Charts

12) jQuery + jFlot - Plots, Canvas and Charts.

J-4  in 37 More Shocking jQuery Plugins


13) Accessible charts using canvas and jQuery – A proof of concept for visualizing HTML table data with the canvas element by using jQuery to provides several types of editable graphs, such as Pie, Line, Area, and Bar.

J-21 in 37 More Shocking jQuery Plugins


jQuery Editors

14) Small Rich Text Editor - Small footprint, Cross-browser, Ajax Image upload, HTML Cleanup with PHP back-end rich text editor with all basic Rich Text functionality included.

J-3  in 37 More Shocking jQuery Plugins


15)markItUp! Universal markup editor- This plugin allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. Worth Checking!

J-27  in 37 More Shocking jQuery Plugins


jQuery Flash Plugins

16) jQuery Flash Plugin- A jQuery plugin for embedding Flash movies.

J-10 in 37 More Shocking jQuery Plugins


17) jMP3- jMP3 is an easy way make any MP3 playable directly on most any web site (to those using Flash & JS),
using the sleek Flash Single MP3 Player & jQuery.

J-9  in 37 More Shocking jQuery Plugins


18) jQuery Media Plugin- It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page.

J-36 in 37 More Shocking jQuery Plugins


jQuery Tabs

You can use the a href=”http://docs.jquery.com/UI/Tabs”>jUI/Tabsto create more dynamic tab functionality.

19) jQuery Tabs- Typical tabbing structure which degrade nicely without JavaScript enabled.

J-11 in 37 More Shocking jQuery Plugins


jQuery LightBox

20) Fancy Box- Kinda different image zooming script for those who want something fresh. Features: Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them

J-13  in 37 More Shocking jQuery Plugins


21) Thickbox Plus- Click an Image to view a ThickBox image that is resized when your window is resized to fit the window.

J-1  in 37 More Shocking jQuery Plugins


jQuery Datagrid plugins

22) Flexi Grid- Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

J-2  in 37 More Shocking jQuery Plugins


23) Query Grid 3.1- Datagird plugin for jQuery, where the user can manipulate the number of requested pages with adding, updating, deleting row data.

J-34  in 37 More Shocking jQuery Plugins


jQuery Field Manipulation

24) FaceBook Like – jQuery and autosuggest Search Engine- This autosuggest search engine is inspired from facebook for design,
use jQuery as ajax framework and BSN Autosuggest libs.

J-30  in 37 More Shocking jQuery Plugins


25) Masked Input Plugin- It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

J-33  in 37 More Shocking jQuery Plugins


jQuery with cool animation Effects

26) jQuery Enchant- Devoted to rich effects. It already features all effects you know from scriptaculous/interface, as well as many more great additions: color animations, class animations and highly configurable effects.

J-20 in 37 More Shocking jQuery Plugins


27) EasyDrag jQuery Plugin- Add the ability to drag and drop almost any DOM element without much effort. So it’s simple to use and you can also attach handlers both to the drag and to the drop events.

J-14 in 37 More Shocking jQuery Plugins


28) Simple Effects Plugins- Nice animation effects that can easily toggle, hide, show, fade, slide elements.

J-18 in 37 More Shocking jQuery Plugins


29) Slide out and drawer effect- A demonstration of accordion effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.

J-6  in 37 More Shocking jQuery Plugins


jQuery Worth Checking Plugins

30) crop, labelOver and pluck- How to create a drop cap and apply it to every paragraph in a DIV.

J-17 in 37 More Shocking jQuery Plugins


31) Style Author Comments Differently with jQuery- Nice custom styling applied to comments left by the author.

J-23 in 37 More Shocking jQuery Plugins


32) Creating a fading header- A simple example using jQuery and CSS that shows you how to create the fading header technique.

J-24  in 37 More Shocking jQuery Plugins


33) Coda Bubble- A demonstration of the ‘puff’ popup bubble effect as seen over the download link on the Coda web site

J-25  in 37 More Shocking jQuery Plugins


34) Another In-Place Editor- This is a script that turns any element, or an array of elements into an AJAX in place editor using one line of code.

J-35 in 37 More Shocking jQuery Plugins


35) jQuery Taconite- The jQuery Taconite Plugin allows you to easily make multiple DOM updates using the results of a single AJAX call. It processes an XML command document that contain instructions for updating the DOM.


jQuery Web Applications

36) GenFavicon- A cool online generator that creats little favicons used throughout the web. You have the option of either specifying a URL for the image you’d like to convert or uploading it to the site for processing.

J-28  in 37 More Shocking jQuery Plugins


37) WriteMaps- WriteMaps provides an easy-to-use interface for creating, editing, and sharing your sitemaps.

J-29  in 37 More Shocking jQuery Plugins


Great Resources for jQuery Inspiration and How to’s

jQuery Google Group

Learning jQuery

jQuery Tutorials for Designers