AVD WEB // blog post #5

After nine months of intense web design training, I can finally say that I am comfortable and (mostly) confident in basic HTML and CSS. I have a plethora of experience, both good and bad, when it comes to learning and studying the design of a website and how to code, and loads of advice for the youngens entering Intro to Web in the fall.

For starters, it would have been extremely helpful for me to understand what “website design” actually entails. I knew nothing; I didn’t know what HTML was, or CSS, or 960 grids, or even the extent of the importance of pixel dimensions (and their accuracy). My lack of knowledge reflected in my first few weeks in Web class. I would recommend for students who know absolutely nothing about Website design to just read a few articles like this one on In Motion Hosting‘s website, or an introduction to the introduction of web design book. I’m not saying to read an extensive book about HTML coding and CSS mastery—just get an introduction to what the course will involve. Intro to Web students should, and definitely have the resources to, understand what they are getting into. Also, I wish I hadn’t been scared of the Internet and designing for it. Being scared only makes learning about it worse.

While in class, the first and best resource to use would be your good ol’ textbook: Interact With Web Standards.

The best piece of advice I can give to a future student is to READ!! and do the reading assignments—every single one of them. The book gives information, examples, and even online samples of the lessons to assist students if they are struggling. This was something I definitely did not take advantage of.

Also, another more than helpful resource is Professor Blake. It may seem annoying to e-mail him at ridiculous hours of the night, or bother him during his office hours with seemingly silly questions, but in reality, Blake is more than willing to help someone figure out a problem. In addition to helping solve issues, Blake can give you additional info to make the next time your coding or designing a little easier.

Online articles, and blogs are also useful tools to the up and coming web designer. Here, there are tutorials with step-by-step instructions for specific code and designs when building a site. However, some articles are great, and some are really, really bad. If a student wants to explore some new and useful tips on the Internet, I would suggest going to a well know site or blog. Some of my favorites include Smashingmagazine.com, Webdesignerdepot.com, or Thinkvitamin.com.



If you have no clue what web design is, the next thirty-two weeks will be rough, but doable. Just keep an open mind, study, PRACTICE, make sample pages, learn things from your peers, and friends in other classes. It wouldn’t hurt to make a friend with an older student who has taken (and passed with flying colors) Web design class before.

ADV WEB // blog post #4 (I have two #4’s?)

So for this post I am going to be digging a little deeper into a few new features of HTML5 that will be extremely relevant to our Twaddle app: structural and text-level semantics, and audio/video related topics.

First, I researched several articles regarding audio and video. Understanding how to use media in our websites is interesting, and will help in designing our webpage for Twaddle, a voice translator application that gives any persons audio recording an accent.  In the first article, Using HTML5 Audio and Video, I learned the basic code for embedding audio and video in the HTML:

<audio src=”audio.ogg”>

<p>Your browser does not support the audio element.</p>

</audio>

<video src=”source.ogg” controls>

Your browser does not support the <code>video</code> element.

</video>

You can also use controls in HTML5 for the audio on the page. The standard ones include: autoplay (makes the sound play automatically), loop (makes the sound repeat automatically), and preload (used to help buffer large files).

This article also described the files types for audio and video, and which browsers do or do not support them. Here is a chart to help illustrate it:

Also listed were the compatibility of the audio and video elements in browsers (respectively):

Audio element

Video element

You can also control how the media functions in the HTML5 media player: play, pause, and increase/decreasing volume levels. Here is an example of the code:

This article was basically an introduction to some of the code and what it stands for.

In the next article, The State of HTML5 Audio, goes over the browser compatibility of the audio. As with most of the cool features of HTML and CSS, Firefox, Opera, and Chrome are super compatible with the new HTML5 audio and their files and functions. Browsers that don’t exactly support the <audio> tag are (not surprisingly) Safari and IE. Safari at least plays MP3 files, but Internet Explorer doesn’t play any audio, unless you specifically enter special coding:

The final article is about the <video> tag, HTML Living Standard: The Video Element. Some of the attributes include: src, crossorgin, poster, preload, autoplay, mediagroup, loop, muted, controls, width and height. Because I read about most of these attributes in the first article, I focused on learning about the width and height. The video element supports dimension attributes:

It also uses intrinsic width and height, which are the dimensions of the media in CSS pixels.

The second set of articles I researched relate to structural and text-level semantics.

This article, Semantics in HTML5 explains that the problem with older versions of HTML are that they do not have specific enough semantics, and that HTML5’s goal was to add more “meaningful semantics”… or as the author describes “extensible”.  New elements such as section, nav, aside, header, and footer have been included to help with the structure of the document. The author goes into more detail with each element, and discusses their current problems. Most of the cons associated with HTML5 is the lack of support from browsers (mostly IE).

Because we are planning on having a bold and easy-to-use header/navigation in our Twaddle website, the next article The Header Element, goes into detail about how and when to use <header> in our mark-up. You would use the <header> element instead of coding <div id=”header”>. You may also use it more than once:

The <nav> element can be used inside the header, and the header usually contains one heading tag (<h1>, <h2>, etc.).

Some argue that this element, and other elements in HTML5 are a waste of time, but others say that it eliminates the need for clutter and so many <div>s.

I also researched the <nav> element in the article The Nav Element because the previous article referenced it so much. It also states that it eliminates the need for additional <div>s. The <nav> represents “a section of a page that pinks to other pages within a page–” Essentially a major navigation section of your document. An example of it in use:

In the example, there are many links present, but the viewer understands that links in the <nav> element are used for the site’s navigation.  It is a little confusing while looking at the HTML to decide which group of links should be considered the central navigation. Other uses for the <nav> element include: Table of contents, previous/next buttons, search form, or with breadcrumbs.

The website I am critiquing is black-meridian.com. The website is all in French, but I am going to assume that the company does web development. In the page source, I see the use of <header>, <article>, <section> and <footer>. The new HTML5 semantics seem to help organize the structure of the HTML and allow the developer to use less <div>s and more meaningful and specific markup.

AVD WEB // blog post #4

HTML5 makes websites and applications better and quicker by allowing websites to become responsive and interactive, unlike earlier versions of HTML. It was formed by a group of technological geniuses in charge of websites, applications, and browsers, wanting to make the functionality of the web improve. HTML5 is different than HTML 4.01 and XHTML 1.0 because it has more security in web applications, computer programs, and tabs. It is also more efficient with connectivity because it has faster, real-time chatting, and overall better communication. The newest version of HTML also has new semantics, tags, and structural elements to be more specific while coding.

 

The downsides HTML5 are mostly the result of the lack of browser support. Aside from Opera, most of the other browsers incur problems while trying to load the new HTML elements, especially audio and form components.  HTML5 is still in the developing stage and will take a little while for the kinks to straighten out.

 

I found three articles to help me get a better understanding of the HTML5 processes including new form elements, animated letters and words in canvas, and a drag and drop photo feature.

 

In the article 24 Ways to Have A Field Day With HTML5, it discusses new tags in form structure. There are many new form elements including email, tel (telephone number), number (credit card number), required (tells you what fields are required), placeholder (which hunts input fields), autofocus (which puts focus on the first input field when the page loads). While these are only a few examples, they help organize the content and input areas, and improves the flow of the form.

Image

Image

 

In the second article HTML5 Canvas, I researched the canvas tag provided in HTML5. It is used to produce graphics via scripting with Java, but it is only a container to hold the graphics–it doesn’t actually make the images. Canvas allows you to use JavaScript to draw paths, boxes, characters, and images. The canvas needs a width and height to operate. To make the graphics, the user provides coordinates, and has the ability to draw lines, circles, and gradients.

Image

Image

 

The last article I read was How to Use HTML5 File Drag & Drop. The article points out how to enable the drag and drop feature on web pages, including details in JavaScript, HTML5 and CSS styling. In HTML5, a new <multiple> tag allows the user to highlight multiple files to drag and drop into the document. It also uses the <progress> tag, which includes value (current progress value), and max (value at the end), that helps build the progress bar.

