Dynamic Web 2 Week # 9

Project Update Check

Make sure your Joomla! site work on your local machine and extra credit if on a live site!

Joomla! Essential Training

Please open up "Joomla! 3.3 Essentials: Working with Content" on Lynda.com

Let's watch these together and then discuss what we learned. 

Joomla! Notes

Change in Set of Videos

  • I've found an updated series by the same author, so we'll be using that instead.

Let's Start! 

Please begin by going to the "Getting Started with Joomla!" section of Joomla! 3.3 Essentials: Working with Content

  • Joomla!'s default template is responsive due to its usage of Bootstrap. Note that not all Joomla! templates may be responsive, though. 
  • System -> Global configuration is where t eh major changes for your site, such as title, can be done. Just be sure to save your settings once you're done.

Joomla! Notes

Please begin by going to the "Getting Started with Joomla!" section of Joomla! 3.3 Essentials: Working with Content

  • Global Configuration Settings (continued): Be sure to add the appropriate metadata to your site for SEO. There are a lot of settings, so to see what each one does, simply hover over the label and you'll see a tooltip.
    • When done, be sure to either hit the "Save", "Save and Close", or the "Cancel" button instead of the back button.
  • Media Manager is where you can manage and upload any media content. We installed some sample data, so you should see some stuff here.
    • You can upload media in the media manager by clicking on the upload button
    • Permissions exist for media files and almost every other section as well
    • Detail view shows dimensions of images
    • You can create folders and organize media files how you wish

Joomla! Notes

Please begin by going to the "Getting Started with Joomla!" section of Joomla! 3.3 Essentials: Working with Content

  • CAM (Category Article Menu): Create a category; create an article and add the category to it; create a menu and add the article to the menu
  • Categorization: You can only assign one category to each piece of content
  • You can create content in Content menu
  • Once you have a piece of content created, you can link it to a menu using Menu -> main menus

Discussion

  • Discuss the concepts we just went over and
  • Add your title to the site using Global Configuration settings
  • Add 3 pieces of media content to your site
  • Use CAM to create a category and article, add the category to the article, and add the article to the main menu

Please begin by going to the "Working with Categories" section of Joomla! 3.3 Essentials: Working with Content

  • You can create categories by going to Content -> Category manager. Use the "new" button to create new categories. Alias that gets created is a shortened name for title of category. Categories can be given parent-child relationships
  • Articles under a category can be unpublished in the category manager by unchecking the status checkbox. You can also publish and unpublish multiple articles by checking the checkboxes on the left of the categories and then selecting "publish" or "unpublish". You can also delete categories and articles the same way and the process is similar to Drupal, where the items are moved to the trash and then must be deleted from there. In order to empty trash, select all elements you wish to permanently delete and then click on "empty trash".
  • A sitemap is a list of categories and the content that would go under them. Use a sitemap as a guide for creating the categories and organizing content within them.

Joomla! Notes

Please begin by going to the "Creating Articles and Basic Formatting" section of Joomla! 3.3 Essentials: Working with Content

  • An article can be made in the featured state by clicking on the star icon next to the article in the article manager 
  • TinyMCE is the content editor that exists across most CMS platforms (including Wordpress and Joomla!)
  • You can edit any of your plugins by going to extensions -> plugins. Let's try expanding our TinyMCE by going to extensions -> plugins -> Editor - TinyMCE. Click on the link in the plugins list when you see "TinyMCE"
  • Links can be added by highlighting content and then clicking on the link icon in the TinyMCE. You can make it appear in a different tab by changing the target. 
  • Internal links can be added to an article by clicking on the "article" button on the bottom of the TinyMCE
  • Images already uploaded can be added to an article by clicking on the "Image" button. You can also set some styles using Bootstrap 2 HTML classes. Just edit the code in the code editor view and add the appropriate classes.
  • Captions can be added for images in the same menu as the image
  • "Read more" button can be used by clicking on it within the content editor (TinyMCE)

Joomla! Notes

Please begin by going to the "Creating Articles and Basic Formatting" section of Joomla! 3.3 Essentials: Working with Content

  • Article Manager shows if content is published (green checkmark) or unpublished.
  • Publishing, unpublishing, and trashing articles can be done by clicking on the publish or unpublish buttons or by clicking on the green checkmark or the red icon. You can untrash articles by going to the more tools section and then searching for trashed articles.

Joomla! Notes

Discussion

Go over the concepts we discussed and then

  • Create an article
  • Edit your article with 3 different choices from the TinyMCE
  • Add an external link in your article
  • Add an internal link in your article to the other article you created
  • Add an image and an image caption
  • Publish your article

