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.