mis plugins en github.com 5.9.09

github.com es un servicio online donde puedes crear tus propios repositorios de archivos para tus aplicaciones, modulos, plugins etc. De esta forma puedes mantener tus plugins muy fácilmente,  además de ahorrarte en ancho de banda en tu hosting.

github-nothnk

Pues bien, hoy  me he registrado (nothnk) y he subido los dos plugins que tenía publicados en este blog, tengo unos cuantos más no sólo de Jquery, que con la facilidad que ofrece este servicio publicaré y mantendré.

De momento sólo están disponibles el jquery-links y el jquery-gallery y sin las modificaciones pendientes.

Categoria: control versiones, jquery, plugin, plugins, proyecto 2 Comentarios

CSS Hack sólo para Chrome 5.9.09

A veces nos es inevitable tener que recurrir a estos hacks, por alguna razón  los navegadores se empeñan en no cumplir con un mismo standard  y lo que podemos estar viendo correctamente en unos, en otros se ve fatal. No estoy hablando de los Internet explorer, me refiero ya a navegadores decentes como Firefox, Opera, Safari, Chrome.

Pues Bien, esta semana me he encontrado en el trabajo con un problema de maquetación en google chrome (sólo se descolocaba unos controles en un slider) y buscando dí con la siguiente solución, que aunque es un poco enrevesada funciona perfectamente.

@media screen and (-webkit-min-device-pixel-ratio:0)

{
//colocamos las reglas css

.next a { margin-top: 15px;}
.back a { margin-top: 15px;}
}

Lo encontré en el blog de Martin Ivanov que me ha sorprendido gratamente y ya está en mi Reader. Este hack viene a sustituir al viejo body:nth-of-type(1) Selector que si bien antes sólo lo interpretaba el Chrome, ahora ya lo consiguen interpretar el Firefox 3.5 y el Opera9.2+, lo que nos hace ver el peligro de usar estas técnicas, así que  el consejo es: intentar evitar el uso de CSS hacks todo lo que podamos.

Categoria: css, hack, tips 2 Comentarios

Tutorial Magento - Entendiendo su estructura 29.8.09

Que es Magento y para que nos puede servir

Magento  es un CMS para la creación de tiendas virtuales, está escrito con ZEND FAMEWORK de base y uno de sus puntos fuertes es que tiene la posibilidad de manejar varias tiendas a la vez con una única instalación, de manera que entre sus distintas tiendas puedan compartir la información de sus clientes. Un ejemplo puede ser una multinacional de Opticas, esto hace verdaderamente potente a Magento.

Estructura en Magento

La estructura de Magento se basa en dos grupos importantes:

  1. Website
  2. Tienda (store)  con sus vistas de tienda ( store views)

Website

El website para Magento lo podríamos definir como una compañía o empresa que a su vez esta tiene tiendas repartidas o simplemente es una Compañía que tiene una única tienda.

Tienda

Las tiendas para Magento (store) son una colección de vistas de tienda (store views) al menos siempre tiene que tener una vista de tienda, digamos un público objetivo por idioma.

Ejemplo un tienda que solo venda productos para un publico objetivo de habla Inglesa, con lo cual sólo tendrá un  store view y será en Inglés.

Magento puede ser multi-compañía, por lo cual dentro de una misma instalación podemos tener muchos Websites y estos a su vez tener muchas tiendas (stores) que tengan distinto publico objetivo ( store views) idiomas.

Por lo tanto Magento permite tres escenarios

  1. Un empresa con sus múltiples tiendases_terminology-scenario1
  2. Varias empresas con 1 o mas tiendas y con 1 o más vistas de tienda ( idiomas)es_terminology-scenario21
  3. Un empresa con una única tiendaes_terminology-scenario31

Interface

Tanto los websites como las tiendas pueden llevar sus  temas personalizados, Magento incorpora el aspecto de interfaz, que es una colección de temas que determinan el aspecto visual y funcionalidades del frontend de tu tienda. Una interfaz puede ser asignada tanto en el nivel de Website y/o en el nivel de Vista de Tienda por medio del panel de administración.

Temas

Un tema es un conjunto de archivos de organizacion visual (Layouts), plantillas (Templates) y/o estilos (Skins) que dan la apariencia a nuestra tienda. Magento tiene dos grandes tipos:

Tema predeterminado (Default Theme)

Cada interfaz viene con un tema predeterminado (por defecto) llamado “default”, el cual es el tema principal de una interfaz. Cuando asignas una interfaz a una tienda, la aplicación automáticamente busca el tema con el nombre “default” y lo carga en el front-end. Para personalizar el diseño de tu tienda, puedes modificar este tema o crear un tema no predeterminado (Non-default Theme) adicional y cargarlo junto con el default. El tema “default” debe contener todos los “layouts” requeridos, “templates” y “skins” para funcionar sin errores y, por lo tanto, es el tema más bajo en la jerarquía de temas.

