Ninguna página web está libre de sufrir un ataque. Aunque hay cosas que pueden ponerlo más difícil.

Tener un sitio web protegido debería ser una de las preocupaciones principales de cualquier webmaster. Sobre todo teniendo en cuenta que la creación de código malicioso y ciberataques no deja de aumentar. Como tu página es la puerta de entrada a clientes, seguidores y personas para ayudarte a lograr el éxito, es fundamental mantenerla lo más protegida posible. Desde tienda del espía nos dan algunos consejos al respecto.

Usa las versiones más actualizadas de todo

Muchos de los ataques que se reciben aprovechan vulnerabilidades en el código de los programas. Por eso, es fundamental que tengas las versiones más actuales posibles, ya que en cuanto se detecta algún fallo crítico, los responsables de estos lanzan parches para cerrar esas brechas.

Principalmente importante es tener la última versión del gestor de contenidos que utilizas, como WordPress o Prestashop. También se aplica a los complementos que utilices para que tu sitio funcione y tenga la apariencia que quieres.

Elige un proveedor de alojamiento de calidad

La cantidad de ofertas de empresas que ofrecen alojamiento web es muy abrumadora. Por eso, cuando estés buscando un servidor VPS para subir tu página, haz una búsqueda exhaustiva y compara mucho más que el precio. Haz pruebas, mira lo que dicen de la empresa otros usuarios y asegúrense de los compromisos que tienen para sus clientes.

Utiliza protocolos de seguridad

Google está prestando atención a esto incluso para el posicionamiento, por lo que además de por protección deberás hacerlo de cara al SEO. Protege la seguridad de quienes navegan por tu sitio con un certificado de seguridad que cifre la comunicación. De este modo impedirás que terceros sin autorización puedan hacerse con esta información.

Esto es especialmente necesario cuando manejes información bancaria, datos personales o claves de acceso. Por ejemplo si tienes una tienda en línea en la que los clientes pueden abrirse una cuenta.

Contraseñas seguras

De nada sirve contar con el mejor servicio de hosting para tu web si la contraseña es tan básica que la adivinaría un niño de primaria jugando  con el teclado. Puede parecer bastante obvio, pero teniendo en cuenta que las claves más habituales son 123456 o qwerty, no está de más destacar este punto.

Para que tu contraseña sea segura debes evitar fechas destacadas, palabras que están en el diccionario o nombres de pila. También tienes que procurar que haya símbolos, números y combinaciones de mayúsculas y minúsculas. Y no uses la misma contraseña para más de un sitio.

Captchas contra el spam

Si no quieres ver como tu página se llena de comentarios realizados por robots, utiliza un cortafuegos que demuestre que es un humano el que quiere escribir algo. Así solo recibirás información de parte de personas reales, y no de programas que tratan de saturar el servidor lanzando ataques de envío masivo de información.

Servicios específicos contra ataques

Si tu web ha sufrido varios ataques, manejan información sensible o simplemente quieres extremar las precauciones, contrata servicios especializados para potenciar la seguridad de tu página. Puedes solicitar servicios AntiDDoS y similares a tu proveedor de alojamiento. Y si no cuenta con ellos, tal vez sería buena idea mirar quién lo tiene, ya que cada vez es más necesario contar con este tipo de protecciones.

Tal vez creas que no necesitas aumentar la protección de tu página porque no tienes un volumen tan grande como para que te consideren importante. Sin embargo, quienes se dedican a lanzar ataques no hacen distinción, e incluso se concentran en este tipo de webs para secuestrarlas y utilizarlas con fines maliciosos.

Recuerda compartir este artículo si te gusto y compartir tus opiniones en la caja de comentarios.

What Comes Next Is the Future es un documental sobre la web creado por Matt Griffin. El cual relata la historia de la web: las fases por las cuales ha pasado, como está actualmente y hacia donde se dirige, contada por la gente que la construyó.

El contenido del documental

Si eres desarrollador web o deseas convertirte en uno, no debes dejar de ver este documental. Lo que mas me gustó es la participación de personas muy importantes en el mundo de la web como: Tim Berners Lee, Ethan Marcotte, Eric Meyer, John Resig, Jessica Ivins, entre otros. Pues estas escuchando la historia por quienes realmente lo hicieron y se expresan con un cierto sentimiento que le da mejor calidad a la historia.

What Comes Next Is the Future

What Comes Next Is the Future es un buen documental para todo desarrollador web

