Class 14 @rwdkent Overview Favicon Exercise (15 min) Break (5 - - PowerPoint PPT Presentation

▶
class 14
SMART_READER_LITE
LIVE PREVIEW

Class 14 @rwdkent Overview Favicon Exercise (15 min) Break (5 - - PowerPoint PPT Presentation

Jan 05, 2023 168 likes •609 views

Class 14 @rwdkent Overview Favicon Exercise (15 min) Break (5 min) Pattern Libraries & Style Guides (20 min) HTML/CSS Prototypes Review + Usability Prep Work Content Management Systems (15 min) (1.5 hour) Due Dates Patterns

slide-1
SLIDE 1

Class 14

@rwdkent

slide-2
SLIDE 2

Overview

Favicon Exercise (15 min) Pattern Libraries & Style Guides (20 min) Content Management Systems (15 min) Break (5 min) HTML/CSS Prototypes Review + Usability Prep Work
 (1.5 hour)

slide-3
SLIDE 3

Due Dates

Patterns Part 2 (Review in Class): Next Week 
 Usability Testing Plan + In Class Testing (Turn In In Class): Next Week HTML/CSS Prototypes/Templates: Finals Review Session/Pattern Library/Critiques In Class: Finals Self/Group Evaluation: Finals

slide-4
SLIDE 4

Assignments - Turn in

slide-5
SLIDE 5

Favicon Exercise

https://realfavicongenerator.net

slide-6
SLIDE 6

Style Guides / Pattern Libraries

slide-7
SLIDE 7

What Is A Pattern Library?

slide-8
SLIDE 8

What’s a Style Guide?

slide-9
SLIDE 9

http://style.codeforamerica.org

slide-10
SLIDE 10

http://ux.mailchimp.com/patterns/

slide-11
SLIDE 11

https://standards.usa.gov/

slide-12
SLIDE 12

http://rwdkent.com/patterns/

slide-13
SLIDE 13

http://www.ideabasekent.com/style

slide-14
SLIDE 14

Build for Reuse.

slide-15
SLIDE 15

Must Maintain.

slide-16
SLIDE 16
slide-17
SLIDE 17

How Does This Apply to Content Management Systems?

slide-18
SLIDE 18

3 Options for Publishing Website

Raw HTML Static Site Generator Content Management System Pros Cons

Simplest to do Fast Performance Must write all templates manually Must know HTML to edit Fast Performance Dynamically Created Templates Must use command line to setup Must know HTML/CSS to set up Very easy to edit (once set up) Many templates from which to choose Generally slower performance Require database backend (if custom) A lot of overhead

Ex.

HTML in a code editor Jekyll, Middleman, Cactus WordPress, Drupal, Shopify, Craft, Squarespace
slide-19
SLIDE 19

Open-Source

Drupal Magento Joomla! WordPress Movable Type

slide-20
SLIDE 20

Closed-Source

ExpressionEngine Cascade Craft CMS Perch SharePoint Squarespace

slide-21
SLIDE 21

WYSIWYG Editor

slide-22
SLIDE 22
slide-23
SLIDE 23 Br

Add New Video

Long Title: Short Title: Category: Description: Subcategory: Date Added: Video File: Author(s): Related: Pre-roll Ad: Upload + +
slide-24
SLIDE 24

COPE = Create once, publish everywhere

slide-25
SLIDE 25

How Do You Get Your Content Into HTML/CSS?

slide-26
SLIDE 26

WordPress: Theme

PHP (HTML) Files CSS Files

slide-27
SLIDE 27

Drupal: Theme

PHP (HTML) Files CSS Files

slide-28
SLIDE 28

Craft: Template

PHP (HTML/Twig) Files CSS Files

slide-29
SLIDE 29

Squarespace / WordPress.com, etc.

Closed Source HTML / CSS

slide-30
SLIDE 30
slide-31
SLIDE 31

Hosting Your Website

Publish Over FTP/SFTP/SSH via web host Managed Hosting (SquareSpace etc.) GitHub Pages

slide-32
SLIDE 32

Hosting Your Website

Buy A Domain Name Most if not all hosts will allow you to connect a custom domain name to your website.

slide-33
SLIDE 33

Hosting Your Website

Deployment/Continuous Integration: Host files in a repository (such as GitHub) and have them “deploy” to the web server at certain times, or automatically. Integrates version control with your server in a controlled way to prevent human error. Many companies will use multiple “environments”: Local, Development, Staging and Production

slide-34
SLIDE 34

Responsive Email

slide-35
SLIDE 35 https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33

53% 53%

email opened on mobile devices in 2014.

slide-36
SLIDE 36
slide-37
SLIDE 37

Email is just HTML and CSS. It can be made responsive.

slide-38
SLIDE 38
slide-39
SLIDE 39

Project Hub, Pattern Library & Reviews

http://rwdkent.com/class/assignments/timeline-presentation/

Final Class

slide-40
SLIDE 40

HTML/CSS Templates/ Prototypes (3)

www.rwdkent.com/class/assignments/templates

Final Class

slide-41
SLIDE 41

Testing Assignment Prep

https://rwdkent.com/class/assignments/testing/

Next Class

slide-42
SLIDE 42

HTML/CSS Combined Template Work & Review

Each group/individual should review with me by the end of class today.

slide-43
SLIDE 43

Next Week

In class usability testing + submit testing assignment - must have a spreadsheet prepared for next class. Additionally, your prototype should be in a state ready for testing! In Class Work + Combined Template Review w/ Instructor