• ProtectOurAnimals.com

Feel free to check it out:

• Float Layout Assignment

1. Kids Planet.org (this site is one of the few that had some interactivity but the homepage has audio that loops with no way to turn it off, the graphics are a bit dated.)
2. Kid Info.com (Can’t stand sites with white type and black background they hurt my eyes.)
3. Bagheera.com (Nice photos definitely an improvement to some of the other sites but still not much interactivity.)
4. Kid’s Corner (Appears to be more of a teacher’s resource.)
5. Endangered Specie.com (No its not a typo that is the site name, some links were dead and was a bit difficult to navigate.)
6. Edtech -Endangered Species (A simple information site that is nothing more than a giant link list.)

The idea for my final project is to create an educational site geared to young children with an interest in animals. The site will provide information on endangered species regarding: their habitats, distinctive features, food supply, etc., as well as, the conditions that are causing them to become extinct and what kids can do to help. One of the features I want to incorporate into the site is an interactive map that users can click on that will display either still images and/or video of the types of endangered species living in that area. Other features would include games that help teach kids more about a particular species that they are interested in learning more about, a peer-to-peer chat feature, detailed diagrams of the animals, RSS Feeds, Press/News Releases, Opt-In Newsletter, Supporting Non-Profits (sub section of the site on non-profits and other programs that work to help animals), and Forum.

Snooks.ca (just recently added him to Twitter) article 6 Ways to Understanding Modern CSS-based Layouts provides some very helpful tips. He emphasizes the importance of really learning the box model to help designers/developers get a better understanding of how CSS works. Not only does he have a summary with each tip but links for those interested in seeking out more information on a particular topic on the list. One such topic caught my eye and that was the one that talked about using Ems to size fonts on websites. Mainly Ems bring to mind pre-press and other printing terms but apparently they have some use for websites. One of the links listed below the tip, Elastic Design, seemed interesting enough, so I clicked it. Patrick Griffiths the author of the article Elastic Design discusses the pros and cons of using ems in your coding and how they can affect the design of the page. What I really thought was interesting about it is he goes into how using Ems in your web design helps to create stronger usability for the site by enabling users to proportionaly resize the type to their preference settings without sacrificing design quality. One point he brought up is the difficulty for designers to let go of the idea of rigid design and accept creating elastic design. I think from a graphic designer’s standpoint it can be quite daunting to consider your design as something that can be manipulated by others. I can just hear the gasps of graphic designers dead set on keeping the design original to its initial creation. For the most part we think that way. Most of us don’t really consider that the user should have any control over the look of the site, interactivity with it yes but not the design. Here is a quote from the article regarding the importance of considering elastic design for your site:

Elasticising a layout so that its size will change when a user explicitly opts to change text size may seem unnecessary and even unwanted, but if you have text that can be expanded and contracted, it can make sense for the layout in which it is contained to expand and contract accordingly. Additionally, if a user chooses to display text in a larger size, the amount of spacing around it should expand proportionally, maintaining the designer’s chosen proportions and keeping the text easy to read.

I’m definitely going to try out the Em Sizing approach and see if it helps to create a more fluid design for my CSS layouts. Just a side note but I scrolled down and read the brief bio on the author Patrick Griffths and he has a book called HTML Dog: The Best Practice Guide to XHTML and CSS, published by New Rider books. He also has tips for both beginners and advanced users of HTML and CSS on his accompanying site. Its worth checking out. I’ll have to read the book to provide some feedback on it but as noted on his site it follows web standards which is always a good thing.

I went off on a bit of a tangent with that last one but sometimes you gotta see where the road or um links take you. Just one more thing about Snooks.ca tips he has some more advanced ones that are worth pointing out to any all parties interested. For example, Floated Navigation and Sprites – basically CSS rollovers in a boiled down description. He provides a short list of links under each of them for further explanation. I really need to get on the ball and get the basics down so I can play around with this advanced stuff but I must practice, practice, practice first my basics before I even take a crack at the advanced CSS.

There were a number of different sites providing tutorials on how to create certain types of CSS layouts. I’ve listed a few of them below:

1. Floatutorial provides simple CSS layout tutorials. Mr. Batchelder showed me the Listamatic which happens to be a sub-section of this site. Its a good resource for learning different ways to create navigation with lists.
2. Blog Oh Blog this link is to a tutorial for creating a 3-column layout.
3. CHOPPR -teaches you how to create a multi-column float based layout. Very detailed. He is another person I added to my Twitter. I can always use helpful advice on improving my CSS.

Some other interesting articles and sites regarding CSS layouts:

1. Understanding CSS z-index: Stacking and float
2. Understanding CSS Positioning (this is part 3 of a series)
3. Dynamic Site Solutions
4. Adobe Developer Connection (mainly deals with CSS layouts in Dreamweaver) I have nothing against using Dreamweaver I just prefer not to do my coding in that program.

The last thing I have to say before I end this post is during my search I found information on Microsoft’s program Expression which is more a less their attempt at Dreamweaver. The only reason it came up in my search is cause it talks about using CSS Floats in the program. Here’s the kicker if you want to view the little movie that I’m guessing talks about it you have to download the Silverlight plug-in. Why oh why do they fight so hard to get things done their way? I can’t condemn them for their attempts but I can’t really say anything great about them either. Course to be fair I should download the free trials and see for myself but I don’t think that they will be better than Adobe.

HTML defines several elements, such as <p> for paragraphs, <em> for emphasized text, and <h1>, <h2>, … for headers. These are called semantic elements, because they convey a meaning.

Older versions of HTML, and the so-called “transitional” HTML variants, also define elements such as <b> for bold text, <i> for italic text, and even <font> for using different fonts and sizes. These are called presentational elements, because they tell the browser how to be displayed: bold, italic, with a custom font, etc.

Semantic elements don’t tell the browser how to be displayed. Let’s take the paragraph element p for example. A paragraph can be styled in a million different ways, but it’ll always remain a paragraph. –Denis Defreyne.

Although the article dates back to 2006 I felt it provided an insight that helped me to better understand the differences between semantic and presentational markup. He demonstrated that even the <b> and <i> tags in HTML are considered presentational code. Before reading his article it was my understanding that CSS was purely presentational and all HTML was semantic.

Table Layouts vs. Div Layouts: From Hell to ….Hell?, I found this article to be important in regards to my discussion  with Mr. Batchelder on my Intro to Scripting final project from a couple quarters back. My scripting was done very well but it needs improvement and it was pointed out to me that I had used quite a number of divs in my code. Now when I first learned HTML it was back when tables were the thing to do when you had to build a site. That way of thinking is frowned upon nowadays but has somehow snuck back in to my scripting. I will correct it at my first opportunity. The article goes on to explain how although table layouts are now considered depricated people are still trying to use divs as a substitution for tables. Unfortunately, I appear to be just as guilty as the rest of them.

Writing Semantic Markup, talks about the benefits of using meaningful code to setup RSS documents. It goes on to discuss XHTML and XML and the effects they have on semantic markup and RSS feeds. The author states:

The major difference, however, is that instead of having a small, highly descriptive set of tags and a well-defined role like RSS does, the XHTML tag set is large, ambiguous, and used for many purposes it wasn’t designed for. For example, to mark up the title and authors in our example above using XHTML we would need to rely on tags such as <h1> and <p>. These tags (“header” and “paragraph”) don’t describe the content nearly as well as <title> and <author> tags would.²

Also, developers currently use XHTML tags in countless ways, many of which aren’t descriptive. For example, some developers use <h1> as a page title, limiting themselves to just one <h1> per page. Others use it as a page title but don’t limit its use to one per page. Still others use <h1> as a paragraph header and never as a page title. And there are some people who simply use it to make their text big. This inconsistency greatly diminishes the descriptive power of the tag. Unfortunately, most XHTML tags suffer the same fate.

The dilution of description in XHTML isn’t necessarily a problem with XHTML itself, but rather a problem stemming from our evolved usage of it. For example, in addition to static Web pages, we now build many different kinds of applications: e-commerce apps like eBay, email apps like Gmail, search engines like A9.com, collaborative apps like Flickr, bookmarking apps like Del.icio.us, and a myriad of other apps that couldn’t have been envisioned by the most prescient HTML working group. Over time, our usage of XHTML has drained it of semantics.–Joshua Porter & Richard MacManus

