Web Design Midterm Review - APPL10302 PDF

Web Design APPL10302 Instructor: Ms. Cappiello APPL10302: Web Design Week 5 - Midterm Review Agenda 1. Week-by-Week Topic Overview 2. Next week/Week 6: Midterm 3. Q & A APPL10302: Web Design Week 5 - Midterm Review Week-by-Week Topic Overview Week 1 - Web Design Fundamentals Week 2 - I...

Web Design APPL10302 Instructor: Ms. Cappiello APPL10302: Web Design Week 5 - Midterm Review Agenda 1. Week-by-Week Topic Overview 2. Next week/Week 6: Midterm 3. Q & A APPL10302: Web Design Week 5 - Midterm Review Week-by-Week Topic Overview Week 1 - Web Design Fundamentals Week 2 - Introduction to WordPress, Web Development WordPress Basics, Part 1 Web Pages Introduction to WordPress Websites WordPress Basics, Part 1 Exploring WordPress Themes Web Design Steps Web Interface Web Navigation Naming Web Files APPL10302: Web Design Week 5 - Midterm Review Week-by-Week Topic Overview Week 3 - WordPress Basics, Part 2 Week 4 - Advanced WordPress WordPress Pages Elements and Principles of Design WordPress Posts Web Colours WordPress Blocks Web Colours in WordPress WordPress Widgets Typography WordPress Menus Typography in WordPress Hyperlinks Layout Layout in WordPress APPL10302: Web Design Week 5 - Midterm Review Week-by-Week Topic Overview Week 5 - Media & Web Accessibility Media for the web Media in WordPress Web Accessibility Web Accessibility in WordPress APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Development Tools Web development tools can include: HTML Web Design Tools (e.g. WordPress) Scripting Languages (e.g. Javascript) CSS (Cascading Style Sheets) …more! APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Pages A document on the world wide web Static web pages Has a a unique URL (Universal Resource Page content is the same every time it Locator) is requested Can be categorized into 2 types of web Page has little user interaction pages: static and dynamic Dynamic web pages Page requires a script and may be different each time it is requested Page has good user interaction APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Websites A collection of web pages that: contain information on related topics can be linked together are under the same web domain (address) Can be a presentation tool, way to communicate, a teaching tool, a marketing tool, etc. APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Design Steps Step 1 - Consider Why, Who, What, Where Before you create a website, think about: What Why What components will you include? Why are you making this website? What will bring your audience back? What is the purpose of the website? Where Who Where will your audience use the site? Who is your target audience? (Laptop, tablet, mobile) APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Design Steps Ensure the visual contents of a site relate to its function. Step 2 - Know the Rules of Web Design A nice-looking design must enforce the You are not the user website functionality. What you understand is not what the Respect Web interface conventions. user will understand. Consider navigation placement, colours, Users are not professionals etc. Users will not understand the features of Example: the login/logout form is a website without your directions. expected to be at top right of a webpage. APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Design Steps Know and respect Web and Internet Typography medium constraints. Choose appropriate fonts and Be aware of emerging web mediums, consistently use serif or sans-serif fonts. colours, bandwidth limitations, etc. Use logical information design Colour Theory Create a logical hierarchy of content. Choose appropriate colours. Example: don’t require the user to A web page should not have more than 3 search for “Turtles” under the colours. navigation item “Cats”. APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Design Steps Step 3 - File Management Locate the images, files, animations, etc. that you might use and upload them. If you are using a hosting location, place your files in your main www directory. It is important that all related files be in the same folder. Example: all images should be in an “images” folder. APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Design Steps Step 4 - Start Designing Use a website design tool such as WordPress, Dreamweaver, Visual Code, Notepad++, etc. and start designing your web pages. Save your work often. If using a hosting location, name the home page “index.html”. APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Interface Applications that users interact with have a user interface (UI). Web-based applications have a web UI. A web interface consists of the structure and elements that allow users to interact with the content and software on a web browser. APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Web Navigation Web navigation refers to how a user navigates a collection of hypertext elements to view web pages in a browser. Web navigation can include user interface elements such as: Menus Linked text Search bars Buttons APPL10302: Web Design Week 5 Midterm Review: Week 1 - Web Design Fundamentals Naming Web Files Best Practices Use all lower case so it’s easier to share the URL Do not have spaces in the file names as they may not work in some older browsers Keep file names short to prevent errors when typing URLs  APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 Introduction to WordPress WordPress is an open source Content Management System (CMS) that allows users to build dynamic websites and blogs. The system has been built using PHP and MySQL (database). WordPress is the most popular blogging system on the web and allows you to update, customize and manage a website from its back-end CMS. APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 Introduction to WordPress What is CMS? A CMS is web-based software that stores all of the data (including: text, images, audio, video, documents, etc.) for your website. A CMS makes it easy to edit, publish and modify a website’s content. WordPress was initially released in 2003. APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 WordPress Basics, Part 1 Features Themes User Management Allows the user to include and Roles available include: Administrator, change themes dynamically. Editor, Author, Contributor, Subscriber. Media Management You can easily upload, organize and manage your website’s media files. APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 WordPress Basics, Part 1 Features Extend with Plugins Search Engine Optimization Several plugins are available Several search engine Plugins provide custom functions & optimization (SEO) tools make features according to the user’s SEO simple. needs. APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 WordPress Basics, Part 1 Features Multilingual Importers Users can translate content into Users can import custom files and their preferred language. content in the form of posts, comments, pages and tags. 11 APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 WordPress Basics, Part 1 Advantages Open-source platform Styles can be changed easily with Themes Posts and Pages are easy to create and edit Many plugins available for fast and reliable website building SEO tools available Effective user management 12 APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 WordPress Basics, Part 1 Disadvantages Plugins can increase the size and speed of the web page. Basic PHP knowledge may be required. Updating the WordPress version can lead to the loss of data, so it’s recommended that you create a backup copy of the website beforehand. It can be difficult to edit and format images and tables. 13 APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 Exploring WordPress Themes Overview WordPress themes are templates that control the design and layout of a WordPress website. Choosing the right theme is crucial for the success of a website because themes affect the site's appearance and user experience. APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 Exploring WordPress Themes Types of Themes There are 2 types of WordPress Themes available: Free themes (may have been created by third-party developers) Paid or Premium themes (these have a cost and are created by third-party developers). Note: Both may include support, updates, and customization options APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 Exploring WordPress Themes Stylesheets (CSS). Functions.php file (PHP functions). How WordPress Themes Work Images and assets. The Theme you install will display your Different Themes offer different content according to the theme’s options for the location of menus, the design. title, tagline, logo, and widgets or The key components of a WordPress blocks, colours, fonts, and other style theme can include: settings using the Customizer and Templates (header, footer, sidebar) theme settings. APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 Exploring WordPress Themes Responsive Design Advanced WordPress Theme Responsive design is the ability of a Customization website to adapt to different screen sizes Advanced WordPress theme (desktop, tablet, mobile). customization includes the use of child This is important for creating a positive themes, CSS modifications, and working user experience with page builders to create more Most WordPress themes incorporate complex layouts. responsive design principles. APPL10302: Web Design Week 5 Midterm Review: Week 2 - WordPress Basics, Part 1 Exploring WordPress Themes Creating WordPress Themes WordPress themes can be installed from the Appearance section of the Wordpress Dashboard or by uploading a Theme ZIP file (must be activated). APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Pages There is no limit to the amount of Pages you can add to your WordPress website. WordPress Pages have a Title and You can create hyperlinks to your Pages Content section You can add Pages to your site’s menu(s) Pages can be used to add non- Page examples can include: chronological content (not arranged by About, Contact, Privacy Policy date). Themes will offer different display options. Pages are used to create standard A specific Page can be set as the site’s content about your site that will remain static Front Page. relevant. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Posts You can add Categories and Tags to Posts WordPress Posts are individual articles or so that users can search for Posts with Blog entries that usually appear on the specific content. Blog Page of your site. Categories: Organize Posts by topic By default, Posts appear in reverse- Tags: Connect Posts using keywords chronological order (newest on top) on You can create hyperlinks to your Posts your Blog’s Home Page. Posts can be added to your site’s menu(s). APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Blocks Blocks are elements used to build Pages and Posts in the WordPress block editor. Common Blocks include: paragraphs, headings, images, galleries, and more. It is possible to customize Block settings, such as text formatting, alignment, and Block-specific options. There are Block plugins that add new types of Blocks to extend functionality. It’s important to use Blocks and experiment with Block settings for effective website customization. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Widgets WordPress Widgets are content modules that can enhance the functionality and design of your WordPress webpages. Depending on your theme, Widgets are small, pre-built modules that perform specific functions and can be added to widget-ready areas of a WordPress theme (usually sidebars, footers, etc.). Common Widgets include: text, categories, recent posts, search, and more. Widgets can display social media accounts (Twitter, Facebook, Instagram, etc). APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Widgets Adding, Customizing & Removing Widgets You can add Widgets to a WordPress site by going to the Widgets area in the WordPress Customizer or Appearance menu. You can also customize Widget settings, including titles, content, and appearance. It is possible to remove Widgets from widget areas. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Menus Overview It is possible to customize a WordPress Website menus are crucial to website Menu’s appearance and structure navigation Depending on the Theme, the Main menu is Menus have the ability to improve user generally a bar located at the top of a experience and site organization WordPress site The Menu is also referred to as the navigation Menus can also be found in the Sidebar or The Menus help visitors find their way around Footer areas your site Menus often contain links to Home, About, Contact and other pages APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Menus Types of WordPress Menus Displaying Menus on your Wordpress There are different types of Menus Website available in WordPress, including: You can assign a Menu to a specific Menu Primary Menus Location on your WordPress website (e.g., Footer Menus, and more, depending on header, footer) through the Menu Settings the theme. option. Theme-specific settings may affect your Menu display. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Menus Customizing WordPress Menus It’s possible to customize WordPress Menus as follows: Add custom links to external websites. Create Sub-menus for dropdown navigation. Assign Menu locations (e.g., Primary Menu, Footer Menu). Add descriptions for Menu items (optional). Note: It’s important to try to keep Menus and Menu items clear and concise. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 WordPress Menus Managing WordPress Menus Best Practices for Creating Menus It is possible to edit, delete, or rename Use descriptive Menu item labels. WordPress Menus. Keep the Menu structure logical. Menu item labels and URLs can be Use Sub-menus for nested content. changed. Note: It’s a good idea to regularly consider Menu hierarchy and user-friendliness, and update and review Menus as the website evolves. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 Hyperlinks A hyperlink (also known as a link or hyper-linked text) can be clickable text (including menu navigation), buttons, and other elements that direct the browser from one page to another A hyperlink can direct the user from one website to another website. Links connect the pages of the world wide web. Links have the power to influence, direct, and guide users. Links can keep visitors on your website by helping them to find more of your content. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 Hyperlinks Internal Links Internal links connect web pages that are a part of one website. These links go in all directions, creating a “web” of links that connect the parts of your website together. When you create and publish a Page or a Post in WordPress a URL is automatically created. These URLs are saved when you use your web browser to “Bookmark” a Page or Post. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 Hyperlinks External Links External links connect web pages that are a part of one website to pages from another website When you create an external link on your site, it has the power to: Contribute to users leaving your site for the other site Attract attention to both your site and the other site Contribute to the other site moving up in the search engine page ranks Encoure others to link to the website APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 Hyperlinks Best Practices 1. Don’t style links 2. Keep links short and specific Don’t bold or underline links, they are Link phrases should be 1 to 4 words, styled by the WordPress Theme. never an entire paragraph or sentence because it’s hard to read. Never underline text on a website, allow the WordPress Theme to style the link. Select words that make you want to select the link. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 4. Call-to-action linked images Hyperlinks You can link an image as a way to visually Best Practices direct someone to navigate to a key web destination (sign up for a newsletter, etc). 3. Don’t use “click here” Don’t use the words “click here” for your 5. Don’t put links in headings links. Incorporate links into the sentence as part Headings are already styled, so they won’t make a link stand out to a user. of the natural flow of reading. Place links in the content so they contrast with other content. APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 Hyperlinks Navigation Tips Avoid dead links (pages that go nowhere) Always provide a link to the Home page Ensure links state where they are going APPL10302: Web Design Week 5 Midterm Review: Week 3 - WordPress Basics, Part 2 Hyperlinks Links in WordPress There are several ways to add links in WordPress, including: Posts Pages Menus Widgets APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Colours Hex Colours Hexadecimal RGB Values The effective use of colour can enhance the Red, green, and blue values converted to visual design and user experience of your hexadecimal and preceded by the # WordPress site. symbol. It’s best to select colours that complement your website's design and branding. https://color-hex.org/ APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Colours in WordPress Customizing colours in WordPress allows you to create visually captivating and engaging websites tailored to your preferences and brand identity. The ability to change the colour for an entire page depends on the theme installed. When viewing Theme colour palette in either the Customizer or Site Editor you should be able to change the background colour for the website. You can specify the background colour of a Block in a Page or Post. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Typography Text Transformation (uppercase, lowercase, etc.) Typography can include the following: Text spacing (line-height, letter-spacing, Font (also known as typeface) etc.) Font style (bold, italic, etc.) Text shadow Font size Text colour Text alignment (left, centre, right, etc.) Text decoration (underline, line-through, etc.) APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Typography Best Practices Choose appropriate fonts Consistently use serif or sans-serif fonts. Do not use too many fonts Have good type hierarchy - pages should have multiple headings that make sense Example: Title/H1 Heading and then H2-H6 heading Have enough contrast between the background colour and text colour Have white space between sections APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Typography in WordPress When editing a Page or Post you use text Block Settings blocks The Block editor contains typography settings to control the text’s appearance in your content. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Typography in WordPress If the typography settings are not visible, Styles Tab. select the Styles Tab. Select the 3 vertical dots to configure the following settings: Font size, Font family, Appearance, Line height, Decoration, Letter case, Letter spacing Note: Certain blocks contain typography settings. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Layout Web pages usually display content in columns Web pages often resemble a newspaper/magazine A web page is usually separated into the following parts: Header Menu Content (may use columns) Footer APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Layout in WordPress You can change the layout using your Theme’s Customize and/or Editor settings When adding a page you can select various pre-made pages with different layouts You can also use certain Block Settings to control the layout of a Page or Post There are various column Blocks available You can nest blocks (blocks within blocks) and set the width, justification (Left, Centre or Right), Orientation and Wrap APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Media for the Web - Images You can add images to your webpage in the following ways: Uploading the image file to your web hosting account in an “images” folder and including the folder location in the “src” part of the HTML tag Adding the image to your Content Management System (WordPress) You need to add alt text and a description for accessibility APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Media for the Web - Images Image Types - Raster Images Raster images are composed of pixels, which are tiny coloured dots. Raster images are best for representing photographs because they can handle complex mixtures of colour. Adobe Photoshop is commonly used for editing raster images. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Media for the Web - Images Examples of vector images include logos and online graphics. Image Types - Vector Images Look at any website and you can see Vector images are made up of points, lines vector images for icons and site logos. and curves that are connected by mathematical formulas. Vector images are infinitely scalable, which means you can make them as big or small as you want without losing quality. Adobe Illustrator is commonly used for creating and editing vector images. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Media for the Web - Images File Types JPEG vs PNG JPEG PNG Joint Photographic Experts Group Portable Network Graphics High-quality photos Logos, web graphics, illustrations Lossy (some image data is deleted in Lossless (no data is lost when compression) compressed) Files tend to be smaller than PNG Files tend to be larger than JPEG Don’t support transparent Transparent backgrounds backgrounds APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Media for the Web - Images Copyright for Images - Captions Captions can be used to describe an image or photograph. Can be used to add image credit and give proper attribution to the original copyright owner. Example: Photo by [Insert Name] on [Insert Website] APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Media for the Web - Video You can add video to your webpage in the following ways: Uploading the video file Adding a link to the video’s URL Streaming the video in an iframe - recommended APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Media for the Web - Audio You can add audio to your webpage in the following ways: Uploading the audio file Adding a link to the audio’s URL APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Media in WordPress Media Library The Media Library contains the images, video, and audio files that you upload to it or to a Post or Page. The Media Library allows you to view, add, edit or delete any media related objects. You can view files in List form or Grid form You can filter the files You can search for files APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Accessibility Web accessibility aims to remove the barriers that make it difficult or impossible for people with varying levels of disability to use the web. WCAG 2.0 The World Wide Web Consortium (W3C) developed web standards for accessibility. These standards are known as the Web Content Accessibility Guidelines, or WCAG 2.0. AODA legislation instructs provincial institutions to adhere to WCAG 2.0 guidelines. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Accessibility AODA Accessibility for Ontarians with Disabilities Act (AODA) is legislation that mandates how businesses and organizations provide accessible services to students, employees and community members with disabilities. The goal of the AODA is for Ontario to be fully accessible by 2025. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Accessibility - Hyperlinks Not be a verb phrase such as "click Link anchor text (text that is selected) here" or "read more” (these are should: meaningless without context) Be brief and meaningful Not open in a new window. It breaks the Provide details when read out of context back button and should only be used in Describe the content of the link (usually special circumstances and with the title of the page advanced warning. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Accessibility - Colour and Contrast Don't rely on colour alone to convey information. Colour contrast needs to be at least 4.5:1; use a contrast checking tool. Foreground (text) and background colours must provide enough contrast to allow colour blind users or those using a monochrome screen to view information. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Accessibility - Page Design and Content Navigation Site is navigable with the keyboard alone. Use HTML Users can tab to move around the page. Avoid having content available only as Ensure your site works without JavaScript. PDF, MS Word, Flash, etc. Tables Resize Tables should only be used for tabular data, Text to be resizable to 200% and still not page layout. readable so those with low-vision can Tables require proper coding for row increase the text size. headers and column headers. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Accessibility - Images Alternative text for images Search engine robots can't "see" images, which necessitates the need for a text alternative for images (alternative text). Writing effective alternative text is important to Search Engine Optimization (SEO). Benefits anyone who doesn't have access to graphics. Max 125 characters Include alternative (alt) text for every image: alt text needs to replace the meaning of image accurately and succinctly. APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Accessibility - Video - Captions and Transcripts Captions and transcripts added to a video: are essentiaI for those who cannot hear or have difficulty hearing the audio. increase view times for users who watch video in a sound sensitive environment. Widen your audience by making it universally accessible for those learning English. YouTube's auto-captions can create mistakes which can cause misrepresentation of your content Be sure to either edit captions generated using auto-captions or add your own captions. Ensure captions are in a separate file and not “burned” into the video for accessibility tools APPL10302: Web Design Week 5 Midterm Review: Week 4 - Advanced WordPress Web Accessibility - Web Content Use plain language. Avoid jargon and abbreviations. If abbreviations are used they need to be expanded on first use on each page or landing point. APPL10302: Web Design Week 5 - Midterm Review Next Week/Week 6: Midterm (30%) There will be 45 questions You cannot go back to a previous question Midterm will be in our regular classroom Question types may include: Midterm will begin at the start of class Multiple Choice (password will be provided) Multiple Answer Uses Respondus Lockdown Browser Fill in the Blank Questions will be based on Week 1 to 4 Matching slides (Week 5 Midterm Review slides) and lectures You will have 70 minutes to complete the Midterm APPL10302: Web Design Week 5 - Midterm Review Q&A