por WebReunidos | Ago 8, 2014 | Desarrollo web, Diseño web
¿Cuánto cuesta crear una tienda online o virtual?
Cada vez más muchos emprendedores se deciden por montar una tienda online, y ¿por qué no?, siempre que se tengan en cuenta todos las variables que giran al rededor, como puedan ser distribución, almacenaje, análisis del mercado, etc.,
En este artículo vamos ha hacer referencia a como pude influir en el coste el diseño y las funcionalidades.
Desarrollo a medida:
Si necesitas una tienda con un diseño a medida es algo que se debe presupuestar siempre, es decir, no existe una tarifa fija ya que normalmente se buscará algo diferente a lo que esté en el mercado o probablemente a lo que ya pueda tener la empresa de desarrollo. Se trata de un trabajo complejo que requiere gran engtrega. Intervienen perfiles profesionales como puedan ser:
- Diseñador
- Maquetador
- Programador
- Analista (Jefe de proyecto)
El negocio a tratar definirá en gran medida el precio de crear la tienda online así como el nivel de calidad del diseño y las funcionalidades que necesite.
Un diseño a medida está por encima sistemas Open-Source ya que consta de un desarrollo original que no depende de la rigidez de dichos Open-Source que además moldearlos tiene un coste importante. Desconfíe de empresas que le ofrecen un desarrollo a medida bajo la estructura de un sistema Open-Source.
Utilidades: Son las funciones que se definen necesarias para poder realizar ventas online, como son el carro de la compra, gestión de pedidos, formas de pago, formas de envío, etc., hasta la gestión de la zona de administración de la tienda.
Extras
Mantenimiento y actualizaciones: Contrato que se establece con la empresa web de mantenimiento. Es muy importante que se definan las intervenciones que se realizarán en su sitio web, optimizar código, posicionamiento SEO, alta de nuevos contenidos, revisiones de accesibilidad, usabilidad, etc.
Certificados SSL: La tarifa por este servicio variará dependiendo de la empresa certificadora, seguridad, número de dominios que se gestionan, etc.
Posicionamiento y publicidad online: Recomendable que la parte correspondiente a SEO se incluya dentro del mantenimiento, no tiene sentido separarlo, ya que la optimización de código bien aplicada contribuye altamente a generar posicionamiento para su web.
¿Quiero crear una tienda online?
Si eres de los que alguna vez se ha hecho esta pregunta, pásate por nuestra sección ampliada de tienda online y encontrarás una solución que se adaptará a lo que buscas.
Si lo prefieres puedes enviarnos tu consulta a través de nuestro formulario de contacto.
por WebReunidos | Jul 21, 2014 | SEO, SEO - SEM
Hasta este momento hemos obtenido una valiosa lista de palabras clave, tratando de averiguar que frases compondrán nuestros internautas o potenciales clientes. Ver post anterior.
Ordenamos las palabras clave y frases en orden a su importancia, es decir, en orden descendente. Es importante añadir palabras para ayudar a clarificar el uso de las palabras clave, por ejemplo , «capital» puede tener diferente interpretaciones – como el capital intelectual, capital del país, con mayúsculas , etc. En definitiva hay que conocer bien el contexto con el fin de identificar las frases a utilizar.
En Web Reunidos, revisamos exhaustivamente el contenido de cada página. Tan importante es identificar las palabras clave a utilizar como las palabras que dentro de nuestro contenido no serán susceptibles de ser utilizadas en una búsqueda, de ahí también la importancia de no exceder las palabras clave por página ya que pueden restar valor unas a otras, es decir, es una técnica desaconsejada utilizar todas las palabras clave como un aluvión en la misma página.
En revisiones conjuntas con el cliente, nos aseguramos que el contenido utilizado es original ya que la replicación o copia de contenidos de terceros se verá penalizado.
por WebReunidos | May 12, 2014 | SEO
El primer paso consiste en seleccionar cuidadosamente las palabras clave, aquí nuestra metodología de trabajo se basa en una interacción completa con el cliente, formado parte de su equipo de trabajo -coordinación, pero sin ser intrusivo- si así es posible, de ésta forma conseguimos una lluvia de ideas para las palabras clave para SEO, éstas serán utilizadas en los siguientes pasos.
Se definen qué palabras clave se prevén que utilizarán los internautas, es muy interesante que haya una gran participación del personal relacionado con el negocio y si es posible llegar a las experiencias reales de usuarios o clientes habituales.
Se valida que términos clave están utilizando nuestros potenciales competidores con el fin de situarlos en una lista con respecto a nuestra posición.
Luego con nuestras herramientas de análisis definiremos las palabras clave finalistas que se utilizarán con el fin de adaptarlas al público objetivo.
por WebReunidos | Nov 15, 2013 | SEO
Para nadie pasa indiferente la importancia de tener una página web bien posicionada, si bien el posicionamiento no se puede garantizar, sí que se puede trabajar con el fin de optimizar nuestro sitio web con la pretensión de que aparezca en los primeros resultados de buscadores, y esa optimización sí que se puede garantizar.
En esta ocasión vamos a lanzar un decálogo acorde a las continuas actualizaciones del algoritmo del principal buscador Google.
1. Contenido
Se ha dicho mucho que el contenido es el Rey, y ahora más que nuca con el nuevo algoritmo hummingbird hay que ser original y no caer en la tentación de copiar y pegar contenidos de terceros, si bien a muchos les ha funcionado ahora Google va a realizar unos contrastes más exhaustivos.
Nuestros esfuerzos han de encaminarse a buscar una página ‘viva’, referente en el sector en el cual nos movemos, siempre intentando ofrecer contenidos de calidad.
2. Desarrollo
Si bien es cierto que la velocidad es un factor clave para el posicionamieto, es muy deseable que una página responda con prontitud, a nadie le gusta esperar a que un flash se cargue o una pesada imagen aparezca, etc., por lo que siempre es recomendable optimizar la programación y tener un diseño ágil.
Destacamos:
- Especial atención a los procedimientos relacionados con la toma de información de las bases de datos.
- Optimización de imágenes.
- Optimización de hojas de estilo.
- Uso adecuado de Jquery, JavaSript y Ajax.
- Control de la carga streaming, si existen videos.
3. Enlaces externos
Por favor, no abusar de los populares bancos de enlaces, al igual que buscamos un contenido de calidad, un enlace será mejor si proviene de un sitio con buenas referencias. Ya lo hemos dicho en otras ocasiones, mejor uno bueno que muchos y malos.
4. Enlaces internos
Aquí simplemente os referenciamos que los enlaces faciliten la navegación del internauta y siempre evitando la duplicidad.
5. Robots y sitemap
Mantén al día siempre estos ficheros, verifícalos, Google dispone de herramientas que comprobarán y optimizarán el funcionamiento de estos.
6. Uso de htaccess
Este fichero ofrece muchísimas posibilidades, que influyen en el modo en que una página se va a presentar.
Cabe destacar htaccess como optimizador de SEO gracias a la posibilidad de configurarlo para que comprima la salida del contenido de nuestro sitio, tanto imágenes, como hojas de estilo, cache, etc., lo que reducirá el uso de ancho de banda y optimización del servidor.
7. Diseño
Cada vez más en demanda la visualización de contenidos en dispositivos móviles y tablets, tenemos que realizar un esfuerzo extra para que nuestras páginas se vean y carguen correctamente.
En la fase de desarrollo de la arquitectura web del proyecto, hay que pensar como va ha responder éste en los ‘pequeños dispositivos’, necesitaremos de hojas de estilo especiales, elementos de desarrollo para ofrecer el contenido con las pecurialidades que se requieren aquí, suprimir ‘slider’, ofrecer pesos de página muy bajos, etc.
8. Redes sociales
Hoy día es una pieza fundamental dentro del posicionamiento SEO el ofrecer nuestro contenido, de forma participativa, en las redes sociales. Esto no es tan solo abrir una cuenta con el fin de que quede constancia, si queremos dar valor a nuestra marca hay que ejercer un verdadero plan de comunicación, conocer las peculiaridades de cada red, monitorizar la actividad, desarrollar estudios de estrategia, además de posicionar conseguiremos fidelizar a nuestros seguidores o ‘audiencia’ y adaptar nuestros contenidos a la demanda.
9. Alta en principales directorios
Informa a los buscadores de tu sitio, sigue sus guías para tener presencia en sus resultados. Da de alta tu dominio en el popular directorio dmoz.
10. Accesibilidad
Por último y no menos importante, la ‘dichosa’ accesibilidad que a muchos lleva de cabeza, si bien realizar una página que cumpla con los requisitos de accesibilidad a un buen nivel puede ser trabajo añadido, bien conocidos son los beneficios de tener una página web accesible. Un página accesible, aumenta el número de potenciales visitantes, da una imagen muy profesional y se visualizará correctamente en todos los dispositivos.
Recomendamos estar al día con el organismo W3C y cumplir los estándares UNE.
por WebReunidos | Nov 4, 2013 | SEO
Primero detengamonos y examinemos que es el Page Rank y para que sirve.
Estamos ante una marca fabricada por y para Google, basada en unos complejos cálculos amparados en algoritmos de gran relevancia que intervienen en el popular motor de búsqueda, otorgando la mejor indexación a un resultado más alto. Originariamente fue desarrollado por los fundadores de Google, Larry Page y Sergey Brin.
A lo largo de los años se han producido numerosas actualizaciones del algoritmo, si bien ha tenido una repercusión muy fuerte en la carrera hacia posicionamiento web, ahora con la llegada del nuevo algoritmo Hummingbir
d, muchos están divulgando que éste ha dejado de tener importancia.
¿Ha muerto el Page Rank?
No. Es uno de los cientos de ingredientes que conforman esta receta, si bien Page Rank basaba la mayor parte de su puntuación a la calidad del sistema de ‘enlaces ‘ que conforman un sitio web, ahora esa asignación ha menguado, pero no deja de estar ahí.
Otra parte del pastel que conformaba el Page Rank se basaba en la antigüedad del sitio web, sin embargo esto no es un factor eficiente para conseguir más tráfico, algo parecido encontramos en los porcentajes de rebote, etc.
por WebReunidos | Oct 21, 2013 | Desarrollo web
INTRODUCCIÓN
Las cookies son utilizadas habitualmente por los servidores web para diferenciar usuarios, memorizar las preferencias del usuario como pueden ser colores de fondo, idioma, etc., y así actuar de diferente forma dependiendo de esto.
Sobre las cookies han circulado muchos mitos sobre si son virus, si recopilan información privada, etc., en esta sección no vamos a entrar en desmentir esto, si que es cierto que no son programas que se instalan en el equipo del usuario, sino que son datos que se almacenan y que pueden proporcionar información incluso de que páginas se han visitado…
Resumiendo un poco, cuando un usuario accede a un servidor y este deja datos (cookies) en el navegador ‘del usuario’, si esos datos persisten cuando vuelva al mismo servidor en peticiones posteriores, entonces es cuando si que hay un programa ‘del lado del servidor’ que puede recabar información de esos datos almacenados.
COMO CREAR UNA COOKIE ‘SIMPLE’ EN PHP
Vamos a utilizar las siguiente funciones:
- mktime ([ int $hour = date(«H») [, int $minute = date(«i») [, int $second = date(«s») [, int $month = date(«n») [, int $day = date(«j») [, int $year = date(«Y») [, int $is_dst = -1 ]]]]]]] )
- setcookie ( string $name [, string $value [, int $expire = 0 [, string $path [, string $domain [, bool $secure = false [, bool $httponly = false ]]]]]] )
- $_COOKIE[‘name’]
setcookie() define una cookie para ser enviada junto con el resto de las cabeceras de HTTP. Al igual que otras cabeceras, las cookies deben ser enviadas antes de que el script genere ninguna salida (es una restricción del protocolo). Esto implica que las llamadas a esta función se coloquen antes de que se genere cualquier salida, incluyendo las etiquetas <html> y <head> al igual que cualquier espacio en blanco.
mktime() Devuelve la marca de tiempo Unix correspondiente a los argumentos dados. Esta marca de tiempo es un entero que contiene el número de segundos entre la Época Unix (1 de Enero del 1970 00:00:00 GMT) y el instante especificado. Los argumentos pueden omitirse de derecha a izquierda; cualquier argumento que se omita será establecido al valor actual según la fecha y hora locales.
$_COOKIE[‘name’] Variable tipo array asociativo, para establecer el valor de la cookie.
Para nuestro ejemplo vamos a construir una cookie que establezca un color para poder usarlo en el atributo style.
Pasos:
- Crear y grabar cookie.
- Usar cookie.
- Eliminar cookie
Creamos la cookie, en las primera líneas de nuestro documento, en este ejemplo, la cookie expira en el año 2025 y a continuación la vamos a utilizar (no tiene porqué ser a continuación), pero como es un ejemplo nos vale.
<?php
$expiracion = mktime(0, 0, 0, 1, 1, 2025); //Expiracion por fecha.
setcookie('color', '#FF0000', $expiracion);
$color = $_COOKIE['color'];
echo "<div style='color:$color'>Color seleccionado: $color</div>";
?>El resultado sería:
Color seleccionado: #FF0000
Ahora vamos a explicar como se elimina la cookie creada.
Para esto tenemos que cambiar la fecha de expiración a una fecha anterior a la actual.
<?php
$expiracion = mktime(0, 0, 0, 1, 1, 2000); //Expiracion por fecha.
setcookie('color', '#FF0000', $expiracion);
?>Al establecer con setcookie nuestra cookie a una fecha pasada, esta ya deja de usarse.
por WebReunidos | May 28, 2013 | Desarrollo web
COMO CREAR UN ARRAY ASOCIATIVO Y RECORRERLO
Para nuestro ejemplo vamos a tratar la información básica de una pequeña lista de productos.
Pasos:
- Definir el array.
- Recorrerlo con un bucle.
Definimos el array.
<?php
$productos = array(array('producto' => 'USB',
'precio' => 10.5,
'stock' => 1000,
'rebajado' => true),
array('producto' => 'Memorias',
'precio' => 20.8,
'stock' => 2000,
'rebajado' => false),
array('producto' => 'Fundas',
'precio' => 3.2,
'stock' => 0,
'rebajado' => false));
?>
Lo recorremos. En este caso vamos a mostrar los productos rebajados. Usamos un bucle for en función del tamaño del array en este caso la instrucción que hemos utilizado es (sizeof).
<?php
for ($i=0; $i<sizeof($productos); $i++){
if ($productos[$i]['rebajado']== true) echo $productos[$i]['producto'].'<br />'; }
?>
El resultado sería:
USB
que es el único producto rebajado.
Lo que resaltamos en este artículo es la notación a la hora de recorrer el array asociativo, de la siguiente manera: $variableArray[posición][nombre].
Si quisiesemos referenciar el precio de los USB lo haríamos indicando: $productos[0][‘precio’], es decir nos situamos en el array de posición 0 y referenciamos el valor de ‘precio’.
por WebReunidos | Abr 28, 2013 | Accesibilidad, Diseño web
En diferentes post, artículos o contenidos de páginas web, se habla de accesibilidad web y diseño web responsable como si ambas cosas fuesen lo mismo o, en algunas, como si aplicar técnicas para conseguir una web que se adapta a los diferentes dispositivos de usuario ya tienes una web accesible.
Para intentar aclarar los conceptos incluyo a continuación:
Accesibilidad Web
Se puede definir la accesibilidad como la posibilidad de que un sitio o servicio Web pueda ser visitado y utilizado de forma satisfactoria por el mayor número posible de personas, independientemente de las limitaciones personales que tengan o de aquellas limitaciones que sean derivadas de su entorno. (INTECO. Introducción a la accesibilidad web)
Diseño Web Adaptable – Responsive Web Design
El diseño web adaptativo o adaptable (en inglés, Responsive Web Design) es una técnica de diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así como de media-queries en la hoja de estilo CSS, consigue adaptar el sitio web al entorno del usuario. (Wikipedia)
Y así mismo, también incluyo esta interesante charla en Ask UXmatters sobre como encajar Responsive Web Design and Accessibility.
Como conclusión, podemos indicar que ambas técnicas son complementarias, pero que el aplicar una de ellas – accesibilidad o diseño web adaptable- no te asegura el conseguir los beneficios de la otra.
Así mismo, podemos constatar que el Diseño Web Adaptable se centra en el aspecto de diseño (imagen), de cómo se ve la web en los diferentes dispositivos y, principalmente, en los dispositivos móviles. Este es un aspecto que cada día se debe tener más en cuante porque el uso tanto de tabletas como de smarthphones va aumentando considerablemente.
por WebReunidos | Feb 2, 2013 | Accesibilidad, CSS, Diseño web
Tal y como indicábamos en nuestro anterior post, Inicializar los estilos. Reset CSS, la visualización de las páginas web en un navegador se ven afectadas por los hojas de estilo que se cargan. Asimismo, se indicó que hay una prelación entre ellas.
En este post, vamos a hablar de los conceptos: cascada, especificidad y herencia.
Cascada
Cuando dos o más reglas coinciden en un mismo elemento, dicho conflicto se resuelve mediante un proceso denominado cascada.
La cascada es el orden de prelación, importancia, que se le asigna a cada regla de las hojas de estilos. De ahí, que las hojas de estilo de autor/diseñador se consideren las más importantes, seguidas por las hojas de estilo de usuario y por último, las hojas de estilo predefinidas por el navegador.
El orden de importancia de las hojas de estilo coincide con el orden de carga de las hojas CSS al visualizar una página web: de izquierda a derecha, de menor a mayor prelación.
Sin embargo, teniendo en cuenta la accesibilidad web y su principio básico de eliminación de barreras para el acceso a la información para determinados grupos de personas – discapacitados y mayores-, el usuario mediante la regla !important toma el control de la presentación visual al asignar a su regla el máximo nivel de importancia, incluso por encima de las reglas !important declaradas por el autor/diseñador.
El orden de importancia de los estilos declarados es de mayor a menor:
- Estilos de usuario etiquetados como !important
- Estilos de autor/diseñador etiquetados como !important
- Estilos de autor/diseñador
- Estilos de usuario
- Estilos aplicados por el navegador
Ejemplo de declaración de !important:
el resultado será: Prueba de especificidad
El texto se muestra en rojo porque la regla color:red está declarada como de mayor importancia, rompiendo de esta forma, con la norma sobre especificidad que a continuación pasaremos a tratar.
Especificidad
Las reglas se ordenan según lo específico que sea el selector. Las reglas con selectores más específicos tienen prioridad sobre aquellas reglas con selectores menos específicos, es decir, más genéricos.
El color del texto será verde: Prueba de especificidad.
El selector de tipo <p> es el mismo en las tres declaraciones y su importancia es la misma, pero el texto se pintará de color verde (color: green;) porque la declaración p id=”especial” es la más específica, la más concreta. Es decir, sólo se aplicará a aquellos párrafos que lleven el selector ID.
Las otras declaraciones tienen un carácter mucho más genérico; bien para todos los párrafos –p color: red-; obien, para todos los elementos de la página – * color: blue-.
Si dos reglas tienen la misma especificidad, la última definida tiene prioridad.
El resultado es el texto en rojo (Prueba de especificidad) porque ambos selectores <p> tienen la misma prioridad, pero prevalece el último definido, p color: blue.
Para calcular cómo de específica es una regla, cada tipo de selector tiene asignado un valor numérico. La especificidad de una regla se calcula al sumar el valor de cada uno de sus selectores.
La especificidad de un selector se divide en cuatro niveles:
- Nivel A es igual a 1 si el estilo es un estilo en línea
- Nivel B es igual al número total de selectores ID
- Nivel C es igual al número de selectores de clase, pseudo clase y atributo
- Nivel D es igual al número de selectores tipo y selectores pseudo elemento
Una regla escrita en un atributo de estilo/style siempre será más específica que cualquier otra regla. Una regla con un ID será más específica que una sin un ID, y una regla con un selector de clase/class será más específica que una regla con selectores tipo (h1-h6, p, etc.).
La especificidad de las hojas CSS permite establecer estilos generales para elementos comunes y luego ir anulándolos para elementos más concretos, más específicos.
Herencia
Los documentos HTML están estructurados de forma jerárquica para ordenar el contenido. El primer elemento de esta estructura es el <html>, y de él son descendientes el resto de elementos que constituyen y forman una página web.
Esta característica de las hojas de estilo nos va ha permitir que determinadas propiedades como por ejemplo color o tamaño de la fuente no se tenga que indicar elemento por elemento, sino que con indicárselo al elemento padre, éste, por herencia, lo trasladará a sus hijos, a sus descendientes.
Con motivo de esta característica, se nos puede dar el caso que un elemento herede valores de todos sus superiores jeráquicos.
Los párrafos en rojo con tipo de fuente Arial, tamaño 14px.
La herencia se puede interumpir si declaramos una nueva regla CSS. Por ejemplo, indiquemos que el color para body y sus descendientes es negro, pero cambiemos el tipo de fuente, tamaño, y color para el elemto p.
La regla definida para el elemto <p> prevalece sobre las que debería heredar de sus elementos superiores jerárquicos. Al igual que en la la especificidad, la regla CSS más próxima tiene mayor prioridad. Así, si en el elemento aplicamos una regla de estilo directa, ésta prevalecerá sobre la que se haya definido en las hojas de estilo CSS.
Información de interés:
por WebReunidos | Ene 22, 2013 | Accesibilidad, CSS, Diseño web
Cuando publiquemos nuestra página web, una de los puntos a revisar es su visualización en los difrentes navegadores y sus correspondientes versiones, por ello es importante inicializar los estilos CSS.
Los navagadores cuando muestra una página web, no sólo aplican los estilos creados por el diseñador web, sino que también aplican las hojas de estilos del propio navegador y las del usuario.
Como podemos constatar, son tres las hojas de estilo que se pueden aplicar cuando visualizamos un sitio web: las del navegador, las del usuario y las del diseñador.
Así mismo, indicar que por ser las primeras en aplicarse, el orden de prioridad más bajo le corresponde a las CSS del navegador, luego son las del usuario, y las de mayor prioridad, al ser las últimas en cargarse y aplicarse, son las del diseñador.
Este orden de prioridad puede ser modificado si se incluye en la regla CSS la palabra !important. Si una regla definida en las CSS del usuario es igual a una defenidia en la del diseñador, tendrá prioridad las del usuario si en ella incluye la palabra !important. Esto es así, al objeto de dar mayor control al usuario al objeto de conseguir una mayor accesibilidad web para aquellas personas con determinada discapacidad.
Una web para todos, diseño para todos.
Hoja de estilo del navegador: es la que establece el estilo inicial de todos los elementos HTML . Si al cargar nuestra página web, no hemos definido el estilo a algun elemento, éste tomará el aspecto que por defecto esté definido en las hojas CSS del navegador.
Hoja de estilo del usuario: tal y como su nombre indica, es aquella que el propio usuario aplica a través de su carga en el navegador.
Hoja de estilo del diseñador: son los estilos definidos por el diseñador de la página web.
Los valores de los elementos HTML -tipo de letra, márgenes verticales, títulos de secciónetc.- son aplicados de diferente forma por cada uno de los navagadores. Por ello, para que no nos ocurra como en la captura de pantalla, que nuestro diseño no coincide con la visualización en el navegador, deberemos neutralizar los estilos prefijados en las CSS del navegador.
Una forma rápida y sencilla sería neutralizar los márgenes y relleno de todos los elementos de la página.
La solución ideal es crearse una hoja de estilo CSS –reset css– para inicializar los estilos CSS que aplican por defecto los navegadores y que afectan a la visualización de nuestro site.
Incluimos como ejemplo, la propuesta de hoja de estilo reset css del diselñador Eric Meyer.
