CurrentSF Final

Week 11: Final Thoughts

This is the last week!! Finals! We have finished with the final touches to our CurrentSF website! Happy!

Check out the final website for CurrentSF!

My final thoughts for this website is that I really like how it turned out. I chose the right design layout for this type of events website with two columns content. The pagination coding for number of pages really worked well with the event posts. Most of all, the functionality works, so everything works! I am most proud of our team all working together and putting everything together. We all agreed on what to have on the website.

Rubric Critiques

Week 9: 

Macromedia/Web Page Final Project Rubric

Our CurrentSF layout website is 95% finished yet. Looks a lot of information and technical part of the website is complete. Using the rubric scale, here are the results after critiquing:

Design: 4 points 
"The page design is visually pleasing, supports the page content, and is appropriate for its intended audience." Used the right kind of blog-like content boxes for a news event website. Very appropriate of the having the sidebar with social plug-ins and search engine bar because mostly sidebars are less important or have advertisements that people ignore.

Usability Testing

Week 8:

[EDIT 12/9/10]

Usability Testing for CurrentSF
Since I did the usability testing wrong last week, time for redo.

For our website, I asked my brother to do the usability testing. Since he does not go to an art school, maybe he can tell us about our website. He knows how to use a computer. I explained to him what the website is first before testing. The hot spots of the website was the slider, the event posts, and a little of the navigation. Simple layout. First thing he said that draw his attention was the preview slider.
    "The big image and flashing of the news caught my attention first." 

Multimedia Elements

Week 7:

For our website, we have a lot of images and content. These multimedia element can enhance our group project. We will provide alternate views of multimedia content. In doing so, our information becomes accessible to everyone. For example, we will have text alternatives for the images for people who have disability or pictures that could not load. For low-vision users, text can be magnified by raising the text size or window size. We don't have any sound or videos on the website. However, we do have a small slideshow or preview of animation for displaying events. All the content and preview are drawn from RSS feed. The preview display are only the featured events with provided links for users to click. They are not distractions unless we put featured and important content on the preview slide to lure users to read on.

Strongest/Weakest Elements

Week 6:

Self-evaluations:
The schedule is going fine. We have done most of the coding already, just the RSS feed we need to draw information from and the calendar. The overall design and all the images took longer to make than I expected..fixing the navigation images. Everyone is doing their part of the job. We still need to finish up with the contract, technical plan, and content soon! Plus, the good part, we are working hard together and doing a good job!

What you did for your group project this week, how you think this adds to the overall success of the project, and give examples of the site's strongest and weakest elements.

This week, what I did was make all the navigation images, revise and fix more of the wireframe layout in how the website should look like.

Page Length & Size

Week 5:

As I said before, the page design is made for the updates of events and news in San Francisco. The colors varies from different tints and shades of green and blue. For the background, I might make it gradient from sky blue to dark blue. For the footer, we will be putting up a large image of the Golden Gate bridge, so we want the top to look like the sky to all the bottom of the dark blue ocean. The headers are green gradients. I added drop shadow for the content and banner. We have 2 columns. On the right side are the calendar, Facebook, and Twitter updates/feeds. We will have a search bar/engine on the top right. On the left are the main content of featured events are all events and news.

The width of the layout is 1000px. The length has no height, it can extend as long as it can depending on how many posts we put on the page. We decided this size because most browsers are as least 1024px in width. It is wide enough to have 2 columns of content. I think it is a good size, not too wide nor thin. There is no accurate height in pixels. The content will be scrollable, so the content is not all laid out right on the top of the page. There is just too much content, so that's why we separate the events and news into 3 different categories.

Current Page Layout

Week 4:
Here's a current page layout of the website for Current SF. This is a wireframe of the site:

I will guide you through what will be on the website. On top is the branding and the logo on the banner. We decided to use a Golden Gate bridge and currents of the water part of the logo.

Ensuring Target Audience

Week 3:
Website name: CurrentSF / Current SF
Logo theme: SF bridge + current waves

