Meagans Can of Worms

Okay, so here is the near to final pass at my portfolio website. With the feed from my class, I am still making some technical… changes and will find a host site to post it on.

In the mean time, check it out on this temp site url and feel free to say what’s on your mind. I love critiques. Also, if you want some art, my conact is there too.

http://bcts-potomac.aacc.edu/cat/cat06/home.html

Below are two links to some instructional sites for this:

* This first one is a great video that gives you tips and things to remember about the web vs. TV motiors when it comes to using or making a video for your site. I highly recommend checking this one out:

http://current.com/make/training/section/broadband.htm

* This next link  is for Izzy Video. It’s a great place to learn all about video. IThere are more than 100 video tutorials on how to shoot and edit video, get  free DL’s (there are new tutorials every month):

http://www.izzyvideo.com/

Now, if you’re a Flash user:

• output the AVI (or MOV) from Premiere,
• import it into Flash
• adjust the Canvas size of the flash file to fit your movie
• Flash will step you through the process of setting up the video
• Publish your flash file as a SWF
• Add the SWF file to a page in Dreamweaver 

…and have fun!

So I’ve been working on getting the site ready to make live. I just linked all of the appropriate links and am in the process of fine-tuning the kinks.

I’ve learned a lot from this whole experience so far. One huge help to me has been referring back to the (I can’t believe how wrong I was before)…Lynda.com. I know I bad talked it before, saying it was drab and talky, that it didn’t help me…when in reality, all I needed was a basic understanding of Dreamweaver, then I could follow what really was going on.

This whole assignment also inspired the learning of HTML coding b/c it makes life so much easier when you know it. You can do things that are that apparently possible by just going by Dreamweavers option. It proves VITAL to know it. I’ve been even taking a look at different site’s HTML, especially ones I find unique and interesting. Learning how certain things are accomplished this way, is pretty rewarding.

Anyway, check out the current standing of the OLA site, let me first warn you, the navigation is flaky. Some computers it looks/works fine, others, not so much. I’ll need to resolve that:

http://bcts-potomac.aacc.edu/cat/cat06/week12/ola_site/ola-template-mcrable.html

…if your audience is going to act like you’re designing billboards, then design great billboards. The truth about websites is, if your going to spend alot of time writing a throurough, highly detailed site, the information better just be so gripping you can’t help but read it all.

This is because most people look at site for a quick answer, at a glance. It’s more tiring and “painful” to read a screen verses print, therefore, most people only skim a site for the info they want.

This week I read a few articles on the facts about website readers and how to make a website knowing these truths. I recomend looking at them and keeping their tips in a reference folder for when you begin writing, making  website…

1. Killer web Content examples, By Gerry McGovern is an article about what works best…“The content that works on the Web has one key characteristic: it is customer-centric. The content that doesn’t work on the Web also has one key characteristic: it is organization-centric.”  http://www.gerrymcgovern.com/nt/2007/nt-2007-10-01-killer-web-content.htm




2. CSS Cheat Sheets Basic CSS Cheat Sheet and CSS Layout Cheat Sheet, By Jennifer Kyrnin

…should help you with both the basics of CSS as well as using CSS for one of the more complicated tasks – positioning and layout: http://webdesign.about.com/od/css/a/css_cheat_sheet.htm

           3.  How we really use the Web , an excerpt from Don’t Make Me Think! A Common Sense Approach to Web Usability. Talks about the fact of what people really read, see, want to read from a web page.   ****very good article**** http://www.sensible.com/chapter.html

Here are some enlightening articles I discover in this weeks homework:

Firstly, going over the concepts behind CSS, which I am rather sick of reading over and over about, I read
Understanding Cascading Style Sheets, by Jon Varese:
http://www.adobe.com/devnet/dreamweaver/articles/understanding_css.html 

-This article may be tired to me right now, but it is a great summary of the purpose of certain CSS elements and how to use them.

Next, the article: CSS page layout basics, which discusses the ever many ways to go about creating a layout- whether it be from scratch, Using the pre-designed CSS layouts, using AP elements…

http://www.adobe.com/devnet/dreamweaver/articles/css_page_layout_basics.html

Thirdly, there is CHRIS COYIER’s The Difference Between ID and Class which discusses 

And for ‘a demonstration of what can be accomplished visually through CSS-based design’ along with You being able to go in and modify their existing page, using CSS skills, see Zen Gardens site: http://www.csszengarden.com/

Lesson 10 in the Dreamweaver book deals with making website work easier, quicker and faster. This is accomplished by creating a Template that will be the “mother”/ source of the cloned “childpages“. Basically, like the masterpage we created in our fireworks doc.

All that you do is take an existing page (easier to work from that then creating one from scratch) and “Save as Template” (extension will be “.dwt”)
*These will be stored in their own folder Dreamweaver creates @ site root level.

B/c this is the template, the regions that you want to edit need to be defined as “editable regions“. This is done by (Insert> Template Objects> Editable Region), in which you name accordingly.

