What’s next?

Some final thoughts for my beginning HTML class.

Hi Everyone:

First I want to say it was a pleasure having you in class this semester. As I’m reading through the final reflective writing assignments I’m seeing common threads so I thought I would address some of the thoughts in this blog post so everyone has access to it following the close of the course.

This class has been an introduction to several different technologies. The objective was to give you an overview of how the different languages work together to create good content for today’s user agents (browsers). Here are a few summarizing thoughts:

  • Define the purpose of your site. What are the 1 or 2 primary focuses of the site?
  • The content should support the goal.
  • The media, images, features all should support the goals of the site. If the goal is to sell and you aren’t selling anything, then the site is not doing what you need it to do.
  • Organize the content, i.e. all media, images, forms, sections, articles, whatever so you know how the site should be layed out. How easy can you make it for your audience to get to the meat of the site? Don’t make them hunt.
  • All of the languages used to create a web site are plain text. The symbols, tags, brackets, parenthesis, etc are the instructions that tell the browser what the plain text means. Google semantic markup and read a few articles. Here’s one, http://en.wikipedia.org/wiki/Separation_of_presentation_and_content
  • HTML puts an element on a page. It gives structure to the content. Choose the right HTML element (tag) for the right job.
  • CSS contols layout and formatting. It contols the properties of the HTML elements; i.e. it controls the presentation of the structure.
  • JS is the client-side scripting language that we use to change or modify the HTML elements and their properties, based on events or conditions that exist; i.e. click a button – something happens.

Now you have the basic overview. You have a growing vocabulary and sense of what does what. Learning scales does not make you a musician. Knowing how and when to apply them in context does. Now you are ready to start practicing what you have learned.

Build web sites. Start building them for fun. Look at an ad in a magazine. How would you build it using HTML and CSS? Try it. You learn by doing. Following are other good resources to take you to the next level.

  • A list apart: One of the first online magazines dedicated to people who build websites for a living. (http://alistapart.com)
  • Codeacademy: A very well respected site where you can learn scripting by doing. It’s free. Great place to learn Javascript (http://www.codecademy.com/tracks/javascript)
  • W3schools.com: Good reference for HTML tags, CSS properties and values, JS basics and basic coding examples. I use it all the time (http://www.w3schools.com)
  • Mozilla Developer Network: Another good resource for learning how the technologies work. (https://developer.mozilla.org/en-US/?icn=tabz)
  • stackOverFlow.com: Good resource to getting answers to your coding issues. How do I do this? Stack Overflow probably has the answer. (http://stackoverflow.com)
  • Web Frameworks: You are not the first web designer to solve this issues. Many designers have build up a series of pages, CSS files, and supporting technologies that they use again and again to build their web sites quickly and reliabiltiy. They have made their systems avaiable to the community for free. Learn them and you’ll speed up your design time and your sites will look great. No need to re-invent the wheel; i.e. you want to. Twitter Bootstrap, and Foundation are popular ones. There are more coming all the time. Just do a Google search on HTML frameworks.
  • After you leaern the basics of JS, learn jQuery. It makes JS more accessible for non-programmers.
  • Get familiar with WordPress. It is an entry level CMS (Content Management System). Most web sites are created with CMS backends so the end user doesn’t have to code to post an article, blog, marketing info, create a portfolio, etc. If you want to work for an agency, they’ll want you to be comfortable with WordPress.

That’s it. Now. Go forth, learn some more stuff, and create.

Dale R Rogers, M.Ed.
Assistant Professor, Program Coordinator, Multimedia Design
Nashville State Community College

Video in HTML files

Hosting and streaming video requires a lot of storage and bandwidth. Many shared hosting plans will allow you to host your video. In this instance, you would use the <video> tag to provide that content to your users. However the performance can sometimes be terrible because shared hosting can contain many web sites and are not optimized for media streaming. Streaming services like youTube, Vimeo, Blip, and other commercial solutions exist to provide the infrastructure to deliver your videos with good data throughput and buffering (i.e. without pauses). When using those services to deliver media, they will provide you with the necessary code to use to get the media content to play on your web site.

Example

On the Youtube page there will be an option to share.

Share button
Share button

Under the share option are several options:

 

Share Options
Share Options

One of those options is an embed option which will provide a line of code (usually an iframe).

Embed Code
Embed Code

Just copy and paste the iframe code where the video tag code would normally be and you’re good to go. The iframe points to a resource that makes heavy use of javascript to play the video.

Note: Youtube utilizes both Flash technology and HTML5 technology. Flash technology is not mobile compatible; at least, not on iOS devices (which have a huge market share). To ensure your YouTube embedded videos are mobile compatible see the following article on Stack Overflow:  http://stackoverflow.com/questions/13516345/howto-play-youtube-videos-via-html5-video-tag. The article explains how to ensure your videos are being streamed from YouTube using HTML5 technology and therefore mobile compatible.

In Summary

There is more than one way to get video content onto your web site. The video tag is the method of choice if you happen to know the exact URI of your video content. However, many streaming services have their own infrastructure and will provide a block of code that you can use to deliver the content onto your page.

Project plan and storyboard

Project Plan

Web sites are about presenting information. All the layout, formatting, whitespace, borders, colors, etc are used to organize, and present information to our audience. We will approach that organization and presentation differently to different audiences; i.e. a 5 yr old learning the A,B, Cs or a CEO learning the basics of web design. The Project Plan helps us plan out what the goals of the web are BEFORE we commit any of our time to coding. Coding is simply the medium we are using to implement our vision. We need the vision first.

Use the project plan that was supplied in the unitA.zip file as a template for yours. There is some information about timeline and budget. You won’t have that information now so include the headings but just put in a place-holder like TBD (To be determined).  The main information you need to think about is:

  1. What is the purpose of the web site; i.e. it’s goal(s)? What do I want it to do for me?
  2. Who is my audience?
  3. What content will I have on the site? This gets back to the goals and the audience. What does my audience want? If I’m creating a portfolio, what does my audience (perspective buyer/employers) need to know about me, my work, my process, my fees, my availability, my turn-around time, i.e.. They want to see my work, yes. But they also want to know other information as well. What is it? Answering those quesitons will help you determine the content of the site. Once you know the content, you can start organizing it and presenting it.

Storyboards

The term storyboard means different things to different people. A storyboard for a web designer is different than a storyboard for a movie or animation. In film a storyboard tells the story visually. It demonstrates how the script (written descriptions) will appear on screen. A storyboard to a web designer lays out a rough interface and shows the organizational relationships between pages or screens. Again, it is a way of organizing your project visually.

At the top of page 5 (figure A-2) in your book, it shows a fundamental layout of a screen. Using boxes it simply is trying to indicate how the information will be organize on the screen. The author is using the term storyboard. Most designers would use the term “wireframe”. Here are some more examples

The figure underneathe that show the relationship of the different pages. This is important if you have more than one or two layers of heirarchical information. It helps you figure out how to set up navigation. Here’s another example: http://www.mrlee.it/U1O3/storyboard-example.gif. A storyboard for a web site mostly shows how pages relate to each other; it indicates how the information is unfolding. Here’s another one… http://www.boardofstudies.nsw.edu.au/syllabus_hsc/img-ipt/storyboard.png. Notice how some give more information. Some give less. All are starting points for design considerations. If you are the only one that is going to see it, the storyboard can be rough. It is  your way of thinking the project through. If you are part of a team, or are communication your ideas to a client, the storyboards need to be more polished. Why? Because you are communicating your vision and no one can see inside your head. Make it easy for them. The better you can help them visualize what you see (without a complete mockup), the better you will be. It’s always a trade-off of time vs utility.

I typically draw rough sketches to help myself think it through. Depending on how “rough” my initial sketch is, I may tighten it up before I show stakeholders. I can see what’s not on the page, most clients can’t. They see exactly what you have. Be careful about what you show your client.

File formats? I recommend uploading project plans, sketches and storyboards as pdfs. Why? they are easy to read on most devices. pdfs are also rendered pages, i.e. as if you sent them to a printer. You can’t assume I’m using the same word-processing software that you are. OpenOffice formats a little differently than Word, or Pages. By printing to a pdf file, you ensure that what I see is what you see. That’s the idea right? A share vision.