Archivos en la categoría Programación

Accesibilidad web: diseño web híbrido con medidas líquidas y fijas

Accesibilidad web: diseño web híbrido con medidas líquidas y fijasInteresante artículo publicado en Seraccesible que trata sobre el diseño de una página web con medidas fijas (px ó ex) o líquidas (em, %) que determinará su capacidad para ser accesible o no. Según el WAI, una página web debe ofrecer la posibilidad de adaptarse a cualquier interfaz de usuario sin que por ello haya una pérdida de información o legibilidad.

El artículo nos comenta los pros y contras de la utilización de diseños fijos, líquidos, flexibles e híbridos, decantándose el autor por éste último. El WAI no establece qué diseño es el más apropiado para desarrollar una web accesible, si no que lo deja a la elección del diseñador, siempre y cuando el contenido sea transformable sin que por ello se pierda información o dificulte su comprensión.

Finalmente, el autor nos ofrece varias sugerencias para diseñar páginas web accesibles:

  • Evitar la utilización del pixel (px) para definir el tamaño del texto. Si se utiliza para determinar el ancho de un elemento (contenedor) se deben hacer pruebas en las diferentes condiciones de navegación.
  • Si nuestro diseño en determinadas condiciones no ofrece una buena legibilidad, proporcionar estilos de presentación alternativos.
  • Cada dispositivo de navegación (pantalla, PDA, etc.) o simplemente de presentación (impresora), requiere determinadas carácteristicas en el diseño. Si nuestro diseño no está adaptado a un determinado dispositivo, crear la CSS específica.

Más info | Diseño web accesible

2 Comentarios

Programas gratis para desarrollar aplicaciones web en PHP

Programas gratis para desarrollar aplicaciones web en PHPUna IDE (Entorno de Desarrollo Integrado) es una aplicación de escritorio que nos permite escribir, compilar y debuggear código. Normalmente a través de una IDE’s podremos desarrollar code en diferentes lenguajes, proporcionándonos ayuda contextual y documentación para solventar cualquier duda.

Las IDE’s opensource gratuitas más extendidas, sobre todo en entornos Java, son Eclipse NetBeans IDE 6.5(y no especialmente en este orden). Una desarrollada por IBM (similar a WebSphere) y la otra por SUN. A día de hoy ambas están muy igualadas en cuanto a consumo de memoria y paquete de funcionalidades, además, al tratarse de aplicaciones opensource, hay una gran comunidad detrás de ellas que se encarga de desarrollar plugins para añadir nuevas funcionalidades. Ambas están disponibles para plataformas Windows, Unix y Mac.

Si bien son similares, en la red recomiendan usar Eclipse para escribir código y NetBeans para crear GUI’s, siempre hablando de desarrollo Java (Struts y Swing respectivamente). Sin embargo, si lo que queremos es una IDE para desarrollar en PHP, ambas disponen de un paquete especialmente diseñado para programar en este lenguaje: Eclipse PHP y NetBeans PHP. Éstos nos proporcionan una serie de herramientas para facilitarnos la programación en PHP: colorean los distintos elementos del código, indentación y tabulación, ayuda contextual, autocompletar, etc. A mí personalmente me parece más completo NetBeans gracias a diversas herramientas que facilitan el desarrollo de PHP, CSS e incluso Javascript. A diferencia de otras IDE’s, es capaz de reconocer un determinado lenguaje y aplicarle los colores e indentación correspondientes para poder compronderlo mejor de un vistazo, incluso cuando en un mismo fichero hay varios trozos de código escritos en distintos lenguajes. Otra utilidad es la movilidad de cada documento abierto, que a través de las pestañas podremos distribuir por la pantalla para comparar ficheros o simplemente ordenarlos.

Por otro lado tenemos otra aplicación mucho más simple pero igualmente útil para programar, además de su reducido peso y consumo de memoria: Notepad++. Con una extensa biblioteca de lenguajes soportados, podremos seleccionar con el que vayamos a programar para que coloree e indente el código correctamente.

Finalmente destaco Coda para entornos Mac. Con una interesante GUI, nos ofrece todas las características que podríamos encontrar en una aplicación comercial para desarrollo, como DreamWeaver.

7 Comentarios

Descarga 50 libros de programación gratis

Descarga 50 libros de programación gratis
Interesante recopilación de e-books de programación
que podrás descargar de forma gratuita. Los libros tratan sobre la mayoría de lenguajes de programación que existen en el mercado: C, C++, PHP, Java, etc., bases de datos como SQL Server y muchos son manuales básicos de diseño y programación web: HTML, DHTML, CSS. Si estás interesado en aprender nuevos lenguajes de programación o ampliar los conocimientos que ya tienes, descargate este pack de libros de programación.

Más info | http://elefren.com


3 Comentarios

Syntax Highlighter, presentación de código fuente en tu página web o blog

Si deseas mostrar en tu página web o blog el código fuente de un script o de cualquier aplicación, te encontrarás con el problema de que muchos caracteres, e incluso trozos de código, no aparecerán correctamente al ser interpretados como etiquetas HTML o de un lenguaje de programación (PHP, ASP, JavaScript, etc.).

