2009-08-30

Crear Foreign Key (Integridad Referencial) con MySQL

Hace unos días que estoy bastante liado buscando información sobre MySQL, claves foráneas (o en inglés, foreign Key) y la Inegridad Referencial…
No es que sea un experto con el MySQL pero intentaré explicar todo lo que he aprendido:

Definición de Integridad Referencial

Podemos entender como Integridad Refencial a la propiedad, aplicada en las Bases de Datos, que nos garantiza que una Entidad (fila o registro) se relaciona con otra entidad que EXISTE en la Base de Datos. Nos aseguramos en todo momento que la información no esté repetida innecesariamente, que exita tal información, relaciones mal hechas…

Definición de Claves Foráneas – Foreign Key

Una clave foránea, o foreign key, no es más que un campo (Entidad) de un tabla que hace referencia al identificador de otra Tabla.

MySQL – Integridad Referencial y las Foreign Key

En las primeras versiones de MySQL (hasta aproximadamente la versión 3.23) la Integridad Referencial no estaba disponible, y a la hora de crear la Base de Datos, esta Integridad debía ser controlada por parte de la aplicación.

A la hora de crear una Base de Datos, el motor por defecto de MySQL es el MyISAM pero a partir de la versión 3.23 (según la Wikipedia en la versión 4 de MySQL) se incorpora el motor InnoDB, que nos permitirá tener Bases de Datos con Integridad Referencial.

Tengo que decir que no sé muy bien como interpreta el motor MyISAM la sintaxis de Foreign Key (por lo que he podido entender… lo interpreta como si fueran CREATE TABLE), pero si puedo asegurar, es que la Integridad Referencial no se aplica nativamente para este motor.

¿Qué es el Motor MyISAM?

Es el motor de almacenamiento por defecto del MySQL. Como propiedades relevantes tenemos que destacar su gran rapidez con las consultas, “ya que no tiene que hacer comprobaciones de Integridad Referencial”. Está realmente optimizado para aplicaciones, sistemas, programas… en las que no hay un número elevado de inserciones.

¿Qué es el Motor InnoDB?


El innoDB es una tecnología de almacenamiento de datos, se caracteriza por soportar transacciones de tipo ACID e incluir la Integridad Referencial. Sé que me repito mucho, pero la llegada de este motor de almacenamiento en MySQL, nos permite definir Claves Foráneas (Foreign Key), y gracias a ello, definir reglas o restricciones que nos aseguren la Integridad Referencial de los registros de la Tabla/Base de Datos.

¿Cómo especificamos el tipo de motor a utilizar en MySQL?

A la hora de crear una tabla hay que indicarle la opción ENGINE. Con esta opción le indicaremos el motor que tiene esta tabla en concreto: MyISAM, InnoDB, BDB, … veamos un ejemplo sencillo:

CREATE TABLE `PRUEBA` (
ID int(10) unsigned NOT NULL auto_increment COMMENT 'IDENTIFICADOR TABLA',
NAME varchar(40) NOT NULL COMMENT 'NOMBRE PELICULA',
DESCRIPTION varchar(255) default NULL COMMENT 'DESCRIPCION PELICULA',
CREATIONDATE timestamp NOT NULL default CURRENT_TIMESTAMP on update CURRENT_TIMESTAMP COMMENT 'FECHA DADA DE ALTA LA PELICULA',
PRIMARY KEY (ID),
) ENGINE=MYISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

InnoDB vs MyISAM

Antes de llegar a la especificación de cómo crear la Integridad Referencial por código SQL, voy a enumerar primero las diferencias que podemos encontrar en los tipos de motor de almacenamiento InnoDB y MyISAM. ¿Por qué? Porque según la función e implicación que tenga que tener nuestra Base de Datos nos podemos decantar por uno o por otro motor.