I'm going to make more changes to the colors again. This week, I'm working on the colors of the layout. I'm also making the logo in Illustrator. I'm trying to make something that match the name of the website: CurrentSF. Choosing the colors is hard. I can't decide what to use and kept changing the colors. I'm trying to fit the logo onto a banner and testing it. Also, my group wanted some kind of big image on the bottom of the website in the footer. I will need to make a large illustration and make it look nice. I showed them my wireframe layout for the site. I'm also thinking of making graphics with gradients.
[EDIT]

Art Director

Week 2
Changes:
In class, our group discussed the kind of website we are going to make. We thought of the topics and the pages for the website. We looked at other news and magazine websites to look for examples. We finally decided to narrow it down to find events about San Francisco. The website is community-based and events drawn from RSS Feed. We decided to make 2 stylesheets; one for web and another for iPhone application. We talked about the target audience as well. My contribution to the group project was showing my sketches of the layout. We discussed the colors for the site. We are going to have a calendar.

For my part of the role as Art Director, I will scan the sketches of the layout, choose color scheme, font styles, and create wireframe of how the layout might look.

Pages: Home, Art, Food, Music

Project Roles

Week 1:
This is my outline for the group project. We have not confirmed on all the detailed yet. Changes may apply as we discuss more later on.

Group Name:
Alpha Dogs

Group Members & Roles:
Project Manager -- Sam Alegria
Content Editor -- Tyler Souza
Technical Engineer -- Melissa Picardo
Technical Engineer -- Richard Navarro
Art Director -- Susan Lei

Concept:
We are creating a community website. We are creating a magazine on current events and updated news. The magazinewill be based on being in San Francisco.

Intermediate Web Design

HELLO!

I'm back! Break is over, but it was short! Time to go back to school. From now on, the blogs are about the assignments for MM2213, Intermediate Web Design class. In this class, we are having a group project. So, the website will be completed with the group.

Book: http://webstyleguide.com/wsg3/index.html

CSS Zen Garden

FINAL:

Here is my completed CSS Zen Garden. I love how it turned out. I spent a lot of time fixing and adjusting changes I made. I'm very proud of myself. Lastly, this time I added a dotted border around each box.

Preview:


My CSS Zen Garden, "Small World" by Susan Lei.

Process Page for Zen Garden

Week 10: Process page

The CSS Zen Garden page originally looks like this:

My theme of the CSS Zen Garden will be called "Small World."

I spent A LOT of time working on my Zen Garden page. I really mean it.. because I made so many changes throughout. I've decided to change my colors again. I have 3 main colors and some other random colors for the layout and background. I also used different font types, about 2-3. I definitely used a lot of images and design them on Photoshop. Headers have image backgrounds. The bullet lists also have images of an icon. All of the contents are in boxes. I also had to make the layout big enough so it can repeat if other users have different monitor size. When I make the layout large, other users won't see any cutoffs of the layout when they zoom out. It took a while for me to figure out of some of the coding to separate boxes, display in blocks and inline.. that was hard. I used gradients on the layout and reflection to make the title look better. The headers have images. I couldn't separate the "download the html and css" and the "A demonstration.." quote part. I couldn't figure it out, so I can't place it at different places. I changed the background with a white-greyish box now, instead of the yellow squiggly lines on the side. It made more sense with the box attached with the background instead of having the yellow lines lying on the side.

Here are the colors & font types I used:


Here are some of the images I used. I got them from Getty:

You will see the rest when I have it done and ready on the website! :) I am almost done!

Incorporating into Zen

Week 9

Blog how you are creating your project to stand out from all the other submissions. Reflect on how you might use the allowed .css code to give a different look to your zen page. How can you incorporate what you've learned from Bulletproof Web Design?

In my final CSS Zen Garden, I will use images and nice designs for the background, banner, and headers if possible. I'm going to choose nature colors or a bit of bright colors that relate to the garden and greens. I changed the CSS stylesheet a lot. I might move boxes around; hiding or unhiding things. I have seen many designs as examples and inspirations. I hope it will turn out different. By incorporating the book, Bulletproof Web Design, I will follow the book about the sidebars and background images for headers. I might draw my own images or Photoshop anything if needed. I used a lot of the margins and paddings to separate each box, so they are not so clumped together. I will choose a good typeface for the banner. Images will be taken from Getty. I'm guessing CSS3 won't be allow, so CSS1 & 2 will be there, of course. I am working on it~