Tema no predeterminado (Non-default Theme)

Un tema no predeterminado o non-default puede contener tantos o tan pocos archivos como necesites. Este tipo de tema está pensado para darle un diseño de temporada a una tienda sin tener que recrear todos los archivos por completo. Creando unas pocas imágenes y actualizando algún archivo de estilo en CSS, puedes hacer que tu tienda deje verse como siempre, para convertirse, por ejemplo, en una tienda adornada para la temporada de Navidad.

Estructura de un tema

Layouts (estructuras):

Ubicado en “app/design/frontend/your_interface/your_theme/layout/”. Estos son archivos XML que definen la estructura de bloques para diferentes páginas así como controlan la información META y la codificación de páginas.

Templates (plantillas)

Ubicados en “app/design/frontend/your_interface/your_theme/template/”. Son archivos PHTML que contienen marcas XHTML y cualquier código PHP necesario para crear la lógica de la presentación visual.

Skins (máscaras)

Ubicados en “skin/frontend/your_interface/your_theme/”. Son imágenes, estilos en CSS y archivos de Javascript para bloques específicos que complementan tus XHTML.

Bloques

Magento distingue entre dos tipos de bloque los estructurales (para el layout) y los bloques de contenido (datos)

magento-bloques

Más información http://www.magentocommerce.com/wiki/groups/201/traduccion._guia_de_diseno_para_magento

Arquitectura de Magento

Magento es un CMS que se puede adaptar a todo tipo de tiendas, esta flexibilidad hace que cada desarrollo pueda necesitar hacer cambios en determinados componentes. El problema de hacer estos cambios es que si posteriormente saliese una actualización deberíamos adaptar ese componente a nuestros cambios y así progresivamente. Magento tiene una estructura para solucionar este problema.

En el directorio app/code ( codigo de la aplicación) Magento muestra 3 carpetas que son:

  1. core - es el nucleo de Magento ( esto nunca se debería de tocar)
  2. comunnity - contiene todos los componentes que nos bajamos de terceras persona o del Magento Connect
  3. local - Son nuestros propios componentes y es aquí donde debemos modificar cualquier elemento que necesitemos, al estar basado en Zend tenemos a nuestra disposición la herencia de clases,  mediante extensiones podremos modificar lo que necesitemos.

Creando nuestra primer proyecto en Magento

Como ya habíamos explicado tenemos diferentes escenarios, vamos a crear el ejemplo más común el escenario 3. Crear una compañia que tiene una tienda para un publico objetivo ( español).  Lo primero será crear nuestra compañia ( website). Para realizar esto debemos crear los tres componentes mínimos, website , store y store view. Por defecto Magento tiene un website ya creado (Main Website) pero nosotros en este ejemplo vamos a crear uno nuevo.

1 Creando nuestro website

Nos dirigimos al panel de administración a la siguiente ruta.  Sistema > gestionar tiendas > crear un sitio web. Nos aparecerá el siguiente formulario con dos campos obligatorios:

  1. Nombre: del sitio web ( empresa) en mi caso Opticas Nervión.
  2. Código: El código del sitio web debe contener sólo letras (a-z), números (0-9) o guiones bajos(_), el primer carácter debe ser una letra

2 Creando nuestra tienda ( store)

Una vez guardado el website nos de vuelve a la pantalla donde podemos pulsar ahora en crear nueva tienda. Veremos el siguiente formulario

magento-tienda

Debemos seleccionar a que sitio pertenece en este caso seleccionaremos el que estamos creando y le damos un nombre a nuestra tienda. En mi caso el mismo que el del website ya que no va a tener múltiples tiendas . Opticas Nervión. Por último, debemos escoger una categoría por defecto ya hablaremos de esto más adelante.

3 Creando nuestra vista para la tienda ( store view)

El último paso es indicar el público objetivo que magento lo divide por idiomas, por lo que debemos de crear una vista de tienda por cada idioma que se necesite. En nuestro caso vamos a crear una vista para el idioma español. pulsamos en crear nueva vista de tienda y veremos el siguiente formulario.

magento-tienda-2

  • En el select de tienda escogemos a cual de ellas será asociada la vista que estamos creando
  • En nombre , podemos colocar el nombre de la tienda
  • En código que es de uso interno lo normal es colocar el idioma que va usar esa tienda
  • En estado lo tenemos que dejar habilitado
  • Y por último colocamos el orden

Ahora sólo hace falta indicarle a esta vista de tienda ( store view) el idioma que queremos que use, en nuestro caso el español, para ello nos vamos a Sistema > configuración > general y en el select de arriba a la izquierda tenemos que seleccionar nuestra vista de tienda.

magento-tienda-3

Una vez seleccionado a la derecha ya podemos escoger el locale ( el idioma) . Para cambiar los valores basta con pulsar sobre el checkox de usar sitio web y de esta forma podemos sobrescribir esos valores.

Categoria: Uncategorized, e-comerce, magento 1 Comentario