Adobe Experience Manager authors, and their templates, and components

In this section, you will see what exactly the authors do with AEM. This session also gives an overview of templates and components. I thought it would be a good idea to record a video while I prepare the content. I used the Adobe Presenter Video Creator. This is the first time I am using Adobe Presenter and it’s cool.

If you are keen, you would be able to watch the video in the Full-Screen mode. I think my videos will improve as I progress in setting a stage for AEM learning.



Now that you have installed AEM. Let us start exploring the default web interface that came up. Log in using admin and admin as a user ID and password respectively. In the left panel, you will see the following:

• Projects: All existing projects.
• Sites: Sample sites that are reference implementations of your projects.
• Apps: The apps related to your site.
• Publication: All publications associated with your sites.
• Forms: LiveCycle Forms.
• Assets: Digital assets such as images, PDFs, docs, and so on.
• Communities: Your communities.
• Commerce: Catalogs, products, and so on. You can use this as a reference site if you need to implement a Commerce portal.
• Tools: Various other consoles that you need for development.

In most of the projects using AEM, you will (eventually) develop a website. In most cases, you will have an existing website and you need to migrate to AEM. Let us first see one of the reference implementations in AEM. As I mentioned earlier, there are a couple of reference implementations in AEM. They are called sample sites. Click on Sites and you will see the following reference implementations:

• Geometrixx Demo Site: It’s a typical website.
• Geometrixx Mobile Site: This site is designed for mobile devices. The content used for the Geometrixx Demo site is repurposed for this site.
• Geometrixx Outdoors site: It’s a commerce implementation.

Let us explore the Geometrixx Demo Site.

• Double-click Geometrixx Demo Site. You will see different language codes. These codes represent the same website in those languages.
• Move the cursor over English and select Edit.

The page is opened in a new browser window.

The page is in the Edit mode now. It means that you can update the page.

The pane you see on the left is the Asset pane. You can drag and drop your digital assets to your page.

The small-pane you see is fondly called the sidekick. What you see inside the sidekick are called components. You can drag and drop components to your page. For example, the Image component. Assume that you want to add an image to the page. First drag and drop the Image component to the page. Double-click the image component. It opens a dialog box, from the Assets pane, drag and drops an image.

The Activity that you performed now is an Author activity. Authors in your organization create or update content. Now let us try to create a new web page. To do that, let me take you to a different console – SiteAdmin.

1. Type the URL: http://localhost:4502/siteadmin
2. Select the Geometrixx Demo Site > English. This is the location where you want to create a page. Click New > New Page. Give it a name.
3. Also, select a template. A template defines the basic layout of your web page.
4. After creating the page, double-click it to open.
5. Observe that the page is not really blank. It has provided you with a basic layout. On top, it has provided you with a site icon, search bar, and a navigation bar.

Similarly, at the bottom, it has given you a couple of links. On your right, you are provided with a small pod with some content. You would have noticed that these are common to all the pages you create based on a template. Whatever, you saw on the page is content displayed in a specific manner. And, they are called components. Now you have the page. You need to fill the page with information. From the component pane, drag and drop a Text component to the page. Click to select and click to edit.

Type some content. You can continue filling the content by adding different components. For example, image, table, and so on. As I mentioned earlier, this is an Author’s job. And, you would have assumed by now – a developer creates the template and components that an author uses. Site Admin is a web interface Author uses. Similarly, there are some interfaces developer uses, which you will see in the next session.

I hope you are now able to differentiate two main roles in AEM.

To take a recap:
We saw a web interface that authors use frequently: Site Admin. That’s where an author creates or updates content.

Let us explore the Geometrixx Demo Site.
Double-click Geometrixx Demo Site.
You will see different language codes. These codes represent the same website in those languages.
Move the cursor over English and select Edit.
The page is opened in a new browser window.

The page is in the Edit mode now. It means that you can update the page.

The pane you see on the left is the Asset pane. You can drag and drop your digital assets to your page.

The small-pane you see is fondly called the sidekick. What you see inside the sidekick are called components. You can drag and drop components to your page. For example, the Image component. Assume that you want to add an image to the page. First drag and drop the Image component to the page. Double-click the image component. It opens a dialog box, from the Assets pane, drag and drops an image.

The Activity that you performed now is an Author activity. Authors in your organization create or update content. Now let us try to create a new web page. To do that, let me take you to a different console – SiteAdmin.
Type the URL: http://localhost:4502/siteadmin
Select the Geometrixx Demo Site > English. This is the location where you want to create a page. Click New > New Page. Give it a name.
Also, select a template. A template defines the basic layout of your web page.
After creating the page, double-click it to open.
Observe that the page is not really blank. It has provided you with a basic layout. On top, it has provided you with a site icon, search bar, and a navigation bar.

Similarly, at bottom it has given you a couple of links. On your right, you are provided with a small pod with some content. You would have noticed that, these are common to all the pages you create based on a template. Whatever, you saw in the page is content displayed in a specific manner. And, they are called components. Now you have the page. You need to fill the page with information. From the component pane, drag and drop a Text component to the page. Click to select and click to edit.

Type some content. You can continue filling the content by adding different components. For example, image, table, and so on. As I mentioned earlier, this is an Author’s job. And, you would have assumed by now – a developer creates the template and components that an author uses. Site Admin is a web interface Author uses. Similarly, there are some interfaces developer uses, which you will see in the next session.

I hope you are now able to differentiate two main roles in AEM.

To take a recap:

We saw a web interface that authors use frequently: Site Admin. That’s where an author create or update content.

Let us explore the Geometrixx Demo Site.
Double-click Geometrixx Demo Site.
You will see different language codes. These codes represent the same website in those languages.
Move the cursor over English and select Edit.
The page is opened in a new browser window.

The page is in the Edit mode now. It means that you can update the page.

The pane you see on the left is the Asset pane. You can drag and drop your digital assets to your page.

The small-pane you see is fondly called the sidekick. What you see inside the sidekick are called components. You can drag and drop components to your page. For example, the Image component. Assume that you want to add an image to the page. First drag and drop the Image component to the page. Double-click the image component. It opens a dialog box, from the Assets pane, drag and drops an image.

The Activity that you performed now is an Author activity. Authors in your organization create or update content. Now let us try to create a new web page. To do that, let me take you to a different console – SiteAdmin.
Type the URL: http://localhost:4502/siteadmin
Select the Geometrixx Demo Site > English. This is the location where you want to create a page. Click New > New Page. Give it a name.
Also, select a template. A template defines the basic layout of your web page.
After creating the page, double-click it to open.
Observe that the page is not really blank. It has provided you with a basic layout. On top, it has provided you with a site icon, search bar, and a navigation bar.

Similarly, at bottom it has given you a couple of links. On your right, you are provided with a small pod with some content. You would have noticed that, these are common to all the pages you create based on a template. Whatever, you saw in the page is content displayed in a specific manner. And, they are called components. Now you have the page. You need to fill the page with information. From the component pane, drag and drop a Text component to the page. Click to select and click to edit.

Type some content. You can continue filling the content by adding different components. For example, image, table, and so on. As I mentioned earlier, this is an Author’s job. And, you would have assumed by now – a developer creates the template and components that an author uses. Site Admin is a web interface Author uses. Similarly, there are some interfaces developer uses, which you will see in the next session.

I hope you are now able to differentiate two main roles in AEM.

To take a recap:

We saw a web interface that authors use frequently: Site Admin. That’s where an author create or update content.