diseño web, HazmeWeb, Uncategorized / 26 abril, 2014

Formatos de Imagen para web

Las imágenes son un componente muy importante de nuestra web/blog harán que sea mas vistosa y más agradable para la vista, pero en ocasiones pueden resultar una pesadilla a la hora de elegir las adecuadas y elegir el formato en el que debemos insertarlas.

Vamos a intentar aclarar un poco los formatos mas habituales, las características y las ventajas de cada uno.

Read more
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, seo, Uncategorized / 16 abril, 2014

Tu Dominio, tu nombre online

Hazmeweb te ayuda a elegir tu dominio

¿Que es el dominio?

El dominio es el nombre que elegimos para representar la IP en la que esta alojado nuestro sitio web. Traduce la IP (Internet Procol) a DNS (Domain name service).

Para entendernos mejor es como en la agenda del móvil cuando asociamos un nombre con un numero de teléfono.

Los dominios son unicos y están representados por dos partes:

  • el nombre que asociamos a nuestro sitio web (Hazmeweb)
  • y el tipo de organización (.es; .com; .net; etc)

el dominio te define, hazmeweb te ayuda a elegirlo

Resalta Tu Marca

El dominio no deja de ser tu marca personal en la red, por lo que es conveniente elegirlo bien siguiendo unas pautas:

Lo Que Haces:

Intenta que tu dominio defina lo que haces, a lo que se dedica tu empresa o el tema de tu blog.

¿Ya tienes un nombre?

Si eres una empresa o profesional y ya tienes un nombre comercial registrado. En el caso de que no lo puedas registrar, usa tu nombre con algo que defina tu actividad. Para blog o webs de profesionales no es muy recomendable usar nombres propios ya que al ser muy comunes en las búsquedas, arrojaran muchos resultados.

Partiendo de Cero tu dominio:

Si no tienes nombre todavía, lo mejor es que elijas uno teniendo en cuenta estas cuestiones básicas:

1. Fácil de recordar.
2. Lo más intuitivo posible y fácil de escribir.
3. Que transmita fuerza.
4. Que sea  una representación lo más precisa posible  de tu actividad.

Simplicidad:

Cuanto mas simple sea más fácil  es de recordar

La Terminación:

Hazmeweb te ayuda a elegir la mejor terminación para tu dominioLa tendencia natural es  buscar siempre el .com por que es la terminación que más sitios aloja.  Pero esta no es siempre la mejor. Las terminaciones se crearon para definir el tipo de organización que estaba detrás de el dominio (.com era comercial; .org Organización; etc) y para definir la nacionalidad (.es; .ru; .uk; .fr etc)

Realmente ya no se usan  con esa finalidad, y en la actualidad hay infinidad de terminaciones. Si tu sitio web es de ámbito local y quieres  que tus visitas, en principio, sean locales, te recomiendo el de nacionalidad (.es); ya que los buscadores te ubicaran mas en el idioma y la nacionalidad de la persona que busca.

El futuro de tu empresa

Cuando hagas  la elección del dominio no utilices nombres que estén de moda en ese momento, ya que  en poco tiempo estarán desfasados y la ayuda que te daran en un principio se convertirá más tarde  en lastre.

Prueba y Error

Prueba el dominio con tus amigos y familiares a ver que reacción obtienes, el precio del dominio no es demasiado elevado, por lo que puedes quedarte varias terminaciones y utilizar la que mas te guste, el resto las puedes enlazar a tu domino como landing pages.

Fácil

CMS, ecomerce, Uncategorized / 12 abril, 2014

Mi tienda Online

Montar una tienda Online

Dentro de las webs las tiendas ecomerce posiblemente son la part mas compleja ya que es la combinación de muchas bases de datos las que hacen que funcionen.

Los CMS han facilitado un montón esta labor, dentro de los gestores de contenido especializados en ecomerce Prestashop es el que  mas esta destacando en los últimos meses, por su sencillez de manejo y de montaje. En las últimas semanas han liberado una actualización en la que mejora mucho el aspecto estético que quizá era la parte en la que más flojeaba Prestashop. Para montar una tienda que no requiera unas particularidades especiales creo que es la mejor opción.

Prestashop

logo

 

Es un Gestor de contenido bastante parecido a cualquiera para diseño web o blog. Es un poco mas pesado, contiene muchos archivos distribuidos en otras tantas carpetas y necesita gran cantidad de bases de datos y recursos del servidor para funcionar.

No funciona en todos los servidores, por lo que es importante que antes de elegir un servicio de Hosting revise ai funciona o no en el. Va soportado sobre servidores linux.

