Desde hace unos años escuchamos bastante el término de desarrollo web y probablemente se pregunten o han escuchado: ¿Qué es eso? ¿No es lo mismo que programación? Simplificando, desarrollo web consiste en crear soluciones tecnológicas que se ejecutarán dentro de un navegador (como Firefox/Chrome/Edge o Safari). Por este motivo es diferente a otro tipo de programación porque un navegador funciona de una forma particular y la información debe viajar a través de una Intranet o Internet. En otras palabras, crear todos esos programas y sitios web que vemos dentro de un navegador.

El uso del término desarrollo implica tareas mas allá de la programación: análisis de requisitos, conceptos de usabilidad, seguridad de la información, ingeniería de software, programación del lado del servidor y cliente, entre otros. Cuando alguien te diga que es desarrollador, implica que no solo codifica programas sino va mas allá y realiza mas tareas.

¿Que sé debe conocer para el desarrollo web?

Primero debes conocer los conceptos básicos de programación web:

  • HTML: es el lenguaje de marcado que permite estructurar el contenido que ves en un navegador. Es el esqueleto de la parte visual de la aplicación. En mi opinión aprender HTML es el primer paso para aprender desarrollo web, pues solo necesitas un editor de texto y un navegador para empezar a crear tus primeras páginas.
  • CSS: permite definir como va a lucir el HTML dependiendo del dispositivo. Indica al navegador los colores, tipos de letra, posición y tamaño al contenido del HTML. Su curva de aprendizaje es mediana pero dominar la tecnología requiere mucha experiencia.
  • JavaScript: es el lenguaje de programación que permite definir eventos, realizar tareas, acciones. Se ejecuta tanto en el lado del cliente (a través del navegador) como del servidor (para realizar cálculos, obtención de datos, entre otros). Si solo quieres hacer páginas web sencillas, no es necesario que aprendas esto por los momentos. Sin embargo, tarde o temprano te toparas con JavaScript a medida que vayas haciendo sitios mas complejos. Pues necesitaras agregar interacciones y automatizar acciones.
  • Lenguaje de programación del lado del servidor: las tecnologías anteriores permiten realizar páginas web que se muestran en el navegador. Pero cuando necesitamos interactuar con el servidor: iniciar sesión, subir archivos, descargar información. Necesitamos programar las acciones que debe realizar el servidor donde está alojada la página para saber que debe responder. Esto se hace mediante lenguajes de programación del lado del servidor. Entre los mas comunes suele ser PHP, JavaScript, Ruby, Java, Python, entre otros.

¿Qué aprender luego?

El siguiente paso es hacerte experto en estas 4 tecnologías, e ir en todo el ecosistema alrededor de ellas. Por ejemplo, todo sitio web se aloja en un servidor, entonces debes aprender como se configurar y optimizar uno. La información se almacena en base datos por lo que aprender a diseñarlas y consultar información  a través de ella te ayudará a ser mejor profesional. Conocer como obtener buenos resultados en los buscadores, visualizar correctamente el contenido en cualquier dispositivo. Aplicar técnicas de usabilidad en las interfaces para mejorar la interacción con los visitantes.

Pero no todo es tecnología, pues existen cosas importantes para desarrollador web: redactar correos para conversar correctamente con clientes. Aprender cuánto cuesta una web para saber cuanto cobrar por el trabajo. Elaboración de manuales, entre otros.

¡Parecen muchas cosas!

Aunque parece mucha cantidad de información, poco a poco iras aprendiendo. Ser desarrollador web requiere muchos conocimientos y años de experiencia. Pero con paciencia y práctica lograrás convertirte en uno.  A mi me parece una excelente rama de la informática, cada año va en auge y se puede trabajar desde cualquier parte del mundo.

Espero que les haya gustado esta introducción, recuerden comentar cualquier aporte, sugerencia u opinión sobre el desarrollo web.

Happy coding!

