Different Photo Galleries

1)       

2)   

3)   

1) http://smoothgallery.jondesign.net/
2)http://imago.codeboje.de/ 

3)  http://www.e2interactive.com/e2_photo_gallery/

I was trying to find some new, simple, and elegant ways of displaying photo galleries.  These are all very simple and easy to navigate. I also like that they have thumbnails and allow you to quickly scroll through the different images. I think I may try to implement one of these for my website. The photo gallery I currently have seems like it doesn't always work properly. I kind of like the second one shown here. http://imago.codeboje.de/ I think I may try to implement that one.

Testing website on the iPhone and the iPad

http://ipadpeek.com/

http://testiphone.com/

When you are trying to develop a web site that is meant to be seen on multiple platforms, it is smart to view the website using different browsers and different operating systems. It is very easy to view the website on browser like Safari, Firefox, and Google Chrome because these are available across platforms. Internet Explorer, on the other hand, is purely just for Windows. You will have to try to find a PC to view the website on, but this shouldn't be too hard. Many libraries have Windows PCs so they can easily be found. Seeing how your website displays on an iPhone or an iPad can be much more difficult. This would require you to buy or borrow and iPhone or an iPad. I found these sites which shows you how a website is viewed on an iPad and an iPhone.

40 iPad tips for designers

This website gives 40 sites that can help web designers design their web sites to be iPad compatible.
http://garmahis.com/reviews/ipad-tools-tips-design/
Since all web browser are different and there is not a standard on web browsers, a website can look very different on different browsers. Sometimes a website might work fine on one browser but not work at all on another browser. All the browser have different padding and margins defaults, so the web designer must use scripts to be able to change those defaults on the different browsers. The script can also find out if the viewer is on a mobile phone or an iPad. This website gives the script on how to see if the viewer is displaying the website on the iPad and can direct the user to another site made for the iPad. http://davidwalsh.name/detect-ipad

I am getting pretty excited about HTML 5

If you haven't figured out from my other blogs yet I have not researched HTML 5 yet and what HTML 5 can do. Web videos have become very popular since youtube deputed. The problem is that some movies could require a flash player, in which the iPhone can use. Some computers could not have the flash player plug in installed which would prevent the person from seeing the video. HTML 5 integrates movies directly into the HTML 5 coding. No plugins are necessary. Putting movies on the web is nothing new but you can do direct manipulations to the movie with the HTML 5 code. With just the HTML 5 code, no javascript, you can enlarge the playing movie and have it playing in the background while the actual video is playing. You can also go through every pixel in a movie that is playing and have the the movie images duplicated in black and white. The black and white 'movie' is not actually a movie.  It is a duplication of the images of the movie not the actual movie but it plays along with the movie.


http://html5doctor.com/video-canvas-magic/

Interactive Backgrounds with HTML 5

http://html5demos.com/canvas-grad

HTML 5 seems that it is taking away a lot of the stuff that previously relied on javascript and other scripting languages. This HTML 5 example shows that HTML 5 can find the position of the cursor on the page. Before if you wanted to find where the cursor is on the page you would have had to use javascript or have made a Flash website. This website changes the color of the background dependent on where you have your mouse inside the web page. This uses a canvas to change the background color. The canvas is a new feature in HTML 5. You can create a radial gradient as easy as createRadialGradient(0,0,0,0,0,600);

HTML 5 is Amazing but yet kind of creepy

HTML 5 has a lot of new features. Most of them are really cool and can be used really creatively. I think HTML 5 is going to allow more graphic designers and web designers to be able to create well design and interactive websites without much help from programmers. It seems like most of the code is kind of straight forward. One of the new features is called geolocation. This allows the user to allow or deny sharing their location with the website. Sharing the location can give you a GPS map of your location, like Google Maps does. The only thing I wonder is if people could get past the security feature of having the user actually allow the use of geolocation and be able to find your location.

I found this website that uses the HTML 5's geolocation to find your current location and finds the current star patterns that can be seen from your location. http://www.nakshart.com/ I have tried the website with Safari but it didn't seem to work. If you try it with Firefox it works well.

HTML 5 is amazing!!!

I wanted to learn what is new in HTML 5. I thought that HTML 5 would just allow tags for videos and normal stuff like that. HTML 5 can do a lot of different that would have otherwise been done in flash or with javascript. As I was searching for sites that use HTML 5, I saw this site that shows a lot of different demos for HTML 5. In HTML 5, they have implemented a really simplistic but effective chat client. It show both the HTML 5 code and gives you the server side Code.  This could be easily implemented on any site,

Customizing a room

My iPhone app idea is being able to take a picture of a paint swatch and take a picture of your room. Then be able to see the paint color actually on your wall with your lighting. After coming up with this idea I remembered that Congoleum has a part of their website which allows the user to pick a sample room and change the cabinet colors, the counter top color, the wall colors, and the flooring. This is very well done but you cannot upload your own room for free. You can upload the picture of your house and change just the floor for $39.95 and be able to customize your whole room for $99.95. This site is not done in flash at all. The whole site is done purely using javascript. This site is kind of slow loading between the different selections but it is an interesting site.

Go to this site http://www.congoleum.com/my_space.html then click on Room Vision then select a room.

Website Scripting

I wanted to make my Interactive website, to be well, interactive. You can only do so much interactivity in dreamweaver. There are a lot of things that I would love to be able to do but you can't just do it in HTML and CSS. Scripting allows you to do some of these things. You have seen on websites when a navigation or a button scroll with you as you move down a page. I found a website that gives tutorials and code on how to make a moving navigation box. Always on top. I have made a menu scroll out from the side when you hover over it in Flash but Flash isn't always the best thing to use in web design. Flash requires a plug-in that not all computers may have and is currently not allowed on the iPhones. This tutorial shows how to do the sliding menu bar using DHTML. Sliding menu.  For more DHTML scripting, visit http://www.w3schools.com/dhtml/dhtml_examples.asp. This site allows you to manually change the code and see how it affects it.

