Catalog Description

Prerequisite: Completion of AAD 85 with grade of "C" or better
Advisory: Completion of AAD 86 with grade of "C" or better
Hours: 90 (36 lecture, 54 laboratory)
Description: Intermediate level course in front-end Web development and design with a focus on using CMS (Content Management Systems). Students learn how to install a CMS; work on a local server for development; enhance the site functionality with plugins, widgets, and themes; customize the appearance of the site to meet brand requirements; manage visitor interactions; and manage updates and security issues. (CSU)

Course Student Learning Outcomes

  • CSLO #1: Prepare a workflow identifying the required technical applications for developing a Content Management System website on a local server.
  • CSLO #2: Implement custom design solutions while working in a Content Management System through the use of CSS, images, graphics and typography.
  • CSLO #3: Troubleshoot common issues related to working with a Content Management System, including software updates, creating backups and technical issues.

Effective Term

Spring 2021

Course Type

Credit - Degree-applicable

Contact Hours

90

Outside of Class Hours

72

Total Student Learning Hours

162

Course Objectives

Lecture Objectives:
1. Identify the purpose and use of a CMS including benefits and drawbacks of their use, including use of a CMS for a blog or as a more traditional website or eCommerce site.
2. Demonstrate an understanding of how a CMS differs from a static website in build and usage.
3. Illustrate the roles of various technologies used in a CMS, such as PHP, MySQL, Apache, HTML and CSS and what their roles are in development.
4. Define a workflow illustrating how to install a CMS on a local server, including file management, working with a database, and outlining common pitfalls.
5. Define the role and purpose of interface elements for site development.
6. Identify the uses of custom navigation in a CMS site.
7. Compare and contrast posts and pages and the usage of each.
8. Compare and contrast tags, categories and the usage of each.
9. Compare and contrast plugins and widgets and the usage of each.
10. Differentiate between themes, child themes and custom themes and outline how to customize a theme.
11. Assess the uses of the Editor Toolbar and the HTML editor panel as methods for adding content.
12. Evaluate the use of media elements in a CMS, such as videos and images including issues related to file type, file size, making images accessible and search engine friendly.
13. Interpret user profiles to limit and assign roles to content creators and managers.
14. Summarize methods for managing interaction from site visitors, including comments and other forms of input.
15. Analyze processes for keeping a site secure.
16. Draft a process for backing up data and site content.
17. Prepare a workflow for archiving, exporting, uploading and testing a site on a remote server.
Laboratory Objectives:
1. Model the various uses of a CMS and include information on benefits and drawbacks of each usage, such as creating a website, a blog or an e-commerce site.
2. Download and install a CMS locally.
3. Download and install a local server that uses PHP, MySQL and Apache, and configure it to access the CMS software for local development.
4. Work effectively with the CMS user interface to access settings, create content and manage content.
5. Create a custom navigation menu to assist users in finding content on the site.
6. Build a site that uses static pages as well as posts.
7. Develop tags and categories that are effective in their organizational and hierarchical use.
8. Draft text content and format using available tools, as well as using the HTML editor.
9. Install a theme, change themes, create a simple child theme and customize a theme with brand-specific outcomes.
10. Source, vet, install and apply widgets and plugins to extend the functionality of the CMS.
11. Select, edit, upload and manage the use of media elements for a CMS site; include the application of ALT text, titles, descriptions, file size and file type.
12. Setup user profiles in the CMS.
13. Create an area on the site where site visitors will interact, such as a comments section, a form or an area for media submissions and manage the content effectively.
14. Practice security protocols to ensure content and information is protected.
15. Create ongoing backups of the site during development.
16. Export, upload and test a live site on a remote server.
17. Prepare a workflow for securely updating plugins, widgets, themes and platform software.