Mezzoblue - CSS Zen Garden designs from people

Wireframe for CSS Zen Garden

Week 8:
Here is the wireframe for my css Zen garden:

I'm going to use images for the background and the banner. I'm going to have boxes for the content and the side navigations. The colors I chose are green, yellow, and orange. I want to use light colors, tint. My theme is using garden, flowers, or nature things. I'm still deciding what kind of images to get from Getty. Changes may apply.

I have a sketch as well. It will be up soon.

Possible Portfolio

Week 7: Putting It All Together

With using the textbook on chapter 9, "Putting It All Together," I created a possible portfolio website. Some of the examples and codes helped me with the possible portfolio. Screen and print sheet also attached. No CSS style view also works.

I love how it turned out! (:
Portfolio

Design Objective:
For the design objective, I added jquery/javascript tab contents in the page, so the content boxes fades or transition every time the tabs are clicked. So instead of making more than one HTML one, I used jquery to put tabs to make separate pages. A smart way. I created a small design of my name to let it known and put it out there. I created the background, so the background won't look as plain. I also added CSS3 to make my page with much more style; CSS3 with rounded corners. I was going to use drop shadows as well, but then it didn't look that good with the tabs content. I tried using a gradient background with CSS3, but it won't show up on my Firefox browser.. The @font-face code is very useful. I like using a font family type that I chose. The font family I used is called QuigleyWiggly. The portfolio page with the gallery has the jquery of image viewer. I like using it because it shows a preview of the images to users. Also, if they like what they see on the images, they can click on the link to view a larger image.

Target Audience:
I target the audience for future employers, teachers, students, and anyone who visits my portfolio page. I set up a portfolio page of a gallery for them to see my recent works and skills. I designed the page to make it user friendly and easy to navigate. Therefore, the viewers will continue to browse through my page.

Designing with HTML5

Smashing Magazine; HTML tutorial

This tutorial was super long. There was just too much coding and following the tutorial. After typing all of the HTML part and half of the CSS sheet, we just started to copy and paste the rest of the codes for CSS. That was tiring! At least near the end, I get good results. I like how the page looks like after. HMTL5 is so different from what I was learning before. However, It does make sense. For examples, nav, footer, and header are like tags I would use for div ids. For article, section, figure, and hgroup, I am yet confused and need to learn more about them. I hope I will understand and continue to learn about HTML5 to help me with my layouts in the future! :)

Here is a preview:
Firefox & IE


Click here for the HTML.

How the Web Wins

Week 6:

Wired | "How the Web Wins"

Everyday the web browsers and apps change. There's always new things appear. I agree with the author from the article apps are popular. However, I also think that apps can never replace the web. The web is beginning to have more improved ways to use it. Since Css3 and HTML5 came along, for sure the web is getting the rates up high. The design looks even better. The web will always be useful and helpful. As what the article said that the advantages of the web are only growing, I must say that is it true. Even now, some mobile phones have these apps that allow them to access online to the web. That is even more amazing. Such a small screen and only a mobile phone that the user can take the web along anywhere. Businesses can create online billing, banking, and other things on the web now. It's much more easier as well. In the future, the web will continue to have more new things. It will top everything else.

Week 5: Indestructible Boxes

Chapter 5; Indestructible Boxes

I followed the examples on the book and the webpage came out nicely with rounded corners. The book taught us using images for the rounded corners by positioning them to the top right, bottom left, etc. Instead, for my homework website, I used CSS3 for the rounded corners. Print stylesheet also attached on my webpage.

Rounded corners
Single rounded corner

Single rounded corner & Rounded corners:


Chapter 6; No Images? No CSS? No Problem!
In my homework website, I followed those examples. Make the website still works without the fancy styles. To ensure content is still readable, we need to check for these in the websites: CSS, no images, validate, font sizes. We use the 10-second usability test.