El documental tiene una duración de 1 hora, abarca desde la creación de la web, cuando todos creábamos sitios con tablas, el nacimiento de CSS, la hegemonía de flash, la aparición de los dispositivos móviles y como afectó a los sitios web. Me gustó porque muestran la historia de la web desde un punto de vista de los desarrolladores, a diferencia de otros documentales donde lo hacen desde el punto de vista del usuario. En mi caso, que llevo haciendo páginas desde 1999, el documental me recordó como se hacían muchas cosas en el pasado y como algunas tecnologías nacieron para solventar problemas del pasado.

Cómo ver What comes next is the future

Lo mejor es que el documental está disponible de forma gratuita en la web, lamentablemente por ahora no tiene sub-títulos en español (sería bueno que alguien se animara a realizarlos). Así que reserva una hora para que veas What Comes next is the future a continuación.

Recuerda que si te gustó, comparte esta información con tus amigos para que conozcan mas sobre la plataforma web.

Uno de los mayores problemas para los desarrolladores web es la diferente interpretación de los estándares web por parte de los navegadores, ocasionando que un sitio web se vea de forma distinta en diferentes navegadores. Ademas, con el surgimiento de dispositivos móviles en los últimos años,  ahora también se deben hacer pruebas de las páginas bajo distintas resoluciones para abarcar mas usuarios.

Aunque puede consumir mucho tiempo navegar desde distintos dispositivos y sistemas operativos para hacer las pruebas, existen herramientas para automatizar este proceso. Una que me gustó fue Remote Preview, una aplicación web que al definir una URL en un panel central, envía el navegador web de todos los dispositivos a esa dirección, permitiéndote ver como es la página en cada dispositivo, ademas, cada 1100ms chequea la URL, por lo que si la cambias, automáticamente todos los dispositivos visitan el sitio. Esto permite ahorrar el tiempo de navegación desde cada dispositivo y permite identificar rápidamente, problemas de compatibilidad entre resoluciones o plataformas.

Para entender mejor esta herramienta, les dejo un video donde pruebo como se ve mi blog en distintos navegadores y plataformas móviles:

Así que si desarrollas un sitio web, no dejes de usar esta herramienta para comprobar que el sitio se ve bien desde tu teléfono, tableta, computadora, desde los navegadores de escritorio, sistema operativo y otros. Mientras mas compatibilidad brindes a dispositivos, mas usuarios podrán leer tu contenido y recibir mas visitas.

 

Uno de los retos de los desarrolladores web al momento de crear páginas web, es encontrar el equilibrio perfecto entre ofrecer un sitio con excelente apariencia visual y usabilidad, pero cuyo tamaño sea lo menor posible para que la carga sea rápida. Pues un sitio web rápido permite: tener mas visitas con el rendimiento actual del servidor, se ahorran costos de ancho de banda, los usuarios sienten que es una buena página y navegan mas tiempo por ella, entre otras. Este procedimiento incluye varias tareas que realizan muchos desarrolladores web como: usar las versiones reducidas (comprimidas) de Javascript, comprimir y ofuscar nuestro código del lado del cliente,  optimizar las imágenes del sitio, comprimir los archivos CSS, combinar todos los archivos CSS y Javascript en un sólo archivo (para cada tecnología) para reducir el número de conexiones, etc. Algo que no es complicado pero consume tiempo y que se debe repetir cada vez que se hacen cambios en el sitio.

Gulp

Como este proceso es repetitivo y consume tiempo, lo mejor es hacer un script que automatice cada etapa, pero hoy en día existen herramientas como que nos permite facilitar todo lo mencionado anteriormente. En este artículo hablaré sobre Gulp, una herramienta para automatizar tareas que hace lo mismo que GruntJS pero es mas fácil de usar y entender.

¿Cómo empezar?

Para instalarlo, lo hacemos a través Node Package Manager de forma global para que se instale como un comando del sistema y poder ejecutarlo en cualquier parte:

npm install -g gulp

Luego en la raíz del proyecto creamos un archivo gulpfile.js donde especificaremos las tareas a realizar:

var gulp = require('gulp');
gulp.task('default', function() {
});

Añadir una tarea

Una tarea es un conjunto de procesos, por ejemplo, optimizar el código JS consiste en: reemplazar algunas liberias por sus versiones CDN, utilizar las versiones minificadas de librerías de terceros, luego concatenar los archivos, minificar y actualizar las referencias en el HTML. Cada uno de estos procesos podemos encontrarlos en el buscador de complementos de Gulp (en caso de no existir alguna puedes crearla y publicarla en Github) y se instalan con npm.