Cuando escribimos un código fuente en una página, nuestra intención es mostrar todos los elementos que lo forman para que pueda ser comprendido correctamente. Por ello, una solución podría ser traducir a HTML aquellos caracteres que puedan ser malinterpredados por ser equivalentes o formar parte de elementos clave de un determinado lenguaje de programación orientado a páginas web. Por ejemplo, en vez de escribir la etiqueta <body>, podríamos traducir los corchetes a HTML, de tal forma que el resultado sería &lt; body &gt; y el código aparecería sin ser interpretado.

Sin embargo, tenemos a nuestra disposición una herramienta gratuita que además de permitirnos escribir código fuente sin necesidad de traducir ningún caracter, nos lo mostrará de una forma profesional, indicando el número de cada línea y cambiando los colores de los elementos según su función dentro del lenguaje de programación en el que esté escrito.

»

Syntax Highlighter es un proyecto OpenSource de Google Code que nos permite publicar un código fuente de forma sencilla, con un aspecto similar al de cualquier aplicación de desarrollo y cambiando los colores de aquellos elementos clave (funciones, tipos de variables, etc.), para ello, disponemos de librerias Javascript para los distintos tipos de lenguajes de programación (php, asp, javascript, java, c, c++, c-sharp, etc.). Y lo mejor de todo es que cada librería tan sólo ocupa 4kb, por lo que apenas se notará en la carga de la página.

Para poder instalarlo en nuestra página web debemos bajar un paquete con varios ficheros javascript, css y swf. Lo ideal es estructurarlo en tres carpetas, y en cada una de ellas guardar los ficheros correspondientes.

Una vez lo hemos subido a nuestra web, tenemos que añadir en la cabecera de la página el siguiente código:

  


Si el código que vamos a escribir no es de C-Sharp, entonces tendremos que importar la librería correspondiente: shBrushJScript.js, shBrushPhp.js, etc.

Para que nuestro código aparezca correctamente, tendremos que meterlo entre la etiqueta <pre></pre>. Esta etiqueta HTML permite que cualquier texto escrito dentro de ella aparezca con los espacios en blanco que tenga y no se compacten en uno solo. De esta forma, podemos escribir texto tabulado a base de espacios. Además, tendremos que asignar un name="code" y un class a dicha etiqueta. El class dependerá del lenguaje que vayamos a mostrar, ya que establece la relación con la librería javascript correspondiente. Por ello, es importante que no olvidemos importarla. Por ejemplo, si el código es PHP, el class será class="php". Para el resto de lenguajes tenemos las indicaciones en la web del proyecto.

<pre name="code " class="c-sharp">
      ... aquí el código ...
</pre>

El trozo de código podremos copiarlo al portapapeles, abrirlo en una ventana nueva o incluso imprimirlo a través de varios botones situados en la parte superior.

Más info | http://code.google.com/p/syntaxhighlighter/

Sin Comentarios

Yahoo! User Interface Library (YUI), Framework con un extenso catálogo de códigos Javascript y CSS

Yahoo! User Interface Library (YUI), extenso catálogo de códigos Javascript y CSS
La Yahoo! User Interface Library (YUI) es una extenso catálogo con cerca de 300 códigos JavaScript y CSS que podremos usarlos libremente en nuestros proyectos web, ya sean personales o comerciales. Tenemos a nuestra disposición ejemplos, código fuente y documentación relacionada para poder utilizar y personalizar todos los scripts. Podremos consultar la YUI a través del portal de Yahoo para desarrolladores web o bien bajarnos un paquete con todo el material para poder estudiarlo de forma offline.

Los scripts están divididos en categorías según su utilidad: animación, autocompletar, cuentagotas, treeview, DOM, CSS; etc. En total, podemos encontrar hasta 40 categorías distintas con varios scripts cada una que nos permitirán acercarnos a la utilidad de una forma básica o más avanzada.

Si acabas de conocer JavaScript, y deseas aprenderlo más a fondo, este recurso es de gran utilidad, ya que gracias a los ejemplos podremos ver qué utilidades prácticas pueden desarrollarse bajo esta tecnología.

Más info | http://developer.yahoo.com/yui/

Sin Comentarios

Como cambiar de Workspace en WebSphere si ya tenemos uno configurado por defecto

Como cambiar de Workspace en WebSphere si seleccionaste uno por defecto

Esta tarde mientras intentaba cambiar el Workspace (espacio de trabajo)  del WebSphere resultaba que no podía hacerlo ya que anteriormente había activado la opción de elegir por defecto la ruta del workspace, de forma que ya no aparecía la ventana para seleccionarlo al arrancar la aplicación.

Finalmente, después de la búsqueda de una solución sin resultado, me he puesto a revisar todas las opciones de la aplicación, hasta que al final se me ha ocurrido entrar en el directorio y ver si había algún fichero de configuración, y efectivamente, ahí estaba la solución. El fichero en cuestión es wsappdev.ini, que se encuentra en C:\Archivos de Programa\IBM\WebSphere Studio

[Settings]
DefaultWorkspace=<My Documents>\IBM\wsappdev51\workspace
ProductName=IBM WebSphere Studio Application Developer
Version=5.1.1
Full=Yes
KeyName=wsappdev
VMArgs=-X
LUMProductID=1
LUMProductVersion=5.1.1
Website=www.ibm.com/websphere/developer/zones/studio/appdev/

[Environment Variables]

Simplemente eliminamos la segunda línea y al arrancar el WebSphere nos solicitará indicar la ruta del workspace.

DefaultWorkspace=<My Documents>\IBM\wsappdev51\workspace

3 Comentarios