CMS, diseño web, Gestor de contenido, HazmeWeb, Uncategorized / 21 abril, 2014

Modifica la tipografía de tú web o blog con CSS

La tipografia es parte de la personalidad de nuestro sitio.
En nuestra web o blog la tipografia es importante ya que añade personalidad al sitio. No siempre nos gusta la tipografía predefinida o no va con el tema de nuestra web/blog, por lo que nos vemos en la necesidad de modificarla.

Lo normal para mantener una cierta coherencia es no usar mas de dos fuentes, para que no parezca que nos hemos salido del sitio y hay que tener en cuenta que las fuentes de fantasía con muchos giros etc en resoluciones pobres no son legibles.

Propiedades CSS de Tipografia

Mediante CSS podemos modificar por completo el aspecto de nuestra fuente:

Propiedad tipo de fuente:

FuentesCon esta propiedad definimos el tipo y la familia de la fuente. La fuente que escribimos en primer lugar es la que utiliza el navegador por defecto, en el caso de que el equipo no tenga instalada la primera utilizara la siguiente.
Con esta propiedad hay que tener en cuenta que si el equipo desde el que abrimos la web no tiene instaladas las fuentes que hemos elegido, el navegador utilizara por defecto.

font-family: Arial, Helvetica, sans-serif

Propiedad Color de la fuente:

Con esta propiedad definimos el color en el que se vera la fuente en nuestro sitio, lo podemos definir el color de las siguientes formas:
Usar colores resalta el mensaje del texto.

color: #369;
color: black;
color: #B1251E;
color: rgb(71, 98, 176);

&nbsp
&nbsp

Propiedad tamaño de la fuente:

Es la propiedad que define el tamaño de la letra, podemos definir tamaño absoluto(indica el tamaño de letra de forma absoluta mediante alguna de las siguientes palabras clave: xx-smallx-smallsmallmediumlargex-largexx-large.) y tamaño relativo (indica de forma relativa el tamaño de letra del texto mediante dos palabras clave (largersmaller) que toman como referencia el tamaño de letra del elemento padre.)
Usar colores resalta el mensaje del texto.

Los valores que la definen son:

pixel, puntos,  em y en porcentaje %:

font-size: 9px
&nbsp
&nbsp
&nbsp
&nbsp

Propiedad ancho de la fuente:

Con esta propiedad definimos el ancho que tendrá nuestro texto, lo más habitual que usamos es la normal y negrita, pero se puede afinar mucho mas el ancho con esta propiedad.
Alternativas a la negrita.Los valores que la definen son:

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

 font-weight: bold;

&nbsp
&nbsp

Propiedad variant:

Esta propiedad permite otra variación en el estilo del tipo de letra, nos permite cambiar entre mayúsculas y minúsculas.
Variant resalta textos
Los valores que la definen son:

normal | small-caps | inherit

font-variant: small-caps;

&nbsp
&nbsp

Añadir la tipografia al sitio.

Podemos añadir tipografias especiales descargando la tipografía en nuestro sitio y haciendo una llamada con un css:

@font-face{
font-family: ‘nombredemifuente’;
src: url(‘../fonts/mifuente.otf’);
}

Con este código llamamos a una fuente especifica que hemos guardado en nuestro site en una carpeta llamada fonts. Esta forma de cargar las fuentes no es muy recomendable para textos largos ya que añade un tiempo de carga extra y hay que tener en cuenta que no todos los navegadores usan la misma extensión para las fuentes, por lo que debemos hacer una carga de fuente especifica para los navegadores que más se usan.
&nbsp
&nbsp

Añadir fuentes desde Google fonos.

Mediante google fonts podemos añadir un montón de tipografías que no están en todos los equipos, el navegador llama a la fuente que esta alojada en google fonts y no es necesario que el usuario descargue la fuente en su equipo.

Para hacer esto simplemente debemos añadir unas porciones de código en nuestro sitio que nos las da google directamente desde fonts:

<link href=’http://fonts.googleapis.com/css?family=Sniglet‘ rel=’stylesheet’ type=’text/css’>

 

diseño web, HazmeWeb, Uncategorized / 24 marzo, 2014

Diseño web, Tu web como tú quieres.

web-designComo decimos siempre, tu web no es para tí, te tiene que gustar, pero tienes que pensarla para el publico al que la diriges. Antes de plantearte como sera el diseño web, analiza bien el sector al que te vas a dirigir, examina otras web similares y toma nota de lo que te gusta y de lo que no te gusta.

 

Inclusión de SEO en el diseño.

seo_azulHacer un análisis previo del sector y sus palabras clave mediante las herramientas que google nos ofrece nos aportara datos acerca de cuales son las palabras claves para nuestro proyecto.
La inclusion de parámetros SEO en el diseño de su web te ofrece beneficios como:

Velocidad de indexado: El tiempo que pasa entre la publicación de un nuevo contenido y su aparición en Google disminuye considerablemente.

Mejorar el posicionamiento para las categorías: El sitio se vuelve más relevante, permitiendo que mejoren las posiciones de las categorías.

Reduce los gastos de las campañas SEM:Si la página gana mediante SEO algunas categorías por las que se esté pagando por clic en la publicidad (SEM, Search Engine Marketing), no necesita continuar pagando por ellas, pudiendo reducir ese gasto o invertirlo en dar a conocer otros productos, lo que mejora el ROI de la campaña.

Incremento de las posibilidades de venta:La consecuencia instantánea de obtener más visitas en la web es el incremento de  las opciones de venta (leeds) con el consecuente incremento de ingresos de todo tipo.

 

Psicologia del color.

psicologia_de_color

La elección de los colores es muy importante en  el diseño web ya que determinados colores los asociamos con acciones diferentes:

El rojo llama a la acción, por lo que sera bueno utilizarlo en zonas donde queremos que el usuario haga clicks.

El azul es un color sedante, por lo que es bueno usarlo en zonas donde queremos que el usuario se quede algún tiempo.

La psicologia del color tb debes analizarla en función de tu proyecto en concreto, no es lo mejor utilizar nuestros colores favoritos ya que pueden no ser los más idóneos para la actividad que propone nuestro sitio web.

 

Usabilidad de la web.

usabilidad-webAlgo fundamental es conseguir que usar tu web sea lo mas sencillo posible:

Procura que para conseguir cualquier acción no sean necesarios demasiados click.

Que el usuario sepa siempre donde esta y sea posible volver al inicio en un click.

Sigue todas las pautas que tu proyecto te lo permita y piensa siempre como usuario de la web.

Tecnologia web.

A la hora de elegir la tecnología que vamos a utilizar en el diseño y desarrollo de la web debes tener en cuenta que es lo que requieres de tu web, si es un ecomerce, si es una web corporativa, si es un blog. Para cada tipología existe una tecnología más adecuada. Después ten en cuenta cual es el diseño que quieres ya que has tecnologías que se adaptan mejor que otras a determinados diseños.

Si has elegido hosting, antes de lanzarte a comprar una plantilla mira primero que tecnologías y versiones soporta tu alojamiento ya que te puedes encontrar con incompatibilidades  que te hagan tirar dinero.

 

En conclusion , prepara una lista en la que vayas chequeando los hitos a tener en cuenta y acuérdate siempre de ver desde tu proyecto desde el punto de vista del usuario mas que de el diseñador.

Logo