Gulp posee una importante característica: su sistema de flujos entre tareas. Cada una de ellas recibe un conjunto de data (generalmente archivos), realiza un proceso en ella y produce nueva data para ser enviada como entrada a otro flujo. Esto permite a tareas que modifiquen gran de archivos, hacer este procedimiento en RAM y solo escribir en el disco cuando ya se ha terminado de procesar todos los archivos, por lo que se ejecutará muy rápido.

Para verlo en acción, haremos una tarea para reducir el tamaño de los archivos JS como ejemplo, entonces nuestro primer paso es instalar el plugin uglify con NPM:

npm install --save-dev gulp-uglify

Luego se deben hacer dos cosas en el archivo gulpfile.js, una es importar esta el complemento en las dependencias y asignarla a una variable, luego con esta variable podemos ejecutar la función que se encargará de (en este caso) reducir el tamaño del código javascript. Para ello debemos hacer lo siguiente:

var uglify = require('gulp-uglify');
gulp.task('comprimir', function() {
gulp.src('lib/*.js')
.pipe(uglify())
.pipe(gulp.dest('dist'))
});

Como podrás observar, hemos creado una tarea llamada comprimir , que recibe un conjunto de archivos (los archivos JS ubicados dentro de /lib), crea una tubería y ejecuta uglify que se encargará de comprimir cada uno de los archivos, finalmente entrega el resultado a la tubería que se enviará a la ruta de destino (esta se puede definir a donde uno desee). Así sucesivamente podemos ir creando procesos como los mencionados anteriormente y luego agruparlo en unas tareas mas generales, por ejemplo, tareas para generar una versión para depurar (cuya fuente no este comprimida), una versión para producción, una versión de producción para pruebas, entre otros. Esto lo puedes hacer al final haciendo algo como esto:

gulp.task('produccion', ['comprimir', 'copiar','cdn', 'less']);

Ejecutar las tareas

Finalmente puedes ejecutar el comando gulp en la raíz de tu proyecto y empezará a realizar todas las tareas de forma automática. En caso de que quieras ejecutar solo una tarea, puedes pasar por parámetro el nombre de la tarea:

gulp produccion

Con esto generas la versión de producción, o  por ejemplo, si tienes una tarea llamada less para generar los archivos CSS desde LESS, simplemente ejecuta:

gulp less

Tareas recomendadas

Para optimizar un sitio web, generalmente utilizo imagemin, jshint, clean-css, notify, imagemin-pngquant, uglify, usemin. Con estas puedo comprimir imágenes, mejorar el código javascript, concatenar archivos, reducir el tamaño, entre otros. Aunque te recomiendo leer un artículo de Addy Osmani sobre optimización de webs, pues lista una gran cantidad de tareas que puedes ir probando para usar al momento de mejorar tus sitios.

Finalmente, como te darás cuenta con Gulp puedes crear sitios web mas óptimos y ahorrando mucho tiempo. Existen una gran cantidad de tareas existentes que puedes agregar a tu proyecto y facilitar tu trabajo, por eso te recomiendo chequearlas en el buscador de plugins de Gulp y si no existe, puedes crearla y ayudar a otros programadores que necesiten algo similar.

El viernes pasado recibi mi invitación para participar en la beta de AppInventor, un programa para crear aplicaciones para Android sin necesidad de escribir código, si nunca lo han escuchado o desean ver una introducción, pueden chequear el siguiente vídeo:

Para comenzar a usarlo, se debe iniciar sesión con la cuenta de google y descargar un instalador, revisándolo por encima, trae un emulador de un móvil con Android, un depurador de código y parte del SDK de Android. El instalador pesa casi 60MB y está disponible para Windows, GNU/Linux y MacOS.

Pantalla principal de AppInventor

Pantalla principal de AppInventor

Una vez instalado no pude encontrar el ejecutable para iniciar la aplicación, pero al buscar información en la página, me di cuenta que es una aplicación web hecha en HTML5/Javascript (estos de Google se estan tomando en serio la computación en la nube), la misma, contiene a la izquierda un menu con una serie de componentes para usar en la interfaz de la aplicación, en el medio la ventana de la pantalla telefóno y a la derecha las propiedades del componente y un navegador de componentes usados. Esta interfaz es sencilla, igual a los IDEs existentes por lo que para los desarrolladores no será problema el uso de AppInventor, los componentes simplemente se arrastran a la pantalla del teléfono y con doble click vamos editando las propiedades.

