Archivo de la categoría ‘Desarrollo Web’

La verdad es que con los deslizadores (sliders), se consiguen web mucho más vistosas, que con un simple menú, además nos permite dar relevancia a ciertas secciones de una manera gráfica, constante y no intrusiva.

Uno de los scripts que he probado y más me gusta es el jquery slider de cssglobe, que podéis ver aquí y una extensa lista de ejemplos de uso y funcionamiento:

http://cssglobe.com/lab/easyslider1.7/03.html (presentación de varios formatos)

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Si queremos que una web sea usable, intuitiva y con fácil acceso a la información, debemos utilizar herramientas que nos permitan conocer la actividad de los usuarios en nuestra web.  Para mejorar mi web, tengo que tener información sobre la actividad de los usuarios en mi sitio: ¿Cómo interactúan con ella? ¿Les cuesta encontrar la información? ¿Abandonan la página pronto porque no han encontrado la información que esperaban?

Para ello podemos utilizar las estadísticas del sitio, que nos van a dar indicadores muy buenos como páginas más vistas, ficheros más descargados, tiempo de visita por página, combinando esta información con un mapa de zonas calientes (o mapa de actividad), esto nos permitirá optimizar nuestro sitio web para que los usuarios se encuentren más cómodos en la web.

Clickheat es una herramienta de libre distribución que nos permite conocer las (heat maps) zonas calientes de la web (áreas donde los usuarios más clicks realizan), permite instalación en cliente (mediante javascript) e instalación en el servidor. La visualización es muy intuitiva y podemos ver las zonas calientes (zonas más clickadas) de la web de manera totalmente gráfica.

En sitios de mucho volumen de usuarios no recomiendo el uso en todas las páginas, generalmente la página que más información nos dará será la portada, y por lo tanto salvo excepciones con la monitorización de la portada suele ser suficiente para mejorar la disposición del contenido.

Tampoco almacenéis más de 2 click por usuario si el sitio tiene volumen, ya que genera gran cantidad de datos, y si no tenemos una base de datos de un tamaño adecuado puede llenarla en exceso.

• Clickheat es una herramienta que genera mapas de actividad de los usuarios que nos permiten conocer las áreas donde los usuarios más pinchan (zonas calientes), de manera gráfica, así como la densidad de clicks.
• Clickheat es una herramienta que complementa otras herramientas de métrica (estadísticas, referencias, palabras clave en las búsquedas…)
• Existen herramientas analíticas como Openwebanalytics (OWA) que se distribuyen con una implementación de Clickheat, y combinan tanto el mapa de actividad de los usuarios como herramientas analíticas tipo google analytics. Gracias por la recomendación de Openwebanalytics (OWA) a Antonio de ideanet

Actualmente estoy preparando el nuevo sitio de patripe.com y obviamente como buena fanática de joomla y drupal que soy ni siquiera me planteé actualizar el wordpress.

¿Porqué? Pues sencillamente porque mis necesidades han cambiado, el nuevo portal va a tener una sección de descargas, tutoriales, y un montón más de funcionalidades y al nivel que quiero, necesitaría toquetear mucho el wordpress, y tengo mayores y mejores conocimientos de joomla o drupal que de wordpress, lo que me permite hacerlo prácticamente  a medida, pero con funcionalidades que me hubiera costado meses desarrollar.

Cuando empezamos con un blog o un sitio pequeño en el que prima el aspecto gráfico, wordpress es una herramienta maravillosa:

A favor:

• Simple, fácil de instalar, con miles de plantillas gratuitas y muy visuales.
• Tiene detrás una comunidad activa y un excelente equipo de desarrolladores, que detecta y parchea fallos de seguridad continuamente.
• Las plantillas son visualmente mucho más atractivas que las de joomla o drupal.
• No se necesita tener conocimientos de programación, html para crear un blog en minutos.
• El entorno gráfico de la administración es intuitivo y fácil de manejar.

En contra:

Echo en falta componentes, funcionalidades y extensiones menos gráficas y más enfocadas al desarrollo de aplicativos a medida.

