OmbuShop Crea Tu Tienda Online

Artículos con la etiqueta: ‘diseño web’

Editar el Diseño en Tu Tienda Online

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Todas las tiendas sobre OmbuShop cuentan con flexibilidad para editar  posibilidad de editar el diseño en forma integral. Pueden administrar el CSS y el HTML de toda la tienda.

Las únicas páginas que no se pueden modificar son las del carrito de compras y las de checkout.

Para modificar el HTML de alguna página, es necesario administrar los templates en la sección de Diseño y seguir las instrucciones que figuran en nuestra API para diseñadores.

Aquí voy a mostrar algunos ejemplos de cosas que se pueden hacer con el lenguaje de templates que utilizamos: Liquid.

(más…)

Cecilia Farías se suma a OmbuShop

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Tengo el gusto de anunciar que Cecilia Farías se suma a OmbuShop como nueva Lead Designer.

El objetivo de Cecilia será trabajar para que nuestros partners creen más y mejores tiendas, mejorar la experiencia de usuario para nuevos dueños de tiendas y mejorar la plataforma para diseñadores web y frontenders.

Cecilia Farías, Lead Designer

Cecilia nos va a ayudar a seguir creciendo, mejorando la usabilidad de nuestras aplicaciones y diseñando nuevas interacciones.

¡Bienvenida!

Centrado vertical con CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Muchas de las técnicas que utilizamos diariamente con CSS no son intuitivas. En principio, son resultado de experimentos técnicos de desarrolladores web y diseñadores que intentan empujar este lenguaje presentacional hacia nuevos territorios.

Casi todos sabemos cómo centrar un elemento dentro de otro, horizontalmente; por lo general basta con indicar márgenes izquierdo y derecho en auto. El problema surge cuando queremos centrar una caja dentro de otra, de forma vertical.

Veremos a continuación una técnica para realizar centrado vertical con CSS con amplio grado de compatibilidad con navegadores (Chrome, Firefox, Safari, IE8-10). La técnica necesita del posicionamiento absoluto para funcionar, por ende, necesitaremos que la caja contenedora tenga indicado algún posicionamiento diferente a static, por ejemplo: position: relative.

Veamos el ejemplo:

 


#contenedor {
position: relative;
}
#contenido {
height: 60px; /* <– debe estar definida */
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

/* —————————- */
/* Detalles cosméticos */

* {
box-sizing: border-box;
}
body {
background: #fff;
font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;
font-size: 20px;
}
#contenedor {
background: #9f0;
width: 70%;
height: 150px;
margin: 1em auto;
border: 4px solid #000;
}
#contenido {
background: #000;
color: #fff;
font-weight: bold;
text-transform: uppercase;
text-align: center;
width: 95%;
padding: 1em;
}

See the Pen IwJjf by Lucas Mourelle (@lucasmourelle) on CodePen.
0

¡Esperamos que les sirva!

Libro: tipografía en la Web

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

A la excelente colección de libros para gente que hace sitios web de A Book Apart, se suma un nuevo volumen sobre tipografía en la Web. Jason Santa María ha escrito y publicado el nuevo libro “On Web Typography”.

On Web Typography

On Web Typography

La mayor parte del diseño de una web está conformada por el diseño tipográfico. La diagramación, las columnas, el espacio en blanco, la interlínea y —por supuesto— la elección de la familia tipográfica, hacen a un altísimo porcentaje de los elementos que sirven como pilares y estructura a un sitio web.

Pocos diseñadores web tienen tan controlado el aspecto gráfico de sus creaciones en la Web. Jason Santa María viene, evidentemente, del universo de lo gráfico impreso, del mundo editorial, casi diríamos del trabajo artesanal que hacían los tipógrafos allá lejos y hace tiempo. Gente con oficio, que se repartían entre un trabajo más cercano a lo artístico (diagramar la página) y otro puramente técnico: convertir aquella aproximación artística en una realidad tangible. El armado de la rama, la organización de los tipos móviles, etc.

Hoy en día esto mismo hacemos los diseñadores y desarrolladores web. No sólo proyectamos el diseño de un sitio web, también realizamos la implementación técnica. Reemplacemos tipos móviles por HTML y CSS y se trata del mismo tipo de trabajo: el del artesano que requiere la habilidad que sólo el oficio puede dar: el craftsmanship pero con diferentes herramientas.

Este libro acerca a quienes sólo tuvieron contacto con la Web, al universo de lo tipográfico y la lectura. ¿Cómo leemos? ¿Cómo funcionan las tipografías? ¿Cómo combinarlas? ¿Qué son los sistemas tipográficos? Son sólo algunas preguntas que intentará abordar.

Aquí el link al sitio oficial del libro.

A seguir estudiando, aprendiendo y creando excelentes sitios web y tiendas online!

 

Navegación off-screen utilizando sólo CSS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Cómo ocultar y mostrar una botonera de navegación off-screen utilizando sólo CSS, sin una sola línea de JavaScript!

Muy de vez en cuando se encuentra una idea realmente reveladora, una técnica maravillosa hecha con las herramientas que estaban al alcance de todos, pero cuya utilización de aquella manera particular no se nos había ocurrido.

Es exactamente lo que ocurre en este caso. Me topé, por suerte, con el código de Austin Wulf, en donde muestra de forma magistral cómo generar una interacción con un click, sin la necesidad de utilizar JavaScript. En resumen: el uso de un checkbox, el pseudo-selector :checked y el selector para siblings.

¡La maravilla!

See the Pen Pure CSS Off-Screen Navigation Menu by SitePoint (@SitePoint) on CodePen.0

Artículo original de Austin Wulf: Pure CSS Off-screen Navigation Menu.