FINAL PROJECT PRESENTATION

6 Comments

Schedule:

 

WEB II

10:00am     Leeza Walkes

10:20am     Crystal Williamson

10:40am     Najmul Suvo

11:00am      Katrina Arias

11:20am     Andre Saurez

 

WEB I

11:40pm     Justin

 

LUNCH BREAK

12:20pm      Shakira

12:40pm  David

1:00pm     Alex

1:20pm     Abraham

Week 15

12 Comments

Sign in and list the times for your skype chats.

Last day to troubleshoot your sites.

Week 14: Bringing it Home

7 Comments

Log in and list your skype call and scheduled time.

Week 13

5 Comments

Please let me know what time you’ve set up your skype chats with your clients.

I’ll also be holding individual skype chats with each of  you today to review your progress.

Week 12

3 Comments

Please let me know the schedule of your skype calls

Week 11: Skype Chats Continue

9 Comments

Please log in and state what time you’ve arranged your skype chats for today.

 

SKYPE login:

cunywebii

PASSWORD: D4SG1!

Read and Review:

Web development process

How to create a great resume

NY Creative Interns

Smashing Magazine Like them on Facebook

Dosomething.org Internships Available

WEBSITE PRESENTATION: Final Project

Wednesday, May 23, 2012 is the las day of class. Everyone will be presenting their final websites on Wednesday, May 15th, 2012. You will present in the following order:

Katrina

Andre

Hasan

Crystal

Leeza

Suvo

Week 10: Website Checklist

7 Comments

We’ll spend the first part of class discussing:

  • Last week’s student/client Skype chats
  • Client/student issues
  • Theme main navigation and issue
  • Skype Chat IV

Here is a long and pretty detailed list of questions that a website owner should asked himself about his own website. If the answer to every question that follows below was answered with yes, you can be very pleased with yourself and consider yourself the top of the crop, because most websites have flaws for a number of different reasons, mostly related to the limitation of resources and sacrifices that must be made as a direct result of the shortage.

This 50 questions long questionnaire might trigger something here and there for some of you or maybe brings some forgotten item from the long to-do list back into your mind. In short, I am sure that the list benefits a number of different people.If you think that something is missing or not clear, let me know and leave a comment to the post in the form below.

Accessibility

  1. Is content structurally separate from navigational elements?
  2. Is the website cross-browser compatible?
  3. How compliant is the website with W3C coding standards? Valid HTML/CSS?
  4. Are ‘alt’ tags in place on all significant images?
  5. Are text-based alternatives in place to convey essential information if this is featured within images or multimedia files?

Navigation

  1. Are links labeled with anchor text that provides a clear indication of where they lead.
  2. Depth – what is the maximum number of clicks it takes to reach a page within the depths of the site?
  3. If a splash screen or navigation feature is provided in a Java/JavaScript/Flash format, is a text-based alternative also available?
  4. Responsive on Click feedback – Is a response given immediately (0.1 seconds) after a click is made on a hyperlink?
  5. Do clickable items stylistically indicate that they are clickable?
  6. How intuitive is it to navigate? Are signs obvious or obscured? Buttons/Links Like Text, that are not clickable and vice versa, links/buttons that cannot be identified as such
  7. readability (somewhat addressed already), type face, font size
  8. clear statement of PURPOSE of the site? Purpose must become clear within a few seconds without reading much or no text copy at all.
  9. Call to action on every page, no dead ends
  10. Is a logical site map available?, If not, is a keyword-based search feature available? Note: Large (multi-thousands of pages) sites should have a search form.

Design

  1. Is the site’s design aesthetically appealing?
  2. Are the colors used harmonious and logically related?
  3. Are the color choices visually accessible? (For example high enough in contrast to assist the colorblind and visually impaired in reading the site appropriately)
  4. Is the design audience appropriate?- The standard text size should be readable, for visitors who don’t know how to adjust their browsers.
  5. The fonts should be easily readable, and degrade gracefully.- Should look OK on various screen resolutions.

Content

  1. Is the website copy succinct but informative?
  2. Does the copywriting style suit the website’s purpose and ‘speak’ to its target audience?
  3. Are bodies of text constrained to <80 characters per line?
  4. Can text be resized through the browser or do CSS settings restrict size alteration?
  5. Is the contrast between text and its background color sufficient to make reading easy on the eyes?
  6. Is text broken into small, readable chunks and highlighted using headings, sub-headings and emphasis features where appropriate to assist in skimming?
  7. Within articles, there should be links to more detailed explanations of subjects, or definitions of jargon terms. Are you doing that?
  8. Do you have an “about page” that identifies the author of the content, credits to source for content that was not written by the site owner himself
  9. Do you have testimonials and publish them on the site?
  10. Do you update the content regularly and don’t live by the phrase “set it and forget it”?

Security

  1. Any obvious security flaws?
  2. How resilient are forms to special characters?
  3. Private directories password protected via .htaccess?
  4. Are public non-document directories (cgi-bin, images, etc) index able or are blank index.html pages or appropriate permission settings in place to block access?
  5. Is customer data stored online? If so, is this database appropriately safeguarded against external access?

Other Technical Considerations

  1. Does the site load quickly – even for dialup users?
  2. Are all links (internal and external) valid and active?
  3. Are scripts free from errors?
  4. Is the website free from server side errors?

Other Marketing Considerations

  1. Is the website properly optimized for search engines (essential text emphasized, title tags relevant, title text presented in H1, outbound links reliable and contextually related, etc)
  2. Does the index page entice a visitor deeper into the site or shopping cart?
  3. Does the website contain elements designed to encourage future or viral visitation (i.e. a contest, newsletter, tell-a-friend feature, and forum with subscription option, downloadable toolbar, RSS feed or similar)? – Different Title for every page that start (or at least have it as 2nd or 3rd word) with the single most relevant key phrase that describes the content or function of the page the best. (if you have to explain what the page is for and can only use 1-3 words as Keyword or Phrase, what would it be?)
  4. Robots.txt configured?
  5. Site Map available?
  6. Is every page accessible at least via a single plain HTML Link (no JavaScript or Flash Link)?
  7. Does every page have at least some text in the content? (How much Text remains on the Page if you remove all Images, Videos, Flash, Java Applets and JavaScript Code? Anything? Is the remainder still states the pages purpose?)
  8. Is every individual page only accessible via a single URL or are several URLs available (and worse, used) to access the same page? Duplicate Content Issue, Canonical URLs.

Legal Stuff/Re-Assurance/Legitimization

  1. Contact Page with Real Address, Phone Number (Toll Free for Business) and Contact Form or Email available, basically a clear and easy to use feedback/contact mechanism? A visitor might not assume webmaster@ or you might want them to write elsewhere, or you might prefer to give them a form to structure their communications.
  2. DMCA Notice up? Terms of Use page available where you specify what you do and why and what visitors have to agree on if they want to use your site? This is to protect yourself from complains or worse regarding things that you cannot control properly, such as links to 3rd party websites or Ads from automated systems such as Google AdSense etc.
  3. Privacy Policy up (especially if you collect data, email, names, and web analytics tracking cookies)

Thanks to Search Engine Journal for this checklist.

Week 9: Progress Update

13 Comments

We’ll spend the first part of class discussing:

  • Last week’s student/client Skype chats
  • Client/student issues
  • Theme installation and issue
  • Skype Chat III
  • Individual progress reviews
We’ll be watching tutorials on posts and pages.

RESOURCE: WordPress Video Tutorial

THE FOLLOWING SHOULD HAVE BEEN COMPLETED BY TODAY:

  1. Sign up for a WordPress account for the class blog
  2. Agree to partner with a nonprofit
  3. Introduce yourself to the nonprofit and read the website development questioner
  4. Conduct a client analysis
  5. Read, review and make notes and add any questions you might  need answered from the client analysis
  6. Conduct a competitive analysis
  7. Create and ftp account for your client to upload their content
  8. Create the Site Definition, Site Outline and Site Map  for your site
  9. Revise the Site Definition, Site Outline and Site Map for your site after speaking with your nonprofit client Update your information and repost on your homework page
  10. Install WordPress on your clients hosting space
  11. Create a Google Calendar with your clients name. Add deliverables deadlines for your calendar and share this with your client.
  12. Start sorting through the files that your clients are sending you and prep the images making and color corrections on contrast corrections necessary.
  13. Sort your content by page and put the text/images/video in the correlating folders
  14. Make a list of missing or needed items and relay the information to your client. Give them a deadline.
  15. Browse the theme files, find THREE themes that have the basic layout you want for your site and post a link to them on your homework page.
  16. Create new deadlines for addition content.
  17. Identify which pages have too much or too little content and work with your client to edit down or deliver new content.
  18. From the initial wireframes you created for this weeks homework, choose a theme that best fits the layout for your site and install the new theme by next week.
  19. Settle on one WordPress theme and install it.
  20. Skype chat with your client: Prepare and agenda listing all questions you have for them and have them prepare an agenda of questions they have for you.
  21. Make a list of what is needed to complete the homepage. Do you have too much or too little content? Go back to you site map and see where you can move things around.
  22. Contact your client and let them know your progress, what you need and what your suggestions are.
  23. You should now have ALL content that is needed for your site build.
  24. Skype chat II completed

WordPress, beyond the basics tutorial

Week 8: Installing Themes

5 Comments

We’ll spend the first part of class discussing:

  • Last week’s student/client Skype chats
  • Theme Instillations
  • Skype Chat II
  • Individual progress reviews

Lynda.com is a great resource for learning WordPress. Today we’ll watch a video that details the steps to creating a custom, drop-down menu.

Week 7: Client Conferences

6 Comments

HOMEWORK Review from: Week 6

During next week’s class we will be holding client meeting via skype with your nonprofit client. If you do not have a skype account, sign up for one. It’s free. Please contact your client and make an appointment with them to skype next week Wednesday between 10am and 1:30om. Please prepare and agenda listing all questions you have for them and have them prepare an agenda of questions they have for you. I will monitor the skype call and intervene if necessary.

Email your clients immediately and set up these appointments. Let me know if they have any conflicts.

  • By now you should have done the following:
  • Chosen a theme and installed it
  • Added the basic plugins
  • Received all your content

Now you need to start working on the homepage. Upload the logo, images, text and any video for the homepage.

  • Implement your main level navigation
  • Add any sidebars and/or widgets
  • Make a list of what is needed to complete the homepage. Do you have too much or too little content? Go back to you site map and see where you can move things around.
  • Contact your client and let them know your progress, what you need and what your suggestions are.

Client conferences will take place at the following times. Please be prepared with an agenda for the conversation.

Our Skype name iscunywebii

 

SKYPE TIME: 10am

Nonprofit Name: MERCY HOUSE

Nonprofit Contact: Monk Porphyry

Contact Email: frporphyry

Student: Leeza

 

SKYPE TIME: 11am

Nonprofit Name: CITTA

Nonprofit Contact: Teri Jankowski

Contact Email: info@citta.org

Skype Name: cittainfo

Student: Hasan

 

SKYPE TIME:  12pm

Nonprofit Name: Creative Aging Mid-South

Contact Name: Meryl Klein

Contact Email: creativeaging@bellsouth.net

Student: Katrina

 

SKYPE TIME:  1pm

Nonprofit Name: African Women’s Alliance, Inc.

Contact Name:  Olatokunbo (‘Toks) Sofol

Contact Email:  awaconnect@gmail.com

Student: Crystal

 

SKYPE TIME:  1:30pm

Client: Dhruv Kumar

Contact Name:  Dhruv

Contact Email:  ez2dj20@gmail.com

Student: Suvo

Skype Name: ez2dj18

Week 6: WordPress – Shortcodes

7 Comments

HOMEWORK Review From Week 5:

  • If this hasn’t happened, work with your client to get the information.
  • Create new deadlines for addition content.
  • Review the content that you have and categorize them according to your pages.
  • Identify which pages have too much or too little content and work with your client to edit down or deliver new content.
  • From the initial wireframes you created for this weeks homework, choose a theme that best fits the layout for your site and install the new theme by next week.
  • Start to add core functionality plugins including:
  • SEO
  • XML Sitemap
  • Analytics
  • Anti Spam
  • Utilities
  • Backup
  • Social Networks
  • Broken Line Checker

What is a Shortcode?

Shortcodeshortcode is a WordPress-specific code that lets you do/change things with little effort. Things like embedding files or creating objects that would normally require complicated code accomplishing all this in just one line. Simply, a shortcode is a shortcut.

WordPress short codes are short bits of code which you add to your HTML editor. They are used for adding custom functions to the content of your posts and pages without writing a script everytime you need to do this.

Short codes are like html tags but use square brackets rather than the HTML angled brackets. See the example below, showing what a shortcode looks like when you insert it into your text editor. [shortcode]

These WordPress-specific pieces of code allow you to save time and do things that would otherwise require technical knowledge and/or large amounts of code. By adding shortcodes to your themes or plugins, you’re able to make using it much easier and intuitive. Shortcodes can be created and added manually, by installing a plugin or using a theme which already includes shortcode features.

You could, for example, have a shortcode[most_popular_post] that when typed out exactly like that would display the most popular post on your WordPress site. If you wanted to do this manually, you would have to write some HTML code, as well as have to manually change it as and when the popularity of posts changed. A shortcode takes away the need for this, and simplifies things for you.

Benefits of Using Short Codes

Shortcodes can save a lot of time because you don’t need to write a script of php code every time you want to create a function in your posts. Inserting the shortcode in a post references the code you have added in your functions.php file and creates the function. I know, this isn’t a PHP class. That’s why we’re going to use shortcode plugins.

Once you have added the php script to your file then you simply add a shortcode into the HTML editor of your post/page and the function is added.

Plugin and Theme Shortcodes

Some WordPress themes , (both free and premium themes) and shortcode plugins will automatically display an icon in your editor’s toolbar. You click the icon and choose the best shortcode for simple insertion into your posts and pages. This bypasses the need to lear PHP or create the functions or type the shortcode in manually. Note, there are both free and paid shortcut plugins so look around before choosing which ones you want to use.

Here’s a link to a paid plugin but it will show you some of the functionalities of shortcodes.

Shortcode Plugins

If you’re able to take a PHP class, I highly recommend it. It’s an incredibly useful coding language. Instead of writing your own shortcode, you can download shortcode plugins.

Now you know that shortcodes can be extremely handy to add extra functions or design features to your site, and many themes already have them built-in which probably isnt the best way to handle them because, if you change themes, you will lose functionality. A better way is to have a shortcode plugin so even if you change themes, all those codes contained within your posts will still be there. There are many free and commercial plugins which provide extra shortcode functionality, they even let you create your own custom ones.

Shortcodes in Premium Themes

There are many WordPress premium themes using shortcodes.


A Couple of Things to Keep in Mind:

ADMIN PANEL>>>SETTINGS>>>PRIVACY: If you’re building your site “live”, go into your WordPress admin panel and click on SETTINGS and then PRIVACY. Search engine bots like Google will crawl your site if you’re working like. Click on I would like to block search engines but allow normal visitors. You don’t want search engines indexing your site and picking up links until your ready to go live.

A few more helpful tutorials and plugins

WordPress Tutorials – from basic to advanced

Paypal Plugin

 

HOMEWORK: Week 6

During next week’s class we will be holding client meeting via skype with your nonprofit client. If you do not have a skype account, sign up for one. It’s free. Please contact your client and make an appointment with them to skype next week Wednesday between 10am and 1:30om. Please prepare and agenda listing all questions you have for them and have them prepare an agenda of questions they have for you. I will monitor the skype call and intervene if necessary.

I would like to follow the schedule below:

Leeza: 10am skype chat with nonprofit client

Crystal: 10:30am skype chat with nonprofit client

Hasan: 11am skype chat with nonprofit client

Katrina: 11:30am skype chat with nonprofit client

Andre: noon skype chat with nonprofit client

Suvo: 1pm skype chat with nonprofit client

Email your clients immediately and set up these appointments. Let me know if they have any conflicts.

  • By now you should have done the following:
  • Chosen a theme and installed it
  • Added the basic plugins
  • Received all your content

Now you need to start working on the homepage. Upload the logo, images, text and any video for the homepage.

  • Implement your main level navigation
  • Add any sidebars and/or widgets
  • Make a list of what is needed to complete the homepage. Do you have too much or too little content? Go back to you site map and see where you can move things around.
  • Contact your client and let them know your progress, what you need and what your suggestions are.

Week 5-WordPress Themes

17 Comments

 

HOMEWORK from week 4 REVIEW:

  1. Create a Google Calendar with your clients name. Add deliverables deadlines for your calendar and share this with your client.
  2. Revise the Site Definition, Site Outline and Site Map for your site after speaking with your nonprofit client Update your information and repost on your homework page. Here’s some examples of sitemaps and wireframes:
    1. Browse the theme files, find THREE themes that have the basic layout you want for your site and post a link to them on your homework page. If they also has colors and fonts that you like, that’s a bonus, but keep in mind that these are much easier to change than the layout. We’re going to narrow down your themes and you’ll install the final theme choice in next week’s class. I would recommend choosing a simple theme without a lot of bells and whistles, as those themes can be complicated to modify.
  • Start sorting through the files that your clients are sending you and prep the images making and color corrections on contrast corrections necessary.
  • Sort your content by page and put the text/images/video in the correlating folders
  • Make a list of missing or needed items and relay the information to your client. Give them a deadline
  1. By next weeks class you should have a final site map and a clear vision for your nonprofit website. Go page by page and think about how you will start laying out the information. If your sitemap is final, start drawing some wireframes to see how all the content will fit on your site.

 WordPress Themes – 2012

First we’ll take a look at the changes in WordPress in 2011 before we move forward to 2012.

What Happened In 2011?

Theme frameworks
There are two basic type of WordPress Themes, FREE and PREMIUM. Free, meaning you can download and install the theme with no fee. Premium, meaning companies create “custom” themes and sell them for a nominal fee. Theme frameworks were big in 2011 with themes like Thematic, Thesis and Genesis continuing to grow in popularity, but more and more frameworks appeared, including Wonderflux, Bones and Roots.

Child themes
Child themes were popular in 2011 as well. People created a child theme from a parent theme, making edits to already existing themes.

The “CMS” theme
In 2011, everyone started to call their themes “CMS” themes, implying that their theme gave WordPress the characteristics of a CMS, as opposed to WordPress itself being a CMS. That trend ended towards the end of the year, when  it became less important to convince people that WordPress was a CMS.

Sliders
Many themes had a slider on the home page, making it easy for anyone to include a jQuery slider in their theme.

Tumblr themes
Creating a Tumblog became easy. The Woo Tumblog plugin was a big hit but the introduction of WordPress post formats made it possible to create a Tumblog with WordPress core functionality.

Custom post type mania
Loads of themes made use of custom post types, including ones for job rollers, e-commerce websites, real estate websites, and more. Not to mention a plethora of WordPress custom post type plugins.


That was 2011. Now lets look at 2012.

DESIGN: Responsive Design

Responsive Web design suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media querie  as user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. The website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market and as we all know, Apple is at the forefront of designing things that we don’t even know that we need until we need them. Smashing Magazine has a great article on responsive design. You should all read it.

Responsive themes will become the norm, rather than a novelty as more and more of us are moving away from the computer screen and towards an iPad screen and smart phone screens. If won’t be long before people won’t ask if it’s possible for a theme to work on any portable device, they’ll expect it to.

HTML5 AND CSS3

HTML5 has been in existence since 2004, but 2010 saw the HTML5 Boilerplate theme make HTML5 easier and saw WordPress taking HTML5 seriously, when they included  the Twenty Eleven default theme with every WordPress download.

HTML5 includes 30 new elements, and in 2012 we will see many of them filter down to WordPress themes. Just like responsive themes, an HTML5 theme in 2011 was a novelty and theme designers made a big deal out of their HTML5 themes. By the end of 2012, designers won’t need to tout their themes as an HTML5 because it will become standard practice.


THE STATE OF WORDPRESS

 


WEBSITE DEVELOPMENT CHECKLIST

Development
Gathering of information related to site content
Website Name (Domain Name) Research
Competition Researched
Website Title Chosen
Website Host Research
Website Host Chosen and Registered $
Website Name Chosen
Website Name Purchase $
Website Structure and Organization Established
Link Exchange Researched
Link Exchange Page Set Up
Articles/Resources Provided/Researched
Articles/Resources Chosen
Advertising Inclusion Implemented
Search Engine Submission Prepared
Search Engine Submission Implemented $
Review Search Engine Submission Results (1-4 months after public release)
Design
Artwork Compiled
Logo Designed or Prepared as Digital Art
Color Scheme Research and Presented
Layout Design Research and Presented
Color Scheme Chosen
Layout/Design Chosen
HTML and CSS Coding Design
Content and Articles Added
Review Web Standards
Validate Code
Check Website with Other Browsers
Check Website with Other Computers
Check Website with Various Screen Resolutions
Edit and Review Website Presentation
Test Website (typically 2-4 weeks)
Test Links
Website Maintenance
Frequently Update
Check for Errors
Add Link Exchanges
Check for Bad Links
Keyword Review and Update
Check Link Popularity
Review New Technology
Review Web Standards and apply
Check Site Statistics
Add New Content
Check Links
Validate Code
Re-Submit Site to Search Engines
Check Web Page Descriptions
Check Web Page Titles
Review Meta Tag Standards and Update
Review Top Searches from Search Engines (potential new content ideas)


 PRELAUNCH CHECKLIST: Things to keep in mind from now:

Pre-Launch
Content and Style
Typography and layout
Check for incorrect punctuation marks, particularly apostrophes, quotation marks and hyphens/dashes
Check headings for where you could potentially use ligatures
Check for widow/orphan terms in important paragraphs
Spelling and grammar
Consistency
Capitalisation (especially of main headings)
Tense/Style of writing
Recurring/common phrases (e.g. ‘More about X’ links)
Variations in words (e.g. Websites vs Web Sites, or UK vs US spelling)
Treatment of bulleted lists (e.g. periods or commas at end of each item)
Check for hard-coded links to staging domain (i.e. ensure all links will change to ‘live’ URL/domain when site is launched)
Ensure no test content on site
Check how important pages (e.g. content items) print
For re-designs, ensure important old/existing URLs are redirected to relevant new URLs, if the URL scheme is changing
Check all ‘Hidden Copy’ (e.g. alt text, transcriptions, text in JavaScript functions)
Standards and Validation
Accessibility
HTML validation
JavaScript validation
CSS validation
Search Engine Visibility, SEO and Metrics
Page Titles are important; ensure they make sense and have relevant keywords in them.
Create metadata descriptions for important pages.
Check for canonical domain issues (e.g. variations in links to http://site.com http://www.site.com http://www.site.com/index.html should be reduced to a single consistent style)
Ensure content is marked-up semantically/correctly (<h1>, etc.)
Check for target keyword usage in general content
Check format (user/search engine friendliness) of URLs
Set up Analytics, FeedBurner, and any other packages for measuring ongoing success
Create an XML Sitemap
Configure Google Webmaster Console and Yahoo! Site Explorer
Functional Testing
Check all bespoke/complex functionality
Check search functionality (including relevance of results)
Check on common variations of browser (Internet Explorer, Firefox, Safari, Chrome etc.), version (6, 7, 2.2, 3.1 etc.) and platform (Windows, OSX, Linux)
Check on common variations of Screen Resolution
Test all forms (e.g. contact us, blog comments), including anti-spam features, response emails/text, etc.
Test without JavaScript, Flash, and other plug-ins
Check all external links are valid
Security/Risk
Configure backup schedule, and test recovery from backup.
Protect any sensitive pages (e.g. administration area)
Use robots.txt where necessary
Security/Penetration test
Turn-off verbose error reporting
Check disk space/capacity
Set-up email/SMS monitoring/alerts (e.g. for errors, server warnings); consider internal and external monitoring services
Performance
Load test
Check image optimisation
Check and implement caching where necessary
Check total page size/download time
Minify/compress static (JavaScript/HTML/CSS) files
Optimise your CSS: use short image paths; make full-use ‘cascading’ nature of CSS, etc.
Check correct database indexing
Check configuration at every level (Web server, Database, any other software e.g. Content Management System)
Configure server-based logging/measurement tools (e.g. database/web server logging)
Finishing Touches
Create custom 404/error pages
Create a favicon
Post-Launch
Marketing
Social Marketing: Twitter, LinkedIn, Digg, Facebook, Stumbleupon, etc.
Submit to search engines
Set-up PPC/Google Adwords where necessary
Check formatting of site results in SERPs
Ongoing
Monitor and respond to feedback (direct feedback, on Social Media sites, check for chatter through Google, etc.)
Check analytics for problems, popular pages etc. and adjust as necessary
Update content

Download a pdf of the prelaunch checklist.


RESOURCES:

WordPress Training Videos

Free WordPress Themes

Create a Custom WordPress Navigation Bar (Video Tutorial)

 


HOMEWORK:

  • If this hasn’t happened, work with your client to get the information.
  • Create new deadlines for addition content.
  • Review the content that you have and categorize them according to your pages.
  • Identify which pages have too much or too little content and work with your client to edit down or deliver new content.
  • From the initial wireframes you created for this weeks homework, choose a theme that best fits the layout for your site and install the new theme by next week.
  • Start to add core functionality plugins including:
  • SEO
  • XML Sitemap
  • Analytics
  • Anti Spam
  • Utilities
  • Backup
  • Social Networks
  • Broken Line Checker

 

 

 

Week 4 – Customizing your WP site, Plugins and Stylesheets

14 Comments

#I need everyone to join the web II Facebook page right now.

Post a link to your homework in a post on this blog! I need your FULL url.

Review of week 3 homework:

CLIENT WORK/HOMEWORK

  1. Read/review the client survey and questioner for your chose client. Make notes and questions about things you are unsure of or questions you have for them.
  2. Reach out to your clients via email or phone. Introduce yourself and request website content.
  3. Fill out the Competitive Analysis– and post to your WordPress blog.
  4. Start browsing through themes.

Discovery Phase and Content Development:

Phase I

Creative Brief

The first step in the website development process is the CREATIVE BRIEF. This is a simple document that asks specific questions of the client that are designed to clearly define the project. Because of the time limitations in this semester, the website development questioner and the client survey was sent to your clients prior to the beginning of class. You already have those in your possession and should use them as a blueprint for developing the site. For those of you who chose your own client, you are required to have your client fill out those forms and they were DUE TODAY.

Research any information related to the nonprofit as defined by your client. This is the “Discovery” phase and will likely result in amendments to the project concept based on the findings of the research. The research must include an analysis of the competition, the ability to meet the needs of your nonprofit and the way that the website will satisfy their needs and problems. The competitive analysis document was DUE TODAY.

Phase II

Content Development

Gather the information for “Content Development.” This is the stage where the information that is going to appear on the website needs to be collected from your client and delivered to you in an informative and easily understood format. You should have already created a login for your nonprofit on your ftp site. Inside that folder should be sub folders. Example:

FTP Organized

  • Examples of some of the main page types:
    • Home
    • About Us
    • Who We Help
    • How We Work
    • Get Involved
    • Contact
    • News / Updates / Blog

    Design Phase:
    A sample template to keep your project schedule up to date

WORDPRESS Part II

TOPICS:

  • Checking your Themes
  • Using Plugins
  • Some Useful Plugins reviewed
  • Customizing Themes Stylesheets
CHECKING YOUR THEMES
A quick note on downloading and installing themes. There are thousands of FREE and PREMIUM themes out there and not everyone is as honest and straightforward as we hope they’d be. It’s good practice to check your themes prior to installing them. Take a look at:
Scan all of your theme files for potentially malicious or unwanted code. Be aware of advertisements or dangerous JavaScript inserted into legitimate themes by third party theme download sites.
Future versions will allow to check for other theme vulnerabilities.

USING PLUGINS

  • Plugins are tools to extend the functionality of WordPress beyond what you can do with the basic install and themes. You can learn more about them here.

Plugins are created by members of the larger WordPress community of developers. There is a directory of plugins that you can access through WordPress.org’s extend section, or directly from your WordPress admin under the Plugins menu.

wordpress pluging

You can install plugins much the same way that you install themes, either through the admin, or by FTP into the public_html_wp-content > plugins folder:

Many plugins act as sidebar widgets, others add custom features to your posts, there is a great variation in how they operate. There is also a variation in their quality, so stick with popular plugins where the developer is actively keeping them current and has a high rating.

Always check that a plugin is compatible with your version of WordPress.

SOME USEFUL PLUGINS

If there is something you want to do with your site that the core functionality of WordPress can’t handle, chances are someone has written a plugin for it. Here’s a few popular plugins that you might find useful:

BACKUP AND OPTIMIZE

W3Total Cache:

The ultimate swiss-army knife of caching, from the basic page caching (keeping a static copy of the page), to CSS/JS/HTML minification (making your files smaller), as well as handling uploads to a Content Delivery Network

Broken Line Checker:

Dealing with broken links can be pain if you’re waiting for readers to report them – get ahead of the game with this plugin and automatically check all the sites you’ve linked to before they become a problem.

SEARCH ENGINE OPTIMIZATION

WordPress SEO By Yoast:

Widely regarded as the SEO plugin for WordPress. It has an extensive feature set and rave reviews. Give it a whirl, there are alternatives though. Includes XML sitemap features.

Google XML Sitemaps:

Creates a site map for you to submit to Google and automatically updates it when you post new content. Essential for getting indexed quickly and accurately.

SEO Friendly Images:

Adds ALT and TITLE meta tags to your images so you can start getting valuable Google Images traffic.

SOCIAL AND COMMENTING

Askimet:

Comes with WordPress, but if you haven’t activated and added an API key yet, you’re missing out. It really does stop the hordes of spam comments that come every hour. Get an API key here.

Facebook Page Publish:

“Facebook Page Publish” publishes your blog posts to the wall of your Facebook profile, page or application.

Sexy Bookmarks:

A unique style and customisable set of social bookmarking buttons with a huge range of services included. Quite recognizable by readers who are fans of bookmark services.
CORE FUNCTIONALITY

WP-Page Navi

Replaces the next/previous buttons with good looking paginated buttons. Customizable, and absolutely essential.
Events Calendar Pro

A gorgeous events plugin with calendar view or event list, iCal and GCal import buttons. Perfect for club or society meet-ups. ($40 per site)

Contact Form 7

Create a contact form and embed it on a page with ease. Optional Captcha element to deal with spam.

WP-Touch

Creates a complete mobile version of your site with ease. Premium version also available that removes branding and allows you to embed ads.
Widget Logic

If you’ve ever wanted to dynamically change what’s on your sidebar using standard WordPress conditionals (is_single(), is_page(), is_archive() etc), this is the plugin for you.
E-Commerce

Jigo Shop

Works great out of the box with the default WP theme, and a very slick style. Built-in payment processors, inventory management and full stats dashboard make this a very attractive and FREE e-commerce solution to rival the best.
PHOTOGRAPHY AND GALLERIES

NextGen Gallery:

The built-in gallery and photo management in WordPress isn’t ideal – this plugin creates a whole new gallery section to manage your photos, disassociating them from posts. You can then embed albums or galleries in posts or collect all your images on a single page. An extensive plugin in and of itself, you can also download plugins for NextGen Gallery to extend functionality further.
Here’s a link to a great site that lists and explains some very useful WordPress plugins.

CUSTOMIZING YOUR THEME USING STYLESHEETS

Warning: If you don’t already know some HTML/CSS, I don’t recommend that you try this. It’s beyond the scope of the class for me to teach you, but I can show you where you can make modifications if you already know the basics.

Themes have at least one stylesheet that controls the layout, fonts, and colors of the site. Some themes allow you to modify these things through options or settings panels in the admin. But often this doesn’t give you the fine control you want, so you must edit the stylesheet directly.

The stylesheet or sheets are located in the themes directory. They are identifiable by a .css extension. You should figure out what the primary stylesheet is for your theme. It will probably have a name like style.css or styles.css. Some themes have a stylesheet specifically set up for you to make modifications without changing the original. This may be called something like custom.css.

You can tell what stylesheets are being used by your theme by viewing the source of one of your WordPress pages. Stylesheets are attached to an html page using the link tag, with this format:

<link rel="stylesheet" type="text/css" media="all" href="filename.css" />

There can be multiple stylesheets attached to a page, and they are applied in the order of their inclusion, so the rules on the last sheet take precedence over rules on the first sheet.

EDITING YOUR STYLESHEETS

Before changing anything, you should always back up the original file!

You can edit stylesheets through the admin panel under Appearance > Editor. In order to edit files through this editor, you must change the permissions on them through your FTP client, much like we did for the uploads folder.

You will see a list of templates and stylesheets in the right column. At this point I would not recommend editing the templates, unless you have some background in programming.

If you make changes in the editor, they will affect your site as soon as you hit save.

You can also download the stylsheet files via FTP, and edit them with a text editor.

Again, I would only recommend that you edit the stylesheets if you already have knowledge of CSS. A good place for reference is the W3schools site.

I would also recommend the books CSS Mastery, and for more advanced techniquesCSS3 For Web Designers.

A good Add-On for your browser to help you identify which part of the stylesheet is controlling the appearance of elements on your page is Firebug. If you are using Firefox, you can install this through Tools > Add-ons

 


TOPICS

  • Student Site Review
  • Screen Options in the WP Editor
  • Buddy Press

SCREEN OPTIONS IN THE WP EDITOR

Something new in WP 3 is the Screen Options tab. This is actually hiding some advanced editing options from you, so we are going to turn everything on so you can see what these features do! You can find the tab in the upper right hand side of the page, under your username.

Click the tab and it will open to reveal some additional fields you can use to enhance your post:

 

BUDDY PRESS

Buddy Press is a super-plugin (really a series of components bundled together) that turns your WordPress site into a fully-featured social media community. Let’s take a look:

Buddy Press Plugin

Buddy Press gives your users a Facebook-style profile, adds forums, gives members the ability to communicate directly with each other. It is pretty easy to set up, but a much more complex site to run. And you must use a theme that is Buddy Press compatible.

 


HOMEWORK:

  1. Create a Google Calendar with your clients name. Add deliverables deadlines for your calendar and share this with your client.
  2. Revise the Site Definition, Site Outline and Site Map for your site after speaking with your nonprofit client Update your information and repost on your homework page. Here’s some examples of sitemaps and wireframes:
    1. Browse the theme files, find THREE themes that have the basic layout you want for your site and post a link to them on your homework page. If they also has colors and fonts that you like, that’s a bonus, but keep in mind that these are much easier to change than the layout. We’re going to narrow down your themes and you’ll install the final theme choice in next week’s class. I would recommend choosing a simple theme without a lot of bells and whistles, as those themes can be complicated to modify.
  • Start sorting through the files that your clients are sending you and prep the images making and color corrections on contrast corrections necessary.
  • Sort your content by page and put the text/images/video in the correlating folders
  • Make a list of missing or needed items and relay the information to your client. Give them a deadline
  1. By next weeks class you should have a final site map and a clear vision for your nonprofit website. Go page by page and think about how you will start laying out the information. If your sitemap is final, start drawing some wireframes to see how all the content will fit on your site.

 

Week 3

11 Comments

 

  1. Post a link to your homework in a post on this blog!

WORDPRESS Part I

USERS AND USER TYPES

The user account that you created when you installed WordPress is an admin account, and so has permission to change or edit any settings or content in the site. If other people will be contributing to the site, you should consider what level of user you will allow them to be. These are the basic user types (click the links for more details):

  • Super Admin – Someone with access to the blog network administration features controlling the entire network (See Create a Network). This only applies if you have a network of WordPress sites.
  • Administrator – Somebody who has access to all the administration features
  • Editor – Somebody who can publish and manage posts and pages as well as manage other users’ posts, etc.
  • Author – Somebody who can publish and manage their own posts
  • Contributor – Somebody who can write and manage their posts but not publish them
  • Subscriber – Somebody who can only manage their profile

ADDING CONTENT

POSTS VS. PAGES

When adding content, you have to decide if it should be a post or a page. The main difference between these is that a page is non-dated content that is intended to be a permanent, top-level part of your site that does not change often. A post is for dated, time-sensitive content, that you will add on a regular basis to freshen the site. Posts are usually the bulk of the site, with pages providing context and background information. On this site, the weekly lessons are posts and the syllabus is a page.

USING THE PAGE/POST EDITOR

  • Visual vs. HTML
  • Standard Toolbar
  • Kitchen Sink Toolbar
  • Uploading and Inserting Images

CREATING PAGES

Pages are relatively simple. They have the following elements:

  • Title
  • Content
  • Publish Status
  • Page Attributes – Template and Parent
  • Featured Image

CREATING POSTS

Posts have most of the same elements as pages with some additions. They do not have parents.

Categories – You can use these to organize your posts. Categories can be added right from the post page or from the Categories item in the left side dashboard menu.

Tags – Tags are a looser way of associating posts with a list of keywords that describe the content of a post. Some themes will show all the tags on a post as hyperlinks, so you can quickly jump to other posts tagged with the same term.

Format – As of WP 3.1, there are a number of options for a post format besides the standard type. The effect of choosing one of these rather than the standard format is going to depend on your theme.

  • aside – Typically styled without a title. Similar to a Facebook note update.
  • gallery – A gallery of images. Post will likely contain a gallery shortcode and will have image attachments.
  • link – A link to another site. Themes may wish to use the first <a href=””> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it.
  • image – A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the image.
  • quote – A quotation. Probably will contain a blockquote holding the quote content. Alternatively, the quote may be just the content, with the source/author being the title.
  • status – A short status update, similar to a Twitter status update.
  • video – A single video. The first <video /> tag or object/embed in the post content could be considered the video. Alternatively, if the post consists only of a URL, that will be the video URL. May also contain the video as an attachment to the post, if video support is enabled on the blog (like via a plugin).
  • audio – An audio file. Could be used for Podcasting.
  • chat – A chat transcript, like so:
Adam: what's up?
Luis: not much
Adam: that sounds boring

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.

INTRO TO WORDPRESS THEMES

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 or Google “free WordPress themes”.

To install a NEW theme that is not currently available through your WordPress panel, do the following.

  1. Go into your ADMIN panel
  2. Go to APPEARANCE
  3. Go to THEMES
  4. Click on INSTALL THEMES
  5. Click on UPLOAD and upload the theme that you’ve already downloaded from the web and saved to your hard drive
  6. Click on BROWSE and UPLOAD the theme
  7. Click on INSTALL and then PREVIEW

CUSTOMIZING YOUR WORDPRESS SITE

THEMES

WHAT IS A THEME?

A theme is simply collection of files that allow you to “skin” your WordPress site. A theme is comprised of template files, that determine the components that will go on each type of page, and a styles sheet or sheets that control fonts, colors and layout. Themes are stored in wp-content > themes.

CHOOSING THEMES

When choosing a theme, make sure that it is compatible up to your version of WordPress ( the current version is 3.2.1). Many new features were introduced in WordPress 3.0, and you want to make sure to take advantage of them.

Installing Themes

There are two ways to install a new theme, through the WP admin tools, or by downloading and uploading it into the themes directory. Which you use will depend on how you FTP into your hosting account.

INSTALLING VIA ADMIN

From the admin, go to Appearance > Themes then click the “Install Themes” tab at the top of the page.

THEME OPTIONS

Some themes have an options panel that allow you to further customize appearance and layout. What the options are will vary from theme to theme, and may be broken into multiple panels.

CUSTOM MENUS

Most up to date themes allow you to add at least one custom menu to your site. You can build a menu of links to categories, pages and custom links.

SIDEBARS AND WIDGETS

Most WordPress themes include at least one “sidebar”, an area to the right or left of the page content that can contain a variety of things, including search, lists of recent posts, your blogroll, and admin links. These components are called widgets, and are managed through the widgets panel. Some themes also support the addition of widgets in other areas of the site, such as the headers and footers.


A CSS REVIEW FROM WEB 1
  1. An overview of Visual Formatting Model— THINK INSIDE THE BOX!
    1. Box Model: The box model defines how elements are displayed. Every CSS element forms a “box” composed of these components:
      • Content – The actual content of the element such as text or an image. When using the width property, you are defining the width of the content
      • Padding – Define the space around the content using the padding-top, padding-right, padding-bottom, padding-left properties
      • Border – Define a stroke around the content and padding using the border-top, border-right, border-bottom, border-left properties
      • Margin – Define the space around the combined content, padding and border using the margin-top, margin-right, margin-bottom, margin-left properties
    2. IE/Win Box Model Quirks
      1. Diagram: Comparison between W3C and IE/Win box models
    3. Margin Collapsing: When two or more vertical margins meet they will collapse to form a single margin with the height of the larger of the two margins. The vertical margins of nested elements will also collapse if they are not separated by padding or borders
    4. Boxes: Block vs. Inline vs. Anonymous
      1. Block elements are elements such as <div>, <p>, or headers <h1>…<h6>. When their content is displayed the next element within the document structure will be positioned below it, not next to it. The vertical distance between boxes is calculated by the boxes vertical margins
      2. more on the box: Inline elements are elements such as <a>. <strong>, <em> or <span>. Their content is displayed horizontally, within lines. Horizontal spacing between inline elements can be adjusted using padding, borders and margins. Vertical spacing has no affect on inline elements
      3. Inline Elements and Padding
      4. Anonymous Boxes: A block or inline box that has not been explicitly defined as an element. You cannot style anonymous block or line boxes since there is nothing to connect to. (see link example)
  2. CSS Positioning
    1. Static or Normal Flow: Normal flow is the default scheme used for positioning. Block boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one. Inline boxes flow horizontally from left to right]
    2. Relative: Relatively positioned elements are positioned within the normal flow and then moved using x and y coordinates. Elements that come after a relatively-positioned element behave as if the relatively-positioned element was still in its ‘normal flow’ position – leaving a gap for it
    3. Absolute: An absolute positioned box is moved out of the normal flow entirely using x and y coordinates. Absolutely positioned boxes can overlap other elements on the page. Control the stacking order with the Z-index.The higher the Z-index, the higher the box is in the stack. Elements that come before or after an absolutely positioned box ignore it completely. an example of absolutely positioned DIVs
    4. Fixed: Fixed positioned elements are moved out of the normal flow entirely – relative to the viewport. This means that they don’t move if the page is scrolled. Win/IE5 and Win/IE6 do not support this positioning method at all
    5. Floating : A floated box is taken out of the flow and shifted to the left or right until it touches the outer edge of its containing box or another floating box. Block-boxes in the normal flow behave as if the floated box wasn’t there. Paragraphs of text (line boxes) next to a floated box can flow down the right side of a left-floated box and down the left side of a right-floated box. More good info on floats
      1. Clearing: Elements following a floated element will wrap around the floated element. To stop this from happening the “clear” property can be applied to “clear” a vertical space for all elements following the float
  3. Layout
    1. Horizontally Centered
      1. Example
      2. Now, i’ll show you how to do vertical centering also.
    2. Liquid: Dimensions are set using percentages, allowing layouts to scale to fit the browser window. On some monitors layouts can feel stretched and line heights can get too long or too short.
      1. Three-Column using floats
      2. Two-Column using absolute-
    3. Elastic: Dimensions are determined by the width of elements using ems. This is relative to the font size, not the browser width.
      1. good article about the debate
      2. Elastic example
      3. The px to em Calculator
    4. Elastic-liquid hybrid: Widths are set in ems and maximum widths are set as percentages.
      1. Hybrid example
    5. Other Sample CSS Layout
  4. PHASE ONE: Site Definition
    1. Outline of the development process; what is going to happen at each step; everyone’s jobs (both the clients’ and yours); and a timeline.
    2. A few useful Articles:

Homework

CLIENT WORK/HOMEWORK

  1. Read/review the client survey and questioner for your chose client. Make notes and questions about things you are unsure of or questions you have for them.
  2. Reach out to your clients via email or phone. Introduce yourself.
  3. Fill out the Competitive Analysis– and post to your WordPress blog.
  • HOMEWORK
  1. Create the Site Definition, Site Outline and Site Map  for your site. Here’s some examples:

Week 2

16 Comments

  1. Post a link to your homework page to the comments section of this blog post, your homework page should contain a link to your pirate page as well as your top two choices for nonprofits and comments on the two questioner documents.
  2. SEO madness There are “over 200 SEO factors” that Google uses to rank pages in the Google search results (SERPs).
  3. Top 25 APIs An application programming interface (API) is what allows programmers to write applications and widgets that interact with services on these sites.
  4. We will be looking at the pirate page and thinking about how it would be best done and any and all issues you may have had with completing the assignment.
CLIENT UPDATE
One potential nonprofit client dropped out today and two  others have yet to respond. Some others may not work out for various reasons. We’ll go over the client list today but below are a few other resources.
The following four clients have CONFIRMED and returned their client surveys. Today we will be matching students with nonprofits, reviewing the client survey’s and reviewing  the web development documents.
Steps to take when working with clients:
The first step is to have your client fill out this client_survey-1 (1), or fill it out with them. Second, work with your client to fill out the Web Development Questioner. Next, you/your client should identify at least three competitive Web sites and perform a Competitive Analysis.

Creative Aging Mid-South – KATRINA will have this client
Creative Aging Mid-South (CAM) works to improve quality of life for Mid-South elders by providing them with access to experiences in the arts. To accomplish this, CAM hires local professional artists to present high quality arts performances and workshops for older adults in nursing homes, senior centers, and assisted living and daycare facilities.  Most performances take place in nursing homes, retirement communities, senior centers, and adult day care facilities. Others take place at the homes of homebound elders.  Performances and workshops are scheduled at times that are convenient for our audiences, and in formats responsive to the needs of audiences with cognitive and/or physical disabilities.
Download the web design client survey. Download Creative Aging Mid-South project background and overview.

The African Women’s Alliance Inc. (AWA) – Crystal will work with AWA.

Is a 501(c)(3), Not-For-Profit, Non-Political, Non-Religious, Non-Governmental Organization, founded by women from Africa and its Diaspora, with a mission to foster greater understanding of cultural diversity, promote visibility of African perspectives, address global issues and strengthen the capacity of women, families and communities.

Our activities include hosting programs and discussions to achieve the mission of our organization. We hold annual, informational and interactive lectures, called the “Focus Series”, showcasing countries with African communities or communities of African descent. Past subjects include Ethiopia, Antigua and Barbuda, Senegal and Haiti. Suriname was the subject country for AWA’s 2011 Focus.  Download the web design client survey. Download Africa Women’s Alliance project background and overviews.


Grand Central Neighborhood – Andre will work w Grand Central

The Grand Central Neighborhood Social Services Corporation provides basic necessities and a range of social services to Midtown Manhattan’s homeless population.

he Grand Central Neighborhood Social Services Corporation (GCNSSC) is committed to providing
 immediate relief to Midtown Manhattan’s homeless population. Through our Mainchance Drop-In Center, 
we offer basic necessities (food, clothing, showers, and chairs for respite) and a range of social services including employment counseling, treatment referrals, and housing assistance.

In order to help people use our center as a bridge to a more secure life, we have designed a consumer-oriented membership program to meet our clients at their various levels of need — tailoring our services 
to fit the specific situations of each individual. We give them a choice and, in doing so, we give them a 
greater chance of success.

We recognize that, for some, simply coming in from the streets is a significant step. 
It is these people – those usually excluded from other service agencies – that we aid most.

Jon Mark Fletcher

Director of Development

Grand Central Neighborhood Social Services Corporation

120 East 32nd Street

New York, NY 10016

jfletcher.gcn@gmail.com

(p) 212.883.0680 ext. 321

Download their website questioner here.


Yellit Masters – SUVO will work with Yellit

The mission of YM is to provide communities with access to classical music’s top performing musicians and leaders. Through this, we “celebrate the music from within.”

YM currently consists of 2 parts: (1) Yellit Masters School Program and (2) Yellit Masters Young Artists Concerts (YMYAC). Yellit Masters School Programs presents top performing classical musicians in public middle school to perform and participate in Q/A sessions and musical discussions. Soon, we will begin providing classroom and student scholarships as well as provide YM participating students with free tickets to local classical music concerts in their area. YMYAC will debut this spring. YMYAC will present young and upcoming classical music soloists (the future best-of-the-best) in rural communities. These concerts will be presented in a unique way using multimedia, among other ideas. YMYAC Artists will receive professional career management, a financial grant to further their studies, a fine instrument loan, and other necessary resources needed to further a successful career as a soloist in the classical music industry.

Download the project background and overviews.


Citta HASAN  will work with Citta.

Citta is a New York State registered 501(c)3 non-profit organization, and has been running for over 23 years. We focus on methods that help build and support development in some of the most economically challenged, geographically remote and/or marginalized communities in the world.

Citta has developed a holistic and adaptable method we refer to as the HEED model (Health, Education and Economic Development). We connect with these communities, taking into account the lack of access to proper healthcare and educational opportunities as well as weak or nonexistent economic development that can lead a community into a never-ending downward spiral. Citta works to remedy the specific needs of a community, to produce an environment of equanimity and stability and one that provides opportunities and a sense of initiative and pride in its inhabitants. The projects long-term effects can be felt throughout the world.

Download the web design client survey. Download the project background and overviews.



Web Development Process

  • Discovery – Research the site and company,  analyze the effectiveness of the site as compared to its competitors and usability standards
  • Definition – Define and create detailed requirements for the project
  • Design – Create (or recreate) the navigation and organization systems, database structures (if necessary), information flow, interface and visual design
  • Development – Create production graphics, build front end interfaces (Client-side markup and scripting), program backend systems (Server-side scripts and databases)
  • Deployment – Q&A Testing, Bug Fixing, Marketing, Launching

One thing to keep in mind is that because a Web site is an infinitely changable, living document, Web development is iterative, meaning that the process always feeds back into itself as new features are considered, designed and developed.

*Notes about “Phase 2”

Final Project Update: Discovery Phase

Before you start defining your real-world Web project, you need to do some research and analysis. The first step is to have your client fill out this Client Survey, or fill it out with them. Next, you/your client should identify at least three competitive Web sites and perform a Competitive Analysis.

  1. If you don’t have Google Chrome installed on your computer, download it NOW! First Get the Web Developer Tools! Do it NOW! If you don’t have Google Webmaster Tools on your computer, download it NOW!
  2. A quick word about Web Standards Workshop
  3. STRUCTURE REVIEW and SEMANTIC MARKUP:
    1. Semantic Markup bookmarks on Delicious
    2. Using Meaningful (Semantic) Markup
    3. Logical Structure using Meaningful Elements (examples)
    4. Validation and meaning extraction
    5. Document types, DOCTYPE switching, browser modes
    • Contact your client and ask them to fill out a Client Survey form, its due in two weeks at the very latest- next week if you can get it that fast.
    • Create your own form or use this as a guide:
    • Only offer services you are able to provide and make sure the client understands that this is a class project and you have a schedule to keep.
    • Please ask them to return the form by next class meeting.
    • Semantic Markup practice finish and style Universal Declaration of Human rights– all semantic markup try to use as simple CSS as you can
  1. PRESENTATION REVIEW:
    1. CSS Beginner TutorialCSS Intermediate Tutorial
    2. The Document Tree
    3. Selectors
    4. CascadeSpecificity and Inheritance
    5. Planning, organizing, and maintaining stylesheets
  2. CSS Style Guides:

Resources


WELCOME TO WORDPRESS!

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
  • Mature
  • Customizable
  • Easy to Maintain
  • Large Community

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

Installing WordPress

 Log into your Bluehost account and go to the control panel and scroll down to Software/Services. See image below.

Click on WordPress. click install, fill in:

Where would you like WordPress installed?

Click complete.

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.

INTRO TO WORDPRESS THEMES

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.

Homework |

  • Know who your client is and make a post on this blog with a sentence or two about your client with links to any current site they have that you are replacing.
  • Have the client survey filled out and posted on your blog or homework page next week.
  • Complete your competitive analysis.

Week 1

13 Comments

“In the Future Everyone will be famous for 15 minutes”
-Andy Warhol 1968

“On the Web, everyone will be famous to fifteen people”
-David Weinberger* 2002

  1. Sign up for an account on this blog. Choose a username that I can easily identify you by (like your first name), and use the email that you check most often. This is the primary email address that I will use to communicate with you! Make sure you have a gravatar with your image.
  2. Download this  Zip Archive, which contains a Photoshop document. Build an HTML page based on this .psd that looks as close to the comp as possible. Use CSS for fonts, colors and layout. If you need a refresher, here are some good tutorials:
  3. Once your page is finished, upload the files to your web hosting account. Create a folder on your ftp site and call it Homework2012. All homework assignments will be posted there just like you did in Web Design 1.
  4. Post a link to your test page on this blog as a comment to this post.

Please post your test pages by the end of the day, I’d like to have a chance to look at them so I can plan the next few classes based on where you are all at skill-wise. Thanks!

If you are totally lost doing this assignment, you may not be ready for this course and should consider switching to Web Design 1.

Final Project

The goal of this course is to raise your Web design and development skills to a professional level. To that end, you are going to be working on a single semester long project.

Your final project is to work with a real world client, and design (or possibly redesign) a new Web site for them, using the Web Development Process that I am going to teach you in the coming weeks.

HOMEWORK:

We have contacts from a dozen or so nonprofits who would like us to build a site for them. Please review each nonprofits website, choose two and write a few paragraphs telling me why they would be a good fit for you.

A few important guidelines we need to consider when working with a nonprofit:

  • 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 you
  • Unless you are pretty technically skilled and ambitious, don’t promise an e-commerce (online shopping) component of the site, we won’t really be covering that, so you would have to research it on your own
  • Make sure your client is going to be available for approvals and will be able to get you the material you need
  • If possible, work with a client where you can have a single point of contact who has authority to sign off on designs
Below are the nonprofits who contacted us regarding a new web build.

This website will assist a rock poor community in the mountains of Jamaica to improve their standard of living.

Teach Nepal Kids

Grand Central Neighborhood Social Services Corporation

Citta  We have a wonderful database of doctors, artists, designers and media people that we would like to be able to provide with a more efficient, dynamic and stylish presentation of our work.

Impact Aid International, an NGO involved  in poverty eradication and international development.

Opportunities PA  Helping homeless young adults become self-sufficient.

Mercy House NYC 

Creative Aging Mid-South:

Please download the two client forms, review and revise.

Reading

The Cluetrain Manifesto, Chapter 5: The Hyperlinked Organization. Just read the section called Fort Business. If you are interested read the whole chapter.