Web Design Blog

Plugins de WordPress para poner en valor los contenidos publicamos

2013-04-09T12:59:00.001-07:00

Arrancar nuestro propio blog puede ser un buen proyecto personal que llevar a cabo si queremos establecer un canal en el que dar rienda suelta a nuestras ideas, compartir opiniones o conocimiento; de hecho, son muchas las empresas e instituciones que apuestan por este tipo de formatos para compartir información con un estilo algo menos formal que con una web corporativa al uso. Dentro de los soportes que podemos utilizar para llevar a cabo este tipo de proyectos, WordPress es una de las mejores opciones a tener en cuenta gracias, entre otras cosas, a la flexibilidad que nos ofrece y las posibilidades de ampliación de funcionalidades gracias a sus plugins y widgets.

La galería de complementos para WordPress es enorme y, prácticamente, podemos encontrar plugins de WordPress para cualquier cosa que nos podamos imaginar: redes sociales, mejorar la seguridad de nuestro blog, gestionar los comentarios, luchar contra el spam, etc. Gracias a la comunidad de desarrolladores podremos encontrar bastantes recursos con los que poner en valor nuestro trabajo y ofrecer a nuestros usuarios una buena experiencia de uso de nuestro sitio web (aunque, claro está, no todo es tecnología y los contenidos de nuestro blog son el pilar fundamental).

Con la idea de poner en valor el trabajo que hacemos en nuestro blog, puede ser una buena idea darle una "segunda vida" a nuestros contenidos más allá del SEO, los enlaces internos o los que compartamos en el momento de publicar; dicho de otra forma, conforme vamos publicando entradas, habrá mucho contenido de calidad que se quede "escondido" y, seguramente, nos interese revivir y reaprovechar porque puede aportar mucho a nuestros visitantes. Con este objetivo en mente, podemos encontrar algunos plugins de WordPress que nos pueden ayudar a manejar los contenidos que tenemos publicados en nuestro blog:

Smart Slug

El slug es el nombre que solemos utilizar para hacer mención de la url personalizada de nuestros artículos, un parámetro importante que nos permite construir urls amigables y fáciles de recordar que, además, permitan contribuir a nuestra estrategia SEO. Con esa idea, Smart Slug nos ayudará a mejorar la construcción de las urls eliminando las stop-words o palabras irrelevantes que no aporten nada y que entorpezcan que nuestros contenidos se encuentren fácilmente en la web.

Random Posts Widget

Random Posts Widget es un widget para WordPress que nos permite darle una segunda vida a los contenidos que hemos publicado puesto que con este complemento podremos emplazar un lugar en una zona fija de nuestro blog (una columna) en el que mostrar, de manera aleatoria, enlaces a contenidos que hemos publicado anteriormente y que, quizás, puedan ser del interés de nuestros visitantes y conocer trabajos anteriores que, quizás, no encontrarían rápidamente salvo que usasen el buscador.

Popularity Posts Widget

Popularity Posts Widget es otro widget interesante a tener en cuenta para poner en valor el trabajo que hacemos y mostrar los contenidos que más han interesado a nuestros visitantes. En este sentido, gracias a este complemento podremos mostrar un widget con los contenidos que más visitas han recibido por parte de nuestra audiencia o los contenidos que más comentarios han recibido; un complemento interesante para conducir a los usuarios hacia esa conversación que se está desarrollando en nuestro blog.

Post Linker

Post Linker es una interesante extensión que acaba de llegar a la galería de plugins de WordPress que nos permite ahorrar algo de tiempo a la hora de ofrecer algunos enlaces a otros contenidos publicados en nuestro blog.

Con este plugin de WordPress podremos insertar un bloque de enlaces de contenidos que hemos publicado y que podremos mostrar como si fuese una selección de contenidos hechas expresamente para el artículo y que podremos insertar a voluntad en cualquier parte del post.

Auto Post Thumbnail

Dependiendo del diseño que hayamos elegido para nuestro blog, puede ser habitual que el template que estemos usando tenga habilitada una imagen destacada (o Thumbnail) que es la que se muestra anexa a nuestros artículos cuando hacemos una búsqueda o repasamos una página con el histórico de artículos publicados.

Para evitar que se nos olvide la imagen destacada y evitar que algunas notas salgan con foto y otras no, el plugin de WordPress Auto Post Thumbnail generará automáticamente la imagen destacada tomando como base la primera imagen que hayamos añadido al artículo.

Add Link to Facebook

Add Link to Facebook es una extensión que nos permite darle promoción a nuestros contenidos puesto que, tras publicar un nuevo artículo, podremos automatizar cómodamente su difusión a través de Facebook, ya sea a través de nuestro perfil o en el muro de una página que gestionemos.

Related Posts es otro de los complementos fundamentales para poner en valor los contenidos que hemos publicado puesto que gracias a este plugin de WordPress podremos publicar recomendaciones relacionadas con el contenido que hemos publicado, es decir, recomendaremos otros artículos de nuestro blog que podrían interesar a nuestros visitantes y que guardan relación con el contenido que están visitando.

Imagen: Huasonic en Flickr

La entrada Plugins de WordPress para poner en valor los contenidos publicamos aparece primero en Bitelia.

via Bitelia http://bitelia.com/2013/04/plugins-de-wordpress-contenidos

Recursos para evaluar la accesibilidad de nuestra web

2013-03-06T00:59:00.001-08:00

A la hora de publicar un sitio web en Internet, uno de los aspectos en los que solemos prestar atención es que nuestra página web sea atractiva para los visitantes, es decir, tenga un buen diseño, la información sea fácil de encontrar, que la web sea usable y que, por supuesto, se visualice bien en cualquier navegador, ya sea de escritorio o móvil. Sin embargo, hay un detalle en el que no siempre se repara y, en mi opinión, también es importante: la accesibilidad; es decir, facilitar el acceso a la información a cualquier persona que sufra algún tipo de discapacidad (visual, auditiva, motora, etc).

Que nuestra web sea accesible contribuye a eliminar barreras de acceso a la información y, por supuesto, contribuye a que nuestro sitio web tenga un mayor número de usuarios potenciales puesto que facilitamos el acceso a la información mediante lectores de pantalla o extensiones como ChromeVis; un aspecto que en muchos países está regulado mediante normativas y leyes que obligan a ciertos sitios web a cumplir con pautas de accesibilidad (en España, por ejemplo, los sitios web de las Administraciones Públicas deben ser accesibles).

En este sentido, seguir las pautas de referencia como las que marca la WAI (Web Accessibility Initiative) del W3C pueden hacer que nuestro sitio web sea accesible y, por tanto, no presente barreras de entrada aunque, como nos podemos imaginar, no son las únicas pautas existentes y dependiendo del contexto que nos movamos (páginas oficiales, legislaciones nacionales a cumplir, etc) tendremos que tener en cuenta otras normas como, por ejemplo, la norma UNE 139803:2012 (que es la que aplica en España).

Pensar en una web accesible debería ser uno de los requisitos de diseño a la hora de abordar un proyecto de desarrollo web y, con la idea de facilitar las cosas, existen en la red un buen número de recursos que nos pueden ayudar a verificar que nuestra web es accesible o si existen detalles que aún debemos refinar para asegurarnos que la web está abierta a todos los usuarios:

INTAV es un recurso que pone a disposición de los desarrolladores el INTECO (Instituto Nacional de Tecnologías de la Comunicación), un organismo dependiente del Ministerio de Industria de España que, además de encargarse de aspectos vinculados a la seguridad en Internet, también se encarga de trabajar en el ámbito de la accesibilidad web. El INTAV es un validador de código que nos permite analizar páginas web que tengamos ya en producción así como código HTML que subamos directamente a la aplicación para que ésta realice un análisis en base a los estándares de accesibilidad que define la WAI (A, AA y AAA) o bien los que se definen en la normativa española, es decir, la UNE 139803:2012. Tras realizar el análisis obtendremos un listado de aspectos a mejorar en nuestra y recomendaciones que deberíamos seguir para que nuestro sitio web sea accesible.

TAW es un validador de código desarrollado por la Fundación CTIC (que es la organización encargada de gestionar la oficina del W3C en España) que nos ofrece la posibilidad de analizar nuestra página web en base a las pautas que marca la WAI (tanto en su versión 1.0 como en la reciente 2.0) y, como principal novedad, también realiza un análisis para ver el grado de accesibilidad de nuestra web a través de dispositivos móviles (un dato interesante si tenemos en cuenta que nuestros hábitos de acceso a Internet han cambiado y cada vez usamos más el móvil).

CheckMyColours es un sitio web que nos ofrece un análisis de los colores utilizados en el diseño de nuestra web para ver si ofrecen el contraste suficiente como para que un usuario con discapacidad visual pueda acceder a los contenidos sin ningún tipo de problema. El informe está bastante bien y, por ejemplo, nos puede servir de base para plantearnos mejoras en el diseño de nuestra web o, simplemente, validar el diseño que tenemos y obtener los ajustes que debemos realizar para que nuestra web no presente problemas de accesibilidad.

Color Filter es otra forma de realizar análisis de los colores de nuestra página web, eso sí, con la particularidad que la herramienta nos pone en el lugar de nuestros visitantes. Esta herramienta nos ofrece una visión muy distinta de nuestra página web puesto que aplica filtros simulando problemas de visión (como el daltonismo) y nos ofrece una imagen de cómo se vería nuestra página web para que verifiquemos que el contenido sigue estando accesible y no existen barreras de entrada a la información que estén sujetas a los colores de nuestro diseño.

Web Accessibility Toolbar es una barra de herramientas desarrollada por The Paciello Group para Internet Explorer (aunque también está disponible para Opera) con la que podremos realizar un análisis de las páginas web que visitamos (o mantenemos) y detectar aspectos a mejorar para que éstas sean más accesibles. Podremos realizar un análisis para verificar el código HTML generado, analizar las imágenes (para ver si presentan un texto alternativo), revisar el código en busca de tablas o, incluso, analizar el CSS entre otras cosas.

En nuestra mano está contribuir a que Internet sea accesible a todos los usuarios y, con la ayuda de estas herramientas, quizás podamos ajustar nuestras webs para que éstas sean mucho más accesibles.

Imagen: Patrick Lauke y Word 2010 Accessibility Tutorial

La entrada Recursos para evaluar la accesibilidad de nuestra web aparece primero en Bitelia.

via Bitelia http://bitelia.com/2013/03/accesibilidad-recursos-verificacion

Cómo identificar fuentes utilizadas en la web

2013-02-21T22:29:00.001-08:00

Una fuente de ordenador es un archivo de datos que contiene los símbolos y caracteres necesarios para representar escritos en determinadas aplicaciones o sitios web. Este texto que estáis leyendo está representado por una fuente que a su vez tiene unas características especiales tales como tamaño, estilo o colores asociados.

Hay multitud de fuentes, algunas muy populares y otras infames -me viene Comic Sans a la cabeza-, y mientras que algunas tienen derechos reservados y es necesario pagar por utilizarlas, otras las podemos utilizar gratuitamente para nuestro sitio web u otras creaciones. Hay multitud de sitios donde encontrarlas, el problema es que en ocasiones queremos utilizar esa fuente que tanto nos gusta de un sitio y no sabemos cual es.

Para usuarios avanzados puede ser relativamente fácil averiguarlo, entrando en el código fuente y buscando tal vez en la hoja de estilos CSS, pero tal vez sea más fácil, por simplicidad y por ahorrar tiempo, utilizar algún método de identificación de fuentes como Fount .

A diferencia de algunas extensiones de navegador de las que os hemos hablado, como WhatFont, Fount utiliza la potencia del lenguaje JavaScript para ofrecernos un bookmarklet que podemos arrastrar a la barra de favoritos de nuestro navegador y utilizar en el momento que queramos identificar fuentes.

Un bookmarklet es una serie de códigos estándar que podemos consumir en cualquier navegador con soporte Javascript (es decir, Chrome, Firefox, Safari o Internet Explorer, por ejemplo). Para utilizar Fount basta con arrastrar el bookmarklet desde la página oficial para, inmediatamente, disfrutar de sus servicios:

Un clic entrará en modo identificación

Desde ese momento, podemos pulsar sobre la palabra / fuente que queramos identificar para mostrar su información

Se nos mostrarán datos tales como nombre de la fuente, tamaño o estilo utilizados

Un nuevo clic en el bookmarklet saldrá del modo identificación

Como véis, identificar fuentes es muy sencillo gracias a Fount, un fragmento de código que no provoca carga alguna en nuestro navegador al no ser una extensión residente. Podemos utilizar el bookmarklet cuando queramos, incluso aunque no lo tengamos en la barra de favoritos, tal vez renegándolo a una carpeta de favoritos si no vamos a utilizarlo de forma demasiado frecuente.

La entrada Cómo identificar fuentes utilizadas en la web aparece primero en Bitelia.

via Bitelia http://bitelia.com/2013/02/identificar-fuentes-sitios-web

Plugins WordPress para medir el impacto de nuestras acciones

2013-02-11T21:59:00.001-08:00

Hoy en día son muchos los usuarios, empresas e, incluso, administraciones públicas que deciden estar presentes en la red a través de una página web (de manera más formal) y también a través de un blog con el que conectar, de manera algo más informal, con su audiencia y comentar temáticas de interés, abrir un canal para la divulgación o fomentar el sano debate para acercarse algo más a sus seguidores.

Además del trabajo necesario para la puesta en marcha de este tipo de proyectos y, como no, el esfuerzo y constancia que requiere su mantenimiento, otro de los aspectos que debemos tener en cuenta es la medición del impacto de nuestras actuaciones. Como rezaba el eslogan publicitario de un fabricante de neumáticos, "la potencia sin control no sirve de nada"; una máxima que también es de aplicación a nuestros proyectos web, nuestros blogs o, incluso, a un plan de presencia en redes sociales.

