Bem-vindo a um tutorial de várias partes projetado para desenvolvedores novos no Adobe Experience Manager (AEM). Este tutorial aborda a implementação de um site de AEM para uma marca fictícia de estilo de vida, a WKND. O tutorial aborda tópicos fundamentais como configuração de projeto, Componentes principais, Modelos editáveis, bibliotecas do lado do cliente e desenvolvimento de componentes com o Adobe Experience Manager Sites.
O objetivo deste tutorial em várias partes é ensinar um desenvolvedor a implementar um site usando os padrões e tecnologias mais recentes no Adobe Experience Manager (AEM). Após concluir este tutorial, um desenvolvedor deve entender a base básica da plataforma e os padrões de design comuns no AEM.
Há duas abordagens básicas para iniciar um projeto do AEM Sites.
Arquétipo de projeto AEM - Abordagem tradicional AEM desenvolvimento através da criação de um projeto AEM mínimo utilizando um modelo Maven. Essa é a abordagem recomendada para AEM projetos 6.5/6.4 e AEM projetos as a Cloud Service que antecipam uma personalização pesada. O tutorial oferece um mergulho mais profundo no desenvolvimento AEM.
Inicie o tutorial com o Arquétipo de projeto AEM
Modelos de site AEM - Também conhecida como Criação rápida de site, uma abordagem de código baixo para gerar um site AEM usando um modelo de site predefinido. Use componentes e modelos prontos para uso para ativar e executar rapidamente um site. Use um fluxo de trabalho temático para aplicar estilos e personalizações específicos da marca apenas com CSS e JavaScript. Recomendado para novos projetos e desenvolvedores. Disponível apenas para AEM as a Cloud Service.
Iniciar o tutorial usando um modelo de site
Para tornar este tutorial mais próximo de um cenário real, os designers UX talentosos criaram modelos para o site usando Adobe XD. Ao longo do tutorial, várias partes dos designs são implementadas em um site de AEM totalmente criável. Agradecimentos especiais a Lorenzo Buosi e Kilian Emenda que criou o belo design para o site WKND.
Baixe os kits da interface do usuário do XD:
Uma versão concluída do Site WKND também está disponível como referência: https://wknd.site/
O tutorial aborda as principais habilidades de desenvolvimento necessárias para um desenvolvedor de AEM, mas not criar o site inteiro de ponta a ponta. O site de referência finalizado é outro excelente recurso para explorar e ver mais recursos AEM prontos para uso.
Para testar o código mais recente antes de entrar no tutorial, baixe e instale o última versão do GitHub.
Muitas das imagens no site de referência WKND são de Adobe Stock e são Materiais de terceiros conforme definido nos Termos Adicionais do Ativo de demonstração em https://www.adobe.com/legal/terms.html. Se você quiser usar uma imagem do Adobe Stock para outros propósitos além da exibição deste site de demonstração, como exibi-la em um site ou em materiais de marketing, poderá comprar uma licença no Adobe Stock.
Com o Adobe Stock, você tem acesso a mais de 140 milhões de imagens de alta qualidade e isentas de royalties, incluindo fotos, gráficos, vídeos e modelos para começar seus projetos criativos.
O que você está esperando?! Saiba como gerar um novo projeto do Adobe Experience Manager usando o Arquétipo de projeto AEM ou criar um site usando um modelo de site.