Blog de Grupo Sistemas

A manera de resumen de mi desconferencia en el II Barcamp Puno, a continuación menciono algunas de las buenas prácticas para el diseño y desarrollo de sitios Web.

Voluntad, creo que es el primer paso, sentirse muy animado para crear un sitio Web y enseguida realizar el primer trazo en Photoshop, digitar la primera etiqueta HTML, etc.

Diseño, el uso de recursos es muy importante en esta etapa, observar otros diseños para inspirarse, hacer mockups o wireframes, utilizar patrones, colores, degrades, iconos, fotos y otros.

Maquetación, aqui sobre todo se trata de separar la estructura (código HTML) de la apariencia (código CSS), considerar el resultado en, al menos, los navegadores de internet más usados como Interner Explorer y Firefox y tal vez con Chrome y Safari. Aquí también se puede considerar el uso de CSS Sprites.

Programación del lado del servidor (Backend), algo muy recomendable para esta parte es el uso de la arquitectura MVC (Modelo Vista Controlador), lo cual se nos facilita con el uso de frameworks como por ejemplo: Ruby on Rails, CodeIgniter y  Kohana, siempre y cuando nuestro sitio Web no pretenda ser muy grande.

Programación del lado del cliente (Frontend), programar javascript no obstructivo y el buen uso de AJAX es muy importante para los buscadores y al usabilidad, son muy útiles los frameworks como jQuery y MooTools.

SEO y herramientas de gestión, finalmente la optimización para motores de búsqueda (SEO) hace que nuestro sitio Web sea más facil de ubicar y visitar mediante los buscadores, de otro lado son muy útiles herramientas como Analytics y Webmaster Tools, las cuales permiten darnos cuenta como se desenvuelve nuestro sitio, posibilitando su mejora en varios aspectos.

Dado que muchos sitios Web son víctimas constantes de hackers, crackers, defacers o como quiera llamarselos, a continuación les describo dos tipos de problemas, quizá los más frecuentes, a los que nos enfrentamos los webmaster.

Virus Troyanos

Este problema generalmente se da cuando el virus accede a las cuentas FTP, agregando código malicioso a los archivos fuente del sitio web, incrustando código por ejemplo en archivos de formato HTML, Javascript y/o PHP.

El problema mayor radica cuando al navegar por el sitio web infectado, aparentemente normal, el virus se descarga en la computadora del visitante, a menos que este tenga un buen programa de antivirus que lo detecte y elimine.

Otro problema que ocasiona este virus también denominado malware, es el bloqueo indefinido del sitio por parte de google, y quiza otros buscadores; la solución es, antes que nada, eliminar el virus de nuestro sitio web, cuyo grado de dificultad puede depender del tamaño del sitio; en seguida hay que enviar una reconsideración a google, a través de su servicio de webmaster tools, finalmente nos queda esperar un tiempo y nuestro sitio quedará desbloqueado nuevamente.

Ataques directos

Esto ocurre cuando una persona (hacker) vulnera “manualmente” la seguridad del sitio. Esto con distintos propósitos ya sea para hacer phishing, por diversión, poner en práctica sus conocimientos, entre otros.

Una de las formas de hacer este ataque son las inyecciones SQL, así los hackers pueden obtener información de la base de datos y romper los sistemas de autenticación; al mismo tiempo si el sitio ofrece la posibilidad de subir archivos es posible que agreguen un shell, es decir un script, por ejemplo en el lenguaje PHP, que de control total al sistema de archivos y bases de datos.

La solución es realizar buenas prácticas de programación, poniendo las restricciones necesarias en consultas a la base de datos y en el envío de formularios; de esta manera podemos controlar situaciones indeseables.

La Web sigue evolucionando y las distintas aplicaciones Web que existen en Internet han demostrado que ya se debe dar el siguiente paso en el lenguaje Web, la W3C se encarga de ello, aquí una lista de todos los tags de HTML5 .

