Two Times A Charm

Standard

Number 1, no one should ever do what I did: Fail advanced web and have to take it with Portfolio. The ultimate NO, NO!!

Before taking Intro to Web, I loved the internet. I click a button, the button works, I go to the page I want to go to. Well, I learned that it’s not that easy. There is a lot of HTML and CSS involved. Enough to make you want to pull out your hair.

The first thing I wish would have done was practice more. Yeah, Blake goes over the concepts in class, but it really didn’t make a difference because I wouldn’t go home and practice. The information was basically going in one ear and out the other. I understood everything that was happening while in class, but two days later I was a lost soul.

I also should have read the book like I was assigned to do. I think reading the chapters before class would have helped me understand what Blake was talking about. I would skim the images and think I had mastered the content. It’s very important to understand the information presented during the lecture. If you fail to understand it, then you’ll be behind for the next lecture. These web design classes are very fast paced and require a lot of time and effort on your part. Me working 40 hours a week didn’t help either. In round two of advanced web, I cut my hours down in an effort to concentrate more on class.

For the new web design students, I recommend you listen to Blake and not brush off any information or advice he is trying to present to you. You don’t know it all. Attention to detail is a must. Who would have thought that a semi-colon would make an entire website fall apart?

I also suggest that the new web design students look at the mark up of well designed sites. Looking at the mark up can help in future website design projects. You can view the mark up using fire bug. Fire bug will become your best friend for the next year. I also recommend using the W3C HTML Validator and W3C CSS Validator. This will prevent a lot of headaches. These validators will point out mistakes for you.

Taking advanced web for a second time wasn’t all that bad. In fact it made me semi-hate web. Since I was already fresh with the topics, I knew what I needed to work on in order to pass this time around. I be damn if I take it for a third time! Even if the new students realize that web design is not for them, they should still really consider taking it seriously. During the AIGA review, one of the reviewers told me she would really like to see more web design in my portfolio because everything is going digital.

JavaScript

Standard

JavaScript Basics:

JavaScript is a scripting language used to make a website interesting. It is used to create interactive features on the web pages. Some of the uses of JavaScript include swapping images, validating forms or creating menus. It is the only scripting language supported by every major web browser, even the ancient browser Internet Explorer.

Pros:

On major pro of using JavaScript is the speed. Its speed is very essential. Instead of having to contact the server and wait for a reply, any code function can be immediately with the use of JavaScript. Another pro is that it is very simple. It is very simple to learn as well as use. The syntax used is close to English. JavaScript is also very flexible. It is able to be used along side other forms or coding.

Cons:

Like all great things, JavaScript has a few cons. There is a security issue when using it. “Because the code executes on the users’ computer, in some cases it can be exploited for malicious purposes. This is one reason some people choose to disable JavaScript” (Media College). In other words, your computer can be hacked easily. Another con is that JavaScript has some rendering issues. It can be interpreted differently depending on what browser the viewer is using.

Plug-Ins:

Nivo Slider

Screen Shot 2013-02-21 at 11.41.35 AM

The Nivo Slider allows for an easy transition through images. Its not distracting to the viewer at all.

Photo Zoom:

Screen Shot 2013-02-21 at 11.44.12 AM

“Today we will show you how to create a simple image zoom out effect with jQuery. The idea is show some images which are zoomed in initially and when hovering over an image it gets zoomed out” (Tympanus).

PhoneGap

PhoneGap is an open source development tool for building fast, easy mobile apps with JavaScript. This plug-in would help when developing the phone version of our website.

tQuery

Screen Shot 2013-02-21 at 11.50.24 AM

“tQuery makes simple HTML tables dynamic. The script combines power, flexibility and easiness. It offers great design customization, supports multiple formats for column sorting and make exporting and importing data easier. tQuery now support filtering. You can add a search box to your tQuery tables. The search feature give exact and instantaneous results” (Trip Wire Magazine).

Quicksand

Screen Shot 2013-02-21 at 11.52.26 AM

Quicksand is a neat plug-in that add animation to items on a webpage.

Cite Critique:

I chose to critique the site of Alex Buga, who is a creative director at MB Dragan. This very interactive website contains information about him, the music he likes to listens to, as well as his portfolio.

Alex uses the Booklet technique in his “About” section of the webpage. This section looks like a personal journal. It lays out who he is, where he works, and a calendar showing what he has done or is doing.

Alex Buga's Livingroom_1328714397534

On the home screen, the navigation is displayed if you scroll over his “ab” logo or you can hover over the different element hidden in the cabinets to get to another page.

Alex Buga's Livingroom_1328714536452

Here, Alex creatively displays his portfolio on an iPad. This this is way better than just having a website with icons to click on.

Alex Buga's Livingroom_1328714823315

Responsive Web for Dummies

Standard

Years ago, people were only viewing and interacting with websites on their desktop or laptop. Things have drastically changed. With more and more people viewing websites on their smart phones, iPads, and net books, web developers have had to change the way they design  in order to meet the needs of their audience. This technique used to do this is called Responsive web design.

In other words, if a website is responsive, it will conform to the device you are viewing it on. Having to scroll left and right to read the context of a website on a phone can be very annoying. I usually get tired of doing it and close the page. If the website is responsive, the viewer will not have to deal with that problem. The website you are used to seeing on a desktop would be simplified and easy to access on your phone. The content would all be there, but the designer of the site might have taken out a photo or made it smaller.

A good example of a responding website would be Time Magazine‘s. Their website is able conform to 4 different devices. The website does not cut out any important content it just simply makes the screen design slimmer and longer.

Media Queries_1358432457909

HTML 5 Again!?!

Standard

HTML 5: The Canvas

The HTML <canvas> tag is used to create game graphics, graphs or other visual images for a website. It’s not as simple as it seems. A user must incorporate JavaScript for this element to function properly.

The Six Revisions website helps to define the <canvas> element as well as provides examples for users. The basic mark up for the canvas tag is as follows:

As you can see, the user will need to provide a height and width for the container to work. Looking at the mark up, the <canvas> element seems very similar to the <image> element we sometimes use in class.

I also found a bit of information on the W3Schools website about the <canvas> tag. Fortunately, this element is supported by all major browsers. So that means the people still using Internet Explorer can have a little fun too.

The Bomomo website is a great example of a website that uses HTML 5 canvas tag. This website allows a user to create abstract art work with the click of a mouse. The user has 20 different buttons to choose from that will create different shapes and colors. Honestly, I just sat here for about 15 minutes playing with the website. The HTML 5 <canvas> tag would be something really cool to put on a website geared towards children that like to draw and create artwork.

HTML 5: Audio & Video

The audio & video tags are used to embed media into a website. The process seems very easy. In fact, it is suppose to be easier than adding an image to a website. The HTML media website gave a little insight on the topic.

To embed video, a user simply uses this mark up:

To embed audio, a user simply uses this mark up:

Sometimes a user cannot figure out when it is best to use HTML 5 or flash. The Online Video website helped me decipher when to use HTML over flash: (Provided By: Website)

  • Mobile: Content for smart phones is a great opportunity to leverage HTML5 as most of the Web browsers shipping on these devices offer excellent support for the new technology.
  • Video/Audio Streaming (non-DRM): If the content you’re streaming is not proprietary in nature and does not require rights management, HTML5 is a great option for providing that content with very small overhead.
  • iOS: If your target audience includes the iPad or other iOS-based devices, you’ll want to leverage HTML5 to enrich your message.

HTML audio/video methods provided by W3Schools website:

HTML Cinco

Standard

What is HTML 5?

HTML5 is the latest version of hypertext mark up language. It posses a range of useful features that will help to enhance user experience. HTML5 is so new, that it is still being developed, which means that it isn’t supported by all browsers. That is one con of HTML5. Currently, most designers are still building websites with HTML4. HTML4 uses plug-ins such as Flash, Silverlight and Java to enhance sites. HTML5 will eventually eliminated the need to add in these plug-ins. A user will be able to go to a website and view everything without having to stop and download any plug-ins. This is one of it’s wonderful benefits. Another added benefit of using HTML5 instead of XTML & HTML4 is that it uses a simpler form of coding. This will save the designer time when creating sites for clients.

Article 01

In the article, “What is HTML5, and Why Should You Care?”, the author explains what HTML 5 is, its pros and cons and what new, exciting features HTML5 has to offer. As a designer, it is important to understand these new advances.

Article 02

I found this article on the HTML5 Rocks website. This entire website is dedicated to HTML5. It examines and explains every aspect to know about HTML5. This website lists and details the features provided by HTML5 such as:

  • Offline
  • Storage
  • Audio/Video
  • Connectivity
  • 3D Graphics
  • Presentation
  • File Access
  • Performance
  • Semantics

Article 03

The last article I read was on the Web Monkey website. Like the other websites, it gave the overview on what HTML5 is and how it differs from HTML4, but what I mostly got  from this website is the semantics. This site showed visuals of what HTML5 mark up looks like compared to HTML4.

HTML5 Critique

I choose to do my critique on the One Million Tree Challenge website. This website is dedicated to planting one million trees in London. Overall, I really like the design and layout of the site. It is a single page website that uses anchor points to take the viewer to different parts of the page. The thing I like most about the site is the scrolling background. As the viewer scrolls down, the image takes the viewer’s sight down the tree and into the ground. This concept represents the planting of the tree and it growing tall. I also like how the numbers on the first screen shot flip over after each tree has been planted.

Here the users can move the arrow back and forth to see the benefits as a tree ages. Initially, I viewed this webpage in Firefox and didn’t have any problems. After reading all of the articles, I thought I would have problems viewing it in Internet Explorer, but I didn’t. It operated just fine.

jQuery

Standard

After reviewing the links about jQuery, I’ve learned that jQuery is a easier and faster way to build  JavaScript web pages as well as web applications. It can give a website a more interesting look and feel. A designer using jQuery has many options when it comes to plug-ins. There is a whole library of plug-ins to be used to add excitement to a website.

Even though jQuery has its perks, there is a downside to using it. Through the reading, I have discovered that jQuery has some problems loading in older browsers such as Internet Explorer. I also learned that sometimes JavaScript will not run until every image has finished downloading.

I read through all of the plug-ins and I found that the Sliding Labels, Roundabout, MegaMenu,  jqlso Test, and Fullscreenr would really be helpful for with this upcoming client project.

Sliding Labels

The jQuery Sliding labels technique saves a little time when filling out form on web pages. Instead of clicking into each field to fill it out, the sliding labels technique slides when the field is complete.

Roundabout

The jQuery Roundabout plugin converts “unordered list and other nested HTML structures into tunable-like areas” (Website). This is a great plug-in to use because it works in all major browsers such as chrome, firefox, opera, and safari. It even works in the older browser internet explorer.

Megamenu

Mega menus have become a growing trend. I see them everyday when surfing the web, but did know what they were called. If a site contains a lot of pages or products to showcase in the navigation, a mega menu is the best route to go. One website that I frequent which is OfficeMax.com, uses this plug-in technique.

jplso Text

The jqlso Text is a jQuery text effect. It will display text with “pseudo-isometric effect that will work without any additional CSS” (Website). This technique is useful if you want to ad a creative touch to your main heading or h1’s.

Fullscreenr

The Fullscreenr plug-in allows a designer to use an image as the entire background for a website. The image chosen will always fill the screen and maintain its aspect ratio. It will work in many of the modern web browsers, but if using it in internet explorer, it will require “some extra code to enable the transparent png used for the raster over the background image” (Website).