InnoDB:

  • Permite el uso de Transacciones: no es más que todo un conjunto de órdenes que se ejecutan como si fueran una unidad de trabajo, dicho de otro modo, que este bloque de órdenes (transacciones) no finalizan en un estado intermedio. Si alguna orden se ha ejecutado y no finaliza la ejecución de todo el bloque de órdenes correctamente, el SGBD (Sitema Gestor de Base de Datos) se encargará (como de un rollback se tratase…) de dejar la Base de Datos en el estado inicial.
  • Las Transacciones son de Tipo ACID: acrónimo de Atomicity, Consistency, Isolation and Durability (o dicho en español: Atomicidad, Consistencia, Aislamiento y Durabilidad).
  • Si nuestra Aplicación utiliza mucho el uso de Inserts y Updates notaremos una gran mejoría respecto al motor MyISAM.
  • La caché de las lecturas y escrituras de los registros se realiza mediante una combinación entre Cachés de registro y de índice. Con lo consecuente, InnoDB no envia los cambios de la tabla al Sistema Operativo (S.O., opción más lenta…) para que los escriba, por lo tanto, es mucho más rápido que MyISAM en según que escenarios.
  • ACTUALIZACIÓN gracias a ikhuerta. Bloqueo a nivel de registro, es decir, por cada petición (Selects, Inserts, updates…) que se haga a la tabla se bloquea a nivel de REGISTRO, en cambio MyISAM bloquea toda la tabla entera hasta finalizar su ejecución, pudiendo así crear una cola de peticiones. Del otro modo, al bloquear solamente el registro necesario, el resto de registros quedan libres para su utilización.

MyISAM:

  • Mayor velocidad en general a la hora de recuperar datos.
  • Es recomendable para aquellas Base de Datos donde predominan los Selects y no los Inserts o Updates.
  • Con la ausencia de Automacidad (no hay comprobaciones de integridad referencial, no hay bloqueos de tablas,…) obtenemos nuevamente una mayor velocidad.
  • Cuenta con una algoritmo de Compresión de Datos muy eficiente, de modo que el espacio en disco, Ram o caché, es realmente inferior al del motor InnoDB. Aunque he leído que el motor InnoDB ha mejorado este aspecto y ya está en práctica en el MySQL 5, reduciendo así un 20% del espacio.
  • No soporta Transacciones, ¿ventaja o desventaja? Según lo que pone la wiki puede llegar a ser una ventaja, por el simple echo que los accesos a disco que tiene el motor InnoDB es de almenos una por cada transacción. Esto supone una limitación de transacciones para los discos duros, de aproximadamente unas 200 por segundo.

Hasta aquí creo que ya es suficiente de teoría, es una buena recopilación de información, ahora pasemos a lo importante: “LOS EJEMLOS”.

Código SQL, para montar la Integridad Referencial

Veamos un ejemplo del Esquema en MER(Modelo Entidad Relación) y MR (Modelo Relacional, después de normalizar el MER), adjunto imagen:

Modelo BD Post MySQL y las FKs

Ahora veamos el código SQL para ver como se crearía esta Base de Datos y todas sus relaciones:


SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Base de datos: `testpostFKs`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `T_COCHE`
--