Joomla! Notes

Please begin by going to the "Creating Basic Menus" section of Joomla! 3.3 Essentials: Working with Content

  • You can create a menu by going to Menus -> Manage -> Add new menu 
    • Menu title (name of menu to see on the page)
    • Menu type (internal name of site that will be used by the program)
    • Description: Description of the menu
  • You can select the menu by going to Menus -> [Name of Menu]
    • Add menu items by hovering over the menu name and then clicking on "Add New Menu Item" or by clicking on the menu and clicking "New"
    • Add the title, type, and link to the menu item.
    • To create a parent-child relationship, go to the menu item and select the Parent item
  • Reordering menu items is just a manner of clicking and dragging them around using the 3 dots on the left of each menu item.
  • Publishing, unpublishing, and trashing menu items follows same procedure as Articles
  • Navigation can be configured by going to Extensions -> Template Manager. Then, be sure to go to options and enable "Preview Module Positions". Next, go to Extensions -> Module Manager and select your menu. Then, go to Position dropdown on right-hand side and select the position. If you want to add bootstrap classes to the navigation, go to "Advanced" and then add the bootstrap classes (be sure to separate them with spaces and start off with a space as well).

Joomla! Notes

Please begin by going to the "Advanced Article Formatting" section of Joomla! 3.3 Essentials: Working with Content

  • Page Breaks can be created in the article tinyMCE by clicking on "Page Break". You can also make the page breaks style differently using the Extensions -> Plugin Manager -> Page Break -> Presentation Style
  • Images can be added within an article by going to the editor section of the article and then clicking on "Images and Links"
  • You can access versions (version control, similar to Git) of an article by clicking on an article and then selecting the "versions" tab. You can go back to any version of an article that was saved by clicking on the check next to the article within the version pop-up and then clicking on "restore"
  • Tags are the same concept as they are in WordPress and Drupal. That is, they help to identify content. Tags can be added by going to the bar on the right hand side of the article content editor screen that says "Tags". Simply type in the tags to create new ones or start typing the name of an existing one. Either way, once you hit enter, the article will be given that tag. Tags can be modified by going to Components -> Tags
  • You can change what level of HTML can be added by different by going to System -> Global Configuration -> Text Filters
  • Inserting Youtube videos can be done by going to tinyMCE and clicking on insert/edit video button. Then, click on the embed button to embed the video.

Joomla! Notes

Please begin by going to the "Advanced Menu Options" section of Joomla! 3.3 Essentials: Working with Content

  • Category Blogs allow you to group categories into a menu item. This can be done by adding a menu item, choosing "category blog" for the menu item type, and then placing the blog under the parent its contained in.
  • Category Lists allow you to group categories into a list type format. That way, users can just select the article that they want. This can be done by adding a menu item, choosing "category list" for the menu item type, and then placing the blog under the parent its contained in. You can add advanced configurations to category lists by going to the menu item -> List Layouts
  • If you only want to show featured articles from a particular category, you can do so by going to menu item -> Layout -> Select Categories
  • If you want to change the layout, in terms of how many columns and rows there are, simply change the # Columns.
  • You can move a menu to the Footer section by create a menu with menu items and then going to module manager to change its position to Footer. 
  • Use menu aliases to have the same link appear multiple times in the same page (for example, in the footer and at the top). Menu aliases can be created by generating a new menu item, selecting "System links" and then going to "Menu item alias"
  • If you want to create a link to an article that doesn't exist in a menu, you can just make the menu item hidden and then link to it in the content editor.

Joomla! Notes

Please begin by going to the "Setting Display Options" section of Joomla! 3.3 Essentials: Working with Content

  • You can hide or show any parts of an article in the System -> Global Configuration -> Articles. You can also set the Read More length here as well.
  • If you want to change the page display information for titles, you can go to the menu item and then select "page display" to change the display options. This also allows you to add page titles, which can be handy for helping users navigate through your site. 
  • If you want to remove some of the tools available (so much stuff!), you can go to System -> Global Configuration -> Articles -> Editing Layout

Project Update

  • Create an additional 3 articles
  • Add 2 custom categories
  • Add 2 of the articles to one of the 2 categories and the remaining article to the other category
  • Add an image to each article
  • Publish the articles
  • Create a Menu
  • Create menu items and link articles to menu items
  • Create a custom position for your menu navigation
  • Watch modules 5, 6, and 7! We will be doing work based on the modules.

Dynamic Web 2: Week # 9

By Omar Patel

Dynamic Web 2: Week # 9

  • 880