Through the implementaion of structured blogging and microformats actions are taking place to provide an agreed upon semantic framework for working with XHTML without requiring new software to view it or having to invent an entirely new format.

Microformats: More Meaning from  Your Markup, goes into more detail about using meaningful markup in your XHTML and HTML to enable people to extract content to interact with other web-based applications and formats.

12 Lessons for Those Afraid of CSS and Standards, Ben Henrick provides some good points in regards to standards in CSS. CSS stylesheets with several divs in them to control the layout is considered an offense to CSS puriest and is also amateur. His statement, “it took me a long while to achieve genuine mastery of CSS…..”, makes me feel better about my current skill level in CSS. Also, as I stated above (in so many words), it takes a new perspective to understand how to create strong web design, at least from a graphic designers standpoint. Henrick states, “…few of them acknowledge that using CSS to create standards-friendly sites requires a mindset that is alien to many experienced developers.” In Lesson No. 1 Everything You Know is Wrong…Henrick mentions that its important to reevaluate the questions you ask yourself when presented with design problems that must now face the practice of web standards. He says, “Roll up your sleeves and learn something new. When it comes to layout and production, resolve to remove “but” and “should” from your professional vocabulary for a while. Replace them with “how” and “why”—and commit to meeting your project objectives.”

Web Standardistas on Web Standards in Education talks about how web standards are underutilized within the educational system, Christopher Murphy/Nicklas Persson state, “Although the web standards movement has been active for over a decade, there’s a frustrating tendency for universities – which should be at the forefront of advancing standards and innovating – to lag behind industry in championing and incorporating best practice into the curriculum.” This is not an issue I’m concerned with at my current school but the school I previously attended seemed to fail in that respect. I never even heard of W3.org until after I started in the Web Design program at AiD. They bring up an interesting idea of getting the industry involved in the curriculum vs. academics requesting industry input. I think it would be beneficial to schools if the web design industry reached out a little more to the academic side of it, instead of complaining about students not getting the proper education for the field (depending on the school) they could provide their input. I strongly agree that web standards are an integral part to my understanding of creating meaningful code.

10 Tools for Evaluating Web Design Accessibility, this article focuses on the often neglected practice of catering websites to users with disabilities. It is often discussed in class but rarely practiced, I can say from my end at the very least. The article is more or less a list of tools that a designer can utilize to ensure a fully accessible site. I didn’t realize that greater web accessibility allowed for cleaner, semantic code and better indexing in search engines. Although the obvious benefit is a broader user audience since the site will not be limited to only those without disabilities. It makes sense to setup your site for greater accessibility, would you really want to boycott someone for something they can’t help? I think the tool: T.A.W Web Accessibility Test is by far the most beneficial tool in that it tests your site for you and pin points the problem areas. That way you know exactly where to go to fix the problems.

Referring to the handout, The principle of Transcendent CSS, I fully understand the point Mr. Clarke makes about “Not all browsers see the same design,” that holds true for many websites and their interaction with browsers. It is very important when building a site to see how it works in all browsers and allow the designer to trouble shoot the problems so that inadequacies in the design can be prevented. In regards to the selectors for CSS I’m completely lost. I’m not sure if its the lack of sleep or the humbling fact that I have managed to forget some of the CSS scripting I previously learned. I can honestly say that the link I found on explanations of the selectors only served to further confuse me. I also sad to say that I didn’t know what DOM was until Mrs. Kibby mentioned it in User-Centered Design this very quarter. This handout has been an eye opener. I didn’t realize how little I knew about CSS and how complex it can be.

However, I do remember the discussion on the proper use of semantic naming conventions and was encouraged to use the meaningful equivalents vs the presentational ones. The meaningful semantic naming conventions: #branding, #content_sub, and #site_info make more sense to me towards clarifying the code than using the purely presentational conventions.

The concept of sharing and collaborating with others is both a frightening and exciting prospect. Not to disrespect any designers and/or developers but there is always the concern of idea theft. But then, in the same breath as web designers we work in an open community, so to shut ourselves off from fellow designers interpretations only serves to hinder our overall understanding of new concepts and methods.

I am really looking forward to what this new quarter has to offer because I plan on dedicating more time to fully understanding the basic scripting languages of CSS and html, in addition to my lessons of javascript.