CREATE TABLE IF NOT EXISTS `T_COCHE` (
`MARCA` varchar(20) NOT NULL,
`ORIGEN` varchar(25) NOT NULL,
`FECHAINICIO` datetime NOT NULL,
PRIMARY KEY (`MARCA`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Volcar la base de datos para la tabla `T_COCHE`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `T_COCHE_SERVTEC`
--


CREATE TABLE IF NOT EXISTS `T_COCHE_SERVTEC` (
`IDMODELO` int(10) unsigned NOT NULL,
`IDSERVICIO` int(10) unsigned NOT NULL,
PRIMARY KEY (`IDMODELO`,`IDSERVICIO`),
KEY `IDMODELO` (`IDMODELO`),
KEY `IDSERVICIO` (`IDSERVICIO`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Volcar la base de datos para la tabla `T_COCHE_SERVTEC`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `T_MODELO`
--


CREATE TABLE IF NOT EXISTS `T_MODELO` (
`IDMODELO` int(10) unsigned NOT NULL auto_increment,
`NAME` varchar(25) NOT NULL,
`DESCRIPTION` varchar(255) default NULL,
`FECHAEXPEDICION` datetime default NULL,
`DISENYADOR` varchar(25) NOT NULL,
`MARCA` varchar(20) NOT NULL,
PRIMARY KEY (`IDMODELO`),
KEY `MARCA` (`MARCA`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

--
-- Volcar la base de datos para la tabla `T_MODELO`
--

-- --------------------------------------------------------

--
-- Estructura de tabla para la tabla `T_SERVICIOTECNICO`
--


CREATE TABLE IF NOT EXISTS `T_SERVICIOTECNICO` (
`IDSERVICIO` int(10) unsigned NOT NULL auto_increment,
`NOMBRE` varchar(40) NOT NULL,
`PAIS` varchar(25) NOT NULL,
`PROVINCIA` varchar(25) NOT NULL,
`LOCALIDAD` varchar(25) NOT NULL,
`DIRECCION` varchar(255) NOT NULL,
`TELEFONO` int(10) unsigned default NULL,
`FAX` int(10) unsigned default NULL,
PRIMARY KEY (`IDSERVICIO`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

--
-- Volcar la base de datos para la tabla `T_SERVICIOTECNICO`
--

--
-- Filtros para las tablas descargadas (dump)
--

--
-- Filtros para la tabla `T_COCHE_SERVTEC`
--

ALTER TABLE `T_COCHE_SERVTEC`
ADD CONSTRAINT `T_COCHE_SERVTEC_ibfk_2` FOREIGN KEY (`IDSERVICIO`) REFERENCES `T_SERVICIOTECNICO` (`IDSERVICIO`) ON DELETE CASCADE ON UPDATE CASCADE,
ADD CONSTRAINT `T_COCHE_SERVTEC_ibfk_1` FOREIGN KEY (`IDMODELO`) REFERENCES `T_MODELO` (`IDMODELO`) ON DELETE CASCADE ON UPDATE CASCADE;

--
-- Filtros para la tabla `T_MODELO`
--

ALTER TABLE `T_MODELO`
ADD CONSTRAINT `T_MODELO_ibfk_1` FOREIGN KEY (`MARCA`) REFERENCES `T_COCHE` (`MARCA`) ON DELETE CASCADE ON UPDATE CASCADE;

Puntos a tener en CUENTA:

  • El motor de almacenamiento es INNODB (Engine=INNODB)
  • El campo o entidad que representa la Foreign Key, para indicarle realmente que es una Foreign Key, primero hay que especificarle que es un INDEX, lo hacemos así: KEY `IDSERVICIO` (`IDSERVICIO`)
  • Hay que indicarle a la Foreign Key la función a ejecutar por parte de la Base de Datos cuando se elimine una Clave Primaria (PK), por ejemplo, si eliminamos una tupla de T_COCHE ¿cómo tiene que proceder la base de datos con las otras tablas que estén referenciadas? Para eso sirve el: ON DELETE CASCADE ON UPDATE CASCADE

Hasta aquí este post, el siguiente será: Montar la Integridad Referencial con PHPMyAdmin.

Los mejores resaltadores de sintáxis de código para tu web

1. SyntaxHighlighter

Esta herramienta posee un amplio soporte y ofrece muchas opciones, extensiones e integraciones con otros programas y plataformas. Es verdaderamente increíble.

SyntaxHighlighter ayuda al desarrollador a postear snippets de código con facilidad y de forma bonita. Está 100% basada en JavaScript y no se preocupa por lo que tengas en tu servidor.

La idea de SyntaxHighlighter es permitir la inserción de snippets de código coloreados en una página web sin tener que utilizar ningún script de lado del servidor.

Haz clic aquí para descargar SyntaxHighlighter »

2. GeSHi – Generic Syntax Highlighter

GeSHi soporta PHP5 y Windows, y ha sido utilizado inclusive para resaltar código en páginas ASP, verdaderamente soporta casi cualquier lenguaje de codificación. Es una herramienta muy poderosa.

GeSHi es una herramienta de resaltado simple pero poderosa que posee las siguientes metas:

  • Soporta un amplio rango de lenguajes populares
  • Es fácil añadir un nuevo lenguaje para resaltado
  • Formatos de exteriorización altamente personalizables

geshi-generic-syntax-highlighter

Haz clic aquí para descargar Generic Syntax Highlighter »

3. Quick Highlighter

No hay forma más fácil de crear una página web en base a tu código fuente. Este resaltador online ofrece muchos lenguajes de codificación para elegir, con muchas opciones distintas:

  • Combinar código de estilo y HTML
  • Palabras claves de resaltado incorporados, tipos de información, etc.
  • Modo estricto
  • Envoltura de texto sobrante

quick-highlighter-syntax-highlighter

quick-highlighter-syntax-highlighter

Haz clic aquí para descargar Quick Highlighter »

4. Google Code Prettify

Un módulo Javascript y archivo CSS que permite la sintaxis de resaltado de snippets del código fuente en una página HTML.

Los comentarios en prettify.js son autorizados pero el lexer debería funcionar en un gran número de lenguajes incluyendo C, Java, Python, Bash, SQL, HTML, XML, CSS, y Javascript. Funciona de forma pasable en Ruby, PHP, VB, y Awk pero debido a convenciones de comentado no funciona en Smalltalk, o lenguajes tipo-CAML.

Propiedades:

  • Funciona en páginas HTML
  • Funciona incluso si el código posee links embebidos, líneas de números, etc.
  • API simple : incluye algo de JS&CSS y añade un handler de control.
  • Peso liviano: descarga pequeña y no bloquea la carga de la página mientras funciona.
  • Estilos personalizables mediante CSS.
  • Suporta todos los lenguajes tipo-C, tipo-Bash y tipo XML. No se necesita especificar el lenguaje.
  • Manejadores de lenguajes extensibles a otros lenguajes. Puedes especificar el lenguaje.
  • Ampliamente utilizado con soporte en varios navegadores.

google-code-prettify-javascript-syntax-highlighter

Haz clic aquí para ver el demo »

5. Pygments

Pygments es un resaltador de sintaxis genérico para uso en todo tipo de software, ya sea sistemas de foros, wikis o cualquier otra aplicación que necesite embellecer tu código.

Pygments soporta un creciente rango de lenguajes, para ver la lista completa haz clic aquí.

pygments-python-syntax-highlighter

Haz clic aquí para ver el demo »

Haz clic aquí para descargar Pygments »

6. Highlight.JS

Highlight.js resalta sintaxis en ejemplos de código en blogs, foros y de hecho en cualquier otra página. Es muy fácil de usar porque funciona de forma automática: encuentra el bloque de código, detecta el lenguaje, lo resalta.

Este programa soporta los siguiente lenguajes – 1C, AVR Assembler, Apache, Axapta, Bash, C#, C++, CSS, DOS .bat, Delphi, Django, HTML, XML, Ini, Java, Javascript, Lisp, MEL (Maya Embedded Language), PHP, Perl, Python, Python profile, RenderMan (RIB, RSL), Ruby, SQL, Smalltalk, VBScript, diff.

highlight-javascript-syntax-highlighter

Mira el demo »

Haz clic aquí para descargar Highlight.JS »

7. Lighter.js

Escrito en MooTools. Es un resaltador muy fácil de utilizar.

lighter-syntax-highlighter-written-in-mootools

Haz clic aquí para descargar Lighter.js »

8. SHJS – Syntax Highlighting in JavaScript

SHJS es un programa JavaScript que resalta pasajes de código en documentos HTML. Los documentos que usan SHJS son resaltados en el lado del cliente por el navegador web.

SHJS Suporta muchos lenguajes también – Bison, CC++, C#, ChangeLog, CSS, Desktop files, DiffFlex, GLSL, Haxe, HTML, Java, JavaScript, LaTeX. LDAP files, Log files, LSM (Linux Software Map) files, M4, Makefile, Objective Caml, Oracle SQL, Pascal, Perl, PHP,Prolog, Python, Ruby, S-Lang, Scala, Shell, SQL, Standard ML, Tcl, XML, Xorg configuration files.

shjs-syntax-highlighter

Haz clic aquí para descargar SHJS »

9. CodePress – Online Real Time Syntax Highlighting Editor

CodePress es un editor de código fuente basado en la web con resaltado de sintaxis escrito en JavaScript que colorea el texto a tiempo real mientras está siendo tipeado en el navegador.

Este editor ofrece varias propiedades como resaltado de sintaxis a tiempo real, snippets de código, auto-completación y ventanas múltiples.

codepress-online-syntax-highlighter

Haz clic aquí para ver el Demo y decargar CodePress »

10. Chili 2.2 jQuery code highlighter plugin

Chili es el plugin jQuery de resaltado de código que resalta muy rápidamente, es completamente personalizable, muy bien documentado y posee licencia MIT.

El Plugin soporta varios lenguajes como C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, y XHTML y posee muchas opciones de configuración distintas.

chili-jquery-code-highlighter-plugin

Haz clic aquí para ver el demo »

Haz clic aquí para descargar Chili jQuery Code Highlighter Plugin »

11. Highlight – Code & Syntax highlighting by Andre Simon

Highlight convierte el código fuente en texto formateado con resaltado de sintaxis:

  • Exteriorización coloreada en formato HTML, XHTML, RTF, TeX, LaTeX, SVG, BBCode y XML
  • Soporta más de 140 leguajes de programación
  • Incluye 40 themes de color
  • Plataforma independiente

highlight-andre-simon-syntax-highlighter

Haz clic aquí para mirar el demo »

Haz clic aquí para descargar Highlight »

12. BeautyOfCode: jQuery Plugin for Syntax Highlighting

BeautyOfCode habilita la compilación de sintaxis xhtml de una forma agradable.

beauty-of-codejquery-code-highlighter-plugin

Haz clic aquí para descargar BeautyOfCode »

13. JUSH – JavaScript Syntax Highlighter

JavaScript Syntax Highlighter puede ser utilizado para resaltado de sintaxis de lado de cliente en los siguientes lenguajes: HTML, CSS, Javascript, Php, Mysql, SQLlite, Apache, PostgreSQL.

Propiedades:

  • Resalta lenguajes embebidos uno dentro de otro.
  • Enlaza a documentación de todos los lenguajes.
  • Los colores pueden ser fácilmente modificables por CSS.
  • Reconoce sintaxis PHP completa, incluyendo __halt_compiler, heredoc, backticks, {$} variables inside strings, namespaces.
  • Funciona en los navegadores más importantes incluyendo Internet Explorer, Firefox y Opera.

jush-javascript-syntax-highlighter

Haz clic para ver el demo »

Haz clic aquí para descargar Jush »

14. Ultraviolet – Syntax Highlighting Engine

Ultraviolet es un motor de resaltado de sintaxis basado en Textpow (debes instalar éste primero para usar Ultraviolet). Dado que usa archivos Textmatesyntax, ofrece sintaxis fuera de serie para más de 50 lenguajes y 20 plantillas.

ultraviolet-synax-highlighter-engine

Haz clic aquí para ver el demo »

Haz clic aquí para descargar Ultraviolet »

15. DlHighlight – JavaScript Syntax Highlighting Engine

Este proyecto es un motor de resaltado de sintaxis basado en Javascript.

dlhighlight-code-highlighter-plugin

Haz clic aquí para descargar DlHighlight »

16. Syntax highlighter for JavaScript

Esta herramienta online resaltará sintaxis de código JavaScript 1.2. El restado está basado en patrones, no buscará JavaScript válido. Puede demorarse un poco, pero tengan paciencia.

El formato de exteriorización es HTML.

syntax-highlightning-javascript

Por supuesto que también existen una gran cantidad de programar que poseen soporte de resaltado de sintaxis incorporado, pero estas versiones online y scripts JS ofrecen un gran control sobre el resaltado y la flexibilidad.

Fuente: 1stwebdesigner

Guía de usabilidad para principantes en 8 pasos

1. Comenta tus códigos

01_commenting

Algunos métodos para comentar:

  • En HTML/XML/XHTML debes usar:
  • En CSS : /* Tu comentario aquí */
  • En JavaScript y PHP, a simple linea: // Tu comentario aquí .
  • En JavaScript y PHP, a múltiples lineas: /* Tu comentario aquí */

2. Titula apropiadamente tus páginas

02_title

A veces los diseñadores al crear una página se olvidan de titularla correctamente o simplemente la dejan en blanco. El título de una página va entre las etiquetas y se muestra en el tope del navegador. Intenta que sea un título simple, limpio y entendible. No utilices demasiadas etiquetas, simplemente describe las palabras claves de tu web. Y bajo ninguna circunstancia dejes de título http:/tusitio.com porque esto demostraría que tienes muy poca inventiva.

3. Cambia la apariencia de los links al pasar el mouse por arriba

03_link

Cambiar el color o el fondo de tus links es una obligación para la usabilidad y la experiencia visual del usuario. Si estás utilizando imágenes usa JavaScript y CSS sprites para cambiar la imagen on Mouseover. Si las imágenes son pesadas para realizar sprites CSS o rollover utiliza jQuery tooltip para hacer un sitio amigable con el usuario.

4. Enlaza tus titulares y logos

03_link_logo

A pesar de que esto suene tonto, existen muchos sitios que no lo hacen. Enlazar los titulares y logos le brindan al lector una forma rápida y fácil de volver a la página de inicio. Si tu logo o imagen se encuentra dentro de una etiqueta de imagen simplemente envuélvela con una etiqueta link, es pan comido.

5. Sigue el diseño estándar

04_layout

Seguir el diseño estándar se refiere a mostrarles a los visitantes un estilo con el que estén familiarizados. Si estás diseñando para un diario, una revista, o haciendo un portfolio se deben seguir ciertos patrones. La idea es que el diseño de tu sitio impacte en los visitantes.

6. Evita utilizar Ajax

Si puedes, evita utilizar Ajax ya que no es amigable con los motores de búsqueda. El contenido Ajax carga dinámicamente y como resultado los buscadores no lo pueden indexar.

7. Utiliza sabiamente el color

07_color

El color es un factor muy importante a la hora de diseñar. Es aconsejable seleccionar colores que atraigan a los visitantes y combinen con el contenido de tu sitio. No mezcles demasiados colores. Los diferentes colores poseen distintos significados, y el color de tu sitio debería reflejar el producto o la persona que estás presentando o vendiendo.

8. Check List

Por último, algunas pequeñas cositas que deberías implementar al crear un sitio web:

En conclusión, puedes que algunos de estos consejos no sean ninguna novedad para los diseñadores avanzados pero pueden resultarle muy útiles a los principianes. Si tienen algo que añadir, no duden en comentarlo.

Haz clic aquí para visitar más tips sobre usabilidad »

Fuente: Desizn Tech

2009-08-28

Reproductores Flash para poner en tu web

Link para bajar los reproductores de archivos flv, swf para poner en tu sitio web.
1) http://www.longtailvideo.com/
2) http://flowplayer.org/download/index.html

Herramientas para encontrar errores en tu sitio web

Si deseas asegurarte que los visitantes de tu sitio tengan la misma experiencia sin importar cúal navegador utilicen, entonces es vital realizar diversas comprobaciones en tu web.

Por eso en esta nota te traemos algunas de las herramientas más importantes que podrás utilizar a la hora de probar tu página frente a varios tipos de errores, ya sean de CSS, HTML, etc.

Validadores

w3-validator1
1. HTML Validator
Este HTML Validator - prueba la validez del código en HTML, XHTML, SMIL, MathML, etc.

Haz clic aquí para ir a la página de esta herramienta»

2. CSS Validator
El CSS Validator - valida hojas de estilo CSS o documentos usando hojas de estilo CSS.

Haz clic aquí para ir a la página de esta herramienta»

3. Links Validator
El Link Checker analiza todos los enlaces en un documento HTML/XHTML. Es útil para encontrar links rotos.

Haz clic aquí para ir a la página de esta herramienta»

4. RSS Feed Validator
Este es el servicio de validación W3C de feeds, un servicio gratuito que prueba la sintaxis de los feeds RSS.

Haz clic aquí para ir a la página de esta herramienta»

5. Free Site Validator
Este servicio escanea todo tu sitio para encontrar errores de validación y genera reportes de estado en tiempo real.

Haz clic aquí para ir a la página de esta herramienta»

Accessibilidad

wave_web-accessibility-evaluation-tool

6. WebAIM Wave
Wave te muestra los errores específico y resulta muy productivo.

Haz clic aquí para ir a la página de esta herramienta»

7. Functional Accessibility Evaluator
Utiliza esta herramienta para evaluar la accesibilidad funcional de tu sitio.

Haz clic aquí para ir a la página de esta herramienta»

8. Hera
HERA es una herramienta para comprobar la accesibilidad de tu página web de acuerdo a las especificaciones de Web Content Accessibility Guidelines(WCAG 1.0).

Haz clic aquí para ir a la página de esta herramienta»

Compatibilidad con navegadores

xenocode

9. Xenocode
Usando Xenocode puedes correr cualquier navegador que desees. Si, incluso IE6, 7 Y 8 simultaneamente.

Haz clic aquí para ir a la página de esta herramienta»

10. Browsershots
Un gran servicio para probar tu sitio en todos los navegadores y en casi todos los sistemas operativos.

Haz clic aquí para ir a la página de esta herramienta»

11. IeTester
Esta es una herramienta que incorpora todas las versiones de IE en una sola aplicación de escritorio.

Haz clic aquí para ir a la página de esta herramienta»

12. Microsoft Expression SuperPreview
La nueva herramienta de Microsoft está diseñada para ayudarte a comparar tu sitio web en diferentes navegadores.

Haz clic aquí para ir a la página de esta herramienta»

Prueba de desempeño

pingdom-tools

13. Pingdom Tools
Analiza la velocidad de tu sitio web y la forma en que los elementos son cargados.

Haz clic aquí para ir a la página de esta herramienta»

14. YSlow
Es la mejor herramienta para optimizar tu sitio web y ganar velocidad extra.

Haz clic aquí para ir a la página de esta herramienta»

15. Web Page Analyzer
Un servicio simple pero poderoso que genera un reporte del desempeño de tu sitio web.

Haz clic aquí para ir a la página de esta herramienta»

Conclusión

Puedes probar estas herramientas en tu sitio y ver qué mejoras puedes añadir. Seguramente después de probar estos servicios todos encontrarás al menos diez mejoras posibles para tu página. ¡A trabajar!

Fuente: Graphic Rating

2009-08-18

Cómo desbloquear una BlackBerry

Logo de Blackberry¿Te compraste un dispositivo BlackBerry en Estados Unidos u otro país? y ¿lo quieres usar en México o con cualquier compañía como Telcel, Movistar, Claro, etc.? existe un método muy fácil que según en bemobl aseguran que funciona para todos los modelos de BlackBerry que actualmente hay en el mercado, yo ya no uso BlackBerry así que no pude probar el truco pero si tienes una te invito a probar el truco que además puede ser muy útil si viajas a otro país ya que no tendrás que contratar un plan de datos internacional ya que podrás comprar una SIM en el país que visites y usar tarifas locales lo cual es evidentemente más barato.

Tutorial para liberar todos los modelos de BlackBerry.

5 formas de usar Ajax con jQuery

La gente de Nettuts publica un interesante artículo de como usar Ajax con jQuery. Concretamente las 5 formas con las que jQuery nos permite enviar peticiones asíncronas.

  1. $.load()
  2. $.get()
  3. $.post()
  4. $.getJSON()
  5. $.getScript()

$.load()

Se trata de la función que más me gusta de jQuery ya que hace que una de las tareas más comunes de desarrollar con Ajax sea tan sencillo y claro como veremos en el ejemplo:

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Este ejemplo, traído de la página de documentación de jQuery, se encarga de lanzar una petición a la URL /Main_Page (usa URL Rewrite) y del HTML de respuesta cogemos los elementos #jq-p-Getting-Started li y lo insertamos dentro de #links.

Simplemente genial, cómodo y rápido.

$.get()

Se trata del función sencilla con la que podemos lanzar peticiones GET al servidor mediante Ajax.

$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

Mediante el paso de 3 opciones, de las cuales 2 son opciones ( condicionales mejor dicho) puedes lanzar la petición al fichero (1º) con los parámetros (2º) y tratar la respuesta mediante un callback (3º).

$.post()

Al igual que la anterior, esta función permite enviar peticiones POST mediante ajax.

$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});

Igual de fácil que en el caso anterior.

$.getJSON()

Aunque los anteriores tienen la posibilidad de especificar el tipo de retorno, la opción más cómoda es la de usar este método que permite obtener la respuesta JSON evaludada en la función callback.

$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});

Teniendo en cuenta el navegador, se usará el objeto JSON nativo o se usará el sistema basado en eval().

$.getScript()

Aunque técnicamente no es una petición Ajax, se trata de una petición al servidor y por eso tiene cavida en el post.

$.getScript("test.js", function(){
alert("Script loaded and executed.");
});

Con este método podemos cargar asíncronamente un fichero Javascript y mediante el parámetro (2) callback podemos ejecutar código Javascript usando el que está en el fichero js que queremos cargar (1).

2009-08-17

Expresiones Regulares con JavaScript y PHP

Patrones comunes para JavaScript RegExp() y PHP eregi():

Nombre con Ñ y acantos y espacios y tiene que tener como minimo 4 caracteres y 28 como maximo:
^([a-záéíóúäëïöüñ .]{4,28})$

Mail:
^(((([a-z\d][\.\-\+_]?)*)[a-z\d])+)\@(((([a-z\d][\.\-_]?){0,62})[a-z\d])+)\.([a-z]{2,6})$

PassWord: con letras, numeros, y '?¿=@+$#.-'
eregi('^([_a-z0-9?¿\=\@\+\$\#\.\-]{6,20})$', $pass)

WEB URL FULL: "http://" o "https://" con o sin "www."
eregi('^(ht)tp(s?)\:\/\/[0-9a-z]([-.\w]*[0-9a-z_])*(:(0-9)*)*(\/?)( [a-z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$', $web);

Comentario que soporta de 5 hasta 255 caracteres letra, números y salto de lineas
eregi ( '^([ñáéíóúäëïöüç0-9a-z\. \n].*){5,255}$', $pregunta )

Telefono solo números mayor que 8 dígitos y menor que 15 dígitos
eregi('^[0-9]{8,15}$', $telefono);

Numero entero: Del 1 al 99999999999
eregi('^([0-9]{1,11})$', $id);

Tool On-Line:

http://erik.eae.net/playground/regexp/regexp.html

Software gratis RegExpEditor para hacer testing de patter (Patrones) JavaScript:
http://sourceforge.net/projects/regexpeditor/

Ejemplo de como implementar con JavaScript expresiones regulares:

function validatePass(campo) {
var RegExPattern = /(?!^[0-9]*$)(?!^[a-zA-Z]*$)^([a-zA-Z0-9]{8,10})$/;
var errorMessage = 'Password Incorrecta.';
if ((campo.value.match(RegExPattern)) && (campo.value!='')) {
alert('Password Correcta');
} else {
alert(errorMessage);
campo.focus();
}
}

2009-08-04

30 tutoriales para diseñar un sitio web con PhotoShop

1. ) Design a Beautiful Website From Scratch

2. ) How to Create a Clean Web 2.0 Style Web Design in Photoshop

