Introdução ao AEM Sites - Tutorial do WKND

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

Visão geral

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 com conhecimento de padrões de design comuns no AEM.

Opções para iniciar um projeto do Sites

Há duas abordagens básicas para iniciar um projeto do AEM Sites.

Arquétipo de projeto AEM - abordagem tradicional para AEM desenvolvimento gerando um projeto AEM mínimo usando um modelo Maven. Essa é a abordagem recomendada para AEM projetos 6.5/6.4 e AEM como Cloud Service projetos que antecipam a personalização intensa. O tutorial oferece um mergulho mais profundo no desenvolvimento AEM.

Inicie o tutorial com o Arquétipo de projeto AEM

AEM modelos 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. Atualmente disponível apenas para AEM como Cloud Service.

Iniciar o tutorial usando um modelo de site

Kit da interface do usuário do Adobe XD

Para tornar este tutorial mais próximo de um cenário real, os designers UX talentosos criaram os 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 criaram o belo design para o site WKND.

Baixe os kits da interface do usuário do XD:

Site de referência

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á todo o site 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 passar para o tutorial, baixe e instale a versão mais recente de do GitHub.

Alimentado pela Adobe Stock

Muitas das imagens no site de Referência da WKND são do 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.

Próximas etapas

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.

Nesta página