Consta, la instalacion basica, de dos niveles de acceso, la parte front, que es la tienda y la parte back que es el paje de control. Esto es básico, como casi todos los CMS, pero en los ecomerce se complica un poco mas con las partes de catalogo,clientes, pedidos, logística, almacén, facturación etc. En definitiva como una tienda física.

La instalacion

 

panel_administracionConsta de 5 pasos según la web de prestashop:

Alojamiento (del que ya hemos hablado)

Instalacion: es un CMS opensource, los pasos para instalarlo son los mismos prácticamente, crear la base de datos principal y el solo genera el resto.

Medios de pago: en esta parte es parecido a Joomla, lleva módulos asociados en los que eliges cuales serán las opciones de pago de tus clientes. Aquí es muy importante tener en cuenta el coste de estos. En casi todos el precio de la comisión varia en función de donde se haya realizado la venta, por lo que es importante que lo tengamos en cuenta a la hora de elegir los medios de pago.

Opciones de entrega: Prestashop nos ofrece módulos preconfigurados de las principales compañías de transporte en España con entrega en todo el mundo.

Personalización: esta es la parte en la que daremos vida a nuestra tienda. Es la parte mas extensa, en la que tenemos que crear el árbol de categorías subcategorias y productos. Es especialmente importante hacer bien esta parte para que el cliente pueda encontrar el producto que busca sin tener que emplear mucho tiempo ni muchos clic.

TiendaPor otro lado esta la parte de diseño, la ultima versión los estilos son muy personalizables, es mas facíl hacer cambios en las hojas de estilo, pero para hacer una personalización a fondo tenemos que manejar con soltura el CSS.

 

No es muy complicado instalar y publicar la tienda, pero requiere de algunos conocimientos de código y una combinación de marketing y gestión empresarial para que la experiencia de usuario sea buena. Si te pones a ello y tienes dudas no dudes en preguntarnos, y si no te ves capaz, nosotros lo hacemos por ti.

 

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

WordPress o Joomla

To be or not to be… WordPress o Jommla

wordpress-and-joomla

diseñoprevio_wireframeCuando te pones manos a la obra con un proyecto web, creo que lo mejor es que lo primero hagas un wireframe con el aspecto que quieres que tenga tu web. Después listar las funcionalidades que requieres de tu web.

Con esta información ya nos resultara mas fácil decantarnos por uno u otro gestor de contenido.

Joomla

plantilla de joomla Es un CMS no demasiado dificil de gestionar, pero su principal virtud es su principal complicación: Modularidad.

Joomla esta hecho mediante una estructura de capas en las que puedes ir insertando módulos y en cada modulo puedes insertar lo que necesites. Esta característica nos da la posibilidad de insertar “fácilmente” en cada pagina lo que queramos.

Casi todas las plantillas disponen de una especie de mapa con la estructura en la que puedes colocar los módulos, esto lo hace muy flexible pero a la vez lo complica un poco ya que si utilizas varias plantillas tienes que estar continuamente mirando.

Para mi la ventaja fundamental es si quieres montar un sitio en varios idiomas sin salirte de tu URL principal ya que puedes montar la web en varios idiomas sin tener que montar varias veces la web, solo cambiando los menús.

Otra ventaja que le veo es que puedes utilizar varias plantillas en el mismo site.

Pero como dije antes sus virtudes se transforman en defectos, su modularidad hace de joomla un tanto tedioso a la hora de configurarlo, la posibilidad de configuración de atribuciones para los usuarios resulta muy pesada, debe ser en sitios en los que se necesiten perfiles muy diferenciados donde realmente sea rentable configurarlos.

En cuanto a la instalación, no es muy diferente de la de wordpress, pesa mas y la modularidad le resta un poco de velocidad de carga.

En cuanto a la personalización, es un pelin más complicado añadir tus estilos propios y tienes que saber manejarte con CSS si o si si quieres que te quede bien. A nivel visual tiene plantillas con estéticas de buen nivel, pero exista un paso por detrás de wordpress en este aspecto.

Después de montado para hacer cambios resulta bastante pesado, puedes colocar banner de una manera muy estratégica, pero no resulta ni rápido ni comodo.

En definitiva te recomiendo Joomla si necesitas una web en varios idiomas con muchos baner y funciones axiliares, y si el blog no será la parte fundamental de tu web.

 

WordPress

wordpress temaSi lo que prima en tu proyecto es diseño y poder insertar contenido de una manera sencilla, wordpress es tu CMS.

Es mas facil de instalar y es mas facil encontrar un diseño que se adapte a lo que quieres lograr con tu web. Existen miles de plantillas y pluguin para conseguir cualquier funcionalidad. Es un CMS bastante liviano en cuanto a su carga.

si no abusamos de los plugin es muy ágil de funcionamiento y es relativamente fácil crear temas hijos con los que modificar y personalizar los estilos.