3. ) Create a Magic Night Themed Web Design from Scratch in Photoshop

4. ) Design a realistic website layout in photoshop

5. ) Watercolored Design Studio Blog Layout

6. ) Design an Awesome Colorful Layout

7. ) How to Create a Worn Paper Web Layout Using Photoshop

8. ) Premium Wordpress Theme Design

9. ) Create a Professional Portfolio Design in 17 Easy Steps

10. ) Create a nature portfolio layout

11. ) How to Create a Sleek and Textured Web Layout in Photoshop

12. ) Website Gallery Layout Design

13. ) Create a Dark Portfolio Pixel Layout

14. ) Create another type of layout in Photoshop

15. ) Chocolate Pro WordPress Style Layout

16. ) Create a Nature Inspired Painted Background in Photoshop

17. ) Clean Photo Gallery Website Layout

18. ) Design a creative unusual layout

19. ) Tutorial RocknRolla Blog

20. ) Create an Awesome Portfolio Layout

21. ) Create a Business PSD Layout in less than 10 minutes

22. ) Design a Music Software Layout

23. ) Business Layout Tutorial

24. ) Create a Clean Modern Website Design in Photoshop

25. ) How To Build Your Own Single Page Portfolio Website

26. ) Design a Clean Corporate Website

27. ) Create a Dark and Sleek Web Layout Using Photoshop

28. ) Studio Layout Tutorial

29. ) Create a clean PSD layout with a 3D look

30. ) Design a Grunge Portfolio