Hace unas semanas debido a una fuerte gripe, me tocó trabajar en casa para un trabajo que debía hacer una oficina donde tenía mi computadora con todo el entorno de desarrollo configurado. Sin embargo en la organización tenían configurado el servicio Cloud9 para poder trabajar remotamente.

Cloud9 es un completo entorno de desarrollo y ejecución en la nube, permitiéndote desde tu navegador web crear y ejecutar software web. El mismo posee un editor muy parecido a Sublime Text (de hecho muchos atajos del teclado son iguales), acceso a la terminal de un servidor y la posibilidad de configurar dependencias necesarias para ejecutar el programa: servidor web, framework, base de datos, etc.

Entorno de desarrollo de Cloud9

Entorno de desarrollo de Cloud9, todo se está ejecutando desde el navegador

El espacio de trabajo

El uso de Cloud9 es muy sencillo, primero debes configurar un espacio de trabajo (Workspace), actualmente (al menos en la versión gratuita) te ofrece entornos como LAMP, Django, NodeJS, puro HTML, Rails, entre otros. Luego de seleccionar el entorno especificas asignas un repositorio de control de versiones (creo que es impensable hoy en día hacer un proyecto sin eso), para obtenerlas fuentes, haces las configuraciones requeridas por tu aplicación y listo. Luego se encarga de correr los servicios necesarios y puedes acceder a tu aplicación web desde una URL.

Plantilla de espacios de trabajo disponibles en Cloud9

Plantilla de espacios de trabajo disponibles en Cloud9

¿Por qué usarlo?

La principal ventaja de usar Cloud9 es poder escribir el código de un programa, guardar, cambiarte de equipo o de localidad y seguir escribiendo código el mismo código sin problemas. Aunque puedes sacrificar privacidad (en la licencia no se ve nada extraño) es muy útil en casos donde trabajas en distintos lugares y no puedes cargar tu portátil (en mi caso me muevo entre casa, universidad y oficinas de clientes pero por la inseguridad no puedo cargar mi portátil en todos lados). Otro caso, como en el que descubrí la herramienta, en organizaciones pueden usarlo como respaldo en caso que un empleado necesite trabajar desde su casa u otro lugar de forma urgente.

Algo interesante, es que en pocos segundos puedes tener un entorno de ejecución funcional. Con unos clics puedes tener un servidor web hecho Django y empezar a trabajar en él (o estudiarlo), luego con otros clics tienes un entorno en Ruby. Lo cual es mas fácil que estar instalando dependencias y configurar servicios en tu sistema operativo.

El editor está realizado en Javascript y tecnología detrás de ella es un servidor NodeJS que crea contenedores en Docker, me parece interesante esta arquitectura. Algo que me parece «fácil» de replicar en otros servidores y poder contar con una solución similar.

Si deseas contar con IDE y entorno de ejecución que puedas usar en cualquier computadora sin estar descargando cosas, te recomiendo utilizar Cloud9. Lo único es que como toda nube, dependes de un tercero y a veces puedes desconfiar de la seguridad del mismo o de la calidad de protección de los datos. Aunque, me parece un buen entorno para aprender tecnologías o hacer experimentos rápidamente.

Sitio oficial de Cloud9

Hace tiempo en una charla de Paul Irish, ví un programa llamado Live-reload para recargar automáticamente una página en el navegador cada vez que realicemos un cambio en ella. Pero nunca había podido configurarla en Linux, luego hace unos días en una entrevista de Addi Osmani vi un comentario que me hizo volver a tratar de instalarla, su comentario fue: «Ya en el 2013 nadie debería perder tiempo en recargar manualmente el navegador».

Así que me puse instalar el programa y descubrí Guard, una aplicación hecha en Ruby para chequear las modificaciones realizadas a archivos y realizar acciones en base a ello. Esto permite por ejemplo, que al realizar algún cambio en un archivo escrito con SASS o SCSS genere el CSS automáticamente, si modificas un archivo JS de desarrollo genere el archivo final ya comprimido, generar el archivo JS desde CoffeScript, entre otros. De esta manera automatiza gran cantidad de tareas que usualmente harías manualmente a través de comandos del Editor/IDE.

 

 Instalación