No CSS. By going to View > Page Style > No style, the CSS stylesheet will be disabled. Therefore, it will show the website with its content only. The navigations are still visible in bulletpoints. The headers are still in larger size or bolded. Everything is in the page.

No images. Go to the toolbar on top of the browser. Go to Images > Hide Images. For Firefox, go to
Tools > Options > Content > uncheck "Load images automatically"

VALIDATE! This website is a good place to validate your website. Go to http://validator.w3.org/ to validate HTM. For CSS, go to http://jigsaw.w3.org/css-validator/. Make sure your HTML and CSS is validated, so no errors. Be sure to have this in your HTML:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Font sizes should be able to scale if a user want to increase the window size. Using px or em should be good.

Zen Garden Print Screen

Week 5;
For the HTML sheet, we attached 2 CSS stylesheets. One for original screen CSS and another for print screen CSS. The real website is on the Zen Garden website.

Print sample

The HTML looks like this:


On the CSS, change the header to display:none; so to not display any empty spaces or white space. We also changed the margins to fit the content into places.

This is how print screen looks like:

Subcide Tutorial

July 27, 2010; Week 3 -- Subcide Website

I forgot to blog for every class we meet on Tuesday. Well, last week, we learned divs and how to reconstruct tables to divs. In class we worked on the subcide layout. We didn't finish, but we left off making divs (BEFORE; on the left).

I worked on it more the subcide. Start from this page 2 of tutorial website:
Subcide tutorial

The outcome should look like this page:
http://www.subcide.com/examples/creating-a-css-layout-from-scratch/

This Subcide tutorial is all about divs and CSS. It's a good practice and I learned a lot from this tutorial. Very helpful. It took me awhile to finish because I had trouble having the images and the navigation to work. It turned out exactly just like the website. Finally it's done. :)


It looks like this now (AFTER): My Subcide outcome

Week 4: Chapter 4 & Creative Advices