Aconsejado para principiantes.

Joomla este gestor de contenidos es idóneo para montar portales que vayan a tener configuraciones y aplicaciones personalizadas para los usuarios, comunidad, descargas, niveles de acceso…

• En el Directorio de Extensiones Joomla (JED) encontramos todas las extensiones imaginables, tanto bajo licencia comercial como de libre distribución.
• También tiene una gran comunidad muy activa que publica constantemente traducciones, parches, etc…
• Se actualiza periódicamente corrigiendo fallos de seguridad rapidamente.
• Es fácil programar módulos, extensiones y plugin. Abundante documentación técnica.

Dispone de muchos sitios donde se publican plantillas, pero no están tan enfocada gráficamente (siempre la puedes hacer a medida)

En contra:

• Requiere más tiempo de instalación y conocimientos de gestión de servidores, configuración de permisos, etc…
• Algunos componentes de terceros pueden contener vulnerabilidades de seguridad.
• Algunos proveedores de alojamiento (los menos), limitan la instalación de componentes o del propio joomla.

Aconsejado:

Para la creación de portales, comunidades de usuarios o intranetes corporativas, nivel avanzado.

Drupal: Este sistema gestor de contenidos es simple y llanamente excepcional.

• Gran cantidad de extensiones, componentes, módulos…
• Comunidad muy activa y mucha documentación en el sitio oficial.
• Altos niveles de seguridad para el sitio web, y de optimización del rendimiento.
• Configurandólo correctamente se consiguen resultados excelentes.
• Sistema de nodos ultraflexible, te permite hacer casi cualquier cosa que imagines.

En contra:

• Hay que tener conocimientos altos para sacarle todo el partido que tiene.
• El funcionamiento de drupal sigue sus propias normas, y tiene una curva de aprendizaje un poco más elevada para aprender cómo funcionan los nodos y las extensiones.

Aconsejado:

Para la producción de sitios críticos que requieran de altos niveles de seguridad, intranet corporativa, portales complejos. Nivel avanzado.

En definitiva el mejor sistema gestor de contenidos es el que se adapta a tus necesidades.

• http://wordpress.org/
• http://drupal.org/
• http://joomla.org/
• http://drupal.org.es/
• http://comunidadjoomla.org/
• http://joomlaspanish.org/

Después de varias pruebas yo me he decidido por Joomla.

Uno de mis componentes favoritos para Joomla es Docman, que nos permite crear una docuteca con documentos de múltiples extensiones. Con Docman, el usuario puede gestionar facilmente los documentos que quiere ofrecer en su sitio en descarga, además es muy intuitivo desde el frontal, se pueden configurar diferentes niveles de acceso para los documentos, cambiar la plantilla predeterminada del sitio, es multidioma, existen muchas extensiones y módulos para docman…En fin que lo tiene todo

Para añadir un enlace a un documento (que tengamos publicado en docman) dentro de un artículo lo único que tenemos que hacer es instalar la extensión docLink. Desde el panel de administración de Joomla en extensiones –> Gestor de Plugins –> Activamos el plugin Docman Standart Buttons.

Al crear un artículo nuevo nos aparecerá este botón:

Pulsando sobre DOCLink, podremos seleccionar en una ventana de exploración el documento que queremos, y las opciones en las que se mostrará dentro del artículo (miniatura, descripción, icono, etc…)

El resultado en el frontal:

Descarga de docman desde Joomlatools incluye componente, extensiones y módulos

Descarga de la extensión docLink desde JoomlaTools

La página web de una empresa es su imagen al mundo. Y en ella se debe transmitir la idea de lo que la empresa es. De una web comercial mal hecha, dependerá la impresión y la idea que el cliente percibe de esa empresa.

1. Integrar la imagen marca de la empresa, el logotipo y todo el grafismo (papel, boletínes), en la página web.

2. Ser original, ofrecer contenidos da valor añadido. Sé que es muy tentador ver lo qué hace la competencia, y proponer algo muy similar, pero en tiempos de crísis, solo sobresalen las empresas que tienen algo nuevo que aportar. Esto incluye que no se te ocurra hacer un copia pega, de un quiénes somos, y retocarlo un poco.