This chpt. also goes over Library Items (reusable bits of HTML (¶’s, links, ©, nav bars, tables, images…that you reuse frequently in a site). You use an existing pg element to create one that  is accessed in your assets panel. Another time saver is use of a  Server-side Include, aka: “SSI” ,are used to “paste” the contents of one or more files into another. For example, a file (of any type, .html, .txt, etc.)

So this info will be helpful in making the most of my time when making a site. By using templates, Library items, and server-side includes, website design is not only quicker but easier to maintain.

Checkout my example:

http://bcts-potomac.aacc.edu/cat/cat06/Lessons/lesson10/index.html

This weeks classwork Rocked My Socks!!

Finally, everything is clicking. I’ll explain briefly the steps I went through, turning the digitalJENN comp into a design page in Dreamweaver. This is the first phase of building your actual web page…

Starting with the comp that I created in Fireworks, I exported the slices and rollovers (all appropriately named). Then I moved into Dreamweaver  to create a new doc.
The first step in laying out your page is to define the body using the CSS rules and  the outer container (“wrapper”). Next step, defining the characteristics of the main container.

The four major areas of this design are the header, photos, content and footer. Each one needs to be separate so I created primary DIV tags for each area.*(While doing each, I added rules for the b/g color, box…)
The next step is to  insert the major elements of the page. (for example, I inserted each DIV-header, photos, footer… into the mainWrapper DIV (this is called “nesting DIV tags). At this point, I also added the side nav bar and content area (each getting it’s own rule b/c they’re treated as separate objects that sit next to each other). All of the steps done so far have resulted in the basic structure of the page.

The next steps are to plug in the content (ie: logos, banners in the header, photos). For the nav bar, I inserted the rollover slices I created in Fireworks at the start of this process. I simply copied and pasted the main content of the page from a text document created earlier, and modified it with some color and heading sizes. I did the same thing for the content in the footer area.

This was a much needed walk through of the process of building out my page. I had a sort of thick, foggy idea of what I was doing before. After going through this process, I have a much much better understanding and can move forward with my website, thank GAWD!!!

Check dis tang out:
http://bcts-potomac.aacc.edu/cat/cat06/week11/digitaljenn-start.html 

Making tableless, CSS-positioned layouts instead of the old table-based method, is a far better and easier way to go about designing your web page. After reading Sheri German’s article “From table-based to tableless web design with CSS” at http://www.adobe.com/devnet/dreamweaver/articles/table_to_css_pt1.html , I learned just why. In the article, she gives the Pro’s and Con’s of the old fashioned table creation and why CSS layouts are easier. The article also has a Dreamweaver download exercise that will walk you through the process and show, just how simple it is. 

Below is my walk-through, starting with

step 1. Replace the image align HTML attributes with the CSS float property:
http://bcts-potomac.aacc.edu/cat/cat06/week10/yachts/simple_page_start.html

in step 2. I used the float property to create side-by-side columns, and  another replacement technique of replacing table cells with CSS boxes, aka DIVs.
http://bcts-potomac.aacc.edu/cat/cat06/week10/yachts/container_div_start.html

Step 3. I used absolute positioning, one way  to create side-by-side columns. It is good b/c it’s div can be placed anywhere in the HTML code source, however it can also be rigid when making adjustments to things such as text size:
http://bcts-potomac.aacc.edu/cat/cat06/week10/yachts/absolute_start.html

Therefore, there is the other option of using floats for creating side-by-side columns. By using the float method, you can allow either column to be longest without overlapping the footer DIV:
http://bcts-potomac.aacc.edu/cat/cat06/week10/yachts/float_columns_start.html

Now, I recommend you try it out and see just how easy it is (see German’s article link at top)

This week we got to experience my previous blogs subject matter a little deeper…

Taking our old OLA template, we had to plug in real info, removing the lip sum gobbledy-gook, and adding existing content. As I was doing this, I decided much of the existing template needed to be adjusted. I re-arranges certain aspects of it as well as completely removing others. I guess, the whole idea of making a prototype IS a very USEFUL step and piece of creating a website. I got to see what was going to work, how I needed to re-structure my previous idea of the functionality and then the over-all aesthetic appearance.

Below is the link to the PDF version, so you see how the layout has changed. The pieces that simulate functionality are the top nav. bar for the different pages on the site. External links leading to the rest of AACCs website are not interactive yet b/c I haven’t learned how to do that, maybe next week ( ;

http://bcts-potomac.aacc.edu/cat/cat06/week10/crable_ola-proto.pdf

Also, check out the master page layout to see how I separated the common, top-of-the-page elements from the rest of the sites changing content:

http://bcts-potomac.aacc.edu/cat/cat06/week10/crable_ola-proto.gif

MOCKING IT UP

A great way to show your thought process to “the client”,or see what’s gonna happen with the functionality of a site you’re building, see what works/ what doesn’t before you entirely build out a site….is to make yourself a Prototype.

By using tools like: 

• Symbols- re-usable graphic elements (graphic, animation, and button are the 3 types).
• Slices- used to carve up areas of a design to incorporate interactivity, prepare graphics to be reassembled into a HTML file, create nav bars, pop-up menu’s, rollovers….
• States- “aka “frames”, control interactivity of symbols, shared layers, and animations.

When making a prototype for a website, you will need to simulate how all the pages will function. Pages are once again, made to flow (using the master page for the common- basic layout) with each one having it’s own canvas size, web layer and interactive elements.

This is the cool part…In the common library, there are these pre-made symbols that mimic online elements (ie: submit buttons, text boxes, reset…) you can place and they will show how that page will work.

For practice on building a prototype, I made a preliminary design for a website called  ”digitalJENN”. Check out the basic design, -you wont be able to see the interactivity in this PDF, but you can see where the symbols (buttons) and navigation will reside. In the .png, they preform the way they normally would in a functional website. Great for showing someone what your gonna do, when building a site for a client. Sometimes people want you to make the impossible possible, and by making a prototype, you can better communicate why something wont work and come up with another solution.

http://bcts-potomac.aacc.edu/cat/cat06/week10/DESIGN-pages-mcrable.pdf