Blog Post #5 (Advice)


Intro-web

If I could go back in time and give myself some advice for the intro to web class there are a few things that I would tell myself to do differently. First off I would say practice, practice, practice. The way the class is set up, there is not a lot of homework. The majority of the class is spent learning and then applying the new technique via exercise. So if you do not practice you will have a very difficult time keeping up. All of the coding that is learned builds on itself so if you do not understand an exercise you will fall behind in the class. The best way to practice for all of the exercises is to do the practice exercises that come with the book. The book has a website that goes over all of the coding learned in class.

Second is spending a lot of time on the web. Look at what good web designers are doing now. Look at sites that use html5, css3, and new web techniques. Take note of these techniques and styles and try to apply them to all of your work. Another tip that can help save time is, when building in Photoshop make sure to view the page at one hundred percent. Hit Z on the keyboard and use the magnifying glass to view your document at full size. This helps you see what the site will look like on the browser and prevent you from building to big or too small.

Different browsers will render your code differently. They don’t play together well they all like to have their own style and level of intelligence. Some browsers will read new code and techniques where others will freak out like Internet explorer for example. Browsers need to be taken into consideration when defining the target audience. If your target audience is made up of old Internet explorer users, pick a different project with a different target audience and save yourself from getting a head ache.


Adv-Web

Another tip that will help a student coming in to advanced web is work your butt off to get the photo shop comp perfect. You will need a lot of time to code the site and figure out the technical side of it. You should not be wasting any time worrying about how it looks when you should be coding.

Some sites that will be your friend are pxtoem.comjigsaw.w3.org/css-validator, and validator.w3.org. The first site will help you convert pixels, points, and ems, which will be applied when coding fonts. The second two sites will help you validate your html and css. This will help you trouble shoot coding problems and it is also part of your grade. When Validating the html and css It is good to do it a lot and often. If you wait until the very end to validate you can get slammed with a ton of errors that can be very time consuming to correct. Changing these errors could potentially change the way the site is rendered which means you will have to recode to get the look you want.

Advertisements

#4: HTML5 Revisited

HTML5 structural and text-level semantic elements

HTML5 Outline Algorithm

Before html5 there were two groups of elements inline and block. Now there are five levels which include: text-level semantics, grouping content, forms, embedded content, and sectioning content. These new levels effect how the browser reads the html. Before you would have to use heading one through heading six for the browser to read your content properly. Now the heading one tag can be used throughout the html and the browser will read the order as if it were using headings one through six. However additional html5 tags are needed for this to work.

Under html 5

Above is a set of html that shows the new tags that need to be used for this to work. This html uses sections and header tags around the heading one tags. Below the html is another image that shows how the browser reads the information. The first set of dots show how, with html5, the browser sees the information. The second set of dots show how the browser would read the content under html4.

The hgroup Element