Esta parte es sólo la vista de la aplicación (como el modelo MVC) por lo que para agregar eventos y definir las acciones a ejecutar cuando el usuario interactúa con estos componentes, utilizamos la vista de bloques, accesible por un botón en la parte superior derecha. Al hacer click allí, se abre una aplicación Java Web Start (se vé el gran uso de Java en Android por parte de Google) donde pasarmos a la vista de asignación de eventos y acciones (como el controlador segun MVC), lo interesante, es que podemos asignar eventos y acciones a través de bloques parecidos a las piezas de un rompecabeza, uniendo los bloques podremos realizar el programa deseado sin escribir una línea de código. El famoso Hola Mundo, lo hice en menos de 5 minutos sin leer manuales, usando 3 bloques como se ve en la siguiente imagen:

Bloques de acciones en AppInventor

Bloques de acciones en AppInventor

Luego podemos ver los resultados en nuestro teléfono Android o usando el emulador, generar el paquete y distribuirlo. No he leído, pero creo que por ahora no hay mucha interacción con el Market y no se como es la licencia para el uso de esta aplicación.

Me gustó como se trabaja con esta herramienta y permite desarrollar cosas sencillas en pocos pasos (obviamente cosas complejas requiere escribir código), además permite a personas ajenas a la programación, realizar aplicaciones sencillas para si mismas. Google está haciendo un buen trabajo con esto y me llamó la atención que todo fuese bajo web, muchos no nos imaginaríamos hace unos años la posibilidad de crear aplicaciones desde el navegador.

Microsoft WebMatrix es una nueva herramienta destinada a la creación de página o sistemas web sencillas por parte de nuevos desarrolladores/diseñadores (y porque no, también profesionales experimentados), lo interesante de ella es que centraliza todas las herramientas básicas en una sola interfaz muy sencilla de usar, (con Eclipse y Netbeans se puede lograr lo mismo pero no es por defecto y para un nuevo usuario puede ser díficil configurar la interfaz).

La instalación es sencilla, se realiza mediante el Web Launcher de Microsoft y con tan solo seleccionar WebMatrix, se instalarán sus dependencias correspondientes: SQL Server Compat, IIS (uno básico si no tiene una edición de Windows con IIS incluido) y otras cosas ahí. La interfaz utiliza el ya famoso Ribbon (la misma de Office 2k7 y la mayoría de programas de Windows 7) donde mediante pestañas veremos una vista general del proyecto, los archivos en el proyecto junto al editor, la vista de Base de Datos para crear tablas y realizar consultas y la de SEO o como yo la llamaría: vista de validación de código.

Editor HTML de WebMatrix

La vista de archivos, trae las típicas funciones de cualquier editor HTML junto a controles para iniciar/reiniciar/detener los servicios web y de base de datos. El editor es muy parecido al de Visual Studio pero no se si fué por falta de configuración o porque no lo soporta, no me completó codigo ni HTML ni Javascript cosa que me pareció muy desfavorable pues casi todos los editores existentes lo hacen por defecto, sin embargo, puedes lanzar Visual Web Developer (supongo solo si lo tienes instalado) para realizar estas operaciones pero ya pierde el sentido el uso de esta aplicación.

Vista de Base de datos de WebMatrix

La vista de Base de Datos es una versión reducida de SQL Server Management Studio, permite crear tablas, relaciones, editar las propiedades de los campos, etc. La desventaja es que usar SQL Server Compat y pues bueno, para páginas pequeñas sirve pero seria mejor usar o que detectara SQL Express, pero para el fin de esta herramienta es suficiente esta versión de Base de Datos.

Validación SEO de WebMatrix

La vista/opción que me llamó la atención fue la de validación de SEO, el cual realiza un análisis del código que has escrito en busca de errores del estándar web y posibles malas prácticas donde se afecte tu SEO. Me impresionó que ahora Microsoft apoye esto luego de varios años intentando crear su propio estándar, supongo que esta estrategia les permite luchar contra la competencia y con el futuro lanzamiento de Internet Explorer 9 (prometiendo gran soporte para los estándares web establecidos actualmente), les permite a sus clientes crear páginas que se vean bien en este navegador (y obviamente en el resto de navegadores)

