Não esqueça de clicar nos anuncios do Google ao lado, Obrigado!

Texto Original em Ingles em : http://www.magentocommerce.com/design_guide

Tradução feito em quatro partes.
Como fiz essa tradução sozinho e meu ingles é infinitamente melhor que meu português, me avisem de erros de gramatica por favor via email.
leomangione@me.com
Deixem a area de comentários para dúvidas ou sugestões.

Terminologias de Desgin do Magento – Parte 1 (Você está aqui!)
Trabalhando com os Temas do magento – Parte 2
Criando um Tema – Parte 3
Introdução a Layouts – Parte 4 (traduzindo) – 01/11/2009

Terminologias de design do Magento

Você já ouviu falar sobre o inacreditável open-source Magento e que ele  oferece recursos recursos incriveis já no seu pacote básico. Você dedicou bastante tempo para ve-lo em ação. Viu e reviu varias vezes…. E agora você quer faze-lo do seu jeito. Você tem o seus PSDs pronto e ao zlo para construir e integrar. Então, por onde começar?

O guia de layouts para o magento foi preparado para voce aprender e ampliar seus conhecimentos sobre a estrutura, conceitos e metodologias a serem usadas na hora de criar seus layouts para o Magento.  Basicamente ensinar o que voce precisa saber para começar a criar um tema de sua preferencia para a ferramenta.

Isto dito, devido à dimensão considerável e flexibilidade que oferecem as funcionalidades do Magento, não é possível documentar todas as maneiras diferentes em que pode ser  personalizados para uso. Para ajudar com isso, você pode consultar fóruns e WIKI na comunidade, onde  pessoas com experiências da vida real serão capazes de aponta-lo no sentido correto. Além disso, lembre-se que Magento é uma aplicação em constante desenvolvimento, pois apesar dos nossos maiores esforços para esta documentação pode não refletir fielmente a versão que você está trabalhando no momento.

Esta documentação é amplamente dividido em quatro capítulos e pode ser ignorado tanto para frente ou para trás .
Para acessar rapidamente apenas as informações que você mais precisa. No entanto, porque cada capítulo funciona como um prelúdio
para a próxima, aconselhamo-lo a seguir a documentação na ordem em que foi escrito.

Magento Design Terminologias

Para acompanhar, juntamente com a documentação, é fundamental que você tenha uma boa compreensão das terminologias usadas para descrever os aspectos do sistema Magento. As terminologias introduzidas neste capítulo são provavelmente  um novo território  para você, leia-os com calma e atenção. Mas mais importante ainda, não se  desanime  se você não compreender plenamente o conceito de todas estas novas terminologias – Este capítulo serve apenas para apresentar todos de uma vez e os  capítulos futuros irão se  aprofundar e expandir as simples  definições.

Terminologias abordados neste capítulo são:

• Website, Loja e Visualização de loja
• Interface
• Temas
  • Layouts
  • Modelos
  • Skins
• Blocos
  • Blocos Estruturais
  • Blocos de Conteudo

Website e Lojas

Um website é um conjunto de lojas que compartilham o mesmo cliente e informação do pedido, assim como os carrinhos de compra.
A loja é uma coleção de visualizações de loja. Estes são termos gerais que podem ser adotados para definir as  necessidades específicas dos comerciantes individuais. Alguns cenários para definir os diferentes usos do site, loja e loja  pontos de vista são as seguintes:

Cenário 1

Uma empresa chamada Dubloo Inc cria uma presença on-line, com três lojas de roupa diferentes para  atender três tipos de publico-alvo com três  niveis de preços. Dubloo Inc quer todas as três de suas lojas compartilhem clientes e  informações de compra.
Dubloo Inc teria um Web Site e três lojas sobre sua presença online. Loja iria definir  lojas dividias por niveis de preço e website seria DUBLOO inc umbrella.

Cenário 2

Uma empresa chamada My Laptops quer abrir dois websites separados onde ambas vendem laptops só que com preços diferentes. Eles tambem querem oferecer opçoes de Ingles e Espanhol em cada um dos sites, cada um podendo ter items que correspondem a linguagem selecionada. Eles tambem precisam sincronizar informações de clientes e pedidos entre os  sites.  Nesse cenário a visualisação de loja estaria definido como Ingles e Espanhol e Meus Laptops e Laptops Baratos estariam definidos como lojas.

Cenario 3

Uma empresa chamada Bongo´s Instruments quer criar uma presença online. Sem nenhuma outro ramos de lojas. Bongo´s Instruments é a loja e tambem é o website.

Interface

Interface é uma coleção de temas que determinal a saida visual e as funcionalidades da visualização da sua loja.

Uma interface pode ser selecionada tanto no nivel de website quanto no nivel de visualização de loja pela interface do painel de adminstração.
(Aprenda selecionar uma interface para seu website ou loja aqui).

Se você selecionar uma interface no nivel de website, todas as lojas irão herdar a interface do seu site. Você pode depois selecionar uma interface no nivel de visualização de loja e no nivel de loja efetivamente sobreescrevendo a interface do website. Digamos que você opera 4 lojas diferentes que residem abaixo de um website chamado “John´s Panacea” , estudando os efeitos de cada um dos métodos mostrados abaixo. Você pode facilmente determinar o método a aplicar para as necessidades de design do seu negócio.

1 – Declaração em nível de Website

Se você quer criar um design unificado para todas as suas 4 lojas, você irá selecionar uma interface no nível de Website, nesse caso todas as 4 lojas irão herdar a interface do website.

2 – Declaração no nível de loja.

Se você quiser incorporar um design unico para cada loja, você pode selecionar uma interface por visualização de loja, nesse caso cada loja vai ter o seu design único.

Temas

Um tema é uma combinação de arquivos de layout, template, locale e/ou skin que criam uma experiencia visal para sua loja. Magento é construido com a capacidade de carregar multiplos temas de uma só vez, assim separando os temas em dois grandes tipos.

● Tema Padrão (default)

Toda interface vem com um tema chamado ‘default’ que é o tema principal da interface. Quando você seleciona uma interface para sua loja, a aplcação automaticamente procura pelo tema ‘default’ e a carrega para o front-end. Se você quiser customizar o design da sua loja, você pode modificar esse tema ‘default’ ou criar/adicionar um tema ‘não default’ e carrega-lo junto com o ‘default’. O tema ‘default’ deve conter todos os layouts, templates e skins requeridos para poder rodar um site livre de erros e, portanto, é o
tema menor na hierarquia do tema.

● Tema não padrão

Um tema não padrão pode conter quantos arquivos de temas você achar necessario. Esse tipo de tema tem o objetivo de fazer pequenas alterações temporarias a uma loja em vez de criar um novo tema default. Ao criar algumas novas imagens e atualizando algumas linhas dos arquivos CSS, você pode facilmente transformar sua loja com design entediante em uma loja de NATAL rapidamente.

Um tema consite de algum ou todos essas caracteristicas.

● Layout (localizado em app/design/frontend/your_interface/your_theme/layout/)
Esses são basicos arquivos XML que definel a extrutura do bloco em paginas diferentes, assim como controle as informações META e encoding das paginas . Para uma visão mais aprofundada sobre o assunto leia a introdução para layouts)

● Templates (localizado em app/design/frontend/your_interface/your_theme/template/)
Esses são arquivos PHTML que contem tags (X)HTML e tags em PHP necessárias para criar a lógica para apresentação visutal.

● Locale (localizado em  app/design/frontend/your_interface/your_theme/locale/)
Esses são arquivos de texto simples organizados por linguagem que contem as traduções dessa copia da loja.

● Skins (localizado em skin/frontend/your_interface/your_theme/)
Esses são arquivos especificos em Javascript, Css  e imagens específicas para um bloco que complementam seu (X)HTML.

Blocos

Termos não foram traduzidos pois vão aparecer internamenta na sua instação do magento.

Blocos são uma maneira no qual magento distingue a gama de funcionalidades no sistema e cria uma maneira modular para adminstra-lo de uma forma visual e funcional. Existem dois tipos de blocos e eles trabalham juntos para criar uma saida visual.

Blocos Estruturais

Esses são blocos criados para um proposito unico de selecionar uma estrutura visual a uma pagina da loja, tais como o cabeçalho(header), coluna da esquerda(left Column), coluna da direita (right column), coluna principal (main) e rodapé (footer)(Diagrama 1).

Blocos de Conteudo

Esses são os blocos que produzem o atual conteudo dentro de cada bloco de estrutura. Eles são as representações de cada funcionalidade individual de uma pagina e carrega arquivos de template para gerar a (X)HTML a ser inserida ao bloco de estrutura pai. Lista de Categorias, mini carrinho, tags dos produtos e listagem de produtos.. etc são cada um deles seus proprios blocos de conteudo. (Diagram 2).
Em vez de incluir template em cima de template como uma tipica aplicação eCommerce faria para agregar toda a saida (X)HTML, Magento agrega e arruma paginas de conteudo através dos blocos.