Medir el impacto de nuestras actuaciones nos ayuda a comprobar que nuestros esfuerzos están contribuyendo a alcanzar los objetivos que nos marcamos (y sí, es importante marcarse unos objetivos antes de abordar un proyecto, es el paso previo que tenemos que cumplir). Además, también podremos detectar problemas (contenidos que no funcionan, por ejemplo) y aplicar acciones de mejora que nos ayuden a corregir cualquier tipo de desviación o desajuste en nuestros resultados e, incluso, a plantearnos un cambio de estrategia si vemos que seguimos lejos de los objetivos a pesar de los esfuerzos (aunque, claro está, los objetivos marcados deberán ser algo "realizable" y no un imposible).

Analizar y medir, aunque nos puedan parecer dos cosas iguales no son lo mismo; es decir, medir es obtener datos numéricos y analizar es exprimir la información que encierran estos números para plantearnos acciones que nos acerquen a los objetivos marcados. Exprimir los datos es algo que depende de nuestro propio proyecto y, por tanto, no es algo que se pueda generalizar pero, para poder llegar a este punto, es necesario recopilar información y, por tanto, "insertar sondas de medida" en nuestra web.

En este sentido, servicios como Piwik o Google Analytics nos pueden ayudar mucho en estas tareas de medición y análisis y, si trabajamos con WordPress, podemos encontrar un amplio abanico de extensiones que nos ayuden a recopilar datos con los que medir nuestro impacto y planificar acciones de mejora o validar nuestros planteamientos. Con la idea de seguir profundizando en este tema y, por tanto, recopilando información de nuestros blogs, vamos a revisar algunas extensiones que podrían complementar a las que ya vimos sobre analítica web en WordPress:

Jetpack

Jetpack es una especie de "navaja suiza" de los plugins de WordPress y un habitual de cualquier lista porque, bajo un único complemento, encierra un amplio abanico de funcionalidades y opciones procedentes de WordPress.com.

En el asunto que nos atañe, es decir, en el ámbito de la medición del impacto de nuestras actuaciones, JetPack nos ofrece un interesante panel de estadísticas en el que ver las visitas de nuestro blogs, los enlaces entrantes a éste o las notas con mayores visitas (y la distribución de éstas durante la semana); una información que aunque también podamos sacarla de Google Analytics o Piwik, tenerla en WordPress nos ayudará a hacernos una imagen rápida de cómo estamos o ver si los contenidos que publicamos tuvieron el impacto que esperábamos.

WP-Stats-Dashboard

WP-Stats-Dashboard es otro complemento que debemos tener en cuenta si queremos tener, en un único panel de control, un buen conjunto de indicadores del estado de nuestra página en WordPress: ranking Alexa, pagerank de Google, el impacto de nuestro blog en Twitter, visitas que recibimos, sitios que nos enlazan, la evolución del número de followers que tiene nuestro perfil en Twitter y un buen número más de datos e indicadores.

Un plugin que vale la pena tener en cuenta para comenzar a construir nuestro panel de control y seguimiento con el que evaluar nuestras actuaciones.

Post views Stats

Post views Stats es un complemento que nos ayuda también a tener una idea del impacto de los contenidos que publicamos en nuestro blog. ¿Y qué nos ofrece Post views Stats? Este complemento nos ofrece información, en tiempo real, de las visitas que tienen nuestros artículos, es decir, podremos ver un contador con el número de visitas que reciben e, incluso, podremos tener un pequeño panel en el que ver una clasificación de las notas con mayor impacto en base a sus visitas y los comentarios que han recibido por parte de los visitantes.

Otro detalle curioso es que esta extensión también nos permite generar un widget con las publicaciones más visitadas y, así, ofrecer a nuestros usuarios algo de información sobre los temas que más interés están suscitando entre los visitantes.

Chartbeat

Chartbeat es un servicio que nos permite obtener datos a tiempo real de lo que está sucediendo en nuestro blog, es decir, visualizar sobre un dashboard qué artículos están visitando los usuarios, qué puertas de entrada están utilizando, cuánto tiempo se pasan leyendo nuestras publicaciones y un largo etcétera de datos que nos pueden ayudar a afinar nuestros contenidos y nuestra estrategia.

¿Y para qué sirve este plugin? Al igual que ocurre con los plugins que trabajan con Google Analytics, este complemento nos facilita la inserción del código de Chartbeat y nos simplificará mucho el uso de esta herramienta que, por cierto, pone a nuestra disposición una prueba gratuita.

WP Social Stats

WP Social Stats es otro complemento con el que podremos obtener un panel en el que visualizar el impacto de nuestras publicaciones en las principales redes sociales, es decir, en Twitter, Facebook y Google+.

La dinámica es simple, obtendremos una tabla con todos nuestros posts publicados y, justo a su lado, datos sobre los tweets que llevan un enlace a dicho artículo o las veces que se ha compartido el artículo a través e Facebook o Google+; datos que pueden ser interesantes si nuestro blog no tiene los típicos botones para compartir contenidos.

La entrada Plugins WordPress para medir el impacto de nuestras acciones aparece primero en Bitelia.

via Bitelia http://bitelia.com/2013/02/plugins-wordpress-medida-impacto

Microsoft Launches Modern.IE Cross-IE Testing Toolbox

2013-02-10T22:14:00.001-08:00

Allows web developers to make their sites work across all versions of Internet Explorer

via Dr. Dobb's All http://www.drdobbs.com/web-development/microsoft-launches-modernie-cross-ie-tes/240147918

La función Panorama desaparecerá de Firefox porque casi nadie la utiliza

2013-02-07T05:44:00.001-08:00

Si recordáis cuando apareció Firefox 4, una de las novedades del navegador era la función Panorama, una utilidad que empezó llamándose Tab Candy, y permite gestionar y agrupar visualmente las pestañas abiertas cuando su número empieza a resultar grande. El acceso a Panorama aparece de manera automática cuando saturamos la barra de pestañas, o mediante la secuencia de teclas [CTRL]+[MAY]+[E]. Pues bien, parece que Panorama no ha tenido mucho éxito entre los usuarios y va a desaparecer de Firefox en un futuro mediato.

Bien por ser una prestación poco conocida, bien porque no se ha promocionado de forma adecuada y un buen número de usuarios de Firefox no saben que existe, lo cierto es que en la Fundación Mozilla están pensando eliminar el código de Panorama del navegador. También es cierto que Panorama, tal y como está implementado (incluso en Firefox 18), es un tanto frágil y si empleamos mal la prestación, el navegador se cierra perdiendo todo el trabajo si hemos configurado “no recordar el historial”.

Si pocos usuarios la emplean, mejor aligerar Firefox quitando líneas superfluas, aunque no va a desaparecer completamente, ya que Panorama va a quedar como un complemento, en atención a la base reducida de usuarios que sí le sacan partido a Panorama. Lo que no hay en este momento son fechas concretas para la eliminación de Panorama ni la aparición del complemento correspondiente.

Personalmente creo que Panorama es bastante útil y aprieto la secuencia de teclas mágicas en cuanto veo poblarse la barra de pestañas de temas que admiten agrupación. La gestión visual está muy bien conseguida y es fácil cambiar entre grupos y pestañas. Eso sí, procuro manejar con cuidado los controles, porque en más de una ocasión se ha cerrado todo… y siempre utilizo en Firefox el modo de navegación privada.

Vía | Mozilla

via Genbeta http://www.genbeta.com/navegadores/la-funcion-panorama-desaparecera-de-firefox-porque-casi-nadie-la-utiliza

WebRTC y el camino a Oz: mostrando el potencial de las tecnologías web

2013-02-06T05:22:00.001-08:00

Find your way to Oz es “experimento” desarrollado por Google y Disney para Chrome (aunque en teoría funciona sobre cualquier navegador que soporte WebGL, del que viene a demostrar su potencial). Merece la pena probarlo por lo bien ejecutado que está aunque, advierto, puede ser un sumidero de tiempo.

Ayer también se mostró al mundo una llamada “desde Firefox a Chrome” utilizando tecnología WebRTC, un API para permitir el acceso a funcionalidades multimedia (vídeo, voz) desde el navegador sin necesidad de que el usuario instale plugins.

Son ya muchos los actores empeñados en empujar y mostrar el potencial de las tecnologías web para que los desarrollos se trasladen de las “app stores” a la web: desde Mozilla y Google (que tiene Chrome OS) hasta las teleco (véase Telefónica) y Microsoft (véase el experimento que hicieron con Atari).

El caso es que todavía queda por demostrar que con los estándares web (con HTML5 como referencia) hay posibilidad de seguir innovando tan rápido como pueden los actores que van por libre (véase cada fabricante de sistemas operativos) y que se hace con una compatibilidad realmente multiplataforma, no “sólo para estos navegadores”

La entrada WebRTC y el camino a Oz: mostrando el potencial de las tecnologías web aparece primero en Error 500.

historias relacionadas

Pantallas con curvas

Google Now y la importancia de la cuota de mercado de Chrome

via Error 500 http://www.error500.net/webrtc-y-el-camino-a-oz-mostrando-el-potencial-de-las-tecnologias-web/?utm_source=rss&utm_medium=rss&utm_campaign=webrtc-y-el-camino-a-oz-mostrando-el-potencial-de-las-tecnologias-web

Selfstarter: el CMS para crear tu propia web de crowdfunding

2013-01-20T22:14:00.001-08:00

Si alguien está pensando en montar su propio proyecto de crowdfunding, debería echar un ojo a Selfstarter, un proyecto de código libre utilizado por Lockitron que permite alojar las iniciativas en una web/hosting propios en lugar de en el kickstarter de turno.

Lógicamente se pierde la ventaja de la visibilidad y confianza de los usuarios en los sitios de financiación colectiva más conocidos, pero también se gana independencia respecto al tipo de proyecto que se puede hacer. De hecho localicé este CMS a partir de las quejas del director de una iniciativa rechazada por Kickstarter. Su mayor limitación: sólo está desarrollado el módulo de pago de Amazon Payments, ningún otro.

La entrada Selfstarter: el CMS para crear tu propia web de crowdfunding aparece primero en Error 500.

historias relacionadas

Drones en la vida civil

2012 como año del crowdfunding y el año de Kickstarter

BiblioTech, una biblioteca sin libros (físicos)

via Error 500 http://www.error500.net/selfstarter-el-cms-para-crear-tu-propia-web-de-crowdfunding/?utm_source=rss&utm_medium=rss&utm_campaign=selfstarter-el-cms-para-crear-tu-propia-web-de-crowdfunding

Conversión sencilla de texto HTML a texto plano

2013-01-10T23:29:00.001-08:00

El HTML ha evolucionado mucho desde sus inicios y gracias a el somos capaces de visualizar páginas que se basan en su mayoría en texto -depende, por supuesto- pero que están adornadas con todo tipo de encabezados, fotografías que acompañan las palabras, y demás elementos. Sin embargo, en ocasiones podemos necesitar el texto en un formato menos rico, más plano.

A fin de cuentas, cualquiera que quiera dicho texto en formato de texto plano puede acceder al código fuente de la página, el cual interpreta el navegador, y guardarselo, el problema es que éste está lleno de los elementos típicos del lenguaje que hacen posible su formato, y que dependiendo de la complejidad de la página pueden ser muy abundantes, tanto como para perder bastante al lector del texto, eso por no hablar de casos en los que necesitemos dicha información para adaptarlo a otros formatos.

Por eso hoy he querido hacer esta nota en la que os hablo de dos utilidades para convertir texto HTML a texto plano, una desde Windows, muy potente y que sin duda no os decepcionará, y otra más simple para hacer operaciones sencillas desde el propio navegador. Empezamos.

HTMLasText (Windows)

Estamos ante una de las mejores aplicaciones al respecto que he visto, y en realidad por la cual estoy escribiendo este artículo. HTMLasText es simple pero potente, portable pero imprescindible si trabajamos con HTML y en ocasiones necesitamos texto sin formato. Su mayor ventaja sobre otros programas es que puede trabajar con múltiples archivos, convirtiéndose en una herramienta que puede servirnos para transformar sitios enteros en formato texto.

Aparte, las opciones de conversión son suficientemente intuitivas para que no haya que explicar que hacen. Tenemos todas estas disponibles:

Especificar los caracteres por línea

Añadir saltos de línea o separadores cada vez que se encuentren encabezados

Añadir el título o deshacernos de él

Incluir carácteres para marcar negritas (por ejemplo comillas, etc)

Respetar los centrados de texto

Respetar las alineaciones laterales de texto

Evitar elementos como tablas o separadores

Formateo de vínculos

La utilidad viene de la mano de NirSoft, compañía de software que dispone de otros programas conocidos como Battery Info View o My Uninstaller.

HTML to Text (Chrome)

HTML to Text es una utilidad muy similar pero esta vez que utilizamos bajo Google Chrome. Ideada para convertir texto HTML rápidamente a texto plano, en palabras de su autor, para hacer más entendible que el código, su utilización es realmente sencilla.

Al acceder a la extensión se nos muestra una caja de texto donde debemos pegar, manualmente, el texto HTML. Después simplmente tenemos que utilizar el botón de convertir para ver el resultado en una nueva caja de texto, donde se habrá eliminado todo el código y además los espacios en blanco restantes si así lo decidimos en la pantalla principal.

Se trata de una herramienta sencilla enfocada a gente que tenga que trabajar adaptando texto HTML, o que tal vez se encuentre realizando una migración y recopilando datos por algún motivo.