Aunque existen instaladores para MacOS y Windows los desarrolladores prefieren instalarlo a través de Ruby GEMs, el proceso es sencillo y se aplica para todos los sistemas operativos que soporten Ruby, para ello en la consola debes ejecutar los comandos:

gem install bundle #facilita el proceso

gem install guard #el programa que estamos comentado

gem install guard-livereload #extensión para actualizar el navegador

gem install guard-sass #para pre-procesado de CSS

 

Configuración

Luego te diriges a la raíz del proyecto que estás elaborando, allí ejecutas el comando:

bundle init

Nota: Si el comando falla es porque no tienes el comando gem en tu variable $PATH
Esto creará un archivo llamado Gemfile que contiene toda la información de los gems utilizados en el proyecto y las dependencias de lo mismos. Una vez creado con el comando mencionado, lo abres y agregas el siguiente contenido:

gem 'guard'

gem 'guard-livereload'

gem 'guard-sass', :require => false

Luego debes crear un archivo con el nombre Guardfile en la raíz del proyecto, en él se definirán las reglas que deben ocurrir para realizar las acciones. El siguiente ejemplo está diseñado para ser usado en un proyecto PHP con el framework Yii:

#Modulo para que al modificar un archivo SASS genere el CSS ya comprimido
guard 'sass',
:input => 'css',
:output => 'css',
:style => :compressed
#reglas para la recarga del navegador
guard 'livereload' do

#actualiza el navegador al ocurrir cambios en las vistas, modelos y controladores.
watch(%r{protected/views/.+\.php})
watch(%r{protected/views/.+/.+\.php})
watch(%r{protected/views/.+/.+/.+\.php})
watch(%r{protected/models/(.+)/(.+)\.php$})
watch(%r{protected/controllers/(.+)\.php$})

#Comprime los archivos de Javascript utilizando un script llamado compressJS ubicado en la carpeta js/
watch(%r{js/.+\.original\.js}) {`js/compressJs`}

#Una vez generado los archivos JS finales (ya comprimidos) recarga el navegador
watch(%r{js/.+\.js})

#Recarga el navegador cuando se modifica un archivo CSS
watch(%r{css/.+\.css})
end

La sintaxis es watch(%r{EXPRESION_REGULAR_DE_ARCHIVOS}) {comando a ejecutar}, con esto puedes jugar a detectar cambios en algunos archivos y realizar a través de una secuencia de comandos, tareas respecto a ese archivo modificado. También noten como por ejemplo al comprimir el archivo JS no se recarga el navegador, sino en otra regla cuando se modifica un archivo JS, es decir, algunas cosas deben hacerse a través de la definición de varias reglas.

Uso del programa

Para ejecutarlo debes iniciar guard con el comando:

bundle exec guard

A partir de ahora guard chequeará los cambios en los archivos y ejecutará las acciones configuradas. Para refrescar el navegador automáticamente, es necesario instalar LiveReload para Firefox o Chrome . Una vez instalada, ve a la pestaña donde estas visualizando el proyecto, presionas el botón de LiveReload y debería conectarse sin problemas a guard.

Complemento de LiveReload

Botón para conectarse con Guard LiveReload

Para probarlo, edita un archivo de vista  y debería actualizarse la página sin problemas. También al editar un archivo SASS (o SCSS) debería generar el archivo CSS y a su vez recargar la página para ver la nueva apariencia, al editar los archivos de Javascript deberían comprimirse y cualquier otra acción que hayas configurado.

Ahora depende de ustedes que utilicen estas herramientas todos los días, pues mejorarán su trabajo al automatizar ciertas tareas y enfocarse en otras mas importantes. Si alguien conoce otra utilidad para Guard, no duden en dejar un comentario.