Chapter 4: Creative Floating
http://slei89.aisites.com/introweb/week4/ch4.html
I actually took the images from Google, so they look different from the original ones from the book. The gradient, I created myself, following the book. I got the hang of floating the text and images from left to right. Also, I learned a bit of margins and paddings for the content box. However, some parts of the CSS are hard. Codes like [#sweden dd.img img] dd.img within a sweden id and a sweden img id, which are confusing to me. I'm still trying to understand it myself.

Here is how it turned out to look like (on the left), and the code (on the right):

Creative Advices
If you want to be creative for your work, you should follow these advices I'm going to give. I might be helpful for you, yet it might not. It depends on your determination in whether or not you want to become a creative person or artist.

• Being creative, you must have inspirations from anywhere, anything, and anyone.
• THINK. Sit down in a quiet place and start thinking.
  
• Take a look at examples of other people's work and design, BUT d0 not take/copy their work.
• Have an idea.
• Determined. Get inspired.
  
• Use your imagination. Expand horizons.
• Share ideas with classmates, friends.
  
• EAT!! Because you need the energy to think for ideas being creative.
• Be unique. Do something different his time. Don't do the same things like always.
• Music might help for some people.
• Make some sketches, draw, write..
• Test out creativeness with programs.
• Ask for tips/examples from others.
  
• Have pros or cons on your work, like what works and what don't.
• Check out web design websites for inspirations such as Smashing Magazine
  

Week 4: Templates

[HOMEWORK]:
Here are the two templates I played with on Dreamweaver. I chose these two templates and insert editable regions by going to Insert > Template Objects > Editable Region. Also, we need to manage sites to be able to save the templates and assets. To open up assets, go to Window > Assets. Click to the icon on the bottom of assets' window and add new library item. I made the footer an asset to use on both templates. For the editable regions, I edit the sidebars and content box. Below are the examples I made:











Templates:
http://slei89.aisites.com/introweb/week4/templates/template1.html
http://slei89.aisites.com/introweb/week4/templates/template2.html

Template files;
http://slei89.aisites.com/introweb/week4/templates/template1.dwt
http://slei89.aisites.com/introweb/week4/templates/template2.dwt


Today, August 3, 2010 [IN CLASS]:
Wow, I can't believe that it's August already. Summer went by fast when there is school. I still think summer break is too short for us. I am still sleepy in the morning. I tried picking afternoon classes.. I want to add a "Read more.." link to my blog, but it won't work. I followed the steps to this blog, but it doesn't work for me. I'll try again later on. Anyways, we showed our reconstruction site in front of the class. After, we learned about templates and adding assets in the library. Templates are not that hard, since Dreamweaver already have some.

P.S. STUDY FOR MIDTERM.

Week 3: Converting Tables to Divs

For this homework, reconstruct this website: http://casabasa.com/web/mm2213_wk1.html
Remove all table tags: table, tr, td, th. Guidelines on chapter 3 of the textbook called "Explandable Rows". Provide finished page link. Embed css style sheet.


Here are the finished pages: (Click to enlarge each page)
Page 1 - Page 2 - Page 3








Page 1: Home; Introduction of the class
Page 2: Class schedule
Page 3: Student information

I separated the site into 3 pages. I took off the last two pages, resources and tutorials. Instead, I put those links into the student information page. This way is easier to read all together. I helped grouping the information all in one section, so no more separate ones, and easier to find information. The reason why I changed the layout is because I wanted to make the content box more smaller in the center. Easier to read and the page not spread out.

What I changed for the site:

• All dividers, no tables except the grades.
  
• Colors, font, and styles changed.
• Navigation on top of page now.
• Headers have background colors, depending on the h1,h2,h3.
• Content box in center with scrolling.
• Margins and paddings applied.

CSS style sheet:

FINISHED PAGE: http://slei89.aisites.com/introweb/week3/index.html
View source for HTML coding & CSS.

Week 2: Pantone Colors & Chapter 1

Pantone Colors
List 3 pantone colors and their RGB equivalent. I will be using these colors in the layout:

• #FFFFFF (white):
  - R: 255
  - G: 255
  - B: 255

• Pantone Black 7 C (dark gray):
  - #333333
  - R: 55
  - G: 53
  - B: 52

• Pantone 7545 C (blue):
  - #51626f
  - R: 81
  - G: 98
  - B: 111

• Pantone 2985 C (light blue):
  - #55c5e9
  - R: 85
  - G: 197
  - B: 233

Chapter 1: Flexible Text Using Ems
Link: http://slei89.aisites.com/introweb/week1/ch1.html

Sizing text using em units. The em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.
IE/Win will not allow readers to resize text that has been sized in pixels. Using ems however, allows all browsers to resize text and also provides pixel-level precision and so they tend to be my unit of choice.

Here are the Ems -> Pixels:

• 1em = 10px
• 1.2em = 12px
• .9em = 9px
• 1.8em = 18px
• 2em = 24px
  
  

Book: Bulletproof Web Design
http://clagnut.com/blog/348

Week 2: Box Model Tutorial

You need to know these keywords:

• Content edge or inner edge -- The content box edge surrounded by width and height.
• Padding edge -- The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge.
• Border edge -- The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.
• Margin edge or outer edge -- The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.

• The box should be measured by width and height.
• Can use different kind of units or sizes: pixel (most common), em, %, auto
  
• Each edge may be broken down into a top, right, bottom, and left edge.

The middle box 300 x 200 is the content, edge surrounded by content is content edge. Padding is in turquoise color, around the content, or padding edge. Border is in blue, surrounds box's border. The margin is in the outside, wrapping everything of the box margin, or margin edge.
(Click on image to enlarge)
Here is an example of the code:

.box {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #000;
margin: 15px;
}

Let's try the calculations:

Total width = 15 + 1 + 10 + 300 + 10 + 1 + 15 = 352px
Total height = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px

There are properties and styles you can apply to the edges. For examples:

• border-width: thin, medium, thick

• border: border-top, border-bottom, border-left, border-right

• border-color: color value; hex code or color name
  - hex code: #FFFFFF, #000000
  - color name: white, black

• border-style:
  - solid
  - dotted
  - dashed
  - double

• margin: margin-top, margin-bottoms, margin-left, margin-right

• padding: padding-top, padding-bottom, padding-left, padding-right
  

This is my example I did:

Sources:
http://reference.sitepoint.com/css/boxmodel#
http://www.w3.org/TR/CSS2/box.html

Week 1: Sketches

Here is two example sketches I drew and scanned for the homework page:

Edit: Second sketch with notes attached. Changes may apply throughout process. I am choosing the first sketch on the left side.

(Click on image to enlarge)
More interactivity.
Link tabs with rollover. Pop out? Bounce tabs? Change color? Slide out? Use flash or javascript? Layout with a drop shadow. Gradient. Transparency.








First sketch:
(Click on image to enlarge)
(1) 3 Link tabs on the left side: home, homework, class. Layout set in center. Top with name banner. Header with title. Content box after. Bottom with footer.

(2) 3 Link tabs on the top of layout. Below links is the name banner. Content box after with two columns: homework and class. Bottom is the footer.

Timeline/Schedule for Homework

SCHEDULE SUBJECT TO CHANGE & STILL ADDING IN PROGESS FOR EACH WEEK. Here is the timeline/schedule for the homework assignments:

Week 1: Tuesday, July 13, 2010

• Sketch two examples in paper and pencil. Scan image then use Photoshop to block out content via grids. Print this version and, again using pencil, note navigation, technology, purpose, etc. on this image. Scan and upload to blog.
  
• Write down the interactivity on paper and make notes to self. Write down the processes of the website/layout. Rescan and repost it on blog.
  

Week 2: Tuesday, July 20, 2010

• Rescan and post the a second layout with the notes. Choosing layout sketch 1 example.
  
• Changes to layout: rollover links, interactivity
  
• Type up a tutorial for the Box Model.
• Post chapter 1
  
• Put down 3 pantones (must be colors for website)
• I will be using these colors for layout. Colors may change throughout process of making layout.
  Colors: white, dark gray, blue, light blue (see other blog)
  

Week 3: Tuesday, July 27, 2010

• Reconstruct tables to divs (this web page), explain what is changed and why.
• Subcide tutorial
  

Week 4: Tuesday, August 3, 2010

• Start the layout for homework page. Designing, sizes, links/content. What kind of links/flash?
  
• Box model: try to create own and post up.
• On your homework page, create two pages from a Dreamweaver template. Insert an asset onto both. Email when uploaded.
• Read Chapter 4 "Creative Floating" of Bulletproof Web Design, do the exercise, and toggle the float direction (page 102). Post link to blog.
• Write in your blogs your best advice for getting creative.

Week 5: Tuesday, August 10, 2010

• Read Ch5, 6. Use CSS3 to create your rounded corners but make sure your layout uses "Indestructible Boxes" and can pass the 10-second usability test.

Week 6: Tuesday, August 17, 2010

• Create a possible portfolio home page using chapter 9 "Putting It All Together" as a source.
  

Week 7: Tuesday, August 24, 2010

• Continue work on possible portfolio page, chapter 9. Blog its target audience and design objective.
  

Week 8: Tuesday, August 31, 2010

• Create wireframe of final project and post to blog.

Week 9: Tuesday, September 7, 2010

• Work on final project. Blog how you are creating your project to stand out from all the other submissions.

Week 10: Tuesday, September 14, 2010

• Work on project. Create a blog posting that is a sample of a possible process page for your final project.
  

Week 11: Tuesday, September 21, 2010
Last day of class.

First post!

Hello! Good morning~

My blog link: http://leisusan.blogspot.com/

Warning: Do not read. My blog will be extremely BORING . . . hahahahaha.

This is my new blog I created today. My name is Susan. So far, I've taken 2 already, so 3 more to go since I have 5 classes total. My hour schedule is pretty long... I don't have enough sleep! 8 hours each day. :( I'm so tired and sleepy! NEED COFFEE! I need more sleep. Well, I get off on Wednesday afternoon, so I'm going to take a nap afterward! However, I do have homework this weekend to look forward to...fun!

Oh, how I wished that my summer break was longer. It was so short! I think it was less than a month or almost about.

Edit: I GOT MY COFFEE! I hope I'm awake for class now!

That's it. I'll blog more if I have something to talk about. Bye!