Hgroup is a new tag that groups sets of headings and is meant to be used for subtitles, alternative titles, and tag lines. Below are two examples a tag line being coded. The first instance uses hgroup and the second does not. Coding the the tag line with a paragraph tag and a class would produce the same visual style, however, using the hgroup would be more semantically correct and it uses less code. 

 (The information above can be found at http://www.vanseodesign.com/web-design/html5-content-models/ and https://developer.mozilla.org/en/Sections_and_Outlines_of_an_HTML5_document)

Another site that displays the use of header tags as discussed above is http://www.w3.org/html/logo/. This website uses the new header, section, nav, aside, and footer tag. Here is a screen shot of the site using the header tag, making the site more semantic. As you can see they still use division tags to help break up their content but they also use the new tags as well. 

HTML5 audio and video

With html5 the audio and video tag can be used to embed audio and video files directly into the html. One of the things this new feature is trying to accomplish is create a consistent user experience across many different browsers. The four audio tags include: wave, mpeg-4, ogg vorbis, and mpeg. The three video files include flash, h.264, and ogg theora. Below are two charts that show which browser supports which file type for both audio and video.

This site http://mediaelementjs.com/ demonstrates the video tag and some of the additional tags that customize its appearance. MediaElements.js upgrades older browsers and mimics the html5 Media-Element API. After it processes the IE6-8 browsers then support <video> and <audio> tags. Firefox and Opera support h.264 and Safari and IE9 support WebM. The developer also has control over what buttons appear on screen. Below is a screen shot of the html from the website media element js  listed above. 

 

The new attributes that the developer can use to customize the experience include: src, poster, preload, auto play, loop, muted, controls, width, and height. The src specifies a single media file for playback. Poster uses a url to display an image before the movie is played. Preload determines how and when the browser will load the media file. Auto play starts the video right away and loop plays the video continuously. 

(The information above can be found at http://msdn.microsoft.com/en-us/magazine/hh781023.aspx and http://soukie.net/degradable-html5-audio-and-video-plugin/ )

HTML 5 Here We Come

What HTML 5 Has To Offer

HTML 5 offers advancements with storage, connectivity, file access, semantics, audio, video, and graphics.  Here is a link to a site that explains these elements http://www.html5rocks.com/en/.

With the new HTML you have the ability to use the clients side for storage. By doing this if the user goes offline the application will still work. You also have the ability to display a large amount of data as soon as the user clicks without having to wait for the server. The connectivity is more efficient which means live chats, gaming, and communication will be improved greatly. With updates to file access the new HTML has the ability to read multiple data at once, save information to a temporary location, and perform drag and drops from the desktop to the browser. The advancements in semantics include  media elements, structural elements, semantics for internationalization, link relation types, attributes, form types, and micro-data syntax for additional semantics. Some of the new mark up include <section>, <article>, <aside>, and <nav>. This allows the information to be better understood by the browser. Video and Audio can now be put directly into the the HTML. Scalable vector graphics (SVG) and canvas are also additions to the new HTML 5. When it comes to three dimensional graphics there are more options to animate your content. Now there are technologies such as 2D Canvas, WebGL, SVG, 3D CSS transforms, and SMIL.

Coding In HTML 5

HTML 5 has new tags include footer, header, section, article, aside, and nav. There are more new tags these are just a few. These new tags allow the content to be more semantically correct. A site that demonstrates and gives examples of these new tags is http://oli.jp/2009/html5-structure4/.

Basic Page Layout

HTML 4

HTML 5

Above are three images. The first picture shows a basic layout for a web page. The next two images display how that basic page would be marked up in HTML 4 and HTML 5. The first set of mark up is HTML 4 and as you can see it is all familiar information. The second set of mark up shows some of the new HTML 5 tags. These new tags give more semantic meaning to the information. They also allow the coder to tie into the information in the CSS more effectively.

Video.js

Video.js is a java script and CSS library that allows the user to work with the HTML 5 video feature. This new feature helps with browser inconsistencies. It has features that include full screen and subtitles. With HTML 5 helping standardize the web, plugins like Flash Player, Quicktime, and Silverlight are no longer going to be needed to watch video on the web. In the future coders will be able to embed video directly into the HTML. A site that shed more light on this new video feature is http://videojs.com/. Listed below is a chart that shows the compatibility of the video code for different browsers. Below that are the tags for the java script and video tag which should be entered into the head and body of your HTML document.

  HTML 5 Video Compatibility Chart

Code For Head

Code For Body

Web Site Critique

A website that currently uses HTML 5 and is responsive can be found at http://www.quazarwebdesign.com/. This site is a web design company that advertises designs using HTML 5, mobile sites, flash, and search engine optimization (SEO). On their homepage they show past clients that they have worked for and the names are big. What really makes their site unique is all of the movement. Their are little white dots that move randomly in the background. The navigation not only has a roll over state but if you move to a new navigation item the old one goes in motion to reset itself. In their HTML on the homepage they use header, section, nav, article, and aside tags. This site is well designed and it is a good example of what HTML 5 can do.

Homepage Screen Grab

Above the Fold Screen Shot

Mood Board for AdGraphics

Setting the Mood

AdGraphics is a large format printing company in south Florida. They specialize in huge prints and large quantities. They are a business to business company, who’s clients are large enough to buy expensive signage. The company currently has a website that is in need of a redesign. The biggest issues that arise from their current site are professionalism and usability.

The company needs to establish some ground rules for when, where, and how their logo should be used. A consistent color pallet for the company should be used, along with that a consistent use of typography. The images need to be resolved as well. Some of them are low resolution and don’t look very professional. If AdGraphics claims to have high resolution printing the images should let the user experience that so they will want to buy their product. In some of the images that show employees, the employees should have a tucked in uniform and a smile. A more consistent look with all the elements and links on the site will help it look professionally designed.

For a more user friendly experience the site needs to have their information organized. The user should have no questions as to where or how to view that information and they should be able to do it fast. The site currently has 60 pages so I will have to talk to the client and see how the information can be revised. I will see what content can stay and what can go and how the information can be effectively grouped. The site has enough information where an effective use of breadcrumbs would help the users experience. Better navigation, revised content, and a more consistent look and feel will help the usability of the site.

Java the Hut Frames Web Design

Pros and Cons

From my research it seems that there are more pros to using Javascript than there are cons. Whether the cons out weigh the pros is subject to the specific circumstance. On the pros side Javascript is fast, versatile, and simple to learn. It is fast because it runs on the users computer and does not have to interact with the server which takes more time. Javascript’s syntax is simple and easy to learn and implement. It is versatile and can be used on any webpage and can be written to solve a specific problem. Being that it is on the clients computer it reduces the load on the server.

The cons to Javascript include security issues and rendering inconsistencies. Javascript is executed on the users computer so it can exploit the user. There are restrictions set by modern web standard, however, there is still malicious code floating around. Different browsers can interpret the code differently but there is a solution to this problem. If you test your script in the different browsers you will not be in for any surprises.

Plugins

Java script plugins can enhance the viewers experience in a variety of ways. The first plug in I will examine is the light box plugin which makes pictures larger. Some light boxes let the viewer scroll through images without referring back to the main page. The reason this plugin enhances the users experience is through a more detailed image. Images can be displayed on the page at thumbnail size allowing more information to be shown. These thumbnail images can also be clicked on and expanded to show more detail. An example of this plugin can be found at http://gettopup.com/examples.

JQZoom is a similar plug in that allows the viewer to zoom in on an image. This plug in allows the viewer to see fine details on an image without having the image take up the entire screen. This view, however, only allows parts of the image to be seen so the image in its entirety cannot be viewed at a large scale. An example of this can be found at http://www.chouselive.co.za/demo/pictures/zoom/jqzoom.php.

Product Slider is another plugin that enhances the viewers experience. This plug in toggles through different images of a specific product. This helps the user view different angles of a product and helps them become informed on that specific product. The user does not want to make a blind investment so the more they learn about the product the more they are willing to purchase that product. An example of this slider can be seen at http://www.musiciansfriend.com/accessories/slider-straps-dual-shoulder-strap.

JQuery UL Tabs is a plug in that helps the viewer navigate a site faster. It lets them know where on the site they are. This way the viewer can navigate faster and have a better experience. It also gives the designer more options on the design end. An example of a well designed site that uses tabs is smashing magazine. Their use of tabs can be seen at https://shop.smashingmagazine.com/.

The JQuery Selectbox Plugin allows the user to control what they are looking at. This code can be applied in a variety of ways. For example the viewer can customize a product that they are purchasing. They can see what it looks like before they buy it so they are not in for a surprise purchase. A detalied tutorial of this plug in can be found at http://tutorialzine.com/2011/02/converting-jquery-code-plugin/.

Smashing Magazine

Smashing Magazine is a well designed site. Their site is organized and has good contrast. They use typography effectively and the elements on the page are easy to read. One JQuery plug in that they use effectively is the UL Tabs plugin. This plugin is displayed on their homepage and they use another variation on their interior pages. This plugin lets the user know where on the page they are and this makes their navigation experience fast and efficient. Their site again can be found at https://shop.smashingmagazine.com/.

Setting the Mood

Breaking the Norm

With our first project I wanted to head in a direction that I do not normally go in. I would consider my style as masculine so for my mood board I wanted to depict the opposite. My mood board is an attempt to challenge myself and design something that I would not normally do. My goal is to diversify my portfolio and to prove that I can design for any client not just ones that coincide with my personal interests.

Mood & Style

I would like to create a more feminine site that appeals to that specific target audience. My mood board demonstrates an electric movement. It has elements like light and electricity that move fast. My color pallet consist of pink, purple, blue, and black. I chose these colors because they are appropriate for the look and feel that I am trying to achieve. My thumbnails will further explore ideas and content for my website. My effort with my mood board is to set a style and color scheme which will guide me in the direction I want to go.

Responsive Web Design

Flexible Grids & Media Queries

With devices like smart phones and tablets now browsing the web there needs to be a solution for viewing the web at a much smaller resolution.  A traditional web site uses a certain number of pixels because the screen resolution is fixed. Responsive web design starts with a fluid grid. It uses percentages not set pixel amounts. To figure out the percentage your content needs to be you divide the size of the content by the overall screen resolution. If your container is 250 pixels and you are designing with a 960 pixel width you will divide 250 by 960 and then multiply the result by 100. Your percentage will be 26.041667%. It is okay to keep a lengthy percentage because the browser will read it and it will make your content more precise.

After the percentages are figured out you add them to your CSS using @media queries. The media queries has a min-width feature that will apply a certain CSS to your site if it has a minimum width. So when the screen resolution gets smaller for example on a tablet or smart phone the CSS changes based on the minimum width.

When applying this technique to my website there are a few things that need to change. The biggest obstacle on my homepage is the corn husk. When the resolution drops to the size of a tablet the information can be condensed to fit. The corn husk can be cropped out without loosing information. However, when the resolution drops to the size of a smart phone the layout needs to condense to a one column grid. The icons can shift to a horizontal layout and still keep their functionality as buttons. The text can condense in width and be displayed directly below the icons. This layout removes the corn husk all together but with the limited width it is a viable solution.