La entrada Conversión sencilla de texto HTML a texto plano aparece primero en Bitelia.

via Bitelia http://bitelia.com/2013/01/texto-html-a-texto-plano

El diseño web adaptativo o responsive design

2012-11-26T05:55:00.001-08:00

Estamos en un mundo móvil, y cada vez más accedemos a internet desde dispositivos variados, con necesidades y en situaciones diferentes. Así como los diseñadores sobre el papel tenían el control absoluto de lo que se presentaba estáticamente, fijo, impreso, al diseñar para web se encuentran con multitud de resolución de pantallas, con navegadores diferentes, con formas de interactuar que van desde un teclado, mouse, stylus o los dedos. Como dice John Allsop, desarrollador, “debemos entender y adoptar la idea de que la web no tiene los mismos límites y debemos diseñar con esta flexibilidad. Pero primero debemos aceptar la marea y el flujo de las cosas”.

El diseño web adaptativo, del inglés responsive web design, a veces se traduce no del todo correctamente como “diseño responsivo”, tiene todo que ver con esto. Es una técnica de diseño y desarrollo web que, mediante el uso de estructuras e imágenes fluidas y media queries en la hoja de estilo CSS permite que el sitio web se adapte al entorno del usuario, sea cual sea el dispositivo que utilice para navegar.

El término fue creado por Ethan Marcotte, quien además de escribir una serie de artículos sobre el tema en A List Apart, publicó un libro al que llamó Responsive Web Design , donde describe teoría y práctica. El concepto One Web había partido del W3C en 2008 y hace referencia a construir una Web para todos (Web for All), accesible desde cualquier dispositivo (Web on Everything).

En los sitios móviles puede darse el caso de que la función y el contenido necesiten ser diferentes que en el sitio visto en la versión de ordenador de sobremesa, y allí es donde el diseño adaptativo puede resolverlo, quitando o reduciendo la visibilidad de ciertos elementos.

El diseño web adaptativo supone que usando HTML y CSS logremos una sola versión que cubre todas las resoluciones de pantalla, por lo que el sitio web creado es accesible desde todo tipo de dispositivos. Marcotte define como tres los ingredientes técnicos para el diseño web adaptativo:

Fluid grid (cuadrícula fluida): En lugar de píxeles utiliza porcentajes para definir los anchos de las columnas o divs.

Imágenes flexibles: Las imágenes no tienen anchos fijos sino un máximo (o max-width), que por lo general suele mostrarse al 100% en un ordenador de escritorio. De esta manera, las imágenes se reducen para ajustarse a otras pantallas o resoluciones de navegador.

Media queries: permiten consultas al CSS personalizado basándose en el ancho mínimo y máximo de un navegador (min-max width).

Ventajas

La cantidad de usuarios que acceden a la web desde dispositivos móviles ha aumentado y seguirá haciéndolo. Un estudio de Compuware, un proveedor de servicios y software, muestra que un 57% de los usuarios no recomendaría una compañía con un sitio móvil mal diseñado y que un 40% visitarían la página de un competidor antes que usar un sitio escasamente optimizado para su navegación en móviles.

Las ventajas del diseño web adaptativo son obvias:

Mejor experiencia de usuario: todos los usuarios ven la web de la mejor manera posible para el dispositivo desde el que acceden

Costes más bajos: Se reducen los costos de creación y mantenimiento: ya no es necesario desarrollar aplicaciones para distintas versiones móviles

Actualizaciones más eficientes: cualquier actualización o modificación en el diseño, se ve reflejado en todas las plataformas, lo que reduce tiempos y márgenes de errores

Búsquedas: Al hacer una búsqueda, aparecerá una URL única en los resultados, por lo que se ahorran redirecciones y posibles fallos.

Mejor SEO: Google puede descubrir mejor tu contenido

Accesible a todos: incluidos las personas con distintos problemas de disminución visual

The Boston Globe y otros ejemplos

La de The Boston Globe es considerada la web insignia del diseño web adaptativo, en parte porque fue uno de los primeros grandes sitios en internet en adoptar el responsive design y también por estar el mismo Ethan Marcotte en el equipo de desarrolladores que se encargó de su rediseño. Además de esta, hay otros buenos ejemplos de diseños adaptativos, empezando por la misma de Marcotte, como era de esperar:

Ethan Marcotte

Food Sense

Google Está Bien Saberlo

Starbucks

CSS Tricks

Fundraise.com

Fork

Smashing Magazine

via Bitelia http://da.feedsportal.com/c/33160/f/538987/s/25f7dbea/l/0Lbitelia0N0C20A120C110Cdiseno0Eweb0Eadaptativo0Eresponsive0Edesign/ia1.htm

8 recomendaciones para mejorar el SEO de tu sitio web

2012-11-04T07:44:00.001-08:00

El SEO de un sitio web es una de las razones fundamentales de su éxito. En palabras simples, la optimización para motores de búsqueda (Search Engine Optimization) es la forma natural de lograr que un sitio web se ubique en las primeras posiciones de los resultados de las consultas en buscadores como Google, Bing, Yahoo, entre otros.

Aunque el SEO depende de múltiples factores, algunos de mayor peso que otros, es necesario ir desde lo más elemental para lograr que los objetivos de nuestra estrategia de posicionamiento se cumplan. Hacer SEO va mucho más allá de reconocer palabras clave, además de esto hay que saber como usarlas de manera adecuada. Tampoco es un trabajo fácil, de hecho requiere dedicación y tiempo, pero nadie ha dicho que sea una labor imposible de llevar por tu propia cuenta. Con estas 8 recomendaciones para mejorar el SEO de tu sitio web podrás comenzar a dar los primeros pasos sin gastar un céntimo.

1.- Utiliza guiones “-” para separar las palabras clave dentro de la URL de tus páginas web. En la medida de lo posible utiliza URLs cortas pero que a su vez sean descriptivas.

2.- Inserta palabras clave dentro del contenido del sitio, pero hazlo de manera inteligente. Usar palabras clave en exceso puede traer consecuencias adversas. Debes respetar la naturaleza del texto, el mismo debe ser fácil de leer y entender, no incluyas palabras clave de manera forzada. Dicho de otra forma, escribe para los humanos no para los motores de búsqueda.

3.- Incluye palabras clave dentro de la meta-etiqueta description , aunque esto no afecta directamente el ranking de tu sitio en los motores de búsqueda, sí ayuda a atraer más clics desde la página de resultados.

4.- Resalta en negritas las palabras clave dentro del contenido del sitio, esto ayuda a que los usuarios centren su atención en las palabras de más relevancia y contribuye de manera importante en la optimización del SEO.

5.- Rellena los atributos alt y title de las imágenes de tu sitio utilizando palabras clave, esto ayudará a que el buscador las indexe. Esto es mucho más importante si utilizamos imágenes que funcionan como enlaces.

6.- Como decía al principio, el truco está en saber como usar nuestras palabras clave. La posición en la que se incluyan tendrá un impacto importante en el SEO de la página. De manera más clara, las palabras clave que se incluyen en la parte superior de la página son mejor valoradas por los rastreadores y por lo tanto ofrecen mejores resultados.

7.- Los encabezados h1, h2 y h3 son extremadamente importantes para el SEO, incluye palabras clave en ellos. No todos tienen el mismo impacto, pero es necesario tenerlos en cuenta por igual. El más importante, evidentemente, es h1.

8.- Agrega información al atributo title de los enlaces, esto no solo ayuda al SEO sino que también mejora la accesibilidad del sitio.

Más allá de estas recomendaciones hay muchas otras cosas que debemos tener en cuenta -y sobre las que debemos tomar acciones- para lograr los objetivos que persigue el SEO. Espero que esto sea lo suficientemente útil para ayudarte a identificar por donde van las cosas.

via Bitelia http://da.feedsportal.com/c/33160/f/538987/s/252d8cb4/l/0Lbitelia0N0C20A120C110Crecomendaciones0Epara0Emejorar0Eseo0Eweb/ia1.htm

¿Quién dice que el SEO está muerto? – infografía

2012-10-03T22:23:00.001-07:00

En muchas ocasiones – y muchos tipos de personas – han dicho que el SEO ha muerto. La siguiente infografía da un repaso al perfil de estos especialistas, desde los expertos en redes sociales a los periodistas, pasando por los diseñadores o los emprendedores. Cada uno tiene sus motivos y, a su manera, cada uno lo practica, aunque sin darse cuenta.

La muerte del SEO es algo que se lleva anunciando desde hace tiempo. Y hay opiniones para todos los gustos. Esta infografía, elaborada por SeoBook, muestra a los diferentes perfiles de profesionales del mundo de Internet que defienden que las prácticas de posicionamiento están caducadas. Sin embargo, se argumenta que este ejercicio es algo dinámico, que se transforma con los cambios.

[Haz clic en la imagen para ampliar]

via TICbeat http://www.ticbeat.com/tecnologias/quien-dice-seo-muerto-infografia/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+rwwes+%28TICbeat%29

Google Penguin: algunas cosas que necesitas saber

2012-08-22T00:00:00.001-07:00

Desde del 24 de abril del año en curso, Google lanzó una nueva actualización del algoritmo que, en palabras simples, ayuda al buscador a establecer el ranking de los sitios web. El algoritmo, cuyo nombre clave es Penguin , llegó para cambiar la forma en que se hace SEO de manera, digamos, tradicional.

Con esta actualización, Google pretende acabar con las malas practicas y, sobre todo, con los tramposos que se valen de ciertos artilugios para posicionar sus sitios en lugares privilegiados de los resultados de búsqueda, sin preocuparse por ofrecer contenido relevante o de calidad. Casi 4 meses después, muchos de los responsables de mantener sitios web continúan haciendo el trabajo de SEO como si Google no hubiese cambiado, y muchos inocentes han visto caer dramáticamente el tráfico en sus sitios por simple desconocimiento.

Para los que no están todavía muy claros, o apenas se inician en este mundo, SEO son las iniciales de Search Engine Optimization , lo que en nuestro idioma sería Optimización para Motores de Búsqueda. Y no es otra cosa que preparar los sitios web para ganar mayor visibilidad en los buscadores de manera natural. La diferencia entre un SEO bien hecho y uno mal hecho es la que establece, nada más y nada menos, que tu sitio sea conocido o que sea completamente inexistente.

¿Qué cambió con la llegada de Google Penguin?

Ahora que estamos un poco más claros, repasemos un poco las cosas que cambiaron con la llegada de Google Penguin.

La cantidad de enlaces externos que apuntan hacia tu sitio, es un factor crucial para determinar la posición que ocupará este en las páginas de resultados de Google, pero ahora no basta con tener muchos enlaces entrantes. El nuevo algoritmo analiza además el contexto en el que se encuentra cada enlace, es decir, Google evalúa que ese sitio donde aparece el enlace a tu web esté relacionado con tu temática. Por ejemplo, si tienes una página web en la que te dedicas a hacer reviews sobre juegos de vídeo, no tiene mucho sentido que aparezca un enlace en un blog que habla sobre promociones para ir de vacaciones a las islas griegas. De encontrarse esta situación, tu sitio será penalizado por Penguin. Esto también está estrechamente ligado a la relevancia de los enlaces, un factor muy importante a la hora de determinar la posición en los resultados.

En general las webs que caen en estás practicas son considerados por Google como sitios de baja calidad y son severamente castigados. Por otra parte, si un sitio contiene muchos enlaces hacia páginas con diferentes temas sin producir contenido relevante para los usuarios, serán sospechosos de vender enlaces y corren el riesgo de ser excluidos completamente de los resultados de búsqueda, pues esto va en contra de las políticas del buscador.

Los comentarios SPAM también son penalizados con el nuevo algoritmo. Es decir, si eres de los que acostumbra a dejar comentarios en distintos blogs y páginas web haciendo uso de palabras clave y con enlaces a tu sitio, corres el riesgo de que tu sitio sea azotado por el látigo de Penguin.

Otro factor que puede impactar negativamente el posicionamiento, es el uso de múltiples palabras clave para apuntar a una o varias páginas de tu sitio. Quizá la manera más clara de decirlo, es que no tiene sentido que muchas palabras clave sean utilizadas para referir a un mismo enlace, así como tampoco lo tiene que una sola palabra clave te lleve a muchos lugares distintos dentro de un mismo sitio web.

¿Qué hago si mi sitio fue penalizado injustamente?

La “agresividad” del nuevo algoritmo puede hacer que sitios que no han incurrido en malas practicas se vean afectados. Si sientes que el ranking de tu pagina web fue afectado injustamente y de manera negativa por Google Penguin, tienes algunas opciones para recuperar tu posición sin tener que empezar de nuevo.

A través del sitio de Herramientas para Webmasters de Google, los administradores de páginas web recibirán notificaciones alertando sobre la presencia de enlaces en sitios marcados como de baja calidad. al remover estos enlaces, Google levantará la sanción. En caso de que no esté en tu poder remover ese enlace, debes intentar contactar con el administrador del sitio en cuestión y solicitarle que lo remueva. En caso de no obtener respuesta, puedes escribir a Google explicando la situación para que reconsidere el caso.

Otra opción que ofrece Google, es enviarles una solicitud para someter tu sitio a una revisión. Pero deberías estar muy seguro de estar “libre de pecado” y de que la penalización ha sido injustificada.

También se está probando la integración de un botón, dentro del mismo sitio de Herramientas para Webmasters, junto a cada enlace sospechoso, con el que podríamos solicitar la eliminación del mismo.

Después de todo, Google no es tan malo.

¿Qué puedo hacer para evitar que mi sitio sea penalizado?

