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 / 9 abril, 2014

Elegir el mejor sistema para empezar en internet con Blog, web o ecomerce

Que es lo que quiero que haga mi web?

Fácil

Cuando nos decidimos a montar y publicar un proyecto web, tenemos que decidir un tema, una vez hemos decidido el tema al que vamos a tratar en  nuestro sitio, el siguiente paso es saber el tipo de web que queremos o a que la vamos a dedicar.

Hoy dia casi todos los sitios tienden a aunar las características de todos los tipos. En un mismo sitio tenemos una web corporativa en la mostramos lo que hacemos y como lo hacemos, un blog en el que compartimos contenidos de útilidad e incluso un ecomerce, pero debemos pensar realmente cual será la función principal de nuestro sitio ya que de ello depende la tecnología que utilizaremos.

 

Tecnología en función de lo que Queremos hacer con nuestra web

El Blog:

blogEn principio casi todo el mundo comienza por un blog en el que compartir contenidos. Es la opción más fácil,  más barata y en muchos casos la mas efectiva si lo que queremos es dar a conocer nuestras habilidades o compartir contenidos con afines.

Si lo que necesitamos es simplemente un blog,  Bloguer y WordPress son las plataformas más utilizadas por su facilidad de edición no necesitamos saber nada de código para empezar con nuestro blog. Las dos son gratuitas, es como abrir una cuenta en de correo electrónico.

WordPress.com:

Si lo que estas pensando es en probar, aprender y si te va bien lanzarte a algo mayor te recomiendo que empieces por aquí. La edición es muy parecida a la de la aplicación de wordpress.org. Trasladar lo que tengas aquí a un wordpres en un servicio de hosting propio es fácil y todo el aprendizaje te servirá.

Las desventaja fundamental es que todas las características que lo convierten en una buena herramienta son de pago, plugins, dominio propio etc.

No se puede analizar el trafico con analitycs ni se puede monetizar… y te ponen anuncios con los que subsiste wordpress.com.

Bloguer:

Ofrece algunas características que wordpress no, se puede analizar y monetizar. Tiene un panel de edición en el que puedes customizar tu blog sin escribir código y si sabes escribirlo te permite meter partes para una personalización mayor. Te permite hasta 20 paginas estáticas.

La mayor desventaja para mi es si tu proyecto va muy bien y quieres implementar funcionalidad propias es muy complicado y a la hora de migrar a hosting propio no tiene un hermano mayor potente como es el caso de wordpress.

Cualquiera de las dos es una buena opción para empezar con un proyecto, pero si la cosa funciona, no hay que esperar a que la cosa se complique para migrar a un site propio donde no estemos limitados.

 

La WEb:

empresa

En esencia no es muy diferente a un Blog, hoy día todo se construye usando la misma tecnología, la diferencia fundamental es lo que queremos mostrar. En una web hay mas partes estáticas en las que vamos a mostrar un contenido que va a permanecer mas tiempo en ella.

Si tenemos una empresa queremos contar a nuestros visitantes quienes somos, donde estamos, cual es la actividad de nuestra empresa etc este contenido es más estático, y aunque lo iremos actualizado, no es contenido dinámico como las entradas de un blog.

En la web incorporaremos un blog en la que podemos contar las novedades de la empresa y generar también contenido.

Hoy dia como decía usamos loas mismas tecnologías para crear una web que un blog, usamos gestores de contenido (conocidos por sus siglas en ingles CMS). Los gestores de contenido son muy prácticos ya que la estructura básica ya esta creada y solo hay que ir custodiando a nuestro gusto las capas y los estilos. Los más populares a día de hoy son Drupal, Joomla y WordPress. Son todos de código abierto, por lo que son gratuitos. En esencia los tres hacen lo mismo y de una manera muy similar. Los tres funcionan mediante partes mas estáticas, paginas, y partes mas dinámicas, entradas. Sus puntos fuertes son dos:

Casi cualquier funcionalidad que se nos ocurra ya esta programada mediante un plugin, que son fragmentos de código específicos para hacer una cosa concreta.

Son altamente personalizables, puedes cambiar los estilos incluso las capas para customizarlos a tu gusto.

Por no hacer demasiado pesado este articulo voy a dejar para otro definir un poco más cada uno de ellos, a día de hoy el 19% de las webs que hay en internet están notadas con wordpress, quizá sea por su facilidad de uso y por lo bien que se lleva con google. Yo es el que uso habitualmente casí para todo, salvo que el proyecto necesite unas características muy especificas.

La tienda online o ecomerce:

tiendaonline

Las tiendas online o ecomerces son los proyectos más complicados de montar bien de las webs, principalmente porque tienen muchas bases de datos con muchas interconexiones y requieren varios niveles de acceso.

Los sistemas que mas se están utilizando para montar tiendas online a día de hoy son Prestashop y Magento, son CMS específicos para comercio electrónico. Hay para escribir un libro sobre cada uno de ellos e iré profundizando más en el tema.

Prestashop:

Si ya tienes un manejo digamos a nivel usuario y quieres dar el paso a un ecomerce, tu herramienta es Prestashop, es fácil de instalar, prácticamente igual que wordpress. No necesita unos requisitos demasiado específicos de hosting (antes de lanzarnos a comprar, mirar las especificaciones de software… para no llevarnos sorpresas desagradables.) Es relativamente fácil montar una tienda con Prestashop, las complicaciones mayores las tiene la gestión de pedidos etc.

 

Magento: 

Es una herramienta muy potente y muy segura, pero es bastante divicil de instalar, es muy software muy pesado y los archivos tb por lo que consume muchos recursos del servidor, no nos vale cualquier hosting. En definitiva no es una herramienta tan amateur como prestashop.

Si tu tienda necesita una herramienta muy potente y segura Magento es la tuya, pero no te vuelvas loco intentando hacerla funcionar… La ayuda profesional no es tan cara y a la larga nos evita quebraderos de cabeza.