Thoughts on the Final Project

I came to the realization that what I intended to do with michellesopeneye.com was going to require more research, so I updated my portfolio site instead. It has been a couple years since I added new projects, and I realized that it's time to start thinking about employment.

Here is the link to my site:
www.danasprinkel.com/Portfolio_Site

This site was originally a template that I just changed the background, images, and tweaked the CSS a little. Now I am able to understand what jQuery plugins were used, and how to change them. The site was created using Dreamweaver, Photoshop, Illustrator, HTML, CSS and JQuery. A couple problems I encountered: one the color overlay zoom effect on the thumbnails only worked on the first four in the set, and it took me a while to figure our why. The plugin had assigned a color id to each image, but this ended up not being specific enough when trying apply the style to more than a couple of images. Instead of using the color as the id, I ended up using the id="a.blue" and id="a.zoom". The "zoom" id was the also the CSS property used to style the overlay effect.

The rollover effect on the navigation turned out to work a lot better with JQuery. Dreamweaver will do the rollover effect for you, but you end up with a lot of messy code. Another issue I ran into was with the fancy title layover at the bottom of the lightbox images. The problem was that it was bleeding into the portfolio image. I was able to fix the problem by adding some padding to the bottom. Getting the arrows and the bullets positioned correctly on the slider required finessing the CSS, as well as the spending some time adjusting the images in Illustrator.

Since this site is going to be my portfolio site, I would still like to fine-tune it a little more. For example, I would like to add better descriptions of the work, and I would like to include more web projects when I have more to add. Overall the site meets my expectations. If I had to do something differently, I would not have spent so much time on the overlay effect. Instead I would have tried something else, since figuring out that one issue ate up a lot of time. Honestly I think I was more frustrated at not getting it earlier, because it really ended up being a rather simple solution.

Final Project

For my final project in DMA 265, I would like to improve an existing site I have been working on for an artist friend, which can be viewed here: http://michellesopeneye.com/. The site is based on a template purchased from http://themeforest.net/ and uses several jQuery plugins.  I would like to apply what I have learned about JavaScript and jQuery, and work to improve the load time, and possibly make the site easier to edit so my friend can update the site at her convenience.  I would also like to improve on some of the slide layouts.

As far as the load time goes, reducing the size of the images, and cleaning up the code helped some, but I would like to explore more robust remedies to this issue.  For instance the site doesn’t link to the jQuery library online, and it uses an older version.

I would also like to create a mobile version of the site, since it currently looks great on standard computers and laptops, it doesn’t translate so well on iPads and other mobile devices.  I hope to accomplish this with media queries to adjust the size of the site according to device type.  At this point I’m not sure if media queries will work with the site design, or if I will have to design a separate site that the user is redirected to when using a mobile device.

Some of what I would like to accomplish may not be feasible in the time we have left, but at the very least I would like to create a mobile version of the site, improve the layout on a couple of the slides, and improve the load time.

JQuery Lightbox Plugins

1. Compare three different lightbox style plugins available on the Internet. “lightbox” is the common name for some simple image display plugins.

The first lightbox plugin I am going to compare is the FancyBox plugin. A simple but beautiful Mac-Style plugin that is easy to use (http://fancybox.net/). FancyBox comes with a few customizable features to choose from such as animations, title positions, Inline-auto detect width/height, and Image gallery with mouse wheel. The CSS can be altered to change your chosen lightbox preference to match your site design. There is also support for fancy transitions by use of the easing plugin.

The second lightbox plugin I’m going to compare is the Lightview plugin, (http://projects.nickstakenburg.com/lightview) a beautiful way to create an overlay window to showcase your work. Lightview offers a selection of skins combined with a user-friendly JavaScript API (application programming interface), that allows you to create custom skins. The CSS is also customizable, and since Lightview uses HTML5, it offers the best user experience across a variety of browsers.

The third lightbox plugin I’m going to compare is the SlidesJS plugin (http://slidesjs.com/). SlidesJS is a simple and elegant tool that allows designers and developers to create a user-friendly slide show. There are many examples and options to choose from so you can customize your slideshow to your liking. This plugin offers quite a bit of functionality and is easy to set up. The support is limited, but the site does offer a link to report bugs.

2. Describe some differences between the plugins that your are comparing. Are there any particular advantages to one of the plugins over another?

Each of the plugins described above have their advantages. A couple of the plugins offer a few more features/support. The FancyBox plugin webpage (http://fancybox.net/) displays the different styles and animation effects to choose from. This plugin is also pretty straight forward, and if you chose to use one of the animation effects, the code is easy to include in your document head along with the jQuery link  to FancyBox <script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>. There is also a decent support forum available if you run into issues with the plugin.

The Lightview plugin is one of the more elegant lightbox plugins that I found. I didn’t find it to difficult to tweak the skin overlay opacity in the JavaScript file, however it did take me a little while to find the opacity setting in the JavaScript file, since I started by looking in the CSS. There are many skins to choose from, and the files seem fairly easy to work with. The Lightview website is easy to navigate and makes good use of examples to choose from, like going into a home décor shop with samples and colors to look through.

The SlideJS is the third plugin I have used so far that I have found to be easy to use, and incorporate into my site design. This slideshow plugin offers a different layout from the other two mentioned above. The FancyBox and Lightview are similar in that they both use the “lightbox” Mac-style “float” on top style. The SlideJS style can be added to a page without the “float” effect if that is what you prefer, and it still has the functionality of the other two plugins. The site for the SlidsJS is simple to use, easy to find the plugin download, and offers a few varieties of slideshows that are different from the “Mac-Style“ lightbox effect.

3.  In our text book it gives an example of hand-coding, creating from scratch, a lightbox. Can you see any advantage or reason to code your own lightbox? (It is ok if you don’t see any reason to code your own lightbox...but just support your answer).

With the availability of so many lightbox plugins, it seems like it would be more time consuming to hand-code one from scratch. With that said I did run into a limitation with one of the slideshow lightbox plugins. One of the slideshow plugins I tried had the same id named, pagination as one of the other plugins I was using. If it had been a matter of just changing the id name in the HTML and CSS, it wouldn’t have been to big a deal, but this involved going into the compressed JavaScript file and changing every instance of pagination to something else. Well, I decided not to do that, and went with another plugin, but could see in this situation where hand-coding your own plugin might be advantageous over working with someone else’s files.

Another reason to possibly hand code your own lightbox is if you want a particular style or effect not available in some of the open source plugins.

Ways to detect user device using Media Queries

1. Briefly describe how CSS media queries can be used to modify the content and size of an html document based on the size of the browser. For example, in a nut-shell how is the CSS working that Lee Brimelow uses in his tutorial?

With all the different devices being used today to access the web, media queries can tailor online content to adjust to specific media outputs.

In Lee Brimelow’s video he shows us how to create a media query using the Media Query menu in Dreamweaver CS5. A text editor such as Notepad will work just as well. In a nutshell, a media query contains the media type, along with an expression that describes a feature of the media, such as width and height. Here is the syntax:

<link href="css/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 320px)" />

In the above example, the CSS file is named phone.css. You can change the CSS file name to fit the scope of the site design. You can also adjust the resolution depending on the size of the device. In this example the phone.css style sheet is used to make the images not appear if the device is under a certain size. The syntax will be similar to what is below.

#releases .record img {
   
    display:none; 
}
   

Media queries can do a lot more than measure width. Other types of media queries include:

•    Dimensions
•    Orientation / Aspect Ratio
•    Color

Not all queries are supported on all devices. For instance, the orientation queries are not supported on the iPhone, but the width queries are.

2.What are some concerns that developers need to take into account when creating a web-based application to be viewed on variety of browsers and mobile devices?

When I first started designing web sites, I had to think about screen resolution, using web friendly fonts, resizing images to the correct web resolution, and working around browser/code incompatibility issues. Now we must think about developing for a much wider range of web-based applications for a variety of browsers and mobile devices: Here are a few points to consider:

•    Device type you want to support, along with the screen resolution, user requirements, development tools available, and device limitations such as memory and storage.
•    UI design. Mobile devices are going to require a simpler UI design due to battery life, memory, security, network bandwidth, and screen resolution constraints.


3. Give a few code snippets or brief description of other ways, besides CSS alone that we can detect the browser width and the devices that a page is viewed on. You don’t have to know how to code so that anything actually works. Just give an educated example of another solution besides, or in addition to, CSS. This may be by using JavaScript, ASP, PHP, jQuery, or HTML Meta tags, to name a few possibilities.

Other ways to detect browser width in addition to CSS include:

•    The HTML Meta tag:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width" />

•     Jquery:

$(window).width();   // returns width of browser viewport 
$(document).width(); // returns width of HTML document

JavaScript can also be used to detect browser width by responding to CSS3 media query state changes. This can be accomplished with an if/else statement. If width is at least say 400px, else window is less than 400px for example.

Project 1

a) What do you think will be the best method for including JQuery in your web application?

jQuery has many awesome benefits. Its functionality is much cleaner making the load times for web pages faster, than web pages that use applications such as Flash. jQuery also makes it easier to play with the DOM, add effects and seamlessly execute Ajax requests, and it is free open source software. One thing is for sure; jQuery is here to stay because major corporations such as Microsoft and Google use it.

One way to include jQuery in your site design is to include the <script> element below, which will install jQuery's library into your Web page so you don't have to download it.

<script type="text"/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

Another way to include the jQuery library is to use the Google CDN. Since Google hosts several open sourced libraries on its CDN, you benefit from Google's reliable infrastructure and speed. Here is one of the paths you can use:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="script.js"></script>

Some of benefits of jQuery are:

• Cross-browser compatibility
• Better user experience - don't have to download Flash player
• Easier implementation for Web Developers
• Smaller files, faster load times
• Simplifies AJAX
• Web pages will display even if JavaScript is disabled
• Large supportive helpful community of experts

b) In what instances can you imagine it being better to code your own JavaScript rather than use a code library like JQuery?

There may be some instances where you may not want to use the jQuery library. For instance, if you want a specific effect done a certain way, it may be beneficial to code it yourself. Another example may be when using the canvas element in HTML5. Knowing some JavaScript can help you better understand how the canvas element works at creating interactive websites, especially games. Even though jQuery offers a huge wealth of resources that make developing a site far less time consuming, understanding JavaScript will help you to better understand the nuts and bolts of the site design.

The more you understand about jQuery and JavaScript the better. I look forward to furthering my skills and using my knowledge to create interesting, interactive websites.