Realmente, WebMatrix es una herramienta sencilla pero completa, la recomiendo para aquellos que se estan iniciando en el desarrollo web y no quieran inicialmente aprender mucho sobre ello, su interfaz es sencilla, incluye las herramientas mínimas para trabajar, trae unas plantillas iniciales (si tienes Internet) y te da la posibilidad de migrar ese proyecto a Visual Studio.

Sin embargo, si quieres aprender bastante sobre desarollo web y/o no deseas utilizar herramientas propietarias (o no tienes Windows), yo recomiendo instalar un servidor WAMP (LAMP si usas Linux) junto a Aptana ó Netbeans, ya que con un poco mas de esfuerzo podrás crear aplicaciones mas poderosas, ademas, a diferencia de WebMatrix estas son multiplataforma y de código abierto.

Soy usuario de Firefox desde sus inicios y cuando empecé a trabajar como desarrollador web en Caniatech, descubrí una gran cantidad de extensiones (la mayoría gracias a su lista de complementos favoritos) que permiten transformar este navegador en una maravillosa herramienta indispensable para cuando se está creando páginas/sistemas web (si fanáticos de Chrome, se que se puede hacer lo mismo con ese navegador). Así que aquí les dejo una lista de las extensiones que recomiendo instalar si trabajan en el desarrollo  (y tal vez un poco de diseño) web.

  • Firebug: para mi es el complemento mas importante e indispensable de esta lista. Esta herramienta permite: excelente análisis y modificación en tiempo real del: código HTML, clases de estilos, permite ver y correr paso a paso (debug) del código Javascript, mostrar la cantidad de errores JS, entre otros.
  • FireQuery: agrega compatibilidad entre jQuery y Firebug, se pueden observar funciones asignadas a ciertos elementos del markup, entre otros.
  • FirePHP: agrega compatibilidad con php  y permite a los desarrolladores imprimir datos en la consola de Firebug, muy útil cuando se esta creando aplicaciones con Ajax.
  • PixelPerfect: otro complemento compatible con Firebug, el mismo, permite sobreponer imágenes en cualquier página, con la idea de comparar el sitio que se está desarrollando respecto al diseño original,útil cuando se estan escribiendo las clases de estilos y se desea lograr una apariencia exacta al diseño dado.

Firebug dentro de Firefox con el plugin de jQuery

  • Html Validator: permite chequear si las páginas web cumplen el estándar XHTML/HTML, necesario para comprobar que tenemos un buen markup Html, evitando futuros problemas de renderizado y permitiendo obtener un mejor SEO.
  • Messure it!: agrega una regla virtual al navegador para medir la distancia exacta (en pixels) de una distancia o área, muy usada en la etapa de diseño y escritura del CSS (sobre todo si se combina con PixelPerfect.
  • Dummy Lipsum: permite generar extractos del texto Lorem ipsum e insertarlo en cualquier campo de un formulario, pues como todo profesional de desarrollo web, sabemos lo feo el uso de texto al azar para probar campos de texto.
  • Lazarus Form: evita la pérdida de los datos dentro de un formulario, útil cuando estamos probando un formulario, rellenamos cada uno de los campos pero algo sale mal y se pierde esa info, pues con este complemento no volverá a suceder lo mismo.
  • Wappalyzer: excelente complemento que informa sobre las tecnologías usadas en un sitio, cuando entras a una página, muestra unos íconos en la barra de estado de los programas o librerías usadas (ejem, jQuery, WordPress, Google Analytics, etc)

Greasemonkey, Html Validator (icono verde) y observer como muestra para este blog las tecnologías que uso: WordPress, Google Analytics y Jquery

  • Web Developer: un gran conjunto de herramientas y opciones a utilizar cuando se desarrolla un sitio web, permite ver errores de javascript, activar o desactivar: estilos, plugins, javascript. Posee una barra acceder a las herramientas rápidamente, permite ocultar/mostrar tablas, imagenes, fondos, etc. Indispensable para cualquier desarrollador web.
  • ColorZilla: permite obtener el color de cualquier pixel de la página, útil para tener el color en hexadecimal de una imagen y escribirlo en el CSS.

Bueno, estos son los complementos mas utilizados por mi cuando creo páginas, si creen que faltan alguno y desean recomendarlo, no duden en comentar. Ademas, si les interesa que complementos uso a diario, pueden ver mi lista.