Minimalism in Web Design

http://vandelaydesign.com/blog/design/minimalistic-web-design/

It has always been a challenge for me to make a piece extremely simple and minimalistic yet beautifully designed. I have found a site showing 25 Beautiful Minimalistic Website Designs. All of these site are very simple and have very simple navigation menus.


I really like the Ben Hulse Design website (pictured right).  I like that website is mainly image based. The navigation is very simple. The rollovers are very simple and just show a colored line under the word. It is very simple but yet very elegant.

Facebook-like menu bar

As I was working on my tutorial website,  I was originally going to have a list of the different classes that a programming language has in a column to the left of the main content area(see picture to right). This can be very confusing when there are many different classes. This doesn't look that elegant either. I have always liked the simple Facebook chat bar that is always at the bottom of Facebook no matter what page you are on. I thought this could be good on my website because I could easily have the contents of this bar change with what page you are on and this would keep the global navigation the same.

I found an example that utilizes javascript and css to make the Facebook like navigation bar. It can be found at http://jixedbar.rawswift.com/. This bar will be able to float at the top or the bottom of the page. You can customize it a little bit using

$("#sample-bar").jixedbar({
    showOnTop: true,
    transparent: true,
    opacity: 0.5,
    slideSpeed: "slow",
    roundedCorners: false,
    roundedButtons: false,
    menuFadeSpeed: "slow",
    tooltipFadeSpeed: "fast",
    tooltipFadeOpacity: 0.5
});

The showOnTop= true will allow the menubar to be on the top like at http://gozips.uakron.edu/~kps7. It is originally on the bottom.  I was also able to have the bar be positioned underneath a banner by changing the position in the javascript to relative but this caused the drop down menus to not be positioned correctly.

Shuffling faces

Being interested in interactivity and interactive sites, I decided to search for some easy, intuitive interactive sites. I came upon this flash site that allows the viewer to morph peoples faces. It has a simple interface of just clicking the eyes, nose, mouth or the head or shoulders to change the image of the corresponding body part. Since there are multiple pictures of body parts that could be selected for the face, it seems like they wouldn't be able to make the different body parts visually fit with all the different faces and body parts without looking poorly done. This is the total opposite. The different shaped and sized eyes, mouths, and noses, although they look funny, fits well together. The mixing of the body parts doesn't look like a bad photoshop job or like frankenstein. There are 759,375 possible faces that could be made. Here are some examples of some faces that could be made. 

http://www.mono-1.com/monoface/main.html

PHP code for a simple shopping cart

While researching about web site shopping cart, I was curious how difficult building a shopping cart would be. I would like to try to see if I could implement this one my Interactive Tutorial website but gozips doesn't allow php code to be implemented. I came across this site that gives a very easy tutorial on how to make a php shopping cart.

The shopping cart uses the server-side language PHP and a MySQL database. Some of the code can be confusing to understand but if you look at it carefully it can be under stood. I have never coded in PHP before but I can kind of understand this segment of code setting up the database

1. CREATE TABLE books (
2. id int(6) unsigned NOT NULL auto_increment,
3. title varchar(100) NOT NULL default '',
4. author varchar(100) NOT NULL default '',
5. price decimal(3,2) NOT NULL default '0.00',
6. PRIMARY KEY (id)
7. ) TYPE=MyISAM;

The id will be an integer with the maximum of 1 million books. I think the varchar(100) give the title and the author a 100 character maximum. The price decimal(3,2) makes the price a decimal with 2 decimal places and the maximum be $999.

This shopping cart will also give you a running total of the price and of how many items are in the shopping cart. It show you how to remove, update and add more items to your shopping cart.

http://v3.thewatchmakerproject.com/journal/276/building-a-simple-php-shopping-cart

Simplifying complicated search menus

As I was researching tutorial websites, I noticed that many of their websites are hard to navigate. It is extremely hard to try to search for certain tutorials on those sites. The tutorial websites either give you a list of all the tutorials they have or sometimes they might break the tutorials into categories. Even when they are broken down into categories, it can be difficult to navigate because of the shear amount of tutorials. It can also be hard to find exactly what you are trying to search for into words that would bring about the right tutorial.

I found wefeelfine which has a unique and intuitive search menu. You can look through a list of words that you want to search and then narrow your search even more by selecting ages and or genders. I think that this could be a good concept to have for a search on a tutorial website. It would give list of words that describes what the user is looking for and then allows them to narrow down the search easier than most websites.

The wefeelfine website searches for blogs on the web with certain key words and you can search for how many people are feeling a certain way.

Possibly a good book to learn how to design for Web 2.0

The term Web 2.0 describes a resurgence in the web economy and a new level of interactivity between the internet and the viewer.

The main idea of Web 2.0 is to make website more simplistic. The images and words that are selected for the website should be simple and concise enough to make sense. The images need to be more about communicating the message of the site and not just to decorate it. You should think of pixels as a resource that you have a limited supply of. You don't want to use too many pixels when you could do it with less.

Web 2.0 should be "simple, bold, and honest". This is why lots of web 2.0 sites are center. It feels more honest.

The book, Save the Pixel, looks like it could be a good read about designing for Web 2.0. It has 20 full web redesign case studies. It helps a designer learn to simplify web pages.

http://savethepixel.org/

A web site about Save the Pixel. It goes more into depth than the savethepixel.org.

http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide/