Campus Penguin Grading Rubic

Design – 4 points
The design has come out very good with what we are where going for. It is pleasing to the eye, its simple but yet complex and give a professional look.

Images – 3.5 points

We have some imagery on the site and what we have I think is good enough as users will be uploading their own photographs to showcase to others.

Layout – 3 points

I graded this on the lower end as the layout is good but depending on the content is what will make the final look on the inside pages.

Text – 4 points

The text we chose goes well with the site. It is modern and stylist and should be pleasing to our target audience.

Navigation – 4 points

Navigation is easy to find and always in the same location.

Mechanics – 4 points

Everything works great! PHP and MySql is what runs most of the site making it functional and running smooth.

HTML/XTML/CSS – 4 points

All the CSS and HTML is where it needs to be. There are not errors or breaks through the page and other pages inside the site.

Credibility – 4 points

The site looks very good. Unlike craigslist we find this site more credible and having an administrator regulate who is and is not approved will make the site a lot more secure.

Campus Penguin part 5

We have Campus Penguin almost complete and in it's Beta stage. I had my wife, Donique, test the site since she is a craigslist user and a student. Since out target audience are students, I thought this would be the best person to test this site. As I watched her use it, she seemed to be able to navigate and find where she needed to go. She did have a problem trying to figure out how to post at first but shortly after she figured it out. When she was finally done using the site, she said "Once the site is complete, I think it will be way better than craigslist. Just the look alone makes me want to use it. The only thing was that I did not have any instructions as a first time user on how to post. I also noticed that some of the posts where positioned funny and when I did a search the results had no links to them unless I pressed on the comments link."

Overall I found this testing very helpful. I think we will go ahead and add a help link for first time users and possibly send instruction for first time registered persons on how to use the site!

Campus Penguin Part 4

Questions have been aroused about what type of multimedia to be implemented into the site. One of the ideas that a team mate came up with is to ad a slider on the front page displaying various featured posts. Since our site is basically posting what you want to sell or finding work, a lot of interactive media is not really called for. Basic things such as optimizing images for the web and making a log in, have already been installed and basically ready to go. However, one thing did come to mind with a little help from a teacher, Sharon Kaitner. She mentioned something about a tutorial we had done in class about using jQuery to scroll to top. Here is an example of what I am talking about:

http://kgphojo.aisites.com/fall2010/intermediate_web_design/tutorial/

I think this would be a great addition especially if the website ends up being popular for students.

Graceful Degradation & Progressive Enhancement

So in Web land there are two things that will come up a lot. Graceful Degradation and Progressive Enhancement. So what are they? When I was doing some research on HTML5 and CSS3 for the redesign of my site, I came across an article on Smashing Magazine. While reading this article, I came across these two terms and this is a very good explanation for these two terms:

"Graceful Degradation is a widely used term which ideology is basically using the latest technologies first, and then fix anything that needs fixing for older browsers. We do this on a daily basis: most of us code for Firefox first, then fix Internet Explorer. That is Graceful Degradation in the practice.

Progressive Enhancement refers to the habit of building first for the less capable, outdated browser and then enhance for the latest technologies. We, too, use this on a daily basis. For example, most of the times we code a website we start with the markup and then apply an external CSS file where we add all the styling. That is Progressive Enhancement in the practice."

source

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

Campus Penguin Project Part 3

So far so good with campus penguin. The site seems to be coming along well with a couple of expected snags here and there. This week, I ended up helping out with the finalization of the logo. This is one of the things that you can implement 1,000 times and still think of a new way to go. We all came to an agreement on the colors of the site as well as the design, which seems very strong. Further more my partner, Brent, and I researched more plug-ins we can use for the back end of the site to make it work better. Brent and I also spoke more about various things we should be able to do and have a few more things to figure out.  As far as weaknesses that we have been noticing are that even though WordPress (the main part we are using as the backend) is very well rounded, there are a lot of things that are just having troubles with. Some of the plug-ins may not work, and making them work can consume a lot of time.  In all, I think we will end up with a very strong piece that will be used in a good way for students.

Campus Penguin Project Part 2

The project our team is working on is coming out fantastic. We agreed on some colors and now are doing the fine tuning for our design. A few things came up when we met as a team last week, one being the size of the site and what we need to do to optimize it for all the viewers regardless of what type of browser or system they are using.

Campus Penguin Design Reaction

Above you can see our new design! As a team we agreed on the color scheme and are happy overall. There is a couple of points that we might change but overall we like the look. But what we like is what we like.

Campus Penguin Project

Week 3 is closed and behind us. We now have the basic elements to push forward with our project, Campus Penguin. This project will be a lot like craigslist but geared towards students. This will be a place to where students can buy/sell books to each other, sell personal items, network with one another, and look for work. The team seems to be exited about the project. We all did a bunch of research on what we wanted to do and where we would want to place things within the site. Alfonse, our art director, finished the design for site over the weekend.  I have started with the coding of the basic HTML and CSS. I am sure we will need other technology such as PHP and JavaScript to come. Here is what the site will look like once coded and ready to go:

Westminster Wedding being featured on TLC

Allyson and Jason are good people and friends of my wife. I was told that the original photographer she had hired was no longer available for her special day. I also found out that she was on an extra tight budget and only a couple weeks away from her special day. I could only imagine the stress so I offered my services to them since I was available that day. A few days went past and I got an email from the couple with excitement.

Last week for teamBravoSF v1.1

We decided to go with making a book selling site similar to Craigslist. Since our school does not have any way for students to sell books to others we felt there was a need to create a site where students can do so. I know and a lot of us know that the dates given to return books may not be ideal for some. We also are not happy with the amount of money we get back.

Over the last week I have researched different ways we can create this site. I looked at sites like Craigslist and Backpage to see what they have done and how we can implement it to our site. I also looked at already created data bases that may help us in the long run and integrating it to our website we will create.

My job as part of the technology team is to make sure each part of the website will work correctly and smoothly. I must make sure the code is correct and easy for the other developers on the team to understand. I also have to bring in technologies to implement to the website for it to work properly.

A new start!

Last week we came up with a few project ideas that needed a team to work with. A team was formed containing the following personel:

Cynthia Kong - Project Manager
Konstandinos Goumenidis - Technical Director
Brent Olivier - Technical Director
Federico Clasing - Content Manager
Alfonse Surigao - Art Director

After getting together, we also came up with a team name, Team BravoSF.

Each and every part of the team has a very important roll. My roll as a technical director will be to code all the back end part of the website. Working as a team, especially with Brent, will be key to success. There are a lot of things to think about as far as coding goes and if not done correctly it may lead to a complete disaster. Problems we may encounter is making sure our code works on all platforms and browsers. As many people know, there are a lot of versions of browsers and those browsers that may work one way on one device may work differently on another. Some times even if one device is exactly the same as the other but has a different screen may effect what the website might look like.

I think that as long as we work as a team, the project will be a huge success.

Wake Forest at Stanford Football!!!!!!

New Mascot, New Uniforms, 3-0 Record.

Yeah that's right, a new mascot...well at least the mascot uniform. The Stanford Cardinals still have a Tree as a mascot but it looks different...what else that threw me off is Stanford's new uniforms for football! Yes they are ALL BLACK!

CSS Zen Garden

View Site Here

There are many ways to go about creating a CSS Zen Garden and everyone views their Zen in a different way. But what is Zen? Dictionary.com define's it as this:


"A Japanese school, of 12th-century Chinese origin, teaching that contemplation of one's essentialnature to the exclusion of all else is the only way of achieving pure enlightenment "

This weeks amazing links Part 1

So I constantly look through websites to grab ideas and maybe do some tutorials and what best way to share them with you! So, once a week I will post websites that I come across that I find useful or interesting. Enjoy!

1.CSS3 - http://www.smashingmagazine.com/2010/05/27/css-three-connecting-the-dots/

2. JavaScript you should know - http://www.onextrapixel.com/2010/06/07/the-bits-of-javascript-that-every-designer-needs-to-know/

3. Photoshop text - http://www.tutorial9.net/photoshop/elegant-3d-text-effect-in-photoshop/

4. Cool Photoshop Actions - http://creativenerds.co.uk/freebies/70-of-the-best-photoshop-actions-for-enhancing-photos/

5. Font face guide - http://sixrevisions.com/css/font-face-guide/

Flickr user?

Are you a Flickr user? I am...

You probably wonder why you should car if I am or I should care why you are a Flickr user. But do you ever wonder how people are sharing your photos through their blog aside from screen shots or right clicking? Well there is another way, and that's by using your user ID, yep that is right, your user ID. There are a lot of things that Flickr can be used for especially when you want to share your photographs with the world, but for people who take photos for a living, this is called stealing. One way to prevent people using your images via your user ID is by regularly checking who you are considered a contact by or with. Rule of thumb... they have nothing to share or have half naked girls as favorite photos, then that means that they are stealing your photos.

CSS Zen Garden

Getting ready to design my CSS Zen Garden has been harder than I thought. I started out by thinking up designs and that has been the totally wrong thing for me. I found that I work better as I go. Meaning... that I need to start out with a layout or a wire-frame to follow. As I looked through the different excellent designs by others who have submitted to the Zan Garden one had grabbed my eye, and that was the layout that I plan to use, Horizontal.

San Francisco 49ers at Oakland Raiders

Once again, time to bring the camera out! It looks like I will be covering almost all the Raiders home games this year including Stanford. So, it is Football Magic time!!!

It has been a while since I have shot football so I actually found it very challenging, especially when you forget the most important object from your camera bag, and that would be a monopod to help you hold up the monster 400mm lens I have. Here are a few photos from the game! To view more, visit:

http://kgwebmedia.com

Putting it all together.

So over the past few weeks, I have been doing work out of the "Bulletproof Web Design, 2nd edition" book written by Dan Cederholm and now it is time to put it all together.

I have come to a final design for my portfolio site and with the help of the book and some ideas stored in my head I came up with this as a final design:

final site can be viewed here: Final Site

HTML5 & CSS3

Today I had a chance to play a bit with HTML5 and CSS3. I used this tutorial by smashing magazine:

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/

I found it very interesting as there was a lot of markups that I did not recognize. That made me feel like Internet Explorer... which does not recognize the markup for either CSS3 or HTML5 even with the JavaScript given to us. Yes IE $%&@$... as it also does not support my portfolio site I am making for class:

2005 Ford Focus ZX3 for Sale

Video:


HAHA I know I know... it is not the usual posting of images or how to do things online, but I just want to sell my car so here is another way to do it. It is going for $5,875. Here is what I posted on craigslist along with a video of the car :)


Text me with questions 858.736.4209 or email me. I check my email on a regular basis. 5,875Also please dont call me and try to low ball you are just wasting my time. thanks for looking


2.0L 130 hp I4
Std.
Horsepower (@rpm)
... 130 @ 6000
Torque (@rpm)
129 @ 4000
Displacement (cc)
1999
Bore X Stroke
3.34 X 3.46
Compression Ratio
10.0:1
4-Speed Automatic Overdrive:
Std.

MPG - (City/Highway)
26 / 32
0-60 (sec) N/A
5-Speed Manual Overdrive:
Opt.

MPG - (City/Highway)
26 / 35
0-60 (sec) N/A

Response to How the Web Wins by WIRED

Let start off by reading the article I am writing my response about.


I am going to start by one simple fact, that you never start an article by using a religious figure as a reference. "If the second coming happened right now, Jesus would probably show up as an app." I mean this is not even a joke. Come on, I read this and it made me upset and almost lost interest in reading the rest.

Night photography

This is an older photograph I took a while back. Night photography can be difficult. Especially when the ship shakes. But what fun would it be if you didn't get at least one good night shot?

Bulletproof Web Design Chapter 4

So back to the book. This time I worked on chapter 4 of Bulletproof Web Design and it dealt with fairly basic but important stuff to know. As always, all the code will be displayed. So lets do just that, start with the code.

Creating a Template in Dreamweaver

In order to speed up the process of getting work done, creating simple templates for work flow is a good idea. How many websites have you created or planning to create that have AT LEAST the same start or layout as the other one has? Probably at least one or two other websites, right?

I like my websites to be flexible and look good on all computer platforms as well as screens so I work with a lot of percentages and em's. A good guide on how to do that is to check out my earlier post about working with em's and to get a better understanding of the Box Model would be a good idea if you are new to the web world. For percentages I have not made a tutorial yet but here is a good link to get started on:

Getting Creative

Some one asked me how I get creative, so how do I?

I have been in the creative field for almost 10 years now, starting by becoming a photographer for the US Navy and moving into the newspaper world. But I found times hard with having a large family I needed to do something else other than photojournalism and still wanted to do something creative field. I entered the world of web design by attending the Art Institute of California - San Francisco and now I have to think creative on paper and screen.

Bank of The West Classic Part 2

I ended up photographing the tennis tournament for a total of two days. Both days the light was harsh, coming from above or behind. I was there basically to cover the bigger matches and they all seemed to be in the middle of the day. Now people always love shooting strait on and since Sunday was the final match for the big prize, the side where all the photographers was packed. I grabbed my safe shots and they ended up being good, but the same as every one else sitting in the same area.

Sharapova from close with a 400mm

Box Model

The Box Model is a good model to follow for people just learning CSS. It gives a visual on how CSS works and why we set margins, borders, and padding. Check out the diagram from sitepoint.com:

Bank of The West Classic

Just like every time you shoot and event, you need to do a check on all your gear. Today I am gearing up to go to Palo Alto to visit Stanford and cover the Bank of the West Classic.

The gear line up includes the following Canon equipment: 5D MKII, 1D MKII and MKIII bodies, 70-200mm 2.8L, 16-35mm 2.8L, 400mm 2.8L series lenses, chargers, batteries, Think Tank International bag, a speed belt also by Think Tank, a MacBook Pro and a mono-pod.

Last year Marion Bartoli of France took the win.

Day 1:

29 July 2010: Stanford Calif. Victoria AZARENKA (BLR) returns a serve against Melanie OUDIN (USA) on Thursday during the Bank of the West Classic women's tennis tournament at the Taube Family Tennis Stadium. Mandatory Credit: Konstandinos Goumenidis / Southcreek Global

 This will be the 4th year I covered this tennis match. The first time I covered this event I had a little

Converting Tables to Divs

This week I will be converting the following site from Tables into Divs.

As reference, I looked through chapter 3 of Bulletproof Web Design 2nd edition to achieve the final outcome. In the book it talks about various types of ways to use EM's and elastic ways to make a website work on any browser, luckily, I was already looking into this type of information on Matthew James Taylor's website:

Action Script 3 Set Location and Event Activity

*to view the HTML page click here

Set Location

In this exercise we set a location for the square.

Click Here to see what it looks like!

In this script we started by creating a shape. After creating this shape, we took the object and made it into a movie clip and saved it in our library. After saving it to the library, you then drag the movie clip into the stage where you then insert a script that sets the location. For this example the set location was inserted like this:

Pantone to RGB

A lot of designers think on Pantone colors and have some colors already stuck in their head. But how do you turn a pantone into and RGB or CMYK and same for the other way around? Well, its easy! if you go to your color picker in photoshop CS4 and got to color libraries your problems are solved!

If you are familiar with any of the photoshops this should be easy to find.
Here is an example of what it looks like:

Bulletproof Web Design Chapter 1

Chapter 1 of "Bulletproof Web Design 2nd edition" by Dan Cederholm.

In chapter 1 it talks about the importance of using keyword text size over using a font size but I am not going to get into that because this book is a Great one to have in your library. What I am going to show you are the steps I followed in this book and the results. I started off by using the code provided in the book for the CSS side:

Homework Website

I made some sketches for my homework web site. We had to come up with two concepts from a few different sites. Here are a few sites I took inspiration from:

http://www.noupe.com/

http://www.smashingmagazine.com/

and

Design Idea

Design Ideas are everywhere! Here is something that was in Starbucks down the street from me. I was sitting there and looked up and my idea radar went crazy!

Homework Schedule for MM2203 Introduction to Web Design

Week 1:
Homework - Research interesting ideas for your homework page and sketch two examples. Must be 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. Email me the url.

Create a timeline and/or schedule for your homework assignments and post to your blog.

*Due week two. Research some ideas on Thursday. Sketch, scan, on Friday. Finish it by adding notes for the navigation, technology to be used, the purpose of the design, then scan and post to blog.

First Week Back to School

I am now in my 5th quarter of attending the Art Institute of California - San Francisco and have been having fun so far. Balancing 5 classes, work, and family has been challenging but rewarding. This quarter I will learn thing on Video, Audio, ActionScript, HTML5, some more tricks in CSS, and I am sure a lot more! Keep your eyes out as I will share my experiences, links, and tutorials of what I do while in school.

So far a lot of homework, but at least we had a free BBQ :) that was fun.

Cheers!

P.S. there is a Veteran lunch Tuesday, July 20, 2010