SMS - Bachelor - Programme 2015/2016

Écrit par Frédéric Simonet.

Partner EDC
Cursus Bachelor
Course Website Creation : Positioning of the CMS (3 hours) and Workshop (6 hours)
Director Michael Tapiro

Syllabus

Summary :

  • Positioning of CMS in the context of Web 2.0.
  • Positioning of CMS in the context of webmarketing.
  • Positioning of CMS in the context of project management.
  • Key concepts of Joomla : category-article, menu and template.
  • Workshop Joomla : content, menu and photos integration.

Training material : Google Drive Training Document [fall-back]

Demo : Joomla Website [fall-back]

Joomla Websites[MAVG]

Groupe A1-A2 : user[11-20].plateforme01-yws.fr

Groupe B1-B2 : user[21-30].plateforme01-yws.fr

Fall-back environments [SITD] : user[01-10].plateforme06-yws.fr

Website Architecture

Homepage, sections and articles :

— Homepage "My favorite Sport"

— Section "My Favorite Players"

— Subsection "English Players"

— Article "English Player 1"
— Article "English Player 2"
— Article "English Player 3"

— Subsection "German Players"

— Article "German Player 1"
— Article "German Player 2"
— Article "German Player 3"

— Subsection "French Players"

— Article "French Player 1"
— Article "French Player 2"
— Article "French Player 3"

— Article "Terms of Use"

Content

Homepage, sections and articles pseudo content :

[Introduction]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nisi non augue vestibulum pulvinar. Morbi purus quam, tristique vitae blandit a, ultricies vitae orci. Ut imperdiet odio vel feugiat euismod. Sed auctor sollicitudin ullamcorper. Donec quis interdum ipsum. Donec condimentum sapien at felis convallis commodo. Vestibulum ex erat, porta non malesuada sit amet, aliquet sit amet neque. Suspendisse in urna eget leo sagittis fringilla. Sed nec aliquam nisi. Nulla pharetra massa neque, congue dictum nisi faucibus elementum. Nam vitae nunc at elit volutpat faucibus. Nullam finibus, lacus id ornare placerat, est turpis fringilla magna, ac suscipit est elit vitae mi. Aenean sapien turpis, egestas ac elit convallis, consectetur commodo diam. Pellentesque sit amet mattis justo. Cras vitae consequat sem.

First Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nisi non augue vestibulum pulvinar. Morbi purus quam, tristique vitae blandit a, ultricies vitae orci. Ut imperdiet odio vel feugiat euismod. Sed auctor sollicitudin ullamcorper. Donec quis interdum ipsum. Donec condimentum sapien at felis convallis commodo. Vestibulum ex erat, porta non malesuada sit amet, aliquet sit amet neque. Suspendisse in urna eget leo sagittis fringilla. Sed nec aliquam nisi. Nulla pharetra massa neque, congue dictum nisi faucibus elementum. Nam vitae nunc at elit volutpat faucibus. Nullam finibus, lacus id ornare placerat, est turpis fringilla magna, ac suscipit est elit vitae mi. Aenean sapien turpis, egestas ac elit convallis, consectetur commodo diam. Pellentesque sit amet mattis justo. Cras vitae consequat sem.

Second Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nisi non augue vestibulum pulvinar. Morbi purus quam, tristique vitae blandit a, ultricies vitae orci. Ut imperdiet odio vel feugiat euismod. Sed auctor sollicitudin ullamcorper. Donec quis interdum ipsum. Donec condimentum sapien at felis convallis commodo. Vestibulum ex erat, porta non malesuada sit amet, aliquet sit amet neque. Suspendisse in urna eget leo sagittis fringilla. Sed nec aliquam nisi. Nulla pharetra massa neque, congue dictum nisi faucibus elementum. Nam vitae nunc at elit volutpat faucibus. Nullam finibus, lacus id ornare placerat, est turpis fringilla magna, ac suscipit est elit vitae mi. Aenean sapien turpis, egestas ac elit convallis, consectetur commodo diam. Pellentesque sit amet mattis justo. Cras vitae consequat sem.

Roadmap

Roadmap of content, menu and photos integration :

  1. Update the name of the website and enter his tagline.
  2. Create the homepage article.
  3. Update the default "Home" link.
  4. Create the top level category.
  5. Create the subcategories.
  6. Create the remaining articles and, concerning players, assign them to their categories.
  7. Add links in the main menu according content hierarchy.
  8. Hide both print and email icons for the homepage article.
  9. Hide metadata for homepage article.
  10. Insert your favorite player photo within the relevant article.

Step 1

Update the name of the website and enter his tagline :

  1. Access Extensions/Templates.
  2. Click on "Beez3 - Default" link.
  3. Activate "Advanced" tab.
  4. Go to "Site Title" textbox ; replace "Joomla" with "My Favorite Sport".
  5. Go to "Site description" textbox ; enter "Tagline of my Favorite Sport".
  6. Click on "Save & Close".
  7. Visit front-office and refresh content (F5 keystroke to be pressed).

Step 2

Create the homepage article :

  1. Access Content/Articles/Add New Article.
  2. Go to "Title" textbox ; enter "My Favorite Sport".
  3. Go to the text editor ; click on "Source code" icon (<>).
  4. Copy and paste the content ; click on "OK".
  5. Separate headers and paragraphs.
  6. Apply "Header 2" format to both first and second headers (visit "Paragraph" or "Format" listboxes).
  7. Click on "Save & Close".

