Tag Archives: mpm107

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

Advertisements

MPM107 CSS 101

15 Nov

group: Christina, Raine, Angie, George

What is CSS and how does it work?
CSS stands for Cascading Style Sheets; this generally shows how to display HTML. This potentially allows web designers to divide their information.

CSS syntax
Some examples of CSS may be changing the colour of your webpage’s background, setting an image as a background etc. However, the code for changing the background colour is simple:
hr {colour:blue:}

The difference between ID and Class
The difference between an ID sector and CLASS sector is that ID is unique whereas CLASS is not. The element for both is quite different as well, the ID is seen as “#” basically a number symbol, and class is classified as a “.” just a simple period. ID CSS are only capable of being used once within an HTML document, however, a class CSS can definitely be used multiple times.
HTML code for ID: <p id=ExampleID1”>
HTML code for Class: <p class=’ExampleID1’>

Difference between External, Internal, Inline style sheet
Similarly, both External and Internal are found within the head sector of a webpage. An external style sheet is truly ideal when it comes down to changing the entire look of a webpage with just a file. The <link> tag is important when linking to the style sheet. Internal style sheets are generally placed within the <head> sector of your HTML document, the tags that classify an internal style sheet are <style></style>. Finally, the last important style sheet is referred to as an Inline style sheet.

What is a Box Model?
When the design of a webpage is being discussed, generally all the HTML elements can be placed within a “Box Model.” We normally begin with content in the middle where most of your text will appear, and then we add the padding, which surrounds the content and displays the background colour of that box. Thirdly, we have the boarder that comes after the content and padding which also displays the background colour. Lastly, the margin doesn’t contain a background colour it’s actually transparent as opposed to the other properties. On another note, when setting width and height of an element, it’s only to be done within the content sector of the box model!

Box Model CSS 101

This is the box model for CSS101

What do Floating and Positions do?
With floating, an element is capable of being shifted either to the right or left of the line, causing the elements after the float to flow around it. If the element were to be placed to the right, the content would flow to the left. However, the elements before it won’t have an affect whatsoever. Whereas with Positioning, this helps position the element either top, bottom, left or right. The difference between the two is quite obvious, floating can only be done right or left not up or down, whereas positioning there’s many ways of placing it anywhere dynamically.

