Queli Coto Desarrollador Web

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 tiendas
2. Varias empresas con 1 o mas tiendas y con 1 o más vistas de tienda ( idiomas)
3. Un empresa con una única tienda

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):

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

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.

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

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.

Vamos a seguir con esta serie de artículos, esta semana toca un breve tutorial sobre las formas que podemos crear en illustrator. Como sabéis yo no soy ningún diseñador ni pretendo serlo, pero me gusta aprender de todo un poco y siempre me he preguntado porque los programas de diseño no venían con varias formas predefinidas, como por ejemplo un triángulo.

La razón es simple, para que disponer de todas esas formas predefinidas si las puedes ir creando al gusto, digamos que nos dan los alimentos y tu te preparas la comida.

Comenzaremos a crear dos formas básicas que si disponemos.

Cuadrado

Para ello nos basta con utilizar la herramienta rectangle tool (M), con esta herramienta  no sólo podemos  crear rectángulos, sí mantenemos pulsada la tecla shift nos mantendrá la proporción y con ello crearemos un cuadrado.

En el anterior tutorial aprendimos a jugar con el relleno y el trazo, a este cuadrado le he dado un trazo de 10pt con color #00AEEF y le he eliminado el relleno, quedaría así.

Circulo

Usaremos la herramienta ellipse tool (L) y como hicimos con el cuadrado, mantendremos la tecla shift para mantener la proporción y conseguir un circulo perfecto,  para este ejemplo dejaremos un trazo de 10pt de color #EC008C

Triángulo

Esta es una forma que yo considero básica y nunca he encontrado en los programas de diseño, entre ellos el illustrator, pero es muy fácil de crear.

Lo primero será crear un cuadrado, una vez creado lo vamos a seleccionar con la herramienta selection tool (V) de forma que podamos apreciar los distintos puntos que lo forman.

Es importante darnos cuenta de los diferentes elementos que se nos muestra al seleccionar un objeto.

1. Tenemos un punto en el centro  con el fondo rellenado, este es el centro de nuestro objeto.
2. Tenemos una serie de puntos, con el fondo en blanco, estos son los denominados anchors (anclas) y definen cada punto del objeto que podemos modificar.
3. Las lineas que unen estos anchors, se les denomina path (camino) ya veremos para que se usa.

Para poder crear un triángulo lo que vamos a hacer es eliminar uno los anchors que está colocado en cualquiera de las esquinas, para hacer esto utilizaremos la herramienta delete anchor point tool (-) , para encontrarla pulsaremos en la esquina inferior derecha de la herramienta Pen tool (p).

Nos situamos encima del anchor que queremos eliminar y pulsando sobre él, notaremos el cambio en el objeto.

Bien ya casi tenemos el triángulo,  tendremos que rotarlo, para ello volvemos a seleccionar el objeto y nos situamos en uno de los anchor, automáticamente nos saldrá una nueva opción en el cursor indicando que podemos rotar este objeto desde ese punto.

nota: si mantenemos pulsado la tecla shift, nos mantendrá la proporción del giro.

Ya tenemos una forma de un triángulo, pero si nos fijamos cuando lo estamos seleccionando, sigue mostrando los anchor points como si de un cuadrado se tratase, para que se ajuste a la nueva forma tendremos que resetear esto, nos vamos a object -> tranform -> reset bounding box.

Ahora podremos estirar el triangulo, cambiarle trazo, relleno lo que queramos, yo he usado un trazo de 10pt color #8DC63F y sin relleno.

Aspa  o Cruz

Para crear esta forma usaremos la misma técnica que con el triángulo, partiremos desde el cuadrado y eliminando y rotando conseguiremos un pequeño bloque, también podemos partir desde un rectángulo con una altura reducida, lo que debemos conseguir es algo así.

Lo que vamos a hacer ahora es duplicar este objeto, lo más sencillo es usar copiar y pegar  de forma que ya tengamos dos objetos iguales, uno de ellos los rotamos y lo colocamos en vertical al otro.

Nos vamos object -> transform -> rotate y con 90%  ya conseguiremos colocar el objeto en vertical, después lo desplazamos y los juntamos por su punto central.

Bien, ya casi lo tenemos el problema es que en realidad esto son dos objetos y nosotros sólo queremos uno, para ello vamos a agruparlos, con la herramienta de seleccion (V) y manteniendo pulsada la tecla shift, vamos a pulsar los dos objetos aumentando de esta forma la selección.

Para agruparlos vamos a object -> group ( control + g ) y ya tenemos nuestra cruz o aspa si la rotamos.

Seguro que hay muchas formas de crear estas formas y quedo abierto a cualquier sugerencia de como mejorar.

Vaya, lo que se iba a convertir en la típica broma del día de los inocentes, al final casi se convierte en realidad, pero nada más lejos de la misma.

He estado muy liado con el trabajo,  con unos cursos que hemos realizado, el de webs accesibles de la universidad de Murcia y el de Zend Framework el cual me queda sólo una semanita. Este año me estoy formando mucho en accesibilidad desde que han salido las WCAG 2.0 y sobre todo en usabilidad, estoy deseando coger un proyecto en el que pueda demostrar y poner en práctica todos estos conocimientos.

Sigo en mis treces en este año mejorar mi punto débil como desarrollador web, que no es otro que el diseño. Como vereis he creado un nuevo theme para este blog, en el cual lo  he unido con mi web personal quelicoto.es, de forma que ambas tengan el mismo estilo y se puedan identificar como una sola.

Hace tiempo que salte al “mundo social” y descubrí que era noth y quien estaba detrás de el, podría eliminar noth y seguir en mi dominio personal, pero que queréis que os diga, le tengo mucho cariño a este dominio y es mi  nick en internet con alguna variación, como nothnk, nothnkes… etc.

Bueno este mini post, es para deciros que vuelvo, este año trataré temas sobre lo que estoy aprendiendo, mis pequeños avances en el diseño web, con algún intento de hacer algo con programas como photoshop, ilustrator incluso after effects que siempre me encanto el mundo de la edición de video.

Nos vemos y espero que sea antes del próximo 28 de diciembre.