Ajuste de aplicaciones web HTML5 dinámicas mediante herramientas en línea de código abierto


Al comenzar el último artículo de esta serie, espero que haya podido comprender la importancia de HTML 5 y del desarrollo web adaptable a dispositivos móviles. Independientemente de la distribución de escritorio que elija, Netbeans es un IDE poderoso y cuando se usa junto con las habilidades básicas de línea de comandos de Linux y las herramientas discutidas en la Parte 3, puede ayudarlo a crear aplicaciones sobresalientes sin mucha molestia.

Sin embargo, tenga en cuenta que solo hemos cubierto los conceptos básicos de HTML 5 y el desarrollo web en esta serie y asumimos que está algo familiarizado con HTML, pero la WWW está llena de excelentes recursos, algunos de ellos son FOSS, para expandir lo que he compartido aquí.

En esta última guía hablaremos sobre algunas de esas herramientas y le mostraremos cómo usarlas para agregarlas a la página existente en la que hemos estado trabajando Embelleciendo nuestra UI (interfaz de usuario).

Recordará de la Parte 2 de esta serie ("Adición de jQuery y Bootstrap para escribir una aplicación web HTML5") que el archivo zip Bootstrap viene con un directorio llamado fuentes. Guardamos su contenido en una carpeta con el mismo nombre dentro del SiteRoot de nuestro proyecto:

Como probablemente pueda ver en la imagen de arriba, Bootstrap incluye un conjunto de elementos llamados glifos, que son ni más ni menos los componentes incorporados que proporcionan iconos atractivos para botones y menús en sus aplicaciones. La lista completa de glifos incluidos en Bootstrap está disponible en http://getbootstrap.com/components/.

Para ilustrar el uso de glifos, agreguemos algunos a la barra de navegación en nuestra página principal. Modifique los menús de la barra de navegación de la siguiente manera. Tenga en cuenta el espacio entre cada etiqueta de intervalo de cierre y el texto del menú:

<li class="active"><a href="#"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a></li>
<li><a href="#"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> About</a></li>
<li><a href="#"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Contact</a></li>

(por cierto, las etiquetas span se utilizan aquí para evitar que los iconos se mezclen con otros componentes).

Y aquí está el resultado:

Los glifos, aunque útiles, también son limitados. Y aquí es donde Font Awesome entra en escena. Font Awesome es un conjunto de herramientas completo de íconos/fuentes/CSS que tiene el potencial de integrarse sin problemas con Bootstrap.

No solo puede agregar muchos otros íconos a sus páginas, sino que también puede cambiar su tamaño, proyectar sombras, cambiar de color y muchas otras opciones usando CSS. Sin embargo, dado que tratar con CSS está fuera del alcance de esta serie, solo trataremos los íconos de tamaño predeterminado, pero al mismo tiempo lo alentaremos a "profundizar un poco más" para descubrir hasta dónde puede llevarlo esta herramienta.

Para descargar Font Awesome e incorporarlo a su proyecto, ejecute los siguientes comandos (o siéntase libre de ir directamente al sitio web del proyecto y descargar el archivo zip a través de su navegador y descomprimirlo usando herramientas GUI):

# wget http://fortawesome.github.io/Font-Awesome/assets/font-awesome-4.3.0.zip

(sí, el nombre de dominio es en realidad FortAwesome, con una R, por lo que no es un error tipográfico).

# unzip font-awesome-4.3.0.zip
# cp font-awesome-4.3.0/css/font-awesome.min.css /home/gabriel/NetBeansProjects/TecmintTest/public_html/styles
# cp font-awesome-4.3.0/fonts/* /home/gabriel/NetBeansProjects/TecmintTest/public_html/fonts

Y agregue el archivo .css a la lista de referencias en la parte superior de nuestra página, tal como hicimos con jQuery y Bootstrap anteriormente (recuerde que no tiene que escribir todo, simplemente arrastre el archivo la pestaña Proyectos en la ventana de código):

Tomemos la lista desplegable en nuestra barra de navegación, por ejemplo:

Bien, ¿verdad? Todo lo que se necesita es reemplazar el contenido de la ul class existente llamada menú desplegable en la parte inferior de index.php con:

<li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
<li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>

Créame, invertir su tiempo en aprender a utilizar estas herramientas será una experiencia muy gratificante.

Como persona de TI, debe estar familiarizado con los numerosos recursos de ayuda que Internet ha puesto a su disposición. Dado que el desarrollo web no es una excepción, aquí hay algunos recursos que estamos seguros de que le resultarán útiles al ajustar sus aplicaciones.

Cuando trabaje con código Javascript (por ejemplo, cuando trabaje con jQuery como hicimos en la Parte 2), querrá usar JSHint, un verificador de código de calidad Javascript en línea que tiene como objetivo ayudar a los desarrolladores a detectar errores y problemas potenciales. Cuando se encuentran esos errores, JSHint indica el número de línea donde se encuentran y le da sugerencias para solucionarlos:

Eso seguramente se ve muy bien, pero incluso con esta gran herramienta automatizada, habrá ocasiones en las que necesitará que alguien más le eche un vistazo a su código y le diga cómo solucionarlo o mejorarlo, lo que implica compartirlo de alguna manera.

JSFiddle (un probador de código Javascript/CSS/HTML en línea) y Bootply (igual que JSFiddle pero especializado en código Bootstrap) le permiten guardar fragmentos de código (también conocidos como violines) y proporcionarle un enlace para compartirlos muy fácilmente a través de Internet (ya sea por correo electrónico con tus amigos, usando tus perfiles de redes sociales o en foros).

Resumen

En este artículo, le proporcionamos algunos consejos para ajustar sus aplicaciones web y compartimos algunos recursos que serán útiles si se queda atascado o si desea que otro par de ojos (y no solo uno, sino muchos) eche un vistazo a su código para ver cómo se puede mejorar.

Lo más probable es que también conozca otros recursos. Si es así, no dude en compartirlos con el resto de la comunidad de Tecmint utilizando el formulario de comentarios a continuación y, por cierto, no dude en hacernos saber si tiene alguna pregunta sobre el contenido presentado en este artículo.

Esperamos que esta serie le haya dado una idea de las vastas posibilidades del desarrollo web receptivo y compatible con dispositivos móviles.