3. No añadir nunca jamás y bajo ningún concepto publicidad en una web de empresa. Ni banners parpadeantes, ni textos rojos moviéndose por la web, ni publicidad de politono paco paco…

4. Utilizar tecnologías anticuadas y obsoletas (bueno, aunque si tu empresa quiere dar esa imagen…). Señores de Telefónica no me digan que son innovadores, y maravillosos, si no puedo completar un formulario de la web con mi navegador linux. Esto ejemplo es más de lo que no se debe hacer en una web comercial: http://www.nuevarumasa.com/ sobran las palabras. (y éstos quieren que invierta 50.000 €? Me imagino que será para hacer una web decente)

5. No robar las imágenes por internet. Existen catálogos que ofrecen imágenes profesionales a precios asequibles. Una web de empresa, nunca debe contener imágenes recién robadas, que da muy mala imagen.

6. Ser accesible, usable y estándar. Y probada por lo menos con tres navegadores, y dos sistemas operativos.

7. Utilizar alojamiento de pago. Todavía algunas empresas, utilizan alojamientos gratuitos. Es como si le dijeras al cliente final: Soy una empresa importantísima, pero nos vamos a reunir en el bar Manolo, el rey de la papa brava, que compartimos el local, y mi despacho está en las mesas del fondo.

8. Ofrecer contenidos actualizados y de calidad e información clara, precisa y veraz. Ofrece promociones especiales, para fidelizar a los usuarios, etc…

9. Posicionar la web en los motores de búsqueda y utilizar correctamente las metaetiquetas.

10. Poner correos electrónicos del dominio de la empresa, por ejemplo: info@empresa.com en vez de personales o gratuitos, por ejemplo (hotmail).

La imagen es de Guidezin (podéis ver el enlace en la imagen) y la he visto en http://www.deviantart.com/

Cuando creamos un sitio web,  una de las secciones “santísima trinidad”* es la de contacto. Obviamente no podemos ponerle barreras al usuario si se quiere poner en contacto con nosotros, utilizar un enlace a una dirección de correo implica que el usuario que por lo general utiliza un correo de webmail, tenga que configurar un cliente de correo o copiar y pegar esa dirección.

Además publicar una dirección de correo electrónico en una web (un mailto:) es un caramelo para bots de SPAM, cuando rastrean la web.

Para realizar un buen formulario de contacto:

• Simplicidad: si hay campos obligatorios explicar claramente el motivo del error poniendo un ejemplo del formato.
• Brevedad: Requerir el número de campos obligatorios imprescindible. Nombre, asunto, dirección de correo.
• Alternativas: Posibilidad de elegir si quiere ser contactado por teléfono o por correo electrónico.

Lightform es una excelente extensión para crear un formulario de contacto, como es de libre distribución podemos mejorarlo y adaptarlo, pero es una buena base:

Existe como plugin para WordPress:

http://wordpress.org/extend/plugins/wp-lightform/

Y también para incluirlo en cualquier web:

http://web-kreation.com/demos/LightForm/

Lo instalamos como cualquier otro plugin (podemos utilizar el explorador de plugins de WP)

Insertamos el código LightForm en la página donde se debe mostrar el formulario de contacto.

Este script es el que uso en patripe.com para el formulario de contacto.

*(¿quiénes somos? | ¿dónde estamos? | contacto)

Joomla es un excelente Gestor de Contenidos (CMS), versátil y escalable, es por ello, que aunque una instalación inicial, nos ahorra muchas horas de desarrollo, es sólo una base.

Para realizar portales 2.0 utilizo una serie de componentes, extensiones y módulos que me permiten personalizar Joomla, para hacerlo más interactivo:

Community Builder: Extiende la funcionalidad de la gestión de usuarios. Permitiendo configurar nuevos campos para el formulario de registro, opciones avanzadas para la gestión de permisos, accesos, mensajería privada, usuarios con avatares, etc… Imprescindible sin duda, en un sitio que vaya a tener usuarios.
Kunena: Sistema de foro, por decirlo de una manera simplificada.