Este gestor nació a partir de un blog, por lo que como editor de post posiblemente sea el mejor.

La parte back o de gestion esmuy amigable y practica, una vez montado el proyecto, resulta rápido y comido realizar cambios.

Los perfiles de usuario están muy vinculados con el blog, no con la parte estática.

En la parte de funcionlidades dependes casi por completo de los pluguin, que hay para casi todo, pero si quieres afinar u poco más la funcionalidad tienes que manejarte con PHP.

En principio para una web con un buen diseño HTML5 y CSS3 es la mejor opción,  quizá su estructura simple es la mayor ventaja. La desventaja es que la personalización individual de las paginas estáticas es mas complicada con wordpress que con joomla pero con todo y eso yo me decanto por esta opción casi para cualquier proyecto.

A dia de hoy es una herramienta fantástica para poner en marcha un proyecto web.

 

Existen otros gestores de contenido, el siguiente mas popular es Drupal, es muy potente y para funcionalidad es una muy bina herramienta, pero es necesario tener un nivel de conocimiento bastante alto para manejarse bien con el.

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.

 

diseño web, HazmeWeb, Uncategorized / 2 abril, 2014

El color, la tipografía y las imágenes en el Diseño Web

 

Casi todo el contenido de la web es el texto y las imágenes, por lo que estos son una parte fundamental de tu ella.

Vamos a ver unos claves sencillas para mantener la estética y la usabilidad en tu web.

El color de la web

Los colores y sus relaciones

El color va a ser una de las partes que defina tu web, quizá la que mas impacto tiene a primera vista sobre el navegante. El color lo vamos utilizar como una herramienta para causar el efecto que deseamos. Ya vimos en un post anterior  (que ampliaremos mas adelante…) los efectos sicológicos del color. En principio vamos a elegir los colores en función del tema al que dedicamos la web, si estamos creando una web de viajes utilizaremos colores acorde con los climas de destino… Si montamos una web infantil, usaremos colores suaves y sedantes…

De una manera muy simplista los colores se usan en dos maneras básicas, los fondos y las fuentes. Vamos a procurar que las fuentes siempre contrasten con los fondos, de manera que sean legibles.

Utilizaremos siempre una combinación de colores afines, y no demasiados colores si no tenemos intenciones de que sea lo que mas llame la atención de la web.

Lo normal es no emplear mas de 3 colores, y sus gamas. Si ya tenemos un branding previo nos basaremos en este para elegir los colores.

Los colores de la tipografia en la web, los elegiremos bien para que sean legibles con los fondos de las capas donde los coloquemos, lo normal es elegir dos colores con sus gamas, uno para los enlaces y otro para los textos, el de los enlaces eligiéremos uno que llame la atención sobre el texto para que el usuario sea consiente de que ese texto enlaza a algo relacionado con lo que se esta escribiendo.

 

La  tipografía

 

Fuentes

Es una parte que imprime mucha personalidad a la web, pero no por ello debemos olvidar su cometido principal que se lea bien.

Al elegir las tipografias hay que buscar que no sean demasiado complicadas, las tipografías demasiado fantásticas no están en la mayor parte de los ordenadores, ni en las tablets, ni en los smartphones…

Por lo que la web que era tan chula con tu fuente en tu ordenador en el de tus usuarios no dice nada…

Procura elegir fuentes que estén en google fonts, ya que mediante un poco de código que te da el mismo fonts no hace falta que el lector tenga la fuente elegida, la añade google mediante el navegador.

Personalmente suelo elegir fuentes muy planas y sanserif ya que son las que ofrecen una mejor lectura y estéticamente me gusta la sensación minimalista que ofrecen.

Si quieres añadir un texto impactante con una fuente de fantasia, hay diferentes técnicas para hacerlo y que no pierda impacto visual ni tarde en cargar todas ellas implican meter código, si el código te da problemas y  el texto no es demasiado grande siempre puedes añadirlo como una imagen.

 

Las imagenes

imagenes

Una imagen vale más que mil palabras? La verdad es que yo no lo tengo tan claro, pero la imagen aporta mucho a la web. Hay mucho que decir sobre las imágenes y mas adelante ampliaremos la información sobre imágenes que da para mucho…

En principio hay que tener en cuenta algo fundamental, el peso de la imagen ha de ser bajo y la calidad alta.  Elige imágenes pequeñas para tu web. La resolución tiene que ser de 72 dpi. No interesa que el tiempo de carga de la página se alargue. En cuanto a los formatos, los más usados son JPEG, PNG o GIF. Este último se usa mucho en iconos o ‘banners’ publicitarios.

Hay un montón de editores con los que tratar nuestras imágenes, podéis encontrar mas información aquí.