General Education Information

  • Approved College Associate Degree GE Applicability
    • CSU GE Applicability (Recommended-requires CSU approval)
      • Cal-GETC Applicability (Recommended - Requires External Approval)
        • IGETC Applicability (Recommended-requires CSU/UC approval)

          Articulation Information

          • CSU Transferable

          Methods of Evaluation

          • Classroom Discussions
            • Example: Students will participate in class critiques. Prior to the critiques, the class will decide on the topics that they believe are relevant to the critique and project and will help to define the rules of critique. Then the group will visit and view each student website and share feedback with the class based on the topics and rules outlined in advance. Students will be expected to use their critical thinking skills to deliver thorough, thoughtful and constructive criticism that will help each of the students improve their design skills.
          • Objective Examinations
            • Example: Mid-term test question: "Explain the following terms as they relate to implementing a CMS: PHP, MySQL, Apache, Wordpress." Students will be evaluated based on accuracy of answers, specificity of terminology and completeness of response.
          • Projects
            • Example: Students are assigned at least one CMS-based website project in which they are responsible for making a Creative Brief; creating the desired design elements including graphics and images; utilizing the CMS platform properly; adding, formatting and designing the content; controlling consistent design presentation throughout using custom CSS; applying methods for increasing accessibility, usability and search engine optimization; use of at least one plugin and one widget; creating a backup of the site contents; and finally uploading the website via FTP to a remote server. Students will be evaluated based on their completion of, and adherence to the guidelines and requirements; the effectiveness of design based on intended audience and outcome; and proper use of technical systems and software.

          Repeatable

          No

          Methods of Instruction

          • Laboratory
          • Lecture/Discussion
          • Distance Learning

          Lecture:

          1. The instructor will present a lecture on the differences between working on a local server (localhost) and working on a remote server where the site is live. After the lecture, students will be asked to take a few minutes to identify the benefits and drawbacks of each method and then share their responses with the class during discussion.
          2. The instructor will lecture and demonstrate on how to search for, vet, download and install a plugin for the CMS. The students will then be responsible for applying the lesson for their own website using the same method, but for a different plugin.

          Distance Learning

          1. The instructor will provide a lecture presentation and accompanying tutorial on modifying child themes in a Content Management System (CMS), including how to access the themes, customize the themes and then apply the theme to a new Website. Students will then be asked to follow the tutorial on modifying a child theme and applying it to a Website. Students will update their website with the modifications completed and provide a link via the LMS. In addition, students will then respond to prompts with written submissions to share where they succeeded and where there is room for growth in their practice.

          Typical Out of Class Assignments

          Reading Assignments

          1. Read chapter from text on code overview in Professional Wordpress: Design and Development. Write a short response to the reading in which you outline a workflow that covers configuration requirements and options. 2. Read chapter from text on Plugins, in Smashing Wordpress: Beyond the Blog. Write a short response to the reading in which you compare and contrast regular plugins, drop-in plugins and must-use plugins. In addition, explain what it means to "use hooks" as a way to incorporate a plugin.

          Writing, Problem Solving or Performance

          1. Create a workflow that outlines the process of installing and working on a Wordpress site locally. This workflow should include the required software applications and their uses as well as a standardized process to take one from download and installation all the way up through delivering the site contents to the remote server. 2. Visit and critique three of your peers' websites, highlighting positive areas as well as areas for improvement. Use "but" and "because" to give concrete and critically considered feedback. Focus your critiques on the following: 1) Is the site easy to navigate? Can you intuitively find the content you're looking for through the use of menus, tags and/or categories? 2) Does the site design reflect the client goals and branding? Did the designer fully integrate the branding into the site so that it transcends the template? 3) Does the site function properly so that there aren't errors, broken links, missing images or other technical issues?

          Other (Term projects, research papers, portfolios, etc.)

          1. Design and develop a website using Wordpress for an assigned client. The website should include a blog and a minimum of two pages with unique layouts and content related to the client and their goals as summarized in the creative brief. A child theme is required to ensure that the branding is clear and recognizable. In addition, a functioning form, an image gallery and comments must be enabled. Upload the site to a remote server for evaluation. 2. Evaluation of the project will be based on meeting the minimum requirements as outlined above. In addition, attention to branding concerns will be evaluated. Error free websites that function properly online are expected.

          Required Materials

          • Professional WordPress Design and Development
            • Author: Williams, Brad; Damstra, David; Stern, Hal;
            • Publisher: Wrox
            • Publication Date: 2015
            • Text Edition: 3rd
            • Classic Textbook?: No
            • OER Link:
            • OER:
          • Smashing Wordpress: Beyond the Blog
            • Author: Hedengren, Thord D.
            • Publisher: Wiley
            • Publication Date: 2014
            • Text Edition: 4th
            • Classic Textbook?: No
            • OER Link:
            • OER:

          Other materials and-or supplies required of students that contribute to the cost of the course.

          Web hosting account.