Se puede integrar fácilmente con el perfil de community builder. Y nuevo aspecto de diseño lo hace mucho más atractivo, además de que muestra el perfil del usuario con su avatar. De hecho en algunos sitios lo utilizan como una completa red social
JoomlaComment: Excelente componente integrado con el perfil de Community Builder, que nos permite mostrar la imagen, y los comentarios de una manera muy limpia, además de la administración del nivel de acceso permitido a los comentarios.

DenVideo: Nos permite embeber contenidos multimedia (swf, flv, mpg, etc…), así como de proveedores de internet utilizando etiquetas dentro del artículo, que facilita mucho la edición. Utiliza el excelente reproductor jw player.Es necesario instalar el bot, y el componente. Luego insertando la siguiente línea podemos embeber vídeos en cualquier artículo:  {denvideo http://www.youtube.com/watch?v=jYm147x }

JEvents: Calendario de Eventos, en el que los usuarios pueden realizar sus anotaciones, además de permitir insertar eventos por categorías, etc…

Todos estos componentes, extensiones, etc… los podéis encontrar en el Directorio de Extensiones Joomla (JED), aquí se encuentran todas las extensiones existentes para Joomla tanto comerciales como no comerciales.

En JoomlaSpanish también se puede encontrar una gran cantidad de componentes traducidos.

Si tenemos un sitio web Joomla básico, aquí os van cuatro sencillos consejos que os permitirán subir mucho el nivel de seguridad de una instalación predeterminada en media hora.

1. Configurar los permisos:

Los permisos se debe configurar 755 a las carpetas y 644 a los ficheros.

2. Cambiar la ruta al administrator

Si hemos realizado la instalación predeterminada y no hemos movido/renombrado ningún directorio,  el atacante sabe perfectamente la ruta donde se encuentra instalada nuestra parte de administración. Para poner dificultades: Leer el resto de esta entrada »

Aunque el entusiasta2.0 piense que esta es otra de mis campañas para demonizar a Google, sólo voy a explicar cómo ocultar una web utilizando el fichero robots.txt y utilizar el sitemap.xml para indicarle a Google las ramas de nuestro sitio que tiene permitido recorrer, por razones técnicas, de seguridad y de privacidad. Ya que Google aunque técnicamente hace productos muy buenos con sus políticas de privacidad (me corta todo el rollo) me crea una sensación un tanto contradictoria.

Obviamente si no aparecemos en Google no existimos, pero a veces nos puede interesar por determinados motivos  que nuestro sitio no aparezca listado en Gran Hermano bien porque es un url de prueba, bien porque nos encontramos desarrollado el sitio o bien porque queremos esconderlo de miradas ajenas: por ejemplo un servicio de videovigilancia ip de un negocio privado, nunca debería aparecer listado en google.

Si queremos impedir  el acceso a google a determinadas zonas de nuestro sitio web, ya sea porque nos permite añadir un punto más de seguridad a nuestro sitio web ( ya que los spammer muchas veces se valen de google para planificar sus ataques), ya sea por otros motivos. Por seguridad en mis sitios webs, no me gusta mantener los directorios privados indexados por google (por ejemplo el acceso a la intranet, el gestor de correo, directorio de administración )

Por ejemplo en un sitio web tengo el siguiente escenario:

• Utilizamos un gestor de contenidos Joomla (y es fácil que muchas carpetas se encuentren predeterminadas)
• En la parte de pruebas tenía varios directorios con permisos de escritura (estaba realizando pruebas de componentes)
• La administración de la versión 1.0.x de Joomla, tenía una vulnerabilidad que no había parcheado en inyección de sql.
• El Gran Hermano estaba mostrando mis vergüenzas: Si hacía una búsqueda en Google devolvía la ruta al panel de administración (sólo haría falta un ataque de fuerza bruta), y la de pruebas, además eran de las más visitadas, sospecho que porque estaba migrando la página a 1.5.

¿Cómo atacan un sitio?

Generalmente el hacker de turno envía en primer lugar unos robots, que navegan por todos los enlaces visibles de la web buscando vulnerabilidades (autocompletado de formulario, directorios con permisos de escritura, directorios de administración), estos robots, o bien utilizan los motores de otros robots como google, yahoo, msn, para realizar ataques automatizados,  o infectan un conjunto de equipos a los que pone a navegar por internet (redes zombies), y a completar formularios, en busca de vulnerabilidades. ¿Porqué esta gente no dedicará su tiempo y esfuerzo a la computación distribuida o hacer un programa de libre distribución? “

¿Cómo evitar que Google enseñe mis vergüenzas?

Modificar el fichero robots.txt y crear un fichero sitemap.xml. Esto hará que el Gran Hermano evite el acceso a los sitios que indiquemos, pongo el ejemplo de un sitio que no quiero que muestre desde el raíz.

Para no permitir el acceso de cualquier robot al sitio web:

• Prohibir el acceso a cualquier robot (esto previene los ataques):

User-Agent: *

Disallow: /

• Para prohibir el acceso a un directorio:Disallow: /correo

Disallow: /administrator
Disallow: /pruebas
Disallow: /intranet

• Para prohibir la indexación de un fichero:

Disallow: /cuentas_correo.html

• Con etiquetas META

<html>
<head>
<meta name=”googlebot” content=”noindex”>

• Otra sintáxis admitida:

<META name=”robots” content=”NOINDEX,NOFOLLOW,NOARCHIVE,NOODP,NOSNIPPET, NOOPD, NOYDIR”>

Esto no permitiría realizar búsquedas, ni seguir un enlace, ni mirar un archivo, ni aparecer en el directorio, ni aparecer en yahoo.

• Enlaces relacionados:

Controlando como los robots de búsqueda indexan tu sitio (Herramientas de Google para webmasters artículo en Inglés)

Cuando estamos creando un proyecto entre varias personas, se hace imprescindible montar un entorno colaborativo.

Existen excelentes programas de libre distribución que nos permiten hacer esto vía web (CMS de gestores de proyectos), de todas las alternativas posibles dependerá el uso que le vamos a dar, mis favoritos:

Gestores de proyectos con controlador de versión de código, y aplicación de tecnologías de programación extremas y/o ágiles como SCRUM, XP, y que nos permiten tanto gestionar los diferentes usuarios, tareas, proyectos, etc…como controlar los cambios realizados en el código, de modo que todos los desarrolladores trabajen sobre el mismo código, y generar un informe sobre quién ha hecho cada cambio, y la posibilidad de recuperar versiones anteriores de ficheros.

Collabnet svn: Collabnet Subversion.  Integración del ciclo de vida del software, binarios certificados de subversion (asegura que todos los desarrolladores trabajan con la misma versión que la de subversion). Repositorio centralizado de código fuente. Versión para escritorio y multiplataforma.

FVE Project Manager: Integración de tecnologías ágiles y de programación extrema como SCRUMP, XP…Es una versión modificada de dotnet hecha en españa! Incluye también subversion.

Gestores de proyectos vía web sin control de versiones: En esta categoría se encuentran los gestores de proyectos enfocados a la gestión de soporte técnico, y/o herramienta de comunicación con el usuario, y la mayoría disponen de un sistema de incidencias. Todos disponen de creación de grupos, asignación de tareas, creación de roles, control del estado del proyecto, generadores de informes, envío de solicitud de asistencia (ticket…)

Sobran los comentarios para este sistema. Excepcional, aunque el estilo no está completamente cuidado es fácil modificarlo utilizando plantillas.

PhpEasyProject: Sin duda uno de los más prometedores. Múltiples funcionalidad y sobre todo, facilidad de uso, para quienes necesitan un gestor de proyectos, fácil de instalar y de gestionar.

Utiliza el motor de plantillas Smarty, y entre otras cosas permite la exportación de datos a otras aplicaciones mediante xml.