Search Results

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 development within a CMS environment (Content Management System). Students learn how to install a CMS; work on a local server and hosted server for development; enhance the site functionality with plugins, widgets, and themes; customize the appearance of the site to meet brand identity 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 application of CSS, images, graphics, fonts, colors, and layout design to reflect and uphold an established visual brand identity. CSLO #3: Troubleshoot common issues related to working with a Content Management System, including software updates, creating backups, and other technical issues. CSLO #4: Evaluate final sites through class discussions, self-assessment, and peer reviews, analyzing technique, composition, brand and aesthetics, technical proficiency, and other project criteria. Include notes on features of usability and user experience. CSLO #5: Demonstrate an understanding of legal considerations, copyright law, and ethical asset resourcing when designing for media industries.  Effective Term Fall 2025 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 and the benefits and drawbacks of their use, including the 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, including 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 with an emphasis on design patterns and usability including user interface design (UI) and user experience design (UX).  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. 18. Evaluate and reflect on the design attributes of the web products, including visual and aesthetic elements, the user interface, and the user experience.  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. Install a CMS on a hosted server and properly configure it for usability and security. 5. Create a custom navigation menu to assist users in finding content on the site, paying attention to design patterns and usability principles.  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 assets such as colors, fonts, and visual assets.  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. Set up 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 for accessibility, functionality, and usability.  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's 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, specific, 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 given a Creative Brief and then asked to build a project to support the client/project goals. Students will then work through the design and development process: identifying the target audience, along with their expectations and patterns; drafting a site plan and style guide to direct the design; sourcing and creating the desired design elements including graphics, images, fonts, and colors that support the aesthetic; utilizing the CMS platform properly; adding, formatting and styling the content using custom CSS; applying methods to increase accessibility, usability and search engine optimization (SEO); incorporating a minimum of one plugin and one widget; archiving 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 outlined for the project, the effectiveness of design based for the intended audience and outcome; and proper use of technical systems and software. Repeatable No Methods of Instruction Laboratory Lecture/Discussion Distance Learning Lab: The instructor will present a lecture on the topic of Child Theming, which will address the pros and cons, common issues, and its role in the development of custom CMS-based websites. The instructor will then demonstrate the process of working with a child theme as the starting point for a customized site design. Students will follow the steps to download and edit the child theme to create a custom design. After the design has been modified, the students will apply the theme to the site contents via the CMS. Lecture: 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 and visible. After the lecture, students will be asked to take a few minutes to identify the benefits and drawbacks of each development environment, and then share their responses with the class during a group discussion. The instructor will take notes in front of the class, logging the pros and cons shared by the students. Distance Learning 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 share this result with the class. 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 "The difference between pages and posts, and when to use each one," in WordPress for Beginners. Next, draft a short response to the reading in which you outline the use case for each content type and how the two models will fit into your final project for the class. 2. Read the article from Medium.com titled "Why Every WordPress Developer Should Learn Basic UI/UX Design Skills First" by Maureen Gee. After completing the reading, share how you are addressing the section of the article titled "The Power of Empathy: Putting Yourself in the User’s Shoes" in your final site project for this class. Use specific terminology from the reading and from our course content to strengthen your submission and demonstrate your understanding of empathy and user experience in product design. 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 to evaluate the user interface and user experience design (UI/UX). Identify good design choices, 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's goals and brand identity in voice, aesthetic and content? Did the designer fully integrate the visual identity into the site so that it transcends the template? 3) Does the site function properly so that the user experience (UX) is fluid: no 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 WordPress: The Missing Manual Author: McDonald, Matthew Publisher: O'Reilly Publication Date: 2020 Text Edition: 3rd Classic Textbook?: No OER Link: OER: Drupal 10 Development Cookbook Author: Glaman, Matt and Kevin Quillen Publisher: Packt Publishing Publication Date: 2023 Text Edition: 3rd Classic Textbook?: No OER Link: OER: WordPress for Beginners 2024: A Visual Step-by-Step Guide to Mastering WordPress Author: Williams, Andy Publisher: Self-Published Publication Date: 2023 Text Edition: 1st Classic Textbook?: No OER Link: OER: Other materials and-or supplies required of students that contribute to the cost of the course.

Applied Art and Design is an academic discipline which focuses on the principles and practical applications of art, design, photography, computer graphics, imaging and animation. Study of the foundations of design, creative problem solving, portfolio development and internship experiences, all prepare students for transfer programs and career opportunities. Within the AA/AS degree or certificate options, students may concentrate in Graphic Design, Illustration, or Multimedia. Students who successfully complete the Applied Art and Design major can expect to find entry level employment in such areas as digital illustration, graphic design for print and internet, multimedia, animation, photographic retouching and pre-press operation.