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 | 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.
