Tag Archives: HTML

MPM107 HTML5 102

15 Nov

George, Angie, Raine, Christina

What Image File Formats should be used for web pages, why (how does compression affect loading?)?The formats that should be used for webpages are GIF, JPEG, and PNG. These formats can also all be compressed. Depending on what the use of the image is, depends how which one to choose, and how to compress it. Examples can be found at Webstyle Guide.com. The reason that compressing files is important is because they are easier and faster to load. Many people have access to a variation of Internet speeds, as well as the images being accessed from multiple devices. If the image is easy to load, it makes it easy for anyone, anywhere, to access your website, and do so effortlessly.
How do you optimize images for the web?
Optimizing images for the web varies on the use of the image and what area you want to compromise. For this reason there are many different ways to optimize

your photos, and this is a link, along to the one mentioned before, which can be used to help you decide how you would like to optimize your photos. inobscuro.com. Just for example, if you wanted to create a JPEG image, you must note that it creates image noise. Basically you loose some of the colour detail in the image. (As can be seen in the example shown with the fish).
What tricks and tips can you use to make your webpage load faster?
One website, allusefulinfo.com, discussed five tips they think are useful, and I think these are all ways which do make sense to speed up a webpage.

Tip #1: Don’t use more JavaScript in your webpage, I do not understand much about JavaScript, other than that it is another code or language that creates interactive effects, if you would like to know more about JavaScript, check out This Link.

Tip #2: Use small image and video files. Like discussed in the earlier part of this post, it is important to use smaller images and videos because it makes it easier for the web to load them.

Tip #3: Remove blank space from your code. The website says that this will increase loading speed, it does not say how, but I assume it is faster for the site to read through the code this way.

Tip #4: Enable webpage caching: the website describes this as “Webpage caching is a mechanism to make a temporary storage of HTML pages and images. It means if anyone visits your site, browser stores that page temporary. Caching is also use to reduce bandwidth usage and server load. That’s why the websites load faster after using webpage caching. If you are running a WordPress blog, you can use some of the plugins like WP Super Cache etc. to enable caching of webpages.” (Alluseinfo.com)

How can you use images in css, show us examples?One way to imagespriteexamplepicuse images in CSS is using image sprites. This is a collection of images made into one, and this also helps create a faster loading time. It also can be used with images for home pages, back or forward buttons, and then hover effect, or code, can be used over top.
How To Add a YouTube Video to Your Web Site and video in html5?
When on YouTube there is an Embed button, once you click this you will be given a code. This code can be taken and put into your code to create the video to be shown.
How do you optimize video for the web and incorporate it in your web page?
As discussed earlier in the post, you can use smaller, or compressed versions of a video because this will make it easier to load and view. It is important for people to be able to access information quickly and effortlessly, or else they may become frustrated with your website and click out.
How do you optimize sound for the web and incorporate it in your web page?
There are many things you can do to optimize you sound files visit this website for many ways to optimize you sound files. Some tips include: Performing basic sound editing to rid of unwanted noises (buzz, cough, sneeze). Another is to use digital enhancements to amplify the soundtrack (changing pitch shift)
What are some of the dos and don’ts of web design with media?
One major don’t in webpage design is over clutter. Many people try to add to much colour, and image, and the webpage becomes difficult to pay attention to, and sometimes hard to read. This takes away from the content, or the important aspects of the page. It is important to (or a Do) to find a theme you like, choose a few colors (1-3) main colors, to incorporate and stick to, and create an appealing site around that.
What resolution should you design for?
One website discussed that having multiple variations of website sizes is not uncommon because there are people accessing websites from so many different devices, which are all using different screen sizes. Also some people do not use there computer screen at full size when viewing webpage, and it is important to keep that in mind to. The author states “with so many different screen resolutions and window sizes in use, optimizing your website for one screen resolution doesn’t really make sense. If for some reason, you were forced to choose one, due to time constraints or otherwise, I would go with 1280 x 768. This is pretty much the baseline standard these days as far as desktop browsing goes. However, you should be designing your site for all window sizes using responsive design.” (Quora.com)
Designing for mobiles?
It is also important to remember that many mobile devices are unable to load the amount of graphics a computer can. Also, a computer and phone have different screen sizes, and the amount of information that can be viewed on one mobile screen versus a computer also varies. This website gives some great tips on how o optimize your site for mobiles as well. One tip discussed is using HTML5, because mobile device are capable of reading this, which will help keep the codes you already have create, mobile friendly, meaning you only have to do things once. Another tip I learned on my own is, for example, when using a server such as word press, you can go into your dashboard, and there is a link to make your website mobile, which also gives the creator a few wa ys on what the page will look like on a mobile device. There is a simplified, mobile friendly, version it can create, or you can make it exactly how it is seen on a computer.

Works Cited

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

http://webstyleguide.com/wsg3/11-graphics/5-web-graphics-formats.html

www.html5rocks.com/en/tutorials/speed/img-compression/

http://inobscuro.com/tutorials/optimizing-images-for-web-35/

http://allusefulinfo.com/5-easy-effective-tricks-to-make-your-website-load-faster/

http://www.w3schools.com/css/css_image_sprites.asp

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480061

http://www.quora.com/What-screen-resolution-should-one-design-for

http://docstore.mik.ua/orelly/web2/audio/ch04_01.htm