CSS Grouping and Nesting
Grouping makes it much easier to sort the number of selectors without having to do it repeatedly.  For instance
h1
{
colour:green;
}
h2
{
colour:green;
etc.

However, when applying a selector within a selector this is classified as Nesting.
For instance
p
{
colour:green;
text-align:center;
}
marked.

Basically, this helps align the text, and change the font colour!

Aligning Elements

Simply, by aligning the text within the property, this allows the elements to be aligned. For instance, if we were to place the text within the centre of the HTML document, we would use a simple code such as h1 {text-align: center} which would bring everything in the middle of the first header. Potentially, this helps allow the elements to be lined up, whether horizontally or vertically. This will all be centered within the margins.

How To Build a Navigator Bar

A Navigating Bar needs a standard HMTL base in order for it to work correctly.
<ul>
<html>
<body>
<ul>
<li><a href=”#home”>Home></a></li>
<li><a href=”#news”><News></a></li>
</ul>
</body>
</html>

These navigating bars are extremely handy when linking to another webpage, or URL.

Citation:


1. “HTML.” W3Schools Online Web Tutorials. N.p., n.d. Web. [Accessed: 14 Nov. 2013.] <http://www.w3schools.com&gt;.

2. “Bleeping Computer.” How to Make a Horizontal Navigator Bar. (June 16, 2006) Web. [Accessed 14 Nov. 2013.} < http://www.bleepingcomputer.com/forums/t/55647/how-to-make-a-horizontal-navigation-bar-with-link-rollover-state-using-xhtmlcss/>

3. “CSS101.” Box Model. N.p., n.d. Web. [Accessed: 14 Nov. 2013.] < http://www.css-101.org/the_box_model.php>

4. “BarelyFitz Designs.” Learn CSS Positioning in 10 Steps. N.p., n.d. Web. [Accessed 14 Nov. 2013.] < http://www.barelyfitz.com/screencast/html-training/css/positioning/>

5. Coyier, Chris. “The Difference Between ID and Class.” CSS-Tricks. Np., July 9, 2008. Web. [Accessed: November 14, 2013] < http://css-tricks.com/the-difference-between-id-and-class/>

MPM107 Networking 101

4 Nov
  1. What is a computer network?

A network for computers to pass data on from one to another

  1. Define and explain visually the difference between these different types of networks:
    • LANs (Local Area Networks)
    • Image

A network, which covers a small area (a house)

    • WANs (Wide Area Networks
    • Image

A network, which covers a large area (a university)

    • Internet
    • Image

 “The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (TCP/IP) to serve several billion users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies.” (Wikipedia)

    • Intranet
    • Image

“An intranet is a computer network that uses Internet Protocol technology to share information, operational systems, or computing services within an organization.” (Wikipedia)

    • MANs (Metropolitan area Networks)

Metropolitan area network. Is a computer network where the nodes interact with each other inside the same metropolitan. A MAN is generally operated by a respective local corporation inside the metropolitan.

    • VPN (Virtual Private Network)

Virtual private network. It “extends a private network across a public network”, such as the Internet. It’s similar to WAN where the network can be accessed across a larger area. It also allows users to connect to a private network even if they are not in close proximity to the network itself, it can be accessed using secure protocols. They can access that private company network using the public Internet network as the medium.

  1. How do these two types of networks differ?
    • Peer-to-peer.

This is a way that computers can connect to one another and send information to each other through either a specific program or the Internet.

    • Server – based.

It’s a similar network system, which peers connect to each other using a centered node for communication. The centralization allows many nodes to connect with each other via requesting permission from the central server.

  1. What is the difference between a client and a server?

The server is a main computer holding information, and the client is sent connections and information from the server when it is necessary.

  1. What is the OSI model?

The OSI model is a way for the computer to format data between various devices. It is almost like a translator with data formatting. (Example formatting information that comes in from a computer to send it to a printer)

  1. Define and visual explain what the following terms mean:
    • Protocols

  Protocol (object-oriented programming), a common means for unrelated objects to communicate with each other

  Routing protocol, a set of rules that determines how routers shall route communications

  AAA protocol, a computer security protocol” (Wikipedia)

    • TCP/IP

“The Transmission Control Protocol (TCP) is one of the core protocols of the Internet protocol suite (IP), and is so common that the entire suite is often called TCP/IP. TCP provides reliable, ordered, error-checked delivery of a stream of octets between programs running on computers connected to a local area network, intranet or the public Internet” (Wikipedia)

    • FTP

“Used to transfer files from one host to another” (Wikipedia)

    • HTTP

Hypertext is structured text that uses logical links (hyperlinks) between nodes containing text. HTTP is the protocol to exchange or transfer hypertext.”  (Wikipedia)

    • Telnet
  1. What is a router?

This is a device that is able to send data, which has been purchased to any device using wifi or Internet. A router could be for one device, multiple device (in a home), or hundreds of device (in a school). It basically covers a field of area to supply Internet connection.

  1. What is a network firewall?

This is a defense mechanism that keeps out unwanted networks coming into the server to leave virus’, pop ups, or bring issues into the network. It is basically a virtual wall, which keeps the unwanted things out.

  1. What is the difference between a web and ftp server?

A web server is capable of hosting webpages to multiple computers but a FTP server or File Transfer Protocol allows computers to share files between one another.

  1. What is an IP address?

This is a specific number given to a computer so it can be identified when it is using the web.

  1. How do you transfer files for a computer to a server? Create a small tutorial to teach us how to do it.

I found this great quick and easy Youtube tutorial, which explains exactly how to transfer files to a server. I think the video is much easier to understand than written instructions because you are able to see exactly how to do it in the video. I also found a second video, since the first video is a few year old, so the second video gives you the option to use Filezilla, and was created this year so it is more up to date.

Works Cited

http://en.wikipedia.org/wiki/Computer_network

http://en.wikipedia.org/wiki/Node_(networking)

http://netforbeginners.about.com/od/h/f/what-is-a-computer-protocol-http.htm

http://en.wikipedia.org/wiki/Transmission_Control_Protocol

http://en.wikipedia.org/wiki/File_Transfer_Protocol

http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol

http://en.wikipedia.org/wiki/Wide_area_network

http://en.wikipedia.org/wiki/Internet

http://en.wikipedia.org/wiki/Intranet

http://en.wikipedia.org/wiki/Metropolitan_area_network

http://en.wikipedia.org/wiki/Vpn

http://en.wikipedia.org/wiki/Peer-to-peer

http://www.webopedia.com/DidYouKnow/Hardware_Software/2005/router.asp

http://en.wikipedia.org/wiki/Firewall_(computing)

http://www.differencebetween.net/technology/difference-between-client-and-server/

http://support.microsoft.com/kb/103884

https://www.ischool.utexas.edu/~l38613dw/readings/NotesOnInterconnection.html

http://en.wikipedia.org/wiki/Telnet

http://en.wikipedia.org/wiki/Local_area_network

 

MPM107 The Library

4 Nov

The library is a great place to learn new things, gather information, or sometimes a great place to just relax. Although I enjoy going into the library, and finding physical books to use when working on different projects and assignments, the electronic resources that libraries have to offer are amazing. Sometimes it is easier to find a specific article, or item that you may need online, than it is to go into the library. The libraries main online feature is being able to access books and articles online, without having to leave your home. My local library does use the internet and some electronic media sources, but mostly this includes audio books as well as some online versions of books, but they do not have a very big selection of things in other categories. One great thing the Ryerson library offers is not only a wide range of full pdf book documents online, but journals and articles too! Journals and articles can be very helpful, and if you use the RULA search engine properly you can find so many help articles or journals for projects and assignments. I find thing helpful because it is usually easier to read through an article and find key points, as well, it is usually easier to find an article on a topic than a whole book written about it. I have used the RULA electronic media sources a few times. The first time i actually emailed the library and they helped me figure out how to properly use the search engine, since my local library uses a different process. The biggest difference i think is just that my library offers a smaller selection online compared to Ryerosn, and that is why there are so many aspects to searching on the RULA website.

MPM107 New Media Innovators

25 Oct

First I will give a brief on these entire artist, then I will discuss why they are new media artist because the answer is basically the same for each.

 

Vivaldi:

One quote I found on him was that “Vivaldi’s music was innovative. He brightened the formal and rhythmic structure of the concerto, in which he looked for harmonic contrasts and innovative melodies and themes; many of his compositions are flamboyantly, almost playfully, exuberant.” (Wikipedia) I think this basically describes how he was a New Media artist because he is known to create something bringing two things together but being original about it, he happened to do this with music.

 

John Cage:

He also produced music, like Vivaldi, but he created a new media form with the harmony it was said that “Cage started developing further methods of breaking away with traditional harmony…Cage first composed a number of gamuts: chords with fixed instrumentation.” (Wikipedia).

 

Kutiman:

In one of his famous projects Thru You, he was able to mix medias, and create a new type of music video as well as type of music through a collaboration of different video clips, using them all together to compose a piece of music.

 

Evelyn Glennie:

She is a deaf women who was able to learn how to listen through the vibration through herself, she discusses in this video http://www.youtube.com/watch?v=IU3V6zNER4g, and shows, how she is able to receate an experience of suing music, even though she can not hear it, she has created a new experience by being able to feel it.

 

Golan Levin, Scott Gibbons, Gregory Shakar, Yasmin Sohrawardy:

This group was able to create music using dialtones. They use the sound of ringers from phones to create pieces of musical art.

 

Eric Whiteacre:

This piece of work that Eric created found in this video http://www.youtube.com/watch?v=D7o7BrlbaDs, shows a new form of creation of music, he is able to create music using all types of voices recorded through video, he put them together to create a musical piece. The amazing thing is he is not focusing on the lyrics, but the sounds the people made for him, to collaborate, to create a beautiful and peaceful piece without instruments

 

One thing, which I can see that all the artists have in common, other than them all dealing with the medium of music, is that, they created something from something else previously known to them. They all took a chance and tried to create something new from something old. This is new media, and this is what allows them to be considered new media artists.

 

Also you can see that this idea of new media is not anything new, or having to do with technology, people were recreating, and advancing things in a new way for as long as we can remember, so we should put it in perspective for ourselves that this is not a new concept.

 

Works Cited

Wiki Brown. Golan Levin, Scott Gibbons, Gregory Shakar, Yasmin Sohrawardy: . 15 2 2007.

Wikipedia. Antonio Vivaldi. 18 10 2013.

—. John Cage. 11 2013.

—. Kuitiman. 10 2013.

MPM107 SEO

24 Oct

01: How do search engines index webpages?

They basically use a system that collects all the data from a page, into something almost of a library, so when you search, it can go and access anything in its library (How Search Engines Work)
02: Do ip addresses affect search engine ranking, why/how?

The ip does affect the search engine, first reason, if you do not have an individual ip address, the connection is slower, also, it has been speculated that they are ranked lower, most likely because anyone can make it, and it may not be reliable (Colocation America)
03: Are keywords important for SEO, why/how?

When someone uses a search engine, it will look for the terms they use and see where they find them in other pages. By using keywords that relate to your website, you will bring more people to your site. (HiBu)
04: How can you optimize html tags for SEO?

here’s a way through code to having specific keywords attached to any web page. When this is done, the crawlers, which index the web, find these tags and begin adding new websites for something particular to show up.
06: Can you  use
Alt attribute for search optimization, why/how?

Alt Attribute can certainly be used for Search Optimization, for instance when an image is added onto a post on WordPress, it give you options of Caption, All Text and Description, when these areas are filled in the content gets indexed.  Overall, by continuously adding the same tags and keywords, it allows the webpage to show up more often on search engines. Alt text is generally the “All Text” on WordPress.
07: Can you  use
title attribute for search optimization, why/how?

Similar to Alt Attribute, whenever a webpage asks for a “Title”, make sure to fill it in because it will definitely get indexed allowing it to provide anyone who visits the website with additional information on what the text is generally regarding.

08: Can you use a robots.txt file for search optimization, why/how?

Basically a program that is able to tell the crawlers what they can index, or what they cannot

09: How can you optimize a blog for Searching?

Using the proper keywords for people to search with, with help when people are searching for your blog because if you use the write keywords you will grab their attention, and if you answer the keyword question, or discuss, or whatever your blog is for, then people will enjoy your blog because it was useful to them
10: How does SEO work with mobile devices?

This works in a very similar way to the way if works on the computer, jut the bots are slightly different because they are looking for information using the internet as a\opposed to looking for in for a computer.
11: Does twitter use SEO?

Twitter does use SEO. One major area we see this is when they use hash tags “#”. A hash tag is basically a keyword, so that people can search using these hash tags.

Works Cited

Colocation America. “How does the IP address affect search engine rankings?” 2013. Colocation America. <http://www.colocationamerica.com/spages/ip-address-affects-search-engine-rankings.htm&gt;.

HiBu. “What are keywords and why are they important for SEO?” 15 3 2013. Hibu. <http://business.hibu.co.uk/knowledge/articles/what-are-keywords-and-why-are-they-important-for-seo/&gt;.

“How Search Engines Work.” 2003. Web Search Mimech.com. <http://mimech.com/search-engines/&gt;.

MPM107 Article Reflection

24 Oct

Virtual worlds are an important space that has been created. People use these virtual spaces for all sorts of reasons. The article “ “ discussed many different aspects of virtual worlds, but focusing on the difference it made before and after going into one of the spaces.

            One points the article made was that people base their expectations of something like a virtual world in two ways, by “having had previous experience with the media product or something

similar, or having acquired information about the media product from another source.” (Dervin 41) I found this to be an important aspect of the article to me because I had a specific idea of what I thought virtual worlds were. Most of my ideas were influenced by what I gathered through media, from television, movies, and books. Personally I though virtual worlds were a place for people to go to play games as a character they created. These expectations of what I thought a virtual world was, is what made me not want to further investigate what a virtual world was. When reading this article, I decided to take a better look at a virtual world, and I was shown that my expectations were not only met, but they were exceeded. I think that virtual worlds, whichever type they are, are way more than what is shown in the media. The media usually portrays gamer using virtual worlds but they are really meant for anyone and everyone, and there are virtual spaces for everyone. I think it is important to focus on the expectations of virtual worlds because they are mis-understood by many people because of media. I think that if people were to actually use virtual worlds, it may exceed their expectations because it gives them a place to be themselves, and many times do things they may not be able to do in real life.

            I think that overall, virtual worlds are a great place for anyone to check out because they may be something that you did not expect, or something you were mislead about. The article discusses many other aspects of virtual worlds, in depth, so if you are interested in this topic please check out this link:

Works Cited

Dervin, CarrieLynn D. Reinhard and Brenda. “Comparing situated sense-making processes in virtual worlds: Application of Dervin’s Sense Making Mathodology to media reception situations.” Convergence 18.1 (2011): 27-48.