fJohn has 42 post(s)

We’re ending our two-week class today. FTP your final website to our FTP servers as you have done with previous assignments. Create a post and categorize it as “Final project”. The post should have a link to your website, a screen capture of your home page, and a paragraph or two describing the project.

The description should mention: who the website is for (audience), any technical or visual features that you don’t want us to miss (highlights), and if there are aspects you couldn’t get to or would like to after the course is over.

Be sure to fill out a course evaluation at the end of class.

Outline

1. Life before CMSes
• Early sites were managed like yours: one HTML file per web page
• The markup, the look and the content itself in every page
• Files everywhere, hard to change (pour through coding, grep)
• Mistakes (Owen Youngman updates tribune.htm)
• Call out across the room when editing a file
• Manual FTP
• Not scalable
2. Enterprise solutions popped up, custom solutions in Web 1.0.
• Expensive
• Desktop applications
• Not flexible or adaptive
3. Smaller sites priced out until blog revolution kicked in for real in 2002.
• Open Source MySQL and PHP
• Moved toward forms-based
• Software as service (updates frequent)
4. Benefits of CMSes
• http://www.drostdesigns.com/content-management-system-benefits/
5. Advantages and Disadvantages for designers:
• Advantages
• Client/others can maintain content
• Consistency of design is preserved (others don’t mess with design after launch)
• Coding templates not pages, simpler
• Don’t have to use them on every project, it’s an option
• Disadvantages
• Detracts from idiosyncracies. how one page might differ from another. black background here, not there.
• Consistency of design is preserved (others don’t mess with design after launch)
• Additional technological investment
• Can evolve in a not-so-good way. Sites can break if not maintained.
6. CMS options
• Easy: Scripts that isolate content or consolidate html. Maximum Flexibility.
• Still files and FTP
• PHP includes and image handling (D.O. site)
• Stacey App without database
• Easy: Tumblr or Cargo Collective.
• They deal with hosting
• Allow CSS changes
• Provide CMS form to make changes.
• Works well as actual blog (Feltron and Chimero)
• Medium: Open Source WordPress and Movable Type.
• Allow for multiple authors
• Templates dictate design
• Front end templates easy for all to understand
• Plug-ins galore. Open-source community
• Authors/editors add and edit posts
• Show GMP MT
• Show vs11.johncaserta.info
• Show wd11.johncaserta.info
• Show theme editing
• Medium/Hard: Expression Engine
• Decent amount of setup, but simple backend
• Pseudo-open-source.
• Hard: Ruby on Rails and Drupal
• Build from scratch, but open-source and has components

Links

Everyone should FTP their working files by 3pm and make a post with a link to their project for the whole class to see. Categorize the post as Final in progress. Be sure to name your folder something that will not be overwritten when you upload your final final on Friday.

Typography overview from Tim Brown

Fonts and webfonts, by Jonathan Hoefler

Example from class

Both Google Fonts and self-hosted

Outline

1. Move from client-side to server-side
2. Encryption and rights
3. You host: Upload your own, Fontspring and Font-Squirrel
4. Others host: Google, Cloud.Typography, Typekit, WebType, FontDeck, etc.

Links

Outline

1. Different types of images: graphic vs continuous tone
2. Graphic: use gif, png, svg
   • Transparency, color range, file size, scaleability
3. Continuous Tone: use jpg
   • File size, retina
4. Calling images into a page (See example)
5. Summary of best practices for each kind of image/device
6. HTML5 video and embedding Vimeo (also on YouTube)

Examples

1. All types in one page

Links

Outline

Slides (pdf)

1. What is a Grid?
2. Brief History
3. Examples
4. Anatomy of the Grid
5. Grids on the Web
6. Using a responsive grid

Examples

1. Poster using OOCSS grid
2. More on OOCSS

Grid Links

Responsive Links

Here are some considerations when making an actual site.

1. Start with HTML5 reset/John’s version.
2. Additional HTML tags needed
3. Folder hierarchy
4. Use external stylesheets
5. Search engine optimization. What you can control and what you can’t.
• Descriptive title that changes on each page
• Good semantic HTML markup. Text type (not images)
• Images with alt text for Google Images
• Meta data for description and keywords
• Use a footer navigation at the bottom
• Promote your site online, try to get permanent mentions
• See who’s coming to your site with Google Analytics
6. Check your work in other sites with Browsershots or VMWare PC emulation

Links to codebases

1. HTML5 reset
2. HTML5-reset_sigds

Links

If you’re editing WordPress posts in “Visual” mode, and you edit one of the instructor’s posts, you’ll be removing snippits of code that pull in links. So, please either do not open these posts (you may view or preview them instead), or change your edit view to “Text” view. Thanks!