Analizando la lista de las etiquetas HTML5 mayormente etiquetas semánticas como <article>, <title>, .. y otros que separan el contenido del diseño como <canvas>, <footer>. En un futuro que es muy cercano tendremos una Web mas ordenada.
Entre las etiquetas mas resaltantes están como <video> y <audio> que modificaran los embed de flash que utiliza YouTube y otros webs multimedia.

Los navegadores también en su version Beta han empezado a soportar el HTML5.

l

Ya hace un buen tiempo que el equipo de desarrollo de Grupo Sistemas viene contruyendo sitios web de prestigiosos medios de comunicación de la región Puno, uno de los primeros retos fue el sitio de Radio Onda Azul y ahora último el del Diario Los Andes.

Este último, se realizó en dos etapas, en la primera se hizo un rediseño total de la apariencia, se cambio la estructura de contenidos y se añadió algunas funcionalidades; para la segunda fase, se mejoró el diseño y funcionalidad, entre lo que podemos resaltar la portada en tres columas, la navegación de la edición digital, la foto galería, top noticias, portada de noticias por categoría, archivo de noticias por categoría y fecha, opciones de valoración, comentarios e impresión, entre otras características.

Sin embargo, todo este mejoramiento ocasionó el incremento de visitantes y por lo tanto el uso de recursos de servidor Web, así el proveedor de hosting suspendió el sitio hasta en dos oportunidades al sobrepasarse el límite de la capacidad otorgada.

Haciendo algunas optimizaciones en los scripts, de tal manera que el sitio utilice lo menos posible los recursos del nuevo servicio de hosting adquirido, desde el día de ayer (17/02/2009) www.losandes.com.pe reaparece una vez más.

Las aplicaciones Web son muy practicas ya que pueden ser accedidos desde distintos navegadores web y con la gran ventaja que son multiplataforma, es decir pueden funcionar en los distintos Sistemas Operativos (Windows, Linux y otros).

Las aplicaciones web están estructuradas en 3 capas

Capa 1 : Navegador Web
Capa 2 : Lenguaje de programación (permite la comunicación entre las capas)
Capa 3 : Base de datos

Los Navegadores recomendados para el uso de aplicaciones web son Firefox y Chrome, porque están orientadas para aplicaciones web como son la ejecución en procesos independientes.

Las aplicaciones web generalmente usan lenguajes de servidor como son el PHP, ASP, JSP, etc. Con ayuda de técnicas de programación como Ajax, que nos permite la carga de datos y no estar cargando la interfaz entera cada vez.

Una descripción de los navegadores que facilitan el uso de aplicaciones Web.

Chrome

Además de sus ventajas por su rapidez y su multi-hilo este navegador tiene una opción de crear acceso directo para tu aplicacione web y de que esta manera funcione independientemente en otro proceso.

Firefox

Sus ventajas son muchas, por ello es considerado uno de los navegadores mas usados. según el cuadro estadístico del articulo de Wikipedia.

Todabia no tiene una opciones por defecto para aplicaciones, pero con la ayuda del plugin Mozilla Prism podemos crear acceso directo para las aplicaciones web y que funcione en otro proceso.

Aplicaciones Web Offline

Las aplicaciones web que queremos que funcionen aun sin conexión con el servidor web son posibles utilizando tecnologías como Adobe Air y Google Gears.

Ejemplos de aplicaciones web

Google Reader : Aplicación Web para leer tus Feeds
Digg : Noticias publicadas por los usuarios, organizada por los votos que tiene.
GMail : Aplciación web para gestionar tu cuenta GMail y otras cuentas.
Log : Colección de noticias principalmente de Perú.

MiPlayWeb, un proyecto de GrupoSistemas, es un buscador de músicas de diferentes fuentes web, ahora se renueva con mas música y con posibilidad de que el usuario pueda calificar las musicas.

Skout es un directorio de paginas web con recursos para desarrolladores web y diseñadores.

Fonts, Iconos, colores, fotografias, texturas, patrones, frameworks, revistas, sonidos, paginas para inspirarnos, wallpapers, etc.