En términos generales, lo mejor que puedes hacer es apegarte a las Directrices para Webmasters , establecidas por el propio buscador y respetar las buenas practicas de calidad, contenido y diseño propuestas en ellas. Aunque todo esto pueda parecer un poco “tiránico” , es necesario que te sometas a las reglas si quieres que tu sitio figure.

Si lo vemos en forma de pequeñas capsulas, deberías procurar:

Generar contenido confiable. No solamente contenido en el que otras personas confíen, me refiero a que tu mismo confíes en la información que estás suministrando.

Producir contenido útil e informativo, que vaya mucho más allá de lo obvio.

Que el contenido que generas realmente proporcione información con mayor sustancia que la que pueden ofrecer otros enlaces en la página de resultados de Google.

Especializarte en un tema y ser una referencia sobre este. Google te percibirá como un autor con autoridad para opinar sobre la temática y obtendrás mejor calificación.

Si aún tienes dudas o sientes que necesitas mejor preparación, Google también a puesto a nuestra disposición la Webmasters Academy, un lugar donde, entre otras cosas, podrás aprender muchísimo sobre como producir sitios y contenido de calidad, así como optimizar los que ya administras.

via Bitelia http://bitelia.com/2012/08/google-penguin-seo

Resetea tus CSS a conciencia con normalize.css

2012-08-20T23:18:00.001-07:00

Los navegadores tienen sus propios CSS por defecto y cada uno diferente a los de los demás. Lo suyo es resetear estos CSS para que luego no haya sorpresas. Sin embargo esto es algo tedioso… y a veces no del todo útil porque te cargas cosas que lo mismo luego te pueden ser de utilidad. Por eso no está de más probar cosas como normalize.css, un normalizador de código CSS multiplataforma, moderno y listo para el presente-futuro HTML5.

Esto de normalizar el CSS es como un paso más allá de resetear y en el caso particular de normalize.css cuenta con las siguientes características:

Mantiene algunos defaults de los navegadores que pueden ser útiles.

Arregla ciertos bugs comunes que suelen ser pasados por alto.

No te hace ilegibles los estilos en el Firebug y demás inspectores.

Es modular, profusamente comentado y tiene una documentación bastante amplia.

En definitiva, que tiene buena pinta (sobre todo para aquellos que tenemos que hacer de vez en cuando cosas de frontend sin ser frontenders profesionales), que se usa en proyectos importantes como Bootstrap, que recientemente se ha liberado la versión 2.0.1 y que lo puedes descargar con una licencia MIT (es decir, que puedes pintar, colorear y compartir tanto como quieras) en GitHub (¿dónde si no?).

Pd: y ya sabes, si lo pruebas, no olvides de darnos tu feedback en los comentarios, que no están de adorno.

Vía e imagen | nicholasgallagher.com

En Genbeta Dev | Bootstrap

via Genbetadev http://www.genbetadev.com/herramientas/resetea-tus-css-a-conciencia-con-normalize-css

Recursos gráficos para usar en la web

2012-08-14T14:45:00.001-07:00

Hace algunas semanas les contamos sobre Blue Vertigo , un portal para diseñadores donde podemos encontrar varios recursos con los cuales trabajar. En el día de hoy, vamos a hacer recomendaciones similares al hablarles un poco sobre los recursos gráficos que tenemos para trabajar en la web. Por supuesto, la lista podría ser interminable, por lo que será una guía para principiantes.

Tipografías

No por algo la guerra contra la Comic Sans sigue bien firme. Algunas personas todavía no pueden entender que la tipografía dice mucho sobre una marca o compañía, y que tiene que ser pensada cuidadosamente antes de ser aplicada. Si queremos usar diferentes tipografías para un proyecto gráfico, y no queremos usar la batería de tipos predeterminada que viene en nuestro sistema operativo, podemos buscar en la web tipografías gratuitas.

Una de las mejores fuentes es Da Font , un portal donde podremos encontrar infinidad de tipografías divididas de acuerdo con categorías que nos permitirán mejor encajar qué es lo que necesitamos. Por ejemplo, no vamos a usar una tipografía con serif si estamos buscando una imagen más distendida. El gran catálogo de Da Font cuenta con tipografías completamente gratuitas o con licencias Creative Commons.

Por otro lado, tenemos además Google Web Fonts , que cuenta con una variedad amplia de familias de fuentes que se pueden descargar e implementar. Con CSS3, además, podemos usar estas tipografías en sitios web sin tener que depender de que el usuario las tenga previamente instaladas en sus computadoras, lo que es un plus y realmente le da utilidad a Google Web Fonts.

Finalmente, FontSquirrel es otro manantial inagotable de fuentes que podemos usar por motivos comerciales, siempre con las licencias correspondientes. No es demasiado fácil de navegar, pero en la página principal ya nos encontramos con algunas sugerencias interesantes.

Imágenes

En lo que respecta a la fotografía, tenemos en principio dos opciones: usar fotografía con licencia Creative Commons, o usar fotografía de stock, que cuenta con un catálogo de fotografías gratuitas que podemos usar para nuestros proyectos. En lo que respecta a las fotografías CC, tenemos una variedad más amplia de paisajes, e imágenes más artísticas, mientras que con las fotografías de stock tenemos un acercamiento más comercial.

Por el lado de CC, podemos usar varios buscadores que nos permiten encontrar fotografías con licencias de este tipo, hasta en las opciones de búsqueda avanzada de Google Images. Podemos ir directamente a la fuente e ir al buscador de Creative Commons, donde podemos seleccionar entre diferentes buscadores que se adaptarán a nuestro criterio. También podemos encontrar fotografías con licencias CC en Flickr, en su apartado especial .

Finalmente, una de nuestras herramientas favoritas para encontrar imágenes con licencias CC es Compfight , un buscador muy potente que necesita nada más un concepto para encontrar las fotografías relacionadas con él.

Por el lado de las fotografías de stock, tenemos que tener cuidado con que sean realmente de descarga gratuita, de otra forma nos veremos en problemas legales. El problema que tiene la fotografía de stock gratuita es que usualmente suele estar bastante limitada. No tenemos una selección tan amplia como cuando compramos imágenes, y es entendible porque se trata de todo un negocio.

Un buen sitio para encontrar fotografía de stock gratuita es Freerange Stock . Nos ofrece imágenes de al menos 2400x1600px, y un sistema de licencias para usar las fotografías para proyectos. Lo único que tenemos que hacer es agregar el crédito de la fotografía. Por supuesto que no es obligatorio, pero la cortesía nunca está de más. Por otra parte, FreePhotoBank puede tener un diseño web bastante horrible, pero tiene un catálogo interesante de fotografía de stock.

También podemos optar por pagar por fotografías individuales. Muchos sitios cuentan con la posibilidad de descargar y comprar una licencia para fotografías por un precio muy barato, de apenas algunos dólares, así que si estamos detrás de un proyecto serio, no está mal pensar en comprar las imágenes correspondientes para darle un look más profesional.

Vectores

La búsqueda de vectores es un poco más avanzada, y va más allá de los meros píxeles de las fotografías. Los vectores nos pueden ayudar a generar un logo, una imagen de marca, etc. Si estamos trabajando junto a un diseñador, seguramente nos entregará el logo en vectores cuando termine de trabajarlo, es normal. Ahora bien, si queremos improvisar algo sobre la marcha, ¿de dónde podemos sacar imágenes en vectores?

Nuevamente, tenemos dos opciones, la gratuita y la de pago. En cuanto a la gratuita, existen varios portales donde podemos encontrar un catálogo grande de imágenes en vectores que pueden bajarse de forma gratuita. OCAL (Open Clip Art Library) es una de las más grandes, pero vamos a tener que saber buscar para encontrar algo interesante. Uno de mis favoritos es VectorStock , donde podemos encontrar todos los elementos necesarios para diseñar un logo.

Templates

Cuando estamos hablando de templates, nos referimos a plantillas realizadas previamente donde podemos completar con nuestra información. Algo así como lo que podemos encontrar en Blogger, WordPress o Tumblr cuando estamos creando nuestro blog. Pero, por otra parte, podemos comprar un template para darle un look más profesional a nuestra página.

Una opción interesante es Free CSS Templates , donde podemos bajar plantillas de CSS para aplicar a una página (o usarlas de inspiración). Páginas como estas hay muchas, pero si realmente queremos darle un aspecto profesional, siempre consideremos contratar a un diseñador.

via Bitelia http://bitelia.com/2012/08/recursos-graficos-para-usar-en-la-web

Conferencia: Optimizar el rendimiento web

2012-08-12T06:59:00.001-07:00

En la pasada Tenerife LAN Party, impartí una conferencia sobre la eficiencia en sitios web, titulada Optimizar el rendimiento web. Estuvo dirigida principalmente a propietarios de sitios web, y se trataron conceptos, trucos y consejos para mejorar el rendimiento de cualquier tipo de web (velocidad de acceso, transferencia mensual, posicionamiento, etc...).

La conferencia fue impartida gracias al Cabildo de Tenerife y a Innova7.

La conferencia constó de varias secciones, entre las que se encuentran las siguientes:

Conceptos: Un resumen rápido de términos y conceptos que se utilizaron frecuentemente durante la conferencia.

Esquema cliente-servidor: Funcionamiento del modelo cliente-servidor y sus características en cuanto a la optimización de velocidad.

Tecnología: Que tecnologías participan en un sitio web y como deberían estar organizadas y separadas.

Trucos y consejos: Una serie de numerosos e interesantes consejos para mejorar el rendimiento de nuestra web.

Google Webmaster Tools: Un repaso a las herramientas de Webmasters de Google, echando un vistazo a sus opciones y características.

CDN: Cloudflare: Por último, definición y ventajas de utilizar un CDN, junto a un breve repaso de las funciones principales del excelente Cloudflare.

Como siempre, las diapositivas completas, utilizadas en la conferencia, están colgadas en SlideShare: TLP2k12: Optimización del rendimiento web.

1. Introducción

Antes de empezar, hay que dejar claros los cuatro factores principales que tendremos en mente cuando nos decidimos a optimizar nuestro sitio:

Velocidad: Nuestro sitio web tiene que cargarse lo más rápido posible, obteniendo una buena respuesta, lo más próxima a una carga instantánea.

Eficiencia: El servidor debe estar disponible para realizar las peticiones que le pedimos lo más rápido posible. No debe estar ocupado ni demorarse mucho en procesarlas.

Transferencia: Hay que reducir lo máximo posible la cantidad de datos (Megabytes, Gigabytes, Terabytes...) que se consumen al mes. La mayoría de las compañías establecen costes por superar ciertas cantidades de transferencia, por no hablar de que cuanto menos tamaño ocupen los recursos que pedimos, menos tardarán en descargarse.

Posicionamiento: Aunque no es una de las finalidades principales de la conferencia, muchas de estas técnicas te pueden ayudar en el atractivo objetivo de aparecer en una mejor posición en Google.

Cliente

A lo largo de la conferencia se utilizó a menudo el término cliente. Con él nos referiremos generalmente, a un usuario utilizando un navegador para acceder a una web.

Pero debemos saber que con cliente, no sólo nos referimos a navegadores, existen muchos otros casos que entran dentro de la definición de cliente:

Crawlers: Los crawlers o robots, son sistemas automáticos, programados para acceder a un sitio web con una determinada misión. Por ejemplo, el crawler de Karmacracy, un estupendo acortador de URLs con entorno social y otras características, o Googlebot, el robot indexador de páginas de Google.

Elementos dañinos: Robots programados para acceder a webs en busca de formularios para dejar spam, usuarios zombies miembros de redes de bots, o «cosechadores» de direcciones emails para enviar publicidad, entre otros.

Navegadores: Y como decíamos antes, navegadores como Chrome, Firefox, Safari, Opera o, incluso, Internet Explorer.

Centrándonos en los navegadores, es útil tener una referencia global para saber como están las cosas. En Global Statcounter, a fecha de Mayo de 2012, podemos ver que Chrome es el navegador más utilizado, seguido de Internet Explorer y de Firefox (a nivel mundial).

En España, las cosas cambian un poco: la ventaja de Chrome sobre Internet Explorer es ligeramente mayor. De cualquier forma, esto nos sirve para darnos cuenta que hay que centrarse (sobre todo) en estos tres navegadores, y que por mucho que no nos guste Internet Explorer, es un navegador muy utilizado y no hay que olvidarlo.

Más información

Por último, si queremos aprender un poco más sobre navegadores y su historia, podemos hacerlo en Evolution of the Web, una estupenda infografía interactiva, en la que podemos navegar a lo largo de los años, y examinar como evolucionaron los navegadores y sus características, desde los tiempos del Mosaic hasta tecnologías como WebGL o CSS3.

Si por otra parte, estás interesado en el mundo de los crawlers y quieres más información sobre esto, puedes encontrar más datos en el artículo Robots: Accesos no humanos a la web.

2. Esquema cliente-servidor

Antes de meternos en materia, hay que tener claro el concepto del modelo Cliente-Servidor, para saber donde podemos empezar a optimizar.

Modelo básico

Este modelo es muy sencillo, en la siguiente imagen se puede ver el esquema, con un funcionamiento muy simple:

Un cliente realiza una petición (www.emezeta.com, por ejemplo), la cuál viaja a través de Internet y llega al servidor (donde se encuentra el sitio web). Entonces, la petición es procesada y la devuelve al cliente que la solicitó.

Servidor

Hemos explicado lo que es un cliente, pero... ¿Qué es un servidor? Básicamente, se trata de la máquina donde tenemos alojado nuestro sitio web. También suele denominarse hosting o alojamiento. Veamos cuales son los tipos más comunes de servidores:

Hosting gratuito: El primero y más básico de todos es el servidor gratuito. El usuario se preocupa sólo de registrarse y se enfoca en las tareas de escribir o publicar contenido, olvidándose de cualquier otro aspecto.

¿Ventajas? Coste 0. ¿Desventajas? Suelen mostrar publicidad y/o estar muy limitados en cuanto a ciertas características. Uno de los servicios gratuitos más utilizado es el de Blogger, muy potente y bastante personalizable.

Servidor compartido: Se trata de una máquina a nuestra disposición, que es compartida con muchos otros usuarios (con sus respectivas webs). Estos servidores suelen ser muy económicos, sin embargo, tienen el problema de que si una de las webs «vecinas» sobrecarga la máquina o tiene algún problema, repercute en el resto de los sitios. Un ejemplo muy común de estos servidores es Dreamhost.

Servidor virtual-dedicado: Se trata de una mejora al sistema anterior. De igual forma, también es compartida por varios usuarios, sin embargo, en este caso, la división se hace de forma virtualizada (a nivel de sistema operativo) por lo que cada usuario repercute única y exclusivamente en su propio sitio. En Emezeta utilizamos MediaTemple.

Servidor dedicado: En este caso, el servidor sólo lo utiliza el usuario que lo contrata. La máquina está de forma íntegra dedicada al usuario. Obviamente, son considerablemente más caros que los anteriores y requieren administración avanzada. Un ejemplo, OVH.

Servidor dinámico o elástico: Existen ciertos servidores para usuarios con necesidades más avanzadas. Por ejemplo, las instancias EC2 de Amazon permiten crear servidores elásticos ( se adapta a las necesidades de tráfico en cada momento) o características similares.

Generalmente, requieren administración y mantenimiento avanzado, y su uso es recomendable para sitios con muchísimo tráfico o altas necesidades.

Modelo avanzado

Así que, volvamos al esquema cliente-servidor, pero con una visión un poco más avanzada. La barra de colores que aparece en la zona inferior de la siguiente imagen representa pequeños fragmentos de tiempo, que transcurrirán antes de la carga completa del sitio web.

DNS: Antes de acceder a una web, el sistema no sabe funcionar con los nombres de dominio que manejamos, por lo tanto debe traducir el nombre de dominio (emezeta.com) a su correspondiente IP, proceso que normalmente tarda algunos milisegundos.

Connect: Tras realizar la traducción de DNS, el cliente intentará realizar una conexión con el servidor. En el caso de realizarse mediante SSL (https), tardará un poco más en el proceso de negociación.

Send: Una vez realizados los pasos previos, se procede a enviar la petición al servidor.

Wait: Al llegar la petición al cliente, se pondrá en una cola de espera para ser atendido (el servidor tendrá muchas peticiones de otros usuarios, y tiene un límite de peticiones que atender simultáneamente). Una vez le llegue el turno, procesará la petición y estará lista para ser enviada.

Receive: Finalmente, cuando esté lista la respuesta, se enviará al cliente que la solicitó.

Este es el proceso detallado que se sigue al realizar una petición. Debemos darnos cuenta, que salvo la franja amarilla (que dependerá de lo ocupado que esté el servidor, y el tipo de servidor del que se trate), todas las demás franjas dependen de la red (ancho de banda del cliente, ancho de banda del servidor, tamaño del fichero a transferir, etc...).

Análisis de recursos

Puede parecer que, tratándose generalmente de franjas de milisegundos, no tenga mayor importancia, pero debemos darnos cuenta que una web contiene varios recursos (logotipo, iconos, imágenes, documentos, archivos de estilos CSS, archivos javascripts, widgets sociales, etc...) y que para cada uno de esos recursos se pasa por el mismo proceso que hemos descrito anteriormente.

Es por eso que un buen punto de partida es realizar un análisis de todos los recursos que se sirven en nuestra web, intentando reducir el tiempo al máximo. Para ello vamos a aconsejar varias herramientas que realizarán la medición de los recursos de nuestra web en un panel de franjas:

GetFirebug: Extensión para el navegador Firefox con el cuál podremos hacer un análisis. Ojo, el análisis lo haríamos desde nuestro propio sistema (con nuestra conexión) por lo tanto tenemos que asegurarnos de que tenemos una conexión rápida.

Pingdom Tools: Para evitar el problema anterior, podemos realizar el análisis desde el servicio web de Pingdom. Es un servicio muy sencillo y accesible, sin embargo, últimamente falla un poco con las mediciones.

Google PageSpeed Insights: Probablemente, una de las más didácticas. No sólo permite realizar el análisis, sino que además da los resultados ordenados por prioridades y con breves descripciones orientativas.

WebPageTest: Probablemente, la mejor de todas. Ofrece gran cantidad de información, bien ordenada y clasificada.

3. Tecnologías

Otro punto interesante, es conocer las diferentes tecnologías que participan en un sitio web, ya que cada una tiene una finalidad y están bien estructuradas. Yo he creado la siguiente guía de niveles para explicarlo:

Contenido: En la parte más cercana al servidor (izquierda) tenemos el contenido. Es realmente la información almacenada, los datos, el contenido. Generalmente se almacena en bases de datos (MySQL, PostgreSQL, MariaDB, SQLite, MongoDB, etc...) o en archivos de información (XML, JSON, etc...).

Motor: En la siguiente capa tenemos la tecnología que «crea» el sitio. Lenguajes como PHP, JSP, Python, Perl, Ruby u otros dominan este nivel. Los frameworks como Django, Ruby on rails, CakePHP, etc... también entrarían en este nivel (ya que realmente son capas intermedias).

Presentación: Finalmente, dentro del último nivel del servidor estaría la capa que se encarga de la presentación del sitio. La he desglosado en tres pequeños apartados:
- Estructura: El lenguaje de etiquetado (HTML4, XHTML, HTML5...) es el que domina esta parte. Un buen consejo es utilizar el validador de W3C para corregir nuestros errores de etiquetado y tener un código válido para cualquier plataforma.
- Apariencia: El diseño del sitio web, la alineación de los elementos, así como los estilos o los recursos gráficos (tipografías, iconos, imágenes...) son los que predominan en este apartado.
- Interactividad: Por último, esta capa es la que se encarga de mantener la interacción con el usuario desde el lado del cliente (sin enviarse al servidor, ahorrando tiempo y recursos). Este apartado lo domina el Javascript, con frameworks como JQuery, Prototype u otros.

4. Consejos

Con los conceptos y términos explicados hasta ahora, ya podemos comenzar la parte de consejos y trucos para optimizar el rendimiento de nuestro sitio web.

Velocidad visual

Un consejo muy útil es el de intentar reducir la velocidad visual de una web. ¿Qué es eso? Fácil: Existen muchas webs que no muestran el contenido en el navegador hasta que están completamente cargadas, incrementando el tiempo en el que el usuario ve una zona en blanco, mientras espera a que se realice la carga (parte superior de la imagen).

Hay una serie de consejos para intentar reducir este tiempo de espera al máximo:

Colocar los archivos de estilos CSS justo al principio del documento (debajo de la apertura del head).

Colocar los archivos Javascript que sea posible al final del documento (justo encima del cierre del body).

Reducir, en la medida de lo posible, el número de archivos CSS/JS (combinándolos en un mismo fichero, por ejemplo).

Con la herramienta Loads.in puedes comprobar la velocidad visual de tu sitio automáticamente.

Compactar archivos JS o CSS

Otro truco bastante interesante es el de compactar (en inglés usan el término minify ) los archivos de texto CSS y JS. El proceso de compactar se basa en eliminar espacios extra, comentarios y minimizar el código fuente lo máximo posible, para hacer que el fichero ocupe muy poco y, por lo tanto, se descargue más rápido y consuma menos transferencia.

La mayoría de los Javascript más utilizados tienen sus versiones compactas (93KB, frente a los 246KB de la version normal).

En caso de no tenerla, es posible utilizar una herramienta como YUI Compressor para compactar nuestros archivos JS o CSS.

Sistema de caché

Una de las estrategias más utilizadas y efectivas en el mundo web (y en el de la informática en general), es utilizar sistemas de caché, consiguiendo varios objetivos:

Ahorrar ancho de banda: Menor transferencia de datos.

Reducir tiempo de espera: Mayor velocidad y menos esperas.

Mantener servidor desocupado: Libre para otras tareas.

Un sistema de caché básico implementado en navegadores, es aquel que en el primer acceso a una web, descarga todos los recursos y los almacena en el navegador.

Así, si volvemos a acceder una segunda vez a la web, no tendremos que volver a descargar la misma información de nuevo (esfuerzo inútil), si no que se cargarán los archivos desde la caché del navegador (en nuestro disco duro) sin descargar de nuevo estos archivos.

Existen varios niveles de caché, algunos muy simples otros más avanzados y sofisticados, algunos ejemplo:

A nivel de cliente: Expires, Cache-Control o E-Tag.

A nivel de servidor: plantillas de HTML estático o aceleradores como APC (para PHP) o MemCached (mantener copias en la RAM del servidor).

Compresión «on-the-fly»

Existe una estupenda técnica para ahorrar ancho de banda que aún hoy en día está muy infrautilizada. Es la técnica de la compresión al vuelo (on-the-fly en inglés).

Se basa en aprovechar las capacidades implícitas de compresión y descompresión de los navegadores:

El cliente realiza una petición (avisando que es capaz de descomprimir).

Antes de enviar la respuesta al cliente, el servidor comprime el recurso.

Entonces, lo envía (a un tamaño inferior, ganando en velocidad y ahorrando ancho de banda).

Al recibirlo, el navegador lo descomprime y lo muestra.

Obviamente, el precio a pagar por esta genial estrategia es un aumento de CPU en el servidor y cliente (comprimiendo y descomprimiendo los recursos), pero totalmente asumibles y despreciables en cuanto a los beneficios que aporta.

Veamos un ejemplo que ilustre el ahorro de ancho de banda de una manera más gráfica y representativa, con el artículo La fauna del Twitter (animales en peligro de extensión), simulando que 200 usuarios piden dicho artículo (número bastante bajo, el artículo tiene actualmente más de 23.000 solicitudes):

Artículo sin compresión: Ocupa 95KB. 95x200 = 19MB.

Artículo con compresión: Ocupa 23KB. 23x200 = 4,6MB.

Nótese que hablamos sólo del documento HTML en cuestión, no incluyendo archivos CSS o Javascript asociados. También cabe remarcar que esta operación sólo podría efectuarse con archivos de texto plano (en archivos JPG, MP3 o similares no sirve, puesto que ya están comprimidos).

Para usar esta característica, en servidores Apache se usa el módulo mod_deflate, mientras que en NGINX se hace uso de NginxHttpGzipModule.

Imágenes

Si dividieramos un sitio web en tipos de recursos utilizados, las imágenes se llevan un porcentaje bastante alto, por lo que no podemos pasarlas por alto en nuestra guía de optimización.

El formato utilizado, la calidad, si se trata de una imagen con pérdidas (JPEG, WEBP, JPEG2000, JPEG XR...) o una imagen sin pérdidas (TIFF, PNG...), formatos de animaciones, imágenes vectoriales, etc...

Cada situación requiere un formato o característica concreta, que si se utilizan de forma adecuada, se podrá reducir el tamaño de la imagen y aumentar la calidad lo máximo posible.

Todas estas características y algunas más las explico detalladamente en el artículo Formatos de imagen: Guía de optimización.

Si lo que buscas son aplicaciones para optimizar automáticamente las imágenes, aquí podrás encontrar 12 aplicaciones para optimizar imágenes, de las cuales recomiendo, sobre todo, RIOT (Radical Image Optimization Tool).

«Lazy Load» de imágenes

El término lazy load (carga perezosa) se utiliza en informática para denominar a una estrategia en la que sólo se realiza la carga de un recurso cuando sabemos con certeza que se va a utilizar.

En artículos con mucho contenido gráfico pesado, como por ejemplo 50 cosplays increíbles, a pesar de haber optimizado las imágenes como se indica en el apartado anterior, el total de 50 imágenes ocupan en total 4,17MB.

Muchas veces, los usuarios entran a un artículo o sección sólo para ver algún detalle concreto, y no necesitan que se cargue la página completa. Este plugin Lazy Load intenta conseguir eso mismo.

En la imagen, a la izquierda, podemos ver lo que implica la carga de un artículo sin lazy load. Sin embargo, a la derecha, utilizando el plugin Lazy Load se reemplazan las imágenes por una pequeña animación de precarga (debidamente cacheada, por lo que sólo se carga una vez).

El plugin entra en acción cuando el usuario hace scroll y se mueve por la web, ya que todas las imágenes dentro del campo de visión del usuario (recuadro de color azul/verde) se van cargando, y si el usuario no avanza, el servidor se ahorra la transferencia de esas imágenes.

El mejor plugin que conozco para este tipo de carga es Lazy Load, de Mika Tuupola (basado en JQuery).

Reducción de peticiones

Como ya habrá supuesto el lector desde el inicio de este artículo, un punto importante en la optimización del rendimiento de una web es la reducción de peticiones. Si cada petición retrasa un poco la carga del sitio, cuantos menos archivos descarguemos, más rápida será.

Pero a parte de eliminar peticiones inútiles o innecesarias, existen algunas técnicas para ahorrar peticiones, como por ejemplo la técnica de los Sprites CSS.

CSS Sprites

Esta técnica es muy útil para imágenes muy pequeñas o iconos, y como se puede ver en el ejemplo, hasta Google la utiliza.

Se basa en unir todos estos iconos en una sola imagen, y en lugar de pedir las imágenes por separado, descargamos una sola vez la imagen con todos los iconos, y nos encargamos de recortarlas y colocarlas mediante CSS.

