Week 4: WordPress CMS
Week 4 | Overview
- Mobile Web Design Leaflet Project
- Steve Jobs on How to Live BEFORE You Die
- WordPress Project
- Welcome to WordPress!
- Installing WordPress
- Intro to WordPress Themes
- Week 4 Homework
Design, Sustainability, Change from Maria Popova on Vimeo. A Little Inspiration.
Project II
You’ve completed the mobile app design from wireframe to PSD to PSD sliced images. Now we’re going to take everything you’ve done and code it into a WORKING WEB PAGE!
Follow the detailed instructions. All work should be uploaded to your MSU web hosting space as a part of your FINAL Mobile App Design.
Download the step by step instructions here.
NOTE: On your MSU web hosting space:
- CREATE a folder called: leaflet
- INSIDE the leaflet folder, create a folder called: images
- INSIDE the leaflet folder, create a folder called: stylesheets
- INSIDE the leaflet folder, create a folder called: javascripts
The URL to this web page will be your MSU URL/leaflet. This is the LAST part of the mobile app design leaflet project. Your final leaflet HTML should look like and function like this page.
***NOTE*** CODING THE WEB PAGE will be graded as an individual homework grade. It will ALSO be incorporated into the project grade. ***
THIS MOBILE APP LEAFLET PROJECT IS WORTH 150 POINTS and includes the following:
DELIVERABLES AND DUE DATE: Week 5
You are required to turn in a dvd at the beginning of class on week 5 and it should include the following:
WIREFRAME
.jpg/.png OR .pdf of the wireframe you created
PSD FILE
.psd of your completed file
SLICED PSD
.png’s of your SLICED psd file
HTML/CSS/JAVASCRIPT
leaflet HTML file
leaflet CSS file
leaflet JAVASCRIPT file
WORKING URL TO THE LIVE SITE
WORD DOCUMENT
A minimum of 350 words (grammatically correct – including spelling!) Microsoft Word document including a written description explaining the Photoshop tools, principles, and elements you used when creating your wireframe, psd file, sliced psd file and final HTML/CSS/JAVASCRIPT files.
- A Microsoft Word document with the following information must be included with your project submission. It must include a written description explaining the tools, principles, and elements you used in designing your product.
- Create a folder on the class flash drive and label it: Last Name_First Name_Date_Mobile_Web_Leaflet_Project. Inside of that folder, upload the following files:
- .psd file
- .jpg/.gif sliced files
- HTML
- CSS
- Javascript
- .doc document
You are also required to turn in a dvd with all files burned to it.
The write-up should specifically define YOUR design process in creating the wireframe, psd, sliced psd and HTML files. The Word document will be graded both for content and grammar. Remember to include your full name, date, and project title in the document.The content of the Project Written Description must include the following:
- The name of the company and product your design was created for.
- What image is your company attempting to project and why?
- Describe the flow throughout the various parts of your project.
- What problems did you encounter while creating your psd, wireframe, sliced .gifs and HTML/CSS/JAVASCRIPT and how did you solve them?
- Which, if any part of the design process from wireframe to HTML was confusing or beyond your skill set.
- What would you do differently, if you could start over?
- What would have made this project more useful in developing your design/web skills?
NOTE: If you need help with Punctuation and Grammar Rules, review the Owl website, sponsored by Purdue University: http://owl.english.purdue.edu/handouts/grammar/index.html.
WordPress Project
The goal of this project is to introduce you WordPress, one of the most used CONTENT MANAGEMENT SYSTEM’s (CMS) in Web design. It will broaden your Web design and development skills and introduce you to the world of WordPress. To that end, you are going to be producing a fully coded and designed WordPress CMS portfolio website which will be due at the BEGINNING of class on WEEK 8. (That could change to week 7 so work hard and get your work in early!)
You will walk through the Web Development Process that you learned in week’s 1-3 in order to complete this project.
HERE’S THE CAVEAT: I will match you with another classmate who will be your “client” for this project. Your task is to design them a portfolio website.
You are going to be building your client’s website based on a WordPress back end.
WHAT IS WORDPRESS?
WordPress is an open source, Web publishing platform. It was originally developed as a blogging tool, but has grown into a powerful CMS (Content Management System) used the world over for building complex dynamic Web sites. This site is built with WordPress!
WHY CHOOSE WORDPRESS?
- Free
- Open Source: Easy to find, easy to use, easy to share
Findability is the end goal for any website. If a tree falls in the forest and no one saw it fall, did it really fall?
If you want to get indexed on Google,, WordPress is a great way to do it. WordPress is built to be a magnet for search engines and other online indexes to the extent that if you don’t want your WordPress site indexed, you have to take steps to prevent it from happening.
WordPress has great search and share optimization. Plugins like WordPress SEO, AddThis, and Facebook for WordPress give any site the opportunity to be seen.
WordPress is easily findable, accessible, and provides shareable information. When reading or viewing content on a WordPress site, you are able to access and interact with that content through comments and RSS feeds.
- Mature
- Customizable: Easy to publish, easy to configure, easy to maintain
WordPress is at the pinacle of open source. It is built, evolved, and maintained by the people that use it and is in a constant state of forward-moving change. .
WordPress has undergone several fundamental changes that have made applications even easier to use and has become more powerful and diverse.
- Easy to Maintain: Easy to build, easy to augment, easy to evolve
With the advent of themes, building a custom WordPress site from scratch takes less time than with any other platform. WordPress is a simple interface between the site owner, the database, and the end user.
- Large Community
The Bottom Line
WordPress offers one of the best available solutions for most websites today. It’s a great tool to use and has both the ease of use and the advanced features to suit pretty much any need. And just when you think your need isn’t met, a theme, a plugin, or an extension is there to fill the void.
ALTERNATIVES
WORDPRESS.ORG VS. WORDPRESS.COM
WordPress.org is where you can download the latest version of WordPress for installationon your own domain. It is also where you can find documentation and support, and add-ons to customize your site.
WordPress.com is where you can set up a blog under the wordpress.com domain (yourblog.wordpress.com). The basic service is free and supported by advertising, premium services like your own domain name are available for a fee.
EXAMPLE SITES
Some people think they don’t want to use a system like WordPress because they don’t want there site to look like a “template” or a “blog”. Basic WordPress sites do share similar layouts but there are thousands of free and commercial themes that you can use and, if you want to get into more advanced techniques, completely customize. Here are some examples of sites that were built with WordPress:
WORDPRESS WEB HOST
If you currently have a domain and a host, make sure your host supports the following. BlueHost is compliant with everything below.
- PHP 5.2.4 or higher
- MySQL 5.0 or higher
- Apache or nginx Web server (recommended)
For either a new or existing host, you will need to be able to do the following:
- Access your site via the host’s control panel
- Access your site via FTP
- Create a new mySQL database via myPHPAdmin
Click on WordPress. click install, fill in:
Where would you like WordPress installed?
SITE PLANNING
BASIC ANATOMY OF A WORDPRESS SITE
- Header
- Menu
- Sidebar
- Page / Post Content Area
- Lists: Archive / Category / Tag / Search Results
- Footer
SITE DEFINITION
Before you start designing your site architecture and layout, or planning content, there are some basic decisions you should make about the site and what it’s purpose is. At the very least, you should create a short document stating the following:
- Mission Statement – In a few sentences, state what the purpose of your site is
- Audience – Who is your site intended for? What are they looking for from you?
- Objectives – What are your business objectives for the site? Are you promoting your services? Selling something? Teaching something?
CONTENT STRATEGY
Once you have a basic definition for the site, you should think about what the static and dynamic content of the site will be.
First figure out what pages will form the basic structure of your site. This is the static content that will be accessible from the menus, and will not change or be added to often. This can include background information about you, your business or services, terms of use, contact information, etc.
Next, determine the post types that will be regularly adding to the content of your type. Think about what categories they might fall into, and how you will want to represent and organize those on the site. Also think about what external sources you might use to pull in fresh content (facebook, twitter, rss feeds, etc).
Based on the decisions you make about the static and dynamic pages, create an outline of the pages and page types of your site. Determine how often each of these will be added to or updated.
SITE MAP
Use the outline to create a visual sitemap of the pages of your site and the main connections between them.
WIREFRAMES
This is a blueprint for the layout of the pages of your site. Since we are using WordPress for your site, keep in mind the basic anatomy that a standard WP site follows. if you are going to diverge from this, it will mean more customization. Create a wireframe for each distinct page layout on your site.
Your WordPress install comes with two themes installed, but there are thousands of third-party themes that you can install yourself. You can browse them on the WordPress.org site.
- Complete the website questionnaire and upload it to your blog NO LATER THAN FRIDAY. Notify your partner once it’s uploaded.
- Once you’ve read your partners website questionnaire, upload a list of questions you have for them and upload it to your blog. Share the link with your partner. The questions may pertain to clarifying what they wrote.
- Complete your competitive analysis in reference to your partner’s website questionnaire and upload to your blog. Please share it with your partner.
- A few important guidelines we need to consider when working your partner:
- If your client is still in the developmental stages, it can be really difficult to design a site for them as their plans and objectives shift around.
- There are WordPress plugin’s for-commerce (online shopping) component of the site, so don’t let that scare you.
- Make sure you set up a Google Calendar with a schedule for deliverables and email it to your partner. It will important for when you start listing deadlines for approvals and materials/files you will need for the website build.
- Create a folder in your DROPBOX account and invite your partner to share the folder. Inside the folder create a sub folder name images, another named documents.
- IF YOU DO NOT have your own URL AND WEB HOSTING space, email me and I will set one up on my personal server.
- READ: The Web Development Process
- Code your Mobile Web Leaflet Page and upload to your MSU web server.
- The ENTIRE Mobile Web Leaflet project is due at the beginning of class on week 5.
- On your del.icio.us account tag three Web Sites that focus on WordPress, WordPress themes or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 4, week 5, week 6, etc. in your comments section so that I can keep track of your comments. *Make sure you also add the tag: msuinteractivemedia AS WELL AS add additional tags.
WordPress Partners
- Jocelyn & Laura
- Meghan D. & Ray
- Leah & Megan Naef
- Kristin & Liz
- Cristina & Kristen & Nicole
- Jade & Jesus
- Michelle & Megan P.
- Paul & Rhianna
Recent Comments