Los cinco pilares del Posicionamiento Web SEO

Hoy por hoy y desde hace ya algunos años el titán de Google es el que va en cabeza en cuanto al rumbo que lleva el universo web, marcando qué debemos y qué no debemos hacer a la hora de posicionar nuestras páginas en su buscador. Si quieres hacer un buen posicionamiento a tu sitio o al de tus clientes has de basarte en varios principios, algunos de ellos no sabemos cuáles son, otros sí se están demostrando que funcionan. Te dejo con cinco fundamentos básicos:

Pilares-del-SEO

Vincular fuentes con CSS

fuentes CSS @fontface

photo credit: FontFont via photopin cc

No hace tanto tiempo, diseñar una página web estaba tremendamente limitado, no sólo en el aspecto de programación sino también en el apartado gráfico. No se podían visualizar pngs transparentes, no había animaciones como las que hoy día nos ofrece html5, etc. Otra de las cosas que pasaba antes es que no podíamos usar la fuente o tipo de letra que quisiéramos en nuestros diseños web, sino que teníamos que limitarnos a las fuentes que estuvieran instaladas en el pc del usuario final y dado que no podíamos saber qué fuentes había instaladas nos teníamos que limitar a unas fuentes genéricas comunes que venían por defecto instaladas en todos los PCs, llamadas fuentes seguras.

Hoy por hoy todo esto ha cambiado y gracias a las hojas de estilos tenemos dos maneras de utilizar las fuentes que más nos convengan para nuestros diseños.

Contunuar leyendo

Una de las maneras es utilizar una fuente dentro de nuestro propio servidor vinculándola y otra sería usarla de otros servidores de fuentes que nos facilitan ese servicio.

Todo esto se hace usando la etiqueta @font-face y en principio es tan sencillo como especificar dónde se encuentra esa fuente y darle el nombre a dicha fuente.

Donde hay algo más de problema es en el formato de dicha fuente. Por desgracia todavía no existe un formato estándar para todos los navegadores y sistemas operativos y aunque el consorcio W3C está intentando generalizar el uso de WOFF, todavía tenemos estos formatos:

WOFF: Web Open Font Format (WOFF) lo desarrolló la fundación mozilla, Opera y Microsoft y como decimos está en ciernes de convertirse en un estándar ya que hoy por hoy prácticamente la reproducen la mayoría de navegadores.

EOT: Embedded Open Type (EOT) es la forma compacta de OpenType y se usa como fuentes incrustadas en las webs, se pueden incrustar varias fuentes dentro de ella y lo reproducen tanto PC como Mac.

TrueType: Formato estándar de tipo de letra escalables desarrollado por Apple.

SVG: Scalable Vector Graphics (SVG) es una especificación para describir gráficos vectoriales de dos dimensiones y fue creado como alternativa de código abierto a Flash, se usaen web como tipografía para iOS (iPod, iPad, iPhone).

USO EN SERVIDOR PROPIO

Para subir las fuentes en nuestro propio servidor lo primero que tenemos que hacer el convertir las fuentes en los direrentes formatos que hemos mencionado anteriormente. Para ello hay diversas herramientas dedicadas a ello, yo personalmente uso el generador de fuentes de font squirrel. Entramos en su web fontsquirrel.com/tools/webfont-generator, pulsamos el botón “Add Font” y elegimos la fuente que tenemos en nuestro equipo, dejamos la opción “Optimal” seleccionada y activamos la casilla que dice que se trata de una fuente legal que se puede usar para tal fin (asegúrate de que lo es!). Entonces ya sólo tendrás que pulsar el botón que aparecerá de download y descargarte el paquete a tu equipo.

paso03

Para usarlo debes hacer lo siguiente. Primero copia los archivos de fuentes (.eot, .svg, .ttf y .woff) y los pegas donde estés haciendo la web, yo lo que hago es crearles una propia carpeta a la que nombro “fuentes” y la pongo junto a mis carpetas “css” y “js”. Después abre el archivo “stylesheet.css” con tu editor favorito y copia el texto, pégalo en el archivo .css que ya tengas creado para tu web. Ahora debes editarlo y actualizar la url de la fuente a donde las hayas colocado. Por ejemplo, yo las he colocado en la carpeta “fuentes” y como mi archivo css está dentro de la carpeta “css” tendré que escribir ../fuentes/nombredelafuente.woff y así con cada formato de fuente.

paso04

Una vez hecho esto ya sólo queda decidir qué texto de nuestra web tendrá esta fuente para mostrarse . Para ello copiamos de nuestro @font-face la etiqueta “font-family:’nombredelafuente’; ” y la pegamos donde queramos usarla (“h1”, “h2”, “p”, etc).

USO EN SERVIDOR DE TERCEROS

Google Fonts

A mi parecer la mejor opción para su uso como servidor de fuentes externo. Sus fuentes son gratuítas, nuevas y en constante crecimiento, además que ellos se encargan de suministrar las fuentes en todos los formatos que hemos mencionado anteriormente para que no haya ningún tipo de problema y la fuente se visualice correctamente.

Para usar Google Font entramos en google.com/fonts, seleccionamos la fuente que más nos interese según el caso y pulsamos el botón Quick use, encontraremos cuatro pasos, el primero es seleccionar las variantes de dicha fuente que vamos a usar, el segundo elegir la caja de caracteres que necesitaremos (es importante saber qué vamos a usar y qué no porque a mayor opciones que elijamos más lenta cargará luego nuestra página).

Google Fonts

El tercer paso es copiar y pegar el código que aparece en el <head> de nuestro archivo html y el cuarto y último es copiar y pegar el código que aparece en el documento css.

 paso02

Una vez tengamos esto hecho sólo tenemos que nombrar dicha fuente en los textos que elijamos, “h1”, “h2”, “p” etc. Si te fijas, a la derecha del paso cuatro hay un ejemplo al respecto.

Y nada más, podremos tener una web con fuentes totalmente personalizadas y con un diseño excelente. Disfrútalo!.

Crea tu propia página web

empresa diseño web pagina web

 

Internet está lleno de posibilidades para cualquier persona que quiera abrirse camino por este excitante medio de las redes. Tiendas virtuales, webs de empresas, páginas personales, blogs de opinión, es un mundo abierto donde cabemos todos y todos somos iguales. Si te estás planteando la opción de hacer tú mismo una página web o de cómo plantearle tus necesidades a un diseñador profesional y quieres informarte sobre algunas pautas básicas a tener en cuenta sigue leyendo estas líneas, espero que te sirva de ayuda.

Una aclaración es que en este post no hablaremos de servidores, ni hostings, dominios , etc. Sino que nos centraremos en la proyección y planificación de un sitio web y los pasos a seguir.

Aún teniendo en cuenta que cada proyecto es único y debe adaptarse a las necesidades del objetivo que se pretenda con él, en mayor o menor medida se estructuran básicamente igual. En este post intentaremos tratar los aspectos básicos y comunes para la creación de un sitio web.

Contunuar leyendo

PASO 0. ¿Para qué quiero una página web?

Este paso no lo considero un paso como tal en la creación, pero sí que es fundamental antes de empezar a hacer nada. Se trata de saber objetivamente qué queremos conseguir con nuestra página web, para qué va a servir, qué pretendemos hacer con ella y finalmente a qué público irá destinada. Esto que puede parecer algo muy obvio muchas veces no lo es tanto, me he enfrentado alguna vez a empresas que estaban deseosos de tener una presencia en internet pero no sabían muy bien la utilidad que querían darle o por dónde querían enfocarlo. Es como el que está deseoso de comprarse un coche pero no sabe todavía muy bien en qué lo usará;  decide antes el uso que tendrá (familia, viajes, carga de mercancía, …) y una vez decidido eso podrás entonces elegir el tipo de coche que se va a ajustar más a tus necesidades.

Por eso este paso previo lo considero fundamental para poder empezar con las cosas claras y elegir el tipo de página web apropiado, ahorrarás tiempo y dinero.

para-que-quiero-mi-pagina-web

PASO 1.  Planificación

Una vez que tenemos una idea más o menos clara de lo que queremos hacer, qué necesitamos, escribiremos los detalles y aspectos que queremos reflejar en la web y pensaremos qué elementos aparecerán en la página principal.

Decidiremos cuantos sub-apartados tendrá nuestra web, no es recomendable añadir demasiados. Lo normal y recomendable es tener una página de inicio, otra que describa la empresa (se suele llamar “acerca de”), otra en la que se reflejen los trabajos que se han realizado hasta la fecha y una última de contacto. Se debe huir de sobrecargar la web con demasiado texto innecesario, el objetivo no es escribir una enciclopedia para que el posible cliente conozca hasta el último detalle de nosotros, sino tener un escaparate en la que el visitante, de un vistazo rápido, pueda hacerse una idea de a qué nos dedicamos y de que somos profesionales y serios en lo que hacemos. Es un escaparate, no una biografía.

que-queremos-decir-con-nuestra-web

Lo que queremos comunicar con nuestra página web sería el siguiente:

Hola! (Inicio) —> somos una empresa que nos dedicamos a… (Acerca de) —>estos son algunos de los trabajos que hemos hecho (Portfolio) —> si necesitas de nuestros servicios contáctanos (Contacto)

Para tener una idea más clara de qué contenido incluir un consejo es hacer un estudio de mercado,  visita otras páginas del mismo sector que el tuyo para hacerte una idea de qué es importante y qué es prescindible. Investiga también el estilo de las webs de la competencia, qué colores usan, qué tipo de letra, qué frases o slogans utilizan, etc. Todo esto te ahorrará meteduras de pata y pérdida de tiempo, ya que podrás observar qué han hecho los que ya van por delante.

estructura-web

Llegados a este punto en el que ya sabemos qué necesitamos y cómo lo queremos toca decidir cómo lo llevaremos a cabo. Tienes dos opciones, una de ellas es contratar los servicios de un profesional que sabrá reflejar tu idea y tus necesidades adaptándolas a las últimas tendencias de mercado asegurándote así que tu web será vista. La otra opción es la de decidir embarcarnos nosotros mismos en el proyecto, en tal caso tendrás que crear la página web y además contratar un servidor donde alojar el sitio, crear el dominio y cuentas de correo necesarias, además de dar de alta tu web en buscadores. Si decidieras dejar todo esto en manos de un profesional será un placer poder informarte sin ningún compromiso aquí.

Si decides intentarlo por tu cuenta seguimos con el siguiente paso.

 

PASO2. Creación de bocetos

Cuando tengas una idea clara de todo esto deberías hacer un boceto a papel y después hacer el diseño en Photoshop,  Gimp o un programa similar para usarlo como base. Ten en cuenta siempre que ha de ser un diseño simple, agradable y fácil de usar, el éxito de tu sitio depende de ello.

Comienza por la estructura básica y ve añadiendo elementos cada uno en su capa correspondiente, de manera que siempre puedas ir modificando sobre la marcha si el resultado no te convence.

 

PASO3. Desarrollo del sitio

Una vez hecho el diseño del sitio habrá que transformarlo de imagen a lenguaje html. En este paso solamente te mostraremos unas pautas básicas, ya que resulta algo muy extenso como para explicarlo en un solo post y tampoco es el objetivo del mismo.

Deberemos usar un programa de edición de texto, yo personalmente uso Notepad ++ lo puedes descargar gratuítamente en internet ,  aunque hay una variedad enorme en este tipo de programas. Una vez instalado y abierto, tendremos que escribir el código necesario para crear la web en sí. Básicamente estos son los apartados:

<!DOCTYPE html>

<html lang=”es”>

Este es el primer elemento del documento, con esto le decimos básicamente que se trata de un documento html en lenguaje español.

<head>

</head>

Esta es la cabecera del documento, aquí se suele reflejar información útil para que cargue la página pero que no se mostrará después al usuario final.

<body>

</body>

En esta sección estará el contenido del documento, esta parte es la que se mostrará en el navegador

<footer>

</footer>

Aquí encontraremos la información útil que se suele colocar al pie de página, como teléfonos, dirección, etc.

Muy básicamente esta será la estructura de una página web, si quieres cópiala y pégala en tu editor de textos, recuerda guardar después el archivo con la extensión .html

<!DOCTYPE html>

<html lang=”es”>
<head>
<title>Título de la página web</title>
</head>

<body>
Contenido del sitio……
</body>

</html>

Paso4. Añadir texto

Para poder añadir un texto a nuestra página web, tendremos que poner el siguiente código siempre dentro del body (entre <body> y </body>):

<p>Texto para nuestra página web</p>

 

Paso5. Añadir una imagen

Para añadir una imagen a un sitio web se hace de la siguiente manera:

– Crea una carpeta donde hayas guardado tu archivo html que se llame “images” y mete dentro la imagen que quieras añadir al sitio, supongamos que se llama imagen.jpg (no debe ser una imagen de gran tamaño)

-Añade el siguiente código, siempre dentro del body:

<img src="images/imagen.jpg"/>

 

Con todo esto terminado, quedaría algo así:

<!DOCTYPE html>

<html lang=”es”>
<head>
<title>Título de la página web</title>
</head>

<body>

<img src="images/imagen.jpg"/>

<p>Texto para nuestra página web</p>
</body>

</html>

Ya sólo quedaría guardar y hacer doble clic sobre el archivo html et voilà, nuestra primera página web. Espero que os haya sido de ayuda.

Google ahora permite editar vídeos Slow-Motion en Youtube

Youtube, la potente herramienta de Google para ver y compartir vídeos, ha añadido desde el pasado miércoles una nueva opción para la edición de los vídeos que subas a tu canal de Youtube. Desde su Youtube Creator Blog anunciaron esta nueva opción que se trata nada menos que de la opción de bajar la velocidad de fotogramas por segundo, normalmente conocido como “Slow Motion”.

Contunuar leyendo

Este efecto está muy bien logrado ya que la herramienta crea los fotogramas intermedios evitando así los típicos “saltos” que se aprecian al intentar hacer dicho efecto de forma casera. Os recomiendo que lo probéis.

Desde Youtube han publicado dos vídeos para que podáis ver el efecto A 1/8 de velocidad:

VELOCIDAD NORMAL

SLOW MOTION

Fuente: Youtube Creator

ASUS Transformer AiO P1801 El PC todo en uno que se transforma en una tableta!

ASUS Transformer AiO P1801Asus ha lanzado al mercado el nuevo ASUS Transformer AiO P1801, se trata del primer híbrido entre PC de sobremesa y una Tablet todo en uno, viene con Windows 8 PC Station y procesadores Intel Core de tercera generación, con una pantalla multitáctil (10 acciones simultáneas) LED desmontable de nada menos que 18,4″, con resolución Full HD 1080p de última generación que permite una visión magnífica incluso con un ángulo de hasta 178º sin distorsionarse. Al desacoplar la pantalla de la base se transforma en una Tablet Android 4.1 con dos sistemas operativos. Incorpora también una cámara de 1.0 M Pixeles.

Este todo en uno ha ganado ya varios premios, como el Premio a la innovación de Hexus y el Premio al Diseño de RedDot Design

Fuente: asus.es