GD 67 Class 08 + 09

Class 08 Topics: Midterm Project presentations

Class 09 Topics: Using WordPress, WordPress Installation, Responsive WordPress themes.

Announcements

  • Be sure to post your work to your WordPress process blog so I can give you credit for the work you’ve completed so far.
  • Bring all your work with you to class every week.

Class 08


Group Presentations – April 23

Wireframes: Casey Caputo, Jacqueline Pearson, Gaby Velasquez 


Regarding Extra Credit

EXTRA CREDIT: Build one of the wireframes in Bootstrap (or any other framework) and post to the class server.

The example below was not built in Bootstrap but it’s an example of a “wireframe” prototype.

Example of Responsive “Wireframe” Prototype

Alima Pure Cosmetics Responsive Prototype
http://www.everythingaboutweb.com/classes/examples/midterm-flexible-queries/final_web/

Please note: Make your images around twice the size needed in order for the images to scale and respond “responsively.” For example, if your footer image is 960 pixels in width, create a grey box for the footer that is 1900 pixels in width. You may allow the height to scale accordingly so the image will be larger in height also.


Midterm Presentations

Midterm Presentations will be Thursday, April 23. 

Presentations are an opportunity to receive feedback from others. Always be prepared to talk about your design process and what choices you’ve made with your design.

Here’s a few things to talk about :

  1. What are the issues and problems with the current SMC Design Technology Department  website? How did your client survey and competitive analysis uncover some of these issues? Talk about the needs and objectives of the client (SMC) and how a redesign can serve these needs. (Client survey, Competitive Analysis)
  2. Who are the primary, secondary and tertiary users for the SMC Design Technology Department website? How did your personas help to define these different needs? How can a design appeal to these different user groups? (Personas)
  3. What is the scope of the redesign project? What are the most important tasks in the redesign? What are the most important features to add in the redesign? (Communication/Project Brief)
  4. What was your proposed estimate and schedule for the redesign? How much will the redesign cost and how much time will it take? Tell us more about how you determined both the cost and timing. What could cause the project to cost more or take more time? (Estimate + Schedule)
  5. How did you reorganize the website and why? Tell us how you reorganized the content the why. Did you remove any sections? Did you add anything new? (Site map)
  6. What is the most important content for the home page? How did you re-think the home page? Why is your idea a better solution? How does the content on the home page appeal to the different user groups? (Wireframes)

Class 09


Visual Design

Complete Design comps for two pages of the SMC Design Technology Department website redesign (Home page + landing page). You’ll need to complete a design comp for smartphone, tablet and desktop (all three for each page).

Keep in mind the Basics of Web Design:

  1. The Grid (Use this Grid, or you can find your own)
  2. Basic Design Principles (composition, balance, white space, proportion etc.)
  3. Color
  4. Typography (Keep in mind: hierarchy)
  5. Navigation

Reminders

  • Keep in mind the goals and objectives of the College and also the needs of the Users.
  • Refer to your wireframes. Your design should support these although they don’t need to follow the wireframe exactly. Look at responsive websites here: http://mediaqueri.es/

More on Retina Display
http://classes.jamiecavanaugh.com/grdes/gd-75/gd-75-class-10/

Lancaster University
http://www.lancaster.ac.uk/


Review Final Project

http://classes.jamiecavanaugh.com/grdes/gd-67/gd-67-final-project/

Final Project Teams

  1. Vote for a team leader
  2. Select a name for your “creative studio” and create a WordPress.com site for your studio.

Self-hosted WordPress (WordPress.org)

Resources

WordPress.com vs. Self-Hosted WordPress – What You Need To Know
How to Choose the Best WordPress Hosting

WordPress.com versus WordPress.org


WP.org vs WP.com from WooThemes on Vimeo.


If you choose to host WordPress on your own, you will need to do the two following things:

1. Purchase a Domain Name

The first step to creating a website is to choose a domain name (www.domainname.com) for your site.

Before you start working on a website, be sure to check if a particular domain name is available. Use a “Find a Domain” feature on a website like Network Solutions. Here you can check too see if a potential domain name is available.

In order to self-host WordPress, you’ll need to register your own domain name and purchase a web hosting plan.

Here’s my advice:

  • I recommend you secure domain registration with an ICANN-Accredited Registrar. If you don’t want to sift through the hundreds of companies, you may want to consider Network SolutionsGo Daddy, Bluehost or Dreamhost.
  • The big difference between companies such as Network Solutions and Go Daddy is price and service.
  • Registering a domain name with Network Solutions costs more than registering a domain name with Go Daddy. Network Solutions has excellent customer service and has been around forever.
  • But GoDaddy is more economical and GoDaddy’s customer service has been impressive recently.
  • Feel free to register your domain name at a different company than the three given above. These are my recommendations based on the fact that I’ve hosted websites with these three companies. Whichever company you choose, make sure the registrar you’ve chosen is ICANN-Accredited and you know someone who’s had a good experience with the company.

2. Purchase Web Hosting

There are hundreds of web hosting companies. Be sure to pick one which provides 1-Click Installs for WordPress. Most of the major web hosting companies do. Bluehost, Dreamhost, Media Temple, GoDaddy all do.

What is  1-Click Self Installation?

1-Click installation is an easy way to install WordPress using your own domain name and web hosting.

1-Click Self Installation Bluehost


1-Click Self Installation DreamHost


1-Click Self Installation Media Temple


Appearance

WordPress uses a database to manage/store our content, one of the nice things about it is that we can change the appearance of this information relatively quickly by using a theme, or creating our own. We can browse through the library of themes to choose a new look for our website. To switch themes:

Changing Themes

  • Browse for the theme using the search or navigation.
  • Notice you can either activate or preview the theme.
  • After you activate the theme, view your site and its new appearance.

In general when choosing themes we want to find a theme that has the general structure of how we want the layout for our website.

Things to consider when selecting a theme – Does the theme need to have the following features?

  • One, two, three, or four columns
  • Right or left sidebar
  • Custom and flexible headers
  • Custom background
  • Fixed, Flexible, or Responsive Width
  • Custom menu
  • Featured Images
  • Post formats
  • Theme Options

Responsive WordPress themes

A responsive theme fully adjusts to the size of the screen, even changing the layout to make the best use of space, so your posts will be easy to read on phones and tablets as well as full-size computers. Many WordPress themes are already responsive, and all new releases of themes will be.

Go to Appearance > Themes > then Activate.

In Appearance notice the following:

Premium Themes

WordPress.com
Add more options for site customization, exclusive designs, and support direct from theme authors with a Premium Theme upgrade. Pricing for each theme can be found under the Premium tab in the Appearance → Themes page of your dashboard. Premium themes are priced per blog, for the lifetime of that blog.

Self-hosted WordPress.org
 Free WordPress themes

Premium themes (to install on self-hosted site)*

The sites below offer premium themes from $30 – $60 for a theme, or bundle of themes

Theme Forest: http://themeforest.net/category/wordpress 
Themify: http://themify.me/themes 
Elegant Themes: http://www.elegantthemes.com/
Woo Themes: http://www.woothemes.com/

Responsive WordPress Themes

http://www.webdesignrazzi.com/2014/wordpress-education-university-themes/
http://www.scratchinginfo.com/best-premium-wordpress-themes-2014/
http://speckyboy.com/2014/03/10/free-responsive-wordpress-themes/
http://mashable.com/2013/03/08/responsive-wordpress-themes/
http://responsivethemes.org/
http://www.tripwiremagazine.com/2013/02/responsive-wordpress-themes.html

Child Themes

Why use a Child Theme?
If you modify an existing theme and it is updated, your changes will be lost. With a child theme, you can update the parent theme (which might be important for security or functionality) and still keep your changes.

More information:
http://cyberchimps.com/responsive-theme/
http://cyberchimps.com/guide/child-theme-example/

More about Child Themes
http://codex.wordpress.org/Child_Themes


WordPress Topics

  • WordPress.com versus WordPress.org
  • Logging in to WordPress
  • The Dashboard
  • Creating Post versus Pages, Appearance
  • Modifying Themes
  • Widgets
  • Navigation Menus
  • Media Library
  • Inserting a video
  • Plugins
  • Resources
  • How WordPress works

Logging in to WordPress

Go to wherever your site is installed.
Or for this class:

http://gd67.smcgrdes.com/section_4252/wordpress/yourlastname/wp-admin

Note: that it is the location of the WordPress site with “/wp-admin” added to the end of the URL.

You’ll see the User and Password login window:

Wordpress Admin Login

You should have a user name and password from when you first set up your blog. (When you install, be sure to write down the username and password!)

For this class:
Username: admin
Password: WebDev4_Smc

OK, once we have that’s let’s sign in.

Let’s change some settings right away:

Exercise 1

1. Change site title, tag line, and email:
Settings > General > Site Title (change to Santa Monica College), Tag line, Email

2. Change admin email to your own:
Users > Admin > Change Email

The Dashboard

Then we see the dashboard interface for WordPress:

Wordpress Back Office Interface

Content Editing Tip #1

Edit WordPress using two browser tabs. One for your admin/dashboard panel, and another to view your site. Make your changes in one tab, and refresh the other tab to check it out. Simple enough, but not always readily apparent.


Creating Post versus Pages

Creating/Editing Posts

Quickpost: Available from the dashboard screen this allows to quickly create new post.

Create New Post: under the left hand menus of the dashboard we click POSTS and then there will be a button at the top of a new screen that says “Add New” Click it and you will be able to create a new post and modify content.

Creating Pages

Sometimes we want information on our sites not to appear in dated or time stamp entries so for this we create pages. To create pages, in the sidebar menu of your WordPress dashboard click the PAGES Link and it will take you to a menu where at the top there is a button that says “Add New” Click it and you should be taken into a new page, where you can set the title and modify content similarly to a post.

Content Editing Tip #2

In the visual editor, when you want a line to end, hit SHIFT + RETURN this gives a soft return/line beak, if you want a hard return(return with more space between lines) say at the between two paragraphs just hit RETURN. Just like a typewriter or word processor.

Setting a Static Homepage

The default setting for WordPress is to have the Blog with it’s chronological posts as the first thing we see when we come to a site. Often times though we want there to be a static page and then a link to the blog/posts. Fortunately without to much hassle we can set it up this way.

http://codex.wordpress.org/Creating_a_Static_Front_Page

Set permalinks

Settings > Permalinks > Custom structure
/%postname%/

This will give the page names the name of your post.

Exercise 2

1. Quick Edit:  Sample pages and Sample posts: change to “Draft.”
2. Settings > Reading > Front page displays: change to “A static page.”
3. Turn off comments using Quick Edit.
4. Add other pages
5. Set permalinks


Appearance

WordPress uses a database to manage/store our content, one of the nice things about it is that we can change the appearance of this information relatively quickly by using a theme, or creating our own. Much like plug-ins we can search via Google or on the WordPress Theme directory. To switch themes:

Click the Appearance tab in your Dashboard menu. You’ll see two tabs at the top of the screen:

Manage Themes: Choose from available themes, Activate, Preview, Delete

Install Themes: Search for new ones or upload ones that you download or create. Once you have a new theme that will work, you want to activate it on the Manage Themes page.

In general when modifying themes we want to find a theme that has the general structure of what our design is. Short of creating a theme from scratch this is a good place to start.

Go to Appearance > Themes > Twenty Thirteen (Preview) then Activate.

In Appearance (using Twenty Thirteen theme) notice the following:

Themes
Widgets
Menus
Theme Options
Header
Background
Editor

Exercise 3

1. Notice how the Twenty Thirteen theme has options to customize the header, colors… not all themes have these same options. Therefore choose your theme wisely for a project.
2. In Customize > change header image.
3. In Widgets, add a few widgets to the “Secondary Widget Area”
4. In Menu, I’ll talk about how to create a drop down menu.


Modifying Themes

If we don’t build a theme from the ground up, often times we will hack and modify an existing theme. If we are logged into our WordPress admin Dashboard we can edit the theme CSS as well as the theme files. We have a couple of possible workflows though:

  • Edit theme files in the WordPress editor. Good, although no code highlighting, and no line numbering. Can make it tricky when you are starting out.
  • Edit theme files locally and upload the modified file via FTP to your theme directory on your server. Usually under WP-CONTENT > THEMES > YOUR THEME
  • Edit theme files locally and then upload the theme files as a .zip file via the WordPress theme uploader.

Modifying site using the Editor

Before doing anything to your CSS file, MAKE A COPY OF THE CSS FILE as a backup.

Exercise 4

1. Modify the style.css file in the “Editor” section
2. Change font-family for h1-h6 tags.

Exercise 5

1. Preview your site choosing another theme: Appearance > Themes. Click on another theme and preview.
2. Install a different theme found through the “search” on https://wordpress.org/themes/. Search for “responsive” and install the theme called “Responsive.”


Widgets

Widget is a fancy word for tools or content that you can add, arrange, and remove from the sidebar(s) of your blog. Widgets make it easy to customize the content of your sidebar(s). You can access your widgets from the Appearance -> Widgets screen in your Dashboard.

Adding Widgets

To add a widget, drag the widget from the Available Widgets or Inactive Widgets area on the left into the Sidebar area on the right. When you see a dashed line appear, you can drop the widget into place.

Configuring Widgets

Each widget has configuration options. To make changes to a widget in the sidebar, click on the triangle on the right side. http://en.support.wordpress.com/widgets/


Navigation Menus

Custom Menus

Sometimes we want a custom menu structure. A lot can be done out of the box or via plug-ins, but there are ways to create custom menus via the dashboard. If you plan on doing custom menus, it’s best to have a theme that supports them from the get-go, but you can also make the theme support it, by modifying your functions.php file.

WP Custom Menus: http://codex.wordpress.org/Appearance_Menus_Screen

1. Go to Appearance > Menus. Click on plus sign and add name of menu to text field.

2. Select the pages to include in the navigation menu.

3. Order the pages. You can create drop down menus (if supported in theme) by nesting the pages.

4. Select which menu you’d like to use as the primary menu.


Media Library

Inserting an image

You can insert images relatively easy using the WordPress content editor. The icon for inserting an image is right above the text editor in the post/page editor. It looks like this:

You can upload the following image types to a post or page on your WordPress.com blog:

  • .jpg/.jpeg
  • .gif
  • .png

Upload Images from Your Computer

  1. Go to Posts -> Add New or Pages -> Add New, or open an existing post in editing mode.
  2. Place your cursor where you would like the image to appear, then click on the Add Media icon above your post/page editor
  3. Simply drag and drop your files into the box that appears, or click Select Files to choose a photo from your computer to upload
  4. Click Insert into Post when you’re done adjusting the image’s settings.

Download this image to try it out!


Inserting a video

Embedding with a URL

To quickly embed a YouTube video, simply copy the video’s URL from your web browser’s address bar while viewing the video:

Paste it on a line by itself in your post/page editor

To quickly embed a Vimeo video, simply copy the video’s URL from your web browser’s address bar while viewing the video:

And paste it on a line by itself in your post/page editor:

For help inserting other media using shortcodes
http://en.support.wordpress.com/shortcodes/


Plugins

Key to the WordPress universe are plug-ins, which are custom bits of code made for reuse that expand the functionality of our blog. These run the gamut from galleries to shopping carts and all points in between. Likewise the implementation varies, but the process is generally the same.

  • Find the plug-in. Search via Google or the WordPress Plugin directory.
  • Download plugin file as a zip file.
  • Upload to your site via the plugin uploader, which is accessed via the Plugin tab on the dashboard menu.
  • Activate the plugin.
  • Read the documentation, see if you can make it work.

Suggested Plugins

  • Maintenance Mode
  • Google Analytics for WordPress
  • Akismet
  • All in One SEO Pack
  • Easy Contact
  • Sociable
  • Database backup (choose from several)

Resources

WordPress Support
http://codex.wordpress.org/

WordPress Beginner
http://www.wpbeginner.com/
http://wp.tutsplus.com/sessions/wp101-basix-training/


How WordPress Works

How wordpress works info graphic

Leave a comment