Image

 

The HTML5 page I researched was for Smultron Lab. It was a single page design consisting of fragment I.D.s to help organize the content and flow of the document. I looked at the site on Safari, Chrome, Firefox, and Internet Explorer, and there were no visible differences in the design of the page. All of the fun and interactive elements worked the same in each browser. The site used fixed, relative, and absolute positioning, with the fixed being used for the navigation. The overall design works really well; Great organization of the divs, and the flow was extremely smart and easy to work with. My only negative critique would be the long, awkward space between the pages/paragraphs. All in all, the interactive navigation was really fun to use, and made the page interesting.

Image

 

 

ADV WEB // blog post #3

After reviewing the links, I learned more about what JQuery is, and how it can alter your website design. I was really impressed with the positive applications when using the JQuery plugins. In general, they make your site contemporary, refined, and interesting. There are also tons of tutorials and articles on Java related information, and the library of numerous plugins is available to anyone–professional web designer or amateur surfing the Internet. On the downside, I’ve read that sometimes Javascript doesn’t run until all images are finished downloading. Although many browsers do support JQuery, some have problems running it including: Firefox 1.0x, IE 1.5-5.x, Safari 1.0-2.0, Opera 1.0-9.x, and Konqueror.

The five plug-ins I though were most beneficial include the Roundabout, Page Slider, TipTool, and two form and menu detail plug-ins.

The Roundabout converts unordered lists and other nested HTML into an entertaining and interactive structure on the site. It is an easily alterable image slideshow that can be circular, animated, or three-dimensional. It is an awesome way to house multiple images and content, and view them all at the same time.

Roundabout phase 1

Roundabout phase 2

The Page Slider plug-in animates and slides horizontally to the next page of your site. I believe we tried this one in class at the end of last semester, and I feel that it is an easy way to add interest to a website through interactivity. This plug-in increases additional space on the page for secondary information as well.

The page on the right shifts to the left

‘TipTool’ is a JQuery tool in which you hover over a word linked to the plug-in, and a box appears next to it to give you further information. This plug-in is useful because the box that pops up can include text, a picture, or both. Also, it automatically detects the edges of the brower window, and adjusts itself to the top, right, bottom, or left to stay in the window.

Tip Tool

The other two are iPhone Style Radio/Checkboxes and UI Selectmenu plugins for forms.  While we haven’t done forms yet, these two Javascripts codes help spice up content through drop-down menus and intriguing buttons. They are easier to use than the default ‘radio’ buttons and checkboxes in standard HTML. They allow the content to be more easily used and extend the functionality of the select elements.

iPhone buttons disabled

iPhone buttons enabled

Dropdown menu bar for forms

The site I found— Color Scheme–actually uses one of the Javascript plugins I researched (the TipTool).  The page is a one-page site that helps designers or artists choose colors that go well together using the simple rules of color theory. It functions really well through simplicity in information and graphics. The JQuery script is useful in this instance when the viewer hovers over the blocks of color. Hovering cause a box to pop up with the hexadecimal color code, giving the user exactly the information they need. The content is mainly a series of giant color-selectors, and buttons with options for mono, contrast, triad, tetrad, and analogy color schemes. The layout showcases the successful organization, with the main focus of the site being the main color wheel.

The ColorScheme homepage

Using the drop down menu

Using the TipTool to see the color chosen

ADV WEB // blog post #2

mood board design

My mood board is mostly a collaboration of what I like to call urban randomness. I really want my next project to have a vibrant and energetic tone. I featured quite a bit of art work such as chalk art, tattoos, sculpture and paintings in this collection to give a feel of the whimsical style I am aiming for. I also gathered some inspirational silhouette photography and urban scene pictures to use for shape and form studies and color palette.

Mood board

The color palette is what I drew from my collection of images. It showcases the funkiness and erraticism of the overall vibe. The final design should be exciting and unique to the viewer, and I think my mood board reflects that.

color palette

AVD WEB // blog post #1

responsive design

Each of these articles were extremely helpful in explaining the definition and significance of Responsive Design. It was great how a few of the articles, specifically A List Apart’s article by Ethan Marcotte and Smashing Magazine’s article by Kayla Knight, went into detail about how responsive design became popular and how this form of design will be a necessity for web designs in the near future, if not already.

how it works for me

One of the statistics I read stated, “Mobile browsing is expected to outpace desktop based access within 3-5 years.” Although I know this information is true, I am just amazed at how quickly technology is advancing, even in the past few years since I’ve started college in 2008. It seems like everyone has an iPhone, iPad, or some sort of intelligent technology with internet or wi-fi capabilities. With the popularity of smartphones and mobile tablets, it is not a surprise that web designers are now required to know and understand how to alter their designs to make them flexible enough to work on almost any device.

So for my final project website I altered the dimensions and proportions to make them more appropriate for iPhones and iPod touches (width: 320px). Based on Nick Petitt’s article Beginner’s Guide to Responsive Web Design, I used the ‘target divided by context equals result’ rule to scale down my central logo and navigation.

Bamboo website

Original website (left) and iPhone version (right)

 While reading the first few articles, I was wondering how to alter the coding to make the device know that you changed the orientation of you phone. For example, when looking at a website on an iPhone in portrait format, it looks drastically different than when you change the orientation to landscape format. Smashing Magazine’s article answered my question. For iPads, a orientation property specifying ‘vertical’ or ‘horizontal’ can be added to your code. For iPhones, the article states “the use of max-device-width and min-device-width should do the trick.”

To demonstrate this I also did a mock-up of what my website might look like if it changed orientation. (width: 480px)

Bamboo website- iPhone

Landscape format for iPhone design

blog post #8

I began this blog post wanting to critique  the band The Killer’s (LINK) website, but because it was in HTML5, and we haven’t really discussed that yet, I decided to look at a short article/blog about HTML5, and show The Killers page as examples.

 

The blog entry I read was HTML5 structure—HTML 4 and XHTML 1 to HTML5 by Oli Studholme. Some of the most important new sectional features of HTML5 include a <section>, <article>, <aside>, and <nav> tags. In the article, Studholme explains the meanings in a straightforward way:

“<section> — a chunk of related content

<article> — an independent, self-contained chunk of related content, that still makes sense on it’s own (e.g. in an RSS feed)

<aside> — a chunk of content that is tangentially related to the content that surrounds it, but isn’t essential for understanding that content

<nav> — a major navigation block (generally site or page navigation)”

 

While reading this, I was immediately confused as to how some of these sections are different than the <div>s we use now. Studholme clarifies when to use a <section> versus a <div>, and that adding a title (like in a <header> tag) to each section element can help you decide. If the disable the CSS, and it seems like the content doesn’t need a title, then its most likely a <div>, and not a <section>. He also goes into using <header>s and <footer>s, and how they can be used one or multiple times in each sectioning element. This is useful if you need to provide information such as an author link or copyright information.

 

The <nav> tag was what I noticed in the The Killer’s site. It was organized inside a <header> tag with two unordered lists. One list contained the central links of the Album covers, while the secondary list brought the viewer to other links such as News, Tour, Photos, etc.


Page One (Homepage)

The site overall is exceptionally unique, containing a horizontal flow through the single page design, but contains absolutely no scroll bar. The coding (Javascript) allows the user to move through each page by just moving the mouse to the far left and right sides of the window. Also, each ‘page’ is organized by album, and all contain at least some form of an interactive button sending the viewer to the internal pages.

Page Two

 

Page Three

 

Page Four

Page Five

Internal Page Example

The article also explains some of the most beneficial aspects of HTML5. The new structural elements allows the code to make more sense semantically, and provides a greater number of accurate validators. HTML5 has much more detail for control, and it is fairly easy to change a web document from older versions to HTML5. It is said that “HTML5 structural elements work in modern browsers (Firefox 3+, Safari3+, Opera9+, Chrome1+) as long as we declare them as block-level elements in the CSS.”