Habremos pasado de realizar muchísimas peticiones al servidor (una para cada icono), a realizar sólo una petición al servidor (la colección de imágenes), con lo que ello conlleva.

Imágenes en linea

Otro método a destacar es el de las imágenes en línea (in-line images en inglés), que no es más que la traducción de una imagen a un fragmento de texto.

Puedes hacer la prueba copiando y pegando el siguiente texto y colocándolo en la barra de dirección de tu navegador:

Las ventajas de este sistema es que te ahorras la petición al servidor, puesto que en lugar de descargar una imagen la cargamos desde un texto (0 peticiones). Por contra, este sistema es bastante pobre y sólo es realmente útil para algunos casos en los que las imágenes son muy pequeñas.

Favicon

El llamado favicon (favorite icon) es ese icono que aparece a la izquierda de una URL en nuestro navegador y que representa a nuestra web cuando, por ejemplo, tenemos varias pestañas abiertas.

Este archivo es (y con diferencia) el recurso más pedido en casi cualquier web, ya que recibirás peticiones (incluso aunque no exista) de navegadores o sistemas que buscan este archivo para identificar la web en otros sistemas, incluirlo en pestañas o favoritos (de ahí su nombre, IE lo hacía así desde sus orígenes).

Para representar su importancia, he contabilizado el número de peticiones a este archivo en Emezeta durante un mes (más de 50.000 peticiones):

Icono sin optimizar (3KB): 3x50000 = 150MB de transferencia al mes.

Icono optimizado (0,66KB): 0,66x50000 = 33MB de transferencia al mes.

Como se puede ver, es muy importante que este archivo se reduzca lo máximo posible y se haga «cacheable».

Caché «universal»

Existe un repositorio de recursos comunes de Google: Google Webfonts y Google Libraries API. En ellos tenemos a nuestra disposición una URL con las últimas versiones de JQuery o distintas tipografías a elegir.

La utilidad y genialidad de estos repositorios es que aprovecha la capacidad de caché para una URL concreta. Vamos a verlo con un ejemplo:

Un sitio web A incluye el script de JQuery 1.7.2.

Un sitio web B (sin relación con A) incluye el mismo script JQuery.

Un usuario que acceda a cualquiera de los dos sitios, hará que se cachee en su navegador ese script y esté disponible para cualquier otra web que lo utilice.

Así pues, nos aprovecharemos de que ese recurso probablemente ya se encuentra cacheado en el navegador de usuario (es muy probable que el usuario haya visitado otro sitio web que lo utilice). Idem con las tipografías.

Aumentar rendimiento

Otra forma de aumentar la velocidad de descarga de nuestros sitios es la de separar los llamados recursos estáticos, archivos que no cambian y son siempre iguales (imágenes, estilos css, archivos javascript...) en un subdominio diferente del resto de la web.

Esto se suele hacer porque el protocolo HTTP 1.1 limita a 2 las descargas simultáneas desde el mismo subdominio (y la mayoría de los navegadores sigue esa norma). Así también podemos aprovechar y establecer que el subdominio con contenido estático se envíe sin cookies (que no suelen ser útiles en imágenes, por ejemplo).

Balancear con otro servidor

Otra técnica muy utilizada es utilizar un servidor diferente para almacenamiento de imágenes y recursos estáticos.

Por ejemplo, Amazon S3 es una alternativa muy utilizada, ya que tiene precios muy bajos y se paga por uso (al contrario que los hostings, que suelen ser cuotas mensuales).

Sin embargo, a pesar de que el precio por transferencia es muy atractivo, según mi experiencia, Amazon S3 es muy útil para almacenar archivos grandes, pero no para archivos pequeños y muy solicitados, ya que el precio de las peticiones es lo que se hace caro a la larga.

Por cierto, para usuarios residentes en Canarias, Amazon cobra impuestos IVA, cuando en realidad a los canarios no debería cobrarlos. Si es así, exigid que se os aplique la exención (con una copia del DNI, modelo 036 y modelo 400 debería bastar).

Nginx como Proxy inverso

En la mayoría de los hostings se utiliza como software de servidor web Apache. Se trata de uno de los servidores web más extendidos y utilizados. Recientemente, está surgiendo un servidor web llamado NGINX, muy potente y ligero, que consume una cantidad notablemente menor de RAM y es mucho más veloz al servir peticiones.

¿En qué se basa un proxy inverso? Se trata de instalar dos servidores web en lugar de uno sólo, utilizando el servidor nginx (más veloz y eficiente en el consumo de RAM) para procesar todas las peticiones, aligerando así carga en nuestra máquina.

Si se trata de recursos estáticos (imágenes, iconos, etc...), los sirve el propio nginx. Si se trata de un recurso dinámico (PHP, Perl, Python u otros), nginx le pasa el testigo a Apache que sería el que lo procesaría.

Esto se suele hacer puesto que nginx a pesar de ser un gran servidor web, aún no está tan extendido como Apache ni tiene soporte para la gran cantidad de módulos y funciones avanzadas que se pueden realizar con Apache.

El archivo Robots.txt

El archivo robots.txt es un fichero de texto, con una cierta estructura, que muestra a los crawlers recomendaciones acerca de las secciones que no deberían mirar (ni indexar en los buscadores).

Debe quedar claro que se tratan de recomendaciones (no de restricciones), por lo que lo normal es que los robots cumplan las restricciones del fichero, pero que no sirve para restringir el acceso, por ejemplo, a bots dañinos.

Un buen fichero robots.txt, correctamente configurado y con secciones con contenido duplicado restringidas para el buscador de Google, puede mejorar significativamente el posicionamiento de nuestro sitio.

En el artículo Robots.txt: Todo lo que debería saber se explica detalladamente el funcionamiento del archivo robots.txt y como configurarlo correctamente para nuestro sitio.

Mapas de sitio

Los mapas de sitio (sitemaps) son archivos (generalmente documentos XML) que contienen una lista de todos los artículos (o secciones) de un sitio web.

Esto permite que los propietarios de un sitio web indiquen fácilmente al robot de Google, donde está el contenido de nuestro sitio, facilitando el trabajo de recopilación en su buscador.

Puedes crear varios sitemaps según tus criterios (por ejemplo, uno para artículos, otro para imágenes, etc...), siguiendo el formato de los sitemaps, ofrecido por Google. Un buen sitemap es uno de los pilares principales para conseguir más visitas.

Google Webmaster Tools

Una de las herramientas imprescindibles de Google para cualquier propietario de un sitio web, es Google Webmaster Tools, un panel en el cual podemos controlar gran cantidad de parámetros acerca de nuestra web en relación con el famoso buscador.

Mejorar el posicionamiento para un país concreto, establecer parámetros de URL representativos, examinar problemas de rastreo en el servidor, descripciones o títulos inconsistentes que afectan nuestra indexación en el buscador, tráfico con respecto a la red social Google+ o los mapas de sitio (sitemaps), entre muchas otras cosas.

Puedes echar un ojo a esta parte de la presentación (De la página 100 a la 119).

Aunque en este caso sólo tratamos el panel de Google Webmaster Tools, también sería interesante darnos de alta en las herramientas de webmaster de Bing, el buscador de Microsoft, que junto a Yahoo, forman este pack de utilidades.

Hotlinking

Uno de los males más famosos, que repercuten directamente en la transferencia de datos y carga de un servidor es el robo de contenido o hotlinking.

Con esa palabra se define al hecho de que uno o varios usuarios (con o sin conocimiento) colocan imágenes en su propia web, pero en lugar de estar alojadas en su propio servidor, utilizan una imagen alojada en un servidor ajeno.

Esto, en principio, no supone ningún problema. Sin embargo, si el sitio web tiene mucho tráfico (o si la imagen es robada por muchas webs), el ritmo de solicitudes puede llegar a inundar a peticiones (con el coste económico que ello podría llevar) o incluso a colapsar el servidor y hacerlo caer.

Para evitar esto se utilizan técnicas de anti-hotlinking, como pueden ser el uso del módulo ModRewrite, para Apache o el servicio ScrapeShield del CDN que se explicará a continuación.

CDN: Red de distribución de contenidos

Por último, para finalizar el artículo, vamos a explicar lo que es un CDN.

Cuando tenemos nuestro propio sitio web, éste está ubicado en un lugar del mundo (generalmente, en EEUU), por lo que, como parece obvio, los usuarios que estén más cerca de ese lugar, al acceder al sitio web, tendrán una respuesta más rápida que alguien que acceda, por ejemplo, desde Europa.

La única forma de mejorar la respuesta, es ubicar nuestro servidor en una localización más cercana al público general de nuestro sitio.

Sin embargo, ¿qué ocurre si nuestro público no está localizado en un sólo país, si no que está repartido por todo el planeta? ¿o si no nos interesa cambiar de servidor porque el que tenemos tiene unos requisitos muy especiales? Aquí entra en juego la importancia de un CDN.

Una red de distribución de contenidos se encarga de realizar copias de nuestro contenido y replicarse por varios datacenters ubicados por distintos países y continentes. Así, cuando un usuario pide un cierto recurso, el datacenter más cercano al usuario es el que responde, ofreciendo una respuesta más rápida que si respondiera el servidor original.

En nuestro caso vamos a hablar del excelente CDN CloudFlare, que en el momento de escribir esto, posee 14 datacenters repartidos por todo el mundo. Pero lo mejor no es esto, si no que además de aportar un servicio excelente, con gran cantidad de funcionalidades, su plan básico es totalmente gratuito.

Más adelante escribiré un artículo orientado específicamente al funcionamiento detallado, instalación y administración del CDN CloudFlare, pero de momento lo podemos ver como una gran red de servidores que «envuelve» nuestro propio servidor, lo que aporta varias ventajas:

Localización: El contenido se sirve desde el datacenter más cercano al usuario, por lo que la respuesta es mayor.

Transferencia: El contenido es servido por los datacenters, por lo que nuestro servidor genera un ahorro de ancho de banda considerable.

Peticiones: También ahorramos un gran número de peticiones en nuestro servidor, por lo que las colas de peticiones (y las esperas) se reducen.

Contenido dinámico: El contenido dinámico se sigue sirviendo desde el servidor original, por lo que no se muestra incoherencia de datos.

Escudo ante ataques: La estructura de datacenters se lleva también el impacto de los clientes dañinos, protegiendo al servidor de ataques y otros elementos maliciosos.

El servicio Cloudflare proporciona un panel de analíticas donde podemos ver la cantidad de accesos de usuarios (tráfico regular), crawlers (robots y buscadores) y amenazas (atacantes, spam, etc...), permitiendo establecer un nivel de «peligro» ante ataques.

Y como los resultados siempre son más clarificadores, veamos los resultados de un mes utilizando CloudFlare en Emezeta blog:

Peticiones: De 28 millones de peticiones al mes, nuestro servidor pasa a recibir 2 millones (el resto es servido por el CDN). Un ahorro del 93%.

Transferencia: De 431GB de transferencia mensual, nuestro servidor pasa a servir sólo 103GB (el resto es servidor por el CDN). Un ahorro del 76%.

Finalmente, algunos enlaces de otras conferencias o cursos que te podrían interesar:

SlideShare: Diapositivas completas de la conferencia Optimizar el rendimiento web (Tenerife LAN Party 2k12).

Conferencia: Ganar dinero con Android (2012): Conferencia sobre promoción, ingresos y publicidad en aplicaciones Android.

Conferencia: Entendiendo Android (2011): Conferencia con una introducción al desarrollo de aplicaciones en Android.

Curso para Bloggers: Si eres emprendedor y quieres empezar con el blogging, puede que este curso te resulte interesante.

Contenido extraído de: Conferencia: Optimizar el rendimiento web de Emezeta blog

via Emezeta blog http://www.emezeta.com/articulos/conferencia-optimizar-el-rendimiento-web

¿Qué es y cómo funciona AlexaRank?

2012-08-10T10:26:00.001-07:00

El mundo de internet no funciona tan fácilmente como nosotros pensamos. El problema es que lo venimos usando desde hace tanto tiempo que nos dejamos de preguntar cómo es que funciona. Por ejemplo, por qué algunas páginas son más populares que otras cuando comparten casi el mismo contenido. Por eso, vamos a hablar un poco del Alexa Rank, una herramienta que nos permite ver en qué ranking de internet está determinado sitio.

Para el usuario de a pie puede que no vaya más allá de la curiosidad momentánea, pero es una herramienta poderosa para el marketing online, dado que nos permite ver qué tal está un sitio en el que queremos invertir, por ejemplo. El funcionamiento de Alexa es bastante simple, de hecho, pero nunca está de más repasarlo para tener todas las armas a mano en caso de necesitar usarlo.

¿Qué es Alexa?

Alexa es una compañía versátil que ofrece un buscador online, un directorio y una barra de herramientas o toolbar , entre otras cosas, además del ya mencionado ranking de tráfico que es en lo que nos concentraremos hoy. El ranking se encuentra ubicado en la parte superior de la página principal de Alexa, y cuando ingresamos solamente tenemos que escribir el nombre del dominio del cual queremos obtener los datos.

La toolbar de Alexa también es importante porque será la encargada de proveer los datos para hacer el ranking. Cada vez que un sitio contiene la toolbar o entra en contacto con ella será agregado a Alexa. Cuanto más bajo sea el número, más arriba estará en el ranking –como en cualquier otra enumeración-.

¿Cómo funciona el raking?

Cuando un sitio web entra en contacto con AlexaRank, se comienza a registrar el tráfico del sitio. Por eso, cuando nosotros como usuarios ingresamos a Alexa, podemos ver un historial agregado de 3 meses con datos de los millones de usuarios de la toolbar, que nos permite ver la cantidad de páginas vistas de determinado sitio y la cantidad de usuarios (el alcance que tiene esa web particular).

Lo que hace Alexa es registrar el alcance y las páginas vistas en todos los sitios de internet de forma diaria. El ranking se forma a través del promedio de estas dos variables divididas, para que el ranking refleje el número de usuarios que visitan la página así como también la cantidad de contenidos que los usuarios visitan en esa página determinada. Las estadísticas se van renovando para mostrarnos un período trimestral.

¿Para qué sirve?

Podemos pensar el AlexaRank como una especie de competencia menor al PageRank de Google. Aunque esencialmente son similares, también son bastante diferentes, y nos proveen con información que muchas veces difiere de forma importante. Las estadísticas de cada sitio no son exactas, sobre todo para los sitios menos visitados. ¿Por qué? Porque la información de Alexa proviene de la instalación de su toolbar, que no siempre sucede. Por eso, los sitios con información más exacta son siempre los más populares.

AlexaRank puede ser muy relevante para obtener datos concretos de navegación. Por ejemplo, una página que tiene un buen PageRank puede no tener una gran cantidad de visitas, porque quizás ha sido enlazado con otro sitio popular. Lo que tiene de bueno Alexa es que nos permite acceder a estos datos duros, sin tener que considerar las “tretas” que se pueden hacer con PageRank.

¿Cómo puedo usarlo?

La major forma de usar Alexa es implementarlo como herramienta para medir el tráfico de sitios que no son nuestros. Por ejemplo, webs de la competencia, páginas que nos interesan, sitios en los que queremos poner publicidad, y más. Si tenemos una página web propia, tendremos que considerar otras herramientas, como por ejemplo Google Analytics.

Alexa no nos provee de datos geográficos de visitantes, ni nos da estadísticas profundas que nos permitan ir más allá del dato duro de las visitas. Por eso, si bien podemos usarlo, para nuestro propio sitio podemos optar por algo más profesional, que nos de datos más relevantes para nosotros. Sí sirve para saber qué están haciendo bien determinadas páginas que están posicionadas bien arriba en el ranking.

via Bitelia http://bitelia.com/2012/08/que-es-y-como-funciona-alexarank

10 buenas practicas para escribir código HTML

2012-08-07T22:44:00.001-07:00

La mejor manera de hacer que nuestros sitios web se vean y funcionen correctamente en cualquier navegador, es escribiendo código limpio y que respete los estándares. En la actualidad, la calidad del código HTML presente en cada página es un factor que ayuda a mejorar -o empeorar- el posicionamiento en buscadores, una razón de peso para preocuparnos por escribirlo correctamente.

La lista de buenas practicas que sigue a continuación puede ser percibida por los desarrolladores más avanzados como “básica”, y puede que así sea. Sin embargo, espero que sea de utilidad para todos, en especial para nuestros lectores que recién se inician en este mundo del desarrollo web.

En las primeras versiones del lenguaje -hablo de muchos muchos años atrás- y con los navegadores antiguos, muchas de estas reglas podían omitirse y cada uno establecía su propio estilo, sin que esto preocupara mucho a nadie. Por fortuna, las cosas han cambiado y hoy día somos mucho más exigentes con nosotros mismos.

Existe algunas reglas que debemos respetar, sobre todo ahora que HTML5 comienza a presentarse con más fuerza. Estas reglas no las inventé yo, solo las aprendí con mi trabajo y hoy quiero compartirlas para que todos escribamos HTML de calidad.

Declarar el DOCTYPE correcto

Existen varias versiones de HTML, cada una con sus propias reglas, etiquetas, elementos y atributos. La única manera de que un navegador muestre correctamente una página web es conociendo exactamente la versión de HTML que usa el documento que la contiene.

Para indicarle al navegador la versión de HTML que estamos usando debemos usar la declaración <!DOCTYPE> y debe ser la primera línea de nuestro documento. Y aquí algunos ejemplos:

DOCTYPE en HTML5

<!DOCTYPE html>

DOCTYPE HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

DOCTYPE XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Si te encuentras un poco confundido ahora, puedes utilizar esta referencia donde se muestran las diferentes declaraciones posibles y las diferencias entre ellas.

Recuerda cerrar las etiquetas

Un documento HTML está compuesto por muchas etiquetas que sirven para definir encabezados, párrafos e incluso secciones enteras, usualmente vienen en pares, una para abrir y otra para cerrar. Siempre que abras una etiqueta, recuerda cerrarla correctamente.

Incorrecto <p>Lorem ipsum dolor sit amet

Correcto <p>Lorem ipsum dolor sit amet</p>

Nombra las etiquetas siempre en minúsculas

Tan importante como cerrarlas, es usar los nombres de las etiquetas siempre en minúsculas. Lo correcto es <p> </p>, <div> </div>, <h1> </h1> no es <P> </p>, <dIv> </DIV>, <H1> </H1>, . Además de que produce nauseas leer código escrito de esa manera, es probable que los navegadores modernos no interpreten correctamente estas etiquetas.

Utiliza ficheros externos para CSS y JavaScript

Aunque puedes crear funciones JavaScript y dar estilo a los elementos directamente en el documento HTML, por favor, nunca lo hagas. Utiliza siempre hojas de estilo y scripts externos en archivos separados para estos fines.

Enlaza los CSS externos al principio

Aunque en teoría puedes enlazar los archivos CSS externos en cualquier parte del documento HTML, lo más recomendable es hacerlo dentro de las etiquetas <head> </head>, en la practica esto hará que las páginas se cargan ligeramente más rápido.

Enlaza los JavaScript externos al final

En la medida de lo posible trata de enlazar los archivos JavaScript, justo antes de la etiqueta </body>. Esto ayudará a que las páginas carguen mucho más rápido.

No es una tontería y existe una explicación para esto: cuando el navegador está cargando un script, se detiene por completo la carga del resto del sitio y continua una vez que finaliza el otro proceso. Si se trata de un script de gran tamaño, el usuario deberá esperar un poco y notará fácilmente que algo sucede en el fondo, algo para nada elegante.

Usa el atributo “alt” en todas las imágenes

Es una regla fácil de olvidar, sin embargo hay que hacer un esfuerzo por recordar incluir el atributo “alt” en todas las imágenes. Aunque parezca una tontería, es necesario incluir este atributo por razones de validación y accesibilidad.

Valida tu código

Validar el código de los documentos varias veces durante el proceso de creación, te ayudará a descubrir errores de manera oportuna y te ahorrará dolores de cabeza innecesarios al final, cuando pensabas que ya habías terminado. W3C pone a nuestra disposición su Markup Validation Service que nos permitirá realizar esta tarea de manera sencilla y nos avisará sobre cualquier error en nuestro código.

Memoriza todas las etiquetas

Resulta muy útil repasar la lista completa de etiquetas HTML disponibles y tratar de memorizar la mayor cantidad de ellas. Siempre puedes acceder a la referencia, pero mantenerlas en la cabeza te ayudará a escribir código mucho más rápido.

Si memorizar no es lo tuyo, te recomiendo buscar un editor con soporte para HTML (hay cientos) que te ayude a agilizar el proceso, autocompletando código y ofreciendo sugerencias.

Lee código de otros

Para cerrar, aunque no esté ligado únicamente al código HTML (ya que aplica para JavaScript, CSS y cualquier otro lenguaje) al leer código de otros desarrolladores, incluso mirando el código fuente de tus sitios web favoritos puedes aprender mucho. Inspecciona ese elemento particular que llama tu atención y aprende como lo hicieron. Revisa otros estilos y crea uno propio.

via Bitelia http://bitelia.com/2012/08/buenas-practicas-html

CSS Pie Timer

2012-08-07T15:32:00.001-07:00

Editor's Note: Hugo Giraudel made a cool demo for a "pie timer" on CodePen. It's definitely not an intuitive or simple thing to do in CSS. Then he sent me a write up on how he did it and I'll be darned if it doesn't make a real nice CSS-Tricks article. Thanks Hugo!

What are we making?

You may have seen some of these loaders, mostly on Flash websites. It's basically a piece of pie getting bigger and bigger to become a whole circle.

At a first I thought it's gonna be easy peasy, just have a circle, make it spin, hide some part of it behind a mask and I'm done. Well, it turned out it's way more difficult. In fact, CSS is not prepared for such a task, even with preprocessors like SASS & Compass. We always struggle when it comes to making shapes, and even more when we have to style or animate those. Most of the time, we manage to work around it and get something working, at the price of maintainability or semantics.

Why do this?

I think the most common use case would be timers. But these concepts could be used to make pie charts with pure CSS as well. If you're es

Even if there are several awesome tools outthere to manage pie charts (mostly with JavaScript), we could probably easily figure out how to do pie charts with CSS only, and even animate those with such a trick.

There is a tutorial about making CSS pie charts with the clip property on Atomic Noggin Enterprise website : http://atomicnoggin.ca/blog/2010/02/20/pure-css3-pie-charts/

Well, this is a workaround with bad semantics! But the maintainability isn't so bad, so here we go.

The HTML

We need 3 different elements:

a spinner: this is the half-circle which will rotate during the whole thing

a mask: this is the element which will hide the spinner during the first 50% of the animation

a filler: this is the element which will complete the circle during the last 50% of the animation

And we need all these elements to be in the same parent to allow absolute positionning :


<div class="wrapper">
  <div class="spinner pie"></div>
  <div class="filler pie"></div>
  <div class="mask"></div>
</div>

Since the spinner and the filler are two half of the same circle, we use a shared class (.pie) to style them.

The CSS

To keep the code in this article clean and understandable, we won't add any vendor prefixes.

The parent element sets up the size and absolute positioning context for the timer:


.wrapper {
  width: 250px;
  height: 250px;
  position: relative;
  background: white;
}

It is important to make sure the width and height are equal to make a circle and ensure the whole thing works.

The "spinner" and the "filler" share this CSS:


.pie {
  width: 50%;
  height: 100%;
  position: absolute;
  background: #08C;
  border: 10px solid rgba(0,0,0,0.4);
}

Their width equals 50% of the parent width since they are both part of the same circle, and their height is the same as the parent height. We also give them some color and a border to identify them properly.

The "spinner"


.spinner {
  border-radius: 125px 0 0 125px;
  z-index: 200;
  border-right: none;
  animation: rota 10s linear infinite;
}

We have to make the thing look like a half-circle with border-radius on the top left corner and the bottom left corner. Plus, we give it a positive high z-index in order to put it on top of the filler but behind the mask.

Then we add the animation at 10 seconds long. We'll talk more about animations later.

The "filler"


.filler {
  border-radius: 0 125px 125px 0;
  z-index: 100;
  border-left: none;
  animation: fill 10s steps(1, end) infinite;
  left: 50%;
  opacity: 0;
}

For the spinner, we set border-radius and z-index, remove the border-left, and make the animation 10 seconds long. For this element, the animation-timing-function is not set to linear but to steps(1, end). This means the animation will not progressivly go from 0% to 100% but will do it instantly.

Since the filler won't be visible during the first part of the animation, we set its opacity to 0, and its position to 50% of the parent width.

The "mask"


.mask {
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 300;
  opacity: 1;
  background: inherit;
  animation: mask 10s steps(1, end) infinite;
}

The mask is present since the beginning of the animation, so its opacity is set to 1 and its background is inherited from the parent background-color (to make it invisible). In order to cover the spinner, it has the same dimension has it, and its z-index is set to 300.

The keyframes


@keyframes rota {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fill {
  0%        { opacity: 0; }
  50%, 100% { opacity: 1; }
}

@keyframes mask {
  0%        { opacity: 1; }
  50%, 100% { opacity: 0; }
}

The first animation (rota) is for the spinner. It progressively rotates from 0 to 360 deg in 10 seconds.

The second animation (fill) is for the filler. It immediatly goes from 0 to 1 opacity after 5 seconds.

The last animation (mask) is for the mask. It immediatly goes from 1 to 0 opacity after 5 seconds.

So the animation looks like this:

T0 - the spinner is on the left, hidden by the mask. The filler is hidden.

T1 - the spinner starts rotating clockwise, and slowly appears from behind the mask.

T2 - the spinner has gone 360/10*2 = 72° and keeps rotating.

T3 - the spinner has gone 360/10*3 = 108° and keeps rotating.

T4 - the spinner has gone 360/10*4 = 144° and keeps rotating.

T5 - the spinner has gone 360/10*5 = 180° and keeps rotating. At this very moment, the filler instantly goes at 100% opacity while the mask goes disappears.

T6 - the spinner has gone 360/10*6 = 216° and keeps rotating.

T7 - the spinner has gone 360/10*7 = 252° and keeps rotating.

T8 - the spinner has gone 360/10*8 = 288° and keeps rotating.

T9 - the spinner has gone 360/10*9 = 324° and keeps rotating.

T10 - the spinner has gone 360°, getting back to its starting point. Then we restart the animation. The mask goes at 100% opacity while the filler goes disappears.

Bonus

Here's some additional tricks which can be pretty cool, depending on what you want.

Pause on hover


.wrapper:hover .filler,
.wrapper:hover .spinner,
.wrapper:hover .mask {
  animation-play-state: paused;
}

With this snippet of code, you can hover the whole animation by hovering the parent element.

Inside content

Thanks to z-index, we can easily add some content inside the spinner and make it rotate the same way. Try adding the following snippet to your code :


.spinner:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  top: 10px;
  right: 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

Pre-processors or CSS variables

Currently, this isn't very easy to maintain. But if we use variables (which preprocessors or the upcoming native CSS variable) we can make it easier. For example, you could add a variable to manage duration time, instead of having to change it on the 3 animation declarations.

If you want to ease the maintainability without dealing with pre-processors, I guess you could create a class which only handle the animation duration, and add this class to the 3 children elements. It would look like something like that :


.animation-duration {
  animation-duration: 10s;
}


<div class="wrapper">
  <div class="spinner pie animation-duration"></div>
  <div class="filler pie animation-duration"></div>
  <div class="mask animation-duration"></div>
</div>

Downsides

Sadly, there are some things this technique can't do:

Doesn't support gradients (looks awful)

Doesn't support box-shadows (looks dirty)

Isn't completly responsive. If you change the parent element's dimension, everything goes right except the border-radius. You still have to change border-radius values manually because we can't set 50% border-radius unless we're dealing with a perfect square.

Isn't semantic (4 elements for a single animation). Upcoming multiple pseudo elements may help this, or web components.

Browser support

Since we are using CSS animations and keyframes, the browser support is pretty low but will improve over time. For now, the only browsers supporting CSS animations are:

Internet Explorer 10

Firefox 12+

Chrome

Safari 5+

Opera 12+

iOS Safari 3+

Android 2+ (buggy till v4)

Demo

View Demo on CodePen

CSS Pie Timer is a post from CSS-Tricks

via CSS-Tricks http://css-tricks.com/css-pie-timer/

5 plugins para realizar copias de seguridad en WordPress

2012-08-04T04:44:00.001-07:00

WordPress es un gestor de contenidos muy potente y, sobre todo, flexible que sustenta muchas de las páginas web que consultamos a diario, por ejemplo, muchos blogs. Esta flexibilidad es algo que se traduce en las múltiples opciones de personalización que permite a los usuarios utilizar múltiples plantillas para personalizar los diseños de sus páginas así como extensiones o plugins con los que ampliar las funcionalidades y servicios que se ofrecen desde éstas.

Aprovechando que estamos a las puertas del fin de semana, quizás sea un buen momento para dedicar unos minutos a explorar algunas de las funcionalidades adicionales que podemos añadir a nuestra página en WordPress, gracias a los plugins, y plantearnos probar algunas de ellas en estos días.

Una de las tareas de gestión más importantes que debemos llevar a cabo y, por tanto, incluir dentro de nuestras rutinas de administración es la realización de copias de seguridad . Aunque no debiera ser así, muchos usuarios aún no han interiorizado la necesidad de realizar copias de seguridad de manera periódica y, desgraciadamente, se acuerdan de ellas demasiado tarde; precisamente, con la idea de que esto no nos ocurra y, por un fallo del servicio o un ataque malintencionado, perdamos la información de nuestro blog, vale la pena invertir algunos minutos en conocer extensiones que pueden facilitarnos mucho la realización de las copias de respaldo de nuestro WordPress.

UpdraftPlus es una extensión a tener en cuenta si, por ejemplo, queremos apoyar en la nube nuestras tareas de salvaguarda de ficheros. Con este plugin podremos almacenar las copias de seguridad en múltiples servicios que van desde el servicio de almacenamiento de Amazon (S3), Google Drive, un servidor FTP en el que tengamos cuenta o, lo más sencillo, usar como almacenamiento un buzón de correo electrónico (por ejemplo Gmail). Además, para facilitar las cosas, podremos realizar copias separadas de la base de datos y de los archivos (aunque lo normal sea hacerlas a la vez) e, incluso, tratar estas copias (base datos y archivos) como dos rutinas distintas con programaciones temporales distintas.

Snapshot Backup ofrece a los usuarios una utilidad muy interesante para realizar copias de seguridad completas (o también conocidas como snapshots o “fotos”) en la que se almacenarán los plugins instalados, los archivos principales de WordPress, plantillas y los archivos que hayamos subido a nuestra web. Una vez realizada la copia completa de nuestros archivos (que se almacena en un único archivo comprimido), la copia se almacenará en el servidor de FTP que configuremos.

Local Storage Backup es una de esas extensiones que nos pueden sacar de un apuro si, por ejemplo, no solemos guardar de manera periódica los cambios que realizamos en nuestros artículos (antes de publicarlos) y se da la situación en la que perdemos la conexión justo mientras publicamos o estamos a punto de hacerlo. Con este plugin, desarrollado en la Google Summer of Code 2011, podremos olvidarnos de si estamos o no con conexión a la red puesto que ésta se encargará de realizar copias de todos los cambios y, cuando recuperemos la conexión y volvamos al blog, nos preguntará si queremos publicar los artículos que tenemos en edición.

WP Complete Backup es una extensión muy sencilla, tanto en aspecto como en su manejo, que nos permite realizar copias de seguridad de los archivos de nuestro blog y también de la base de datos de nuestra instalación de WordPress (podemos elegir una de las dos cosas o ambas). Para facilitarnos las cosas, en caso de necesidad podemos utilizar la utilidad de restauración que se incluye con la que podremos restaurar copias de seguridad sin necesidad de ser expertos en MySQL o sin tener que recurrir a herramientas como phpMyAdmin.

Backup Scheduler es una extensión ideal si, por ejemplo, no podemos reservar en nuestra agenda algunos minutos para la gestión de nuestro WordPress (y realizar las copias de seguridad de manera periódica). Con este plugin podremos programar la realización de las copias de seguridad para que éstas se hagan sin nuestra intervención, eso sí, primero tendremos que configurar la periodicidad de las copias de seguridad, qué carpetas queremos salvaguardar, si queremos realizar copias de la base de datos o si queremos que las copias se envíen a un buzón de correo electrónico, se almacenen en el mismo servidor web o de manera remota en un servidor de FTP.

Imagen: Flickr - Debs

via Bitelia http://bitelia.com/2012/08/5-extensiones-wordpress-backups

Seis sencillas "buenas prácticas" cuando usemos HTML5

2012-07-30T23:00:00.001-07:00

Quizás muchos de vosotros os estéis iniciando en HTML5, por eso es bueno comenzar con unas cuantas buenas prácticas de HTML5 desde el principio. Son bastante básicas, pero no está de más recordar alguna de ellas, ya que sobre todo nos ayudarán a crear un mejor código HTML5.

Usar un generador de plantillas básicas

Al comenzar a desarrollar una web normalmente lo primero es definir los elementos básicos, buena parte de ellos son los mismos en casi todas las páginas, algunos tags iniciales como: header, footer, metas… Para crear este esqueleto básico podemos usar alguno de los generadores de plantillas disponibles en forma online.

Algunos de los más conocidos son SwitchToHTML5, Shikiryu generator. Sin olvidarnos de el excelente HTML5 Boilerplate.

Tener siempre a mano un chuleta de HTML5

Seamos sinceros. No conocemos todos los tags HTML5 y algunas veces muchos de ellos se nos olvidan con frecuencia. Eso sin contar los nuevos que se van introduciendo. Así que lo mejor es tener siempre a mano una chuleta (cheat sheet) de HTML5. Podéis encontrar unas cuantas sobre tags, event handler o soporte en navegadores en la web siempre actualizadas.

Ser cuidadoso con la compatibilidad de los elementos que usemos

HTML5 sigue siendo una tecnología nueva. Aunque poco a poco muchos navegadores ya la van incorporando no en todos funciona ni de la misma forma. Por eso es recomendable tener siempre a mano la web de Can I Use.com para consultar que especificaciones podemos usar, aquí encontraréis tablas de compatibilidades de CSS3, SVG y Javascript.

Saber cómo hacer compatibles HTML5 y versiones antiguas de Internet Explorer

Internet Explorer siempre ha sido un quebradero de cabeza para los desarrolladores web. Con HTML5 promete dar aún algunos dolores de cabeza, al menos para las versiones antiguas de IE 8 y anteriores. La buena noticia es que existe un script que te soluciona la vida de una forma muy simple. Se trata de este de html5shim que con tan sólo incluir en la cabecera de tu código permite ser compatible.

Usar los elementos correctamente

Puede parecer una gilipollez y te va a funcionar igual, pero si HTML5 nos da tags específicos como header, footer, article, section, aside, nav…. debemos usarlos y olvidar los viejos div para esos casos. Nuestro código se verá favorecido en legibilidad y podremos aprovechar mucho mejor las características de HTML5 para el marcado de nuestras webs.

Valida tu código

Nunca hay que olvidar hacer un código valido. Nos quejamos de la compatibilidad de los navegadores, pero en muchas ocasiones no hemos escrito el código correctamente para que valide, lo que da problemas en algunos navegadores “menos listos” o incluso en la forma que Google nos indexa. El W3C Validator es nuestro amigo.

Vía | Cats Who Code

Imagen | Dustin Wilson

En Genbeta Dev | Las preguntas más interesantes sobre HTML5 respondidas en Genbeta Dev Respuestas

via Genbetadev http://www.genbetadev.com/desarrollo-web/seis-sencillas-buenas-practicas-cuando-usemos-html5

Desarrollo PHP, Ruby y HTML directamente desde la nube

2012-07-30T10:14:00.001-07:00

Según pasan los años, el mundo de la programación se orienta más y más a entornos móviles y a la web, fruto de nuestro cada vez mayor consumo -y dependencia- de la misma. Por ello, no es raro encontrar todo tipo de herramientas para utilizar sin salir de esta, incluso IDEs y editores que nos ayudan a desarrollar otras herramientas.

Hace poco hablábamos de programación web sin salir del navegador, en un muy buen editor que lamentablemente sólo tenía funcionalidades para HTML, CSS y JavaScript. Todo esto está muy bien, pero como sabéis hay otros lenguajes utilizados para crear webs más complejas y dinámicas. PHP o Ruby están entre ellos, y ShiftEdit es una excelente idea para trabajar con ellos directamente desde la nube.

ShiftEdit es un IDE completamente online en el que podemos trabajar independientemente del ordenador donde nos encontremos. Se acabó el tener que instalar pesados entornos, librerías, etc. Con élpodremos crear, editar y posteriormente publicar nuestros fragmentos de código PHP, escribir rutinas Ruby o incluso trabajar nuestro HTML y CSS.

Lo mejor de todo es que se conecta a nuestra cuenta de Dropbox -o FTP- para que nuestros documentos queden en la nube, y en una cuenta de confianza.

Si lo deseamos, podemos instalar la aplicación Chrome, aunque se trata de un proyecto compatible con cualquiera de los navegadores habitualmente usados.

via Bitelia http://bitelia.com/2012/07/desarrollo-php-ruby-html-nube

Swiffy, la herramienta de Google para convertir Flash a HTML5

2012-07-28T10:45:00.001-07:00

El StÃ¡ndar HMTL 5 cada dÃa estÃ¡ mÃ¡s presente en los desarrollos de las aplicaciones, ya que nos proporciona una serie de mejoras y ventajas sobre otras soluciones como el uso de Flash. Adobe ya nos presentÃ³ una herramienta capaz de convertir Flash en HTML 5 y ahora ha llegado el turno a una herramienta desarrollada por Google, Swiffy, cuya misiÃ³n es la misma.

via Programacion http://www.programacion.com/noticia/swiffy_la_herramienta_de_google_para_convertir_flash_a_html5_2056

La guerra contra los clicks gratuitos en Google: Infografía

2012-07-28T10:29:00.001-07:00

Los anuncios de ‘pago por click’ están tomando las riendas de Google y esto son buenas noticias para las personas de marketing. La guerra contra los ‘clicks gratuitos’ está comenzando en el buscador. Como conclusión de la evolución SEO de la empresa, se ha producido un cambio de mentalidad sobre la materia, en la que el resultado orgánico solo que aparece primero en las búsquedas solo obtiene un 8,9% de los clicks y una reorganización en la forma de pensar de las empresas, quienes tienen que pensar en keywords específicos para generar clicks.

El 64,6 por ciento de ‘clicks’ provienen de búsquedas de intención comercial, mientras que un 35,4% de ellos provienen de resultados orgánicos gratuitos. Estos anuncios de pago, que aparecen con preferencia en la parte superior de las búsquedas, muchas veces se confunden con resultados normales de búsquedas normales; un 45,5% de los usuarios del motor de búsqueda no son capaces de identificar los anuncios sin la barra separada de la derecha de la página.

Esta nueva infografía de Wordstream muestra el campo de batalla por la atención del público.

via TICbeat http://www.ticbeat.com/tecnologias/guerra-clicks-google-infografia/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+rwwes+%28TICbeat%29

Programación web sin salir del navegador

2012-07-23T12:40:00.001-07:00

Son muchas las herramientas para iniciarse en el mundo de la programación web, y, paradójicamente, la mayoría requieren de instalación en el sistema operativo de turno, o al menos ejecutarlas desde el mismo. Eso cambia con Coding The Web, una propuesta que no requiere ni que salgamos del navegador.

Coding The Web es una aplicación Chrome que nos da un dashboard / lienzo en blanco desde el que podemos realizar pequeñas (o no tan pequeñas) escrituras de código en HTML, CSS y Javascript con el fin de probarlas directamente en el navegador.

Dividido en tres paneles y uno adicional desde el que hacemos la previsualización, también contamos con la opción de obtener la vista previa de forma automática. Si no, tendremos que pulsar un sencillo botón para renderizar la página a la derecha, y ver como se vé y funciona.

La ecuación la completa un selector de temas para que ni nuestra vista ni nuestra mente se cansen, y un pequeño cuadro de ayuda donde vemos cómo se utiliza: Básicamente escribiendo las porciones de código en los cuadros correspondientes.

Además, lleva jQuery 1.7 incluido, con lo que no hace falta siquiera importarlo. Ideal para programadores y gente que quiera dar sus primeros pasos en el mundo de la web.

via Bitelia http://bitelia.com/2012/07/programacion-web-sin-salir-del-navegador