Step 3

Update the default "Home" link :

  1. Access Menus/Main Menu.
  2. Click on "Home" link.
  3. Go to "Menu Item Type" label ; click on "Select" ; open "Articles" panel ; select "Single Article" menu item type.
  4. Go to "Select Article" label ; click on "Select" ; select "My Favorite Sport" article.
  5. Click on "Save & Close".

Step 4

Create the top level category :

  1. Access Content/Categories/Add New Category.
  2. Go to "Title" textbox ; enter "My Favorite Players".
  3. Copy and paste content introduction according step 2 (both tasks 3 and 4).
  4. Click on "Save & Close".

Step 5

Create the "English Players" subcategory :

  1. Click on "New [category]".
  2. Go to "Title" textbox ; enter "English Players".
  3. Copy and paste content introduction according step 2 (both tasks 3 and 4).
  4. Go to "Parent" list box (to the right, at the top) ; select "My Favorite Players" category.
  5. Click on "Save & Close".

Repeat the process to create "German Players" and "French Players" subcategories.

Step 6

Create the "English Player 1" article :

  1. Access Content/Articles/Add New Article.
  2. Go to "Title" textbox ; enter "English Player 1".
  3. Enter content according step 2 (tasks 3-6).
  4. Place the cursor at the beginning of the first header ; go to the third tool bar ; click on "Read More" icon.
  5. Go to "Category" list box (to the right, at the top — under "Status" list box) ; select "English Players" category.
  6. Click on "Save & Close".

Repeat the process to create the remaining articles.

Step 7

Create the "My Favorite Players" link :

  1. Access Menu/Main Menu/Add New Menu Item.
  2. Go to "Menu Title" textbox ; enter "My Favorite Players".
  3. Go to "Menu Item Type" label ; click on "Select" ; open "Articles" panel ; select "List All Categories" menu item type.
  4. Go to "Select a Top Level Category" list box ; select "My Favorite Players" category.
  5. Activate "Page Display" tab.
  6. Go to "Show Page Heading" list box ; select "Yes".
  7. Go to "Page Heading" textbox ; enter "My Favorite Players".
  8. Activate "Options" tab ; disable "Show Title" option, select "Hide".
  9. Click on "Save & Close".

Create the "English Players" link :

  1. Click on "New [Main Menu Item]".
  2. Go to "Menu Title" textbox ; enter "English Players".
  3. Go to "Menu Item Type" label ; click on "Select" ; open "Articles" panel ; select "Category Blog" menu item type.
  4. Go to "Choose a Category" list box ; select "English Players" category.
  5. Go to "Parent Item" list box (to the right, at the top — under the "Menu" list box) ; select "My Favorite Players" item.
  6. Activate "Page Display" tab ;
  7. Go to "Show Page Heading" list box ; select "Yes".
  8. Go to "Page Heading" textbox ; enter "My Favorite English Players".
  9. Activate "Category" tab ; enable "Category Description" option ; select "Show".
  10. Activate "Blog Layout" tab ; go to "Columns" text box ; enter "1".
  11. Click on "Save & Close".

Repeat the process to create "German Players" and "French Players" links.

Create "English Player 1" link :

  1. Click on "New [Main Menu Item]".
  2. Go to "Menu Title" textbox ; enter "English Player 1".
  3. Go to "Menu Item Type" label ; click on "Select" ; open "Articles" panel ; select "Single Article" menu item type.
  4. Go to "Select Article" label ; click on "Select" ; select "English Player 1" article.
  5. Go to "Parent Item" list box ; select "English Players" item.
  6. Activate "Page Display" tab.
  7. Go to "Show Page Heading" list box ; select "Yes".
  8. Go to "Page Heading" textbox ; enter "English Player 1".
  9. Activate "Options" tab ; disable "Show Title" option, click on "Hide".
  10. Click on "Save & Close".

Repeat the process to create the remaining links pointing to articles.

Step 8

Hide both print and email icons for the homepage article :

  1. Access Menus/Main Menu.
  2. Click on "Home" link.
  3. Activate "Options" tab.
  4. Disable "Show Print Icon" option, click on "Hide".
  5. Disable "Show Email Icon" option, click on "Hide".
  6. Click on "Save".

Step 9

["Home" link"] Hide metadata for homepage article :

  1. Disable "Show Author" option, click on "Hide".
  2. Disable "Show Category"option, click on "Hide".
  3. Disable "Show Publish Date" option, click on "Hide".
  4. Disable "Show Hits" option, click on "Hide".
  5. Click on "Save & Close".

Step 10

Add one photo of your favorite player :

  1. Download any photo of you favorite player.
  2. Access Content/Media.
  3. Click on "Upload".
  4. Click on "Parcourir".
  5. Select your photo.
  6. Click on "Start Upload".

Insert your photo within the relevant article :

  1. Access Content/Articles.
  2. Click on the relevant article.
  3. Place the cursor at the beginning of the content, press key enter and place again the cursor at the top.
  4. Go to the third tool bar ; click on "Image" icon.
  5. Select your photo ; click on "Insert".
  6. Click on "Save & Close".