CSS101

Group work by: Sam, Jodie and Stanley

CSS is an acronym for Cascading Style Sheet. This coding style is very similar to HTML, however the effects are translated differently. These CSS files define the look and layout of an HTML page. CSS define many features of the HTML such as borders, margins, fonts, sizes, etc. As this site puts it “HTML is used to structure content. CSS is used for formatting structured content”. HTML was created to simply structure text on a page, CSS developed to then format said structure. One CSS file has the power to control the structure of many files or documents. The beauty of CSS is that they can apply to many documents. Instead of writing, or copying the background colour to every single web page, you can create a single CSS file which will add the formatting to the pages you define it to. CSS files are in the format of “example.css” and can be linked to HTML pages inside the coding.

CSS works well with HTML because the coding is very similar.

HTML: <body bgcolor=”FF0000″>

CSS: body {background-color: #FF0000;>

This coding produces the same thing.

CSS coding is in the structure of

selector {property: value;}

Coding with CSS will have this shape:

body {

    background-color: #FF0000;

}

Properties will stack up below the background-color for example if more modification is required. Linking the CSS file to your HTML code is the same concept as linking a file or image to your HTML page:

<html>

 <head>

<title>My document</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

</html>

When something needs to be formatted and it is in a group of elements, you would use the CLASS and ID system. For example, using CLASS would be to change the colour of the title for different paragraphs. If you wanted paragraph 1 and 3 to have a red title, but paragraph 2 to have a blue title, you would changes the CLASS of paragraphs 1 and 2 to red, while paragraph 2 to blue. Then all you would need to do is link the CLASS CSS formatting to the appropriate coding. This example is showing that the CLASS whitewine will change the colour of the text to a yellow-orange, where the class redwine will change the colour of the test to a dark red.

Example – HTML page:

<p>Grapes for white wine:</p>

<ul>

<li><a href=”ri.htm”>Riesling</a></li>

<li><a href=”ch.htm”>Chardonnay</a></li>

<li><a href=”pb.htm”>Pinot Blanc</a></li>

</ul>

<p>Grapes for red wine:</p>

<ul>

<li><a href=”cs.htm”>Cabernet Sauvignon</a></li>

<li><a href=”me.htm”>Merlot</a></li>

<li><a href=”pn.htm”>Pinot Noir</a></li>

</ul>

CSS File:

a {
color: blue;
}

a.whitewine {
color: #FFBB00;
}

a.redwine {
color: #800000;
}

Now, the ID system would be to change the formatting of some elements already inside other elements. Giving something an ID will give it a unique property because every ID is different.

Example – HTML:

<ol>

<li ID=”A1-1″>30</li>

<li ID=”A1-2″>50</li>

<li ID=”A1-3″>200</li>

</ol>

CSS:

#A1-1{colour:Yellow;}

#A1-2{color:red;}

#A1-3{color:Yellow;}

Differences

Examples.

External

It is ideal to use external style when editing an entire websites or multiple pages. If you have multiple styles, it could be easily changed by changing the link to the style.

Uses the <link> tag to link to the sheet style.

If you want to change the font colour of your website, instead of going to each page and changing it. Make the change in one spot and it will change the all the pages.

Internal

It is ideal for editing a single page.

Define style by using the <style> tag.

If you want to change a specific paragraph to a different font colour on that single page.

Inline

This style applies to the specific HTML element it is in.

If you want to change a specific part of the page like the font colour,size, bold, italicized etc.

The box model is essentially the borders and margins that a web page has. It consists of four different parts, margin, border, padding and content. The margin is the transparent area around the border. The border is the area around the padding and is affected by the background colour. The padding is the area around the content and is also affected by the background colour. The content is where the text, images or videos appear. The box model is what gives the web page a specific layout. For example, Youtube has a specific spacing (margins and borders) along the edges of the content as well as padding between the video, comments, and recommended videos.

Floating refers to the movement of the image. This movement refers strictly to moving the image right or left, and not up or down.

For example, {float:right} or {float:left} would be the key to floating an image so the side.

A positioning happens after you float the image, referring it where to float to.

For example, {position:absolute; right: 40px; top: 40px}

By grouping (nesting) files, you make the code simpler for yourself and for organization. In style sheets, the style is maintained throughout,

h1 { color : red ; } h1 { color : #660066 ; }

h2 { color : red ; } OR h2 { color : #660066 ; }

p { color : red ; } p { color : #660066 ; }

but by grouping them, the code becomes much simpler, and enhancing

h1, h2, p { color : red ; } OR h1, h2, p { color : #660066 ; }

Through examples, explain how to align elements.
There are different ways to align elements; one is by using floating and positioning properties to guide that element to a specific location. Another way to use the margins to be points of reference to where the element will be placed.
Example for aligning an element by using the positioning property
.right{position:absolute;right:0px;width:150px;background-color:#660066;}
Example for aligning an element by using the margins as a point of reference
.center{margin-left:auto;margin-right:auto;width:50%;background-color:#660066;}

A navigation bar is created using a list of link with <ul> and <il> elements/tags.

Firstly, open the code with <ul>.

For every link you want use this code:

<li><a hred=”example.asp”>Example</a></li>

Open and close each link with <li> and </li>

List as many links as you want, with Example being replaced by your link and your title.

Close the code with </ul>

FULL EXAMPLE:

<ul>

<li><a href=”home.asp”>Home</a></li>

<li><a href=”archives.asp”>Past Articles </a></li>

<li><a href=”search.asp”>Search </a></li>

<li><a href=”about.asp”>About</a></li>

</ul>

The code for an image gallery is a combination of other simpler codes.

You open with <html>, <head>, <style> and use your divider image that separates text from photos, and photos from photos. This file name can be called div.img

The margins, padding, border, height, float, and text align should all be applied next. Opening and closing with { , }.

Close with </style>, </head>.

Open a <body> element. (This is where you photos with go, using the specifications used above.)

An example of a code for one image would be:

<div class=”img”>

<a target=”_blank” href=”example_one.htm”>

<img src=”example_one.jpg” alt=”EXAMPLE”

width=”110” height=”90”>

</a>

<div class=”desc”>DESCRIPTION GOES HERE</div>

Use as many of those codes for however many images you have.

Close the entire code with </body> and </html>.

Sources:

“CSS Box Model”. w3schools. np.nd. 13 Nov 13. <http://www.w3schools.com/css/css_boxmodel.asp>

“CSS Group and Nesting Selectors”. w3schools. 20 Nov 13. <http://www.w3schools.com/css/css_syntax.asp>

“CSS Horizontal Align”. w3schools. 20 Nov 2013. <http://www.w3schools.com/css/css_align.asp&gt;

“Lesson 7: Identification and Grouping of Elements (class and Id).” Free Tutorials on HTML, CSS and PHP. N.p., n.d. Web. 10 Nov. 2013. <http://html.net/tutorials/css/lesson7.php>.

“Most CSS Floats Can Be Replaced With Relative And Absolute Positioning” Ben Nadel. 2 Oct, 2013. <http://www.bennadel.com/blog/2541-Most-CSS-Floats-Can-Be-Replaced-With-Relative-And-Absolute-Positioning.htm>

“Which Stylesheet Type to Use and When?” HTML Basic Tutor. np. nd.13 Nov 13. <http://www.htmlbasictutor.ca/stylesheet-type.htm>

MLA Styles

Group: Sam Legros, Stanley Tsai, Jodie Quach

1) Books

Author Lastname, Firstname. Title of Book. Place of Publication: Publisher, Year. Medium.

Grenfell, Wilfred Thomason. Adrift on an Ice Pan. St. John’s: Creative, 1992. Print.

2) Articles

Author Lastname, Firstname. “Title of Article.” Name of Journal Volume. Issue (Year): Pages. Medium.

Cox, Gordon. “A Newfoundland Christmas Caroling Tradition.” Folk Music Journal 3.3 (1977): 242-60. Print.

3) Websites/pages and blogs

Entire Website:

Editor, Author or compiler name. Name of website. Version number. Name of institution/ organization of the site, date of creation. Medium. Date of access.

A page on a website:

“Title” Name of site. Publishing date. Medium. Date of access.

*Write np, if you cannot find the publisher name

Write in nd, if you cannot find the publishing date.

Blog:

Editor, Author or compiler name. “Title of post”. Name of site. Version number. Name of institution/ organization. Medium. Date of access.

* If author(s)’s names are not found, use the screen name.

If there are more than one author, include the other author(s)’s name in brackets.

4) Videos

Title of Film, Series (If available), Creator/Filmmaker/Corportation, Important Individuals (Writers, Producers aside from lead directors), Key Performers (Lead Actors), Studio followed by the release date, Format in which you watched it (DVD, YouTube), Distributor (if a DVD), Distribution/Release Date

5) Lectures

Speaker’s name. “Title of speech”. Name of meeting/organization. Location. Date. Type of presentation.

* Types of presentation: Address, lecture, keynotes, guest lecture, conference presentation.

6) Bibliography

Grenfell, Wilfred Thomason. Adrift on an Ice Pan. St. John’s: Creative, 1992. Print.

Cox, Gordon. “A Newfoundland Christmas Caroling Tradition.” Folk Music Journal 3.3 (1977): 242-60. Print.

“MLA Work Cited: Electronic sources (Web publications)” Purdue Owl. 14 Dec 2012. Web. 02 Nov 2013.

“MLA Work Cited: Other common sources” Purdue Owl. 24 Jun 2013. Web. 02 Nov 2013.

Analysis – Cell Phones

Cell Phone Analysis

Cell Phones have developed in the last 15 years, and is seen today as a crucial necessity in order for our economy to survive. Our world depends on technology like cellular mobile to communicate and interact with business, family and social lives. The telephone requires a radio signal that can be accessed from virtually anywhere unless out of range of the satellites, and sometimes underground. The article, The Mobile Phone meets the Internet, written by Malcolm W. Oliphant, speaks on how the telephone has come a long way from what it was; as before 15, the mobile required only physical use of dialling and no digital information, as it very greatly thrives on today. Oliphant separates the mobile eras into three generations, the first generation consists of analog cell phones, the generation is made up of similar phones but with digital radio built in, and making the smartphone era as the third generation. “These trends should last into a fourth generation of even better spectrum efficiencies, higher radio carrier frequencies, even higher user data rates, and a blizzard of new non-voice applications plus the terminals to support them.” There is much took look upon in the future of mobile phones, and growth of our society with the help. it was when the internet was integrated into the mobile phone, that increased its popularity, along with convenience.

The article, Cell Phones + microwaves + other radiation = Disease!, written by Michael Wald, discusses the opposing side of the opinions of the cell phones in this time. By already seeing the title of this article, you can understand that Wald is firm on his beliefs that the cell phone, no matter what it has done for this society, will not benefit any of us if the health effects are so harmful to us. He starts off the article by saying “The use of cell phones is associated with an increased risk of brain tumours after 10 years of use, according to the journal Biomedicine & Pharmacotherapy”. It is puzzling that cell phones have the power to cause us so much potential harm. This article also speaks about how the use of a landline or a wireless headset can easily reduce the amount of radiation near the head of the user. “There is no way of knowing what this “individual tolerance” limit is for each of us, but it is prudent for us to take these reasonable, “natural” precautions and use our common sense”.

Both these two articles read make powerful statements on the pro’s and con’s of cell phones and their uses. The Mobile meets the Internet, by M.W. Oliphant, clearly states that the cell phone has revolutionized the way we live today, as everything we need is so portable, and accessible to us. On the other hand, we have to think about the health hazards, and Cell phones + microwaves + other radiation = disease!, by Michael Wald discusses how unsafe having open radiation close to our heads can be, and what it could become. While both articles make concrete arguments, my opinion of it is that we should be looking on what the cell phone has accomplished. It has restructured our day-to-day life. The cell phone can hold your entire life in a pocket-sized case, including communication, internet use, and recreational uses.  The cell phone is a much more important part of our life than we think, and it will remain this way as it grows and expands with research in the future.

Works Cited

Wald, Michael. “Cell Phones + Microwaves + Other Radiation = Disease!.” Original Internist, June 1, 2012.

Oliphant, M.W.. “The Mobile Phone Meets the Internet.” IEEE Xplore, August 1999. http://ieeexplore.ieee.org.ezproxy.lib.ryerson.ca/xpls/abs_all.jsp?arnumber=780995&tag=1 (accessed October 30, 2013).

the Library

For all my life, I would use the Toronto Public Library, which is a couple blocks north of my house — up until this year, where I have now used the resources of the university library to retrieve my information. After the “research skill workshop”, I am not much more informed of how I can help myself find the information I need. I have learned about the online resource which is available to anyone in the Ryerson database, online, so users can be informed as to if their search of book in available for them to be taken out when they wish. We were taught how to search and understand our search information in the workshop taken in September.

New Media Innovators

As far as Kutiman’s “Thru-You” goes, it is a video of several musicians producing music together. However, they are not working directly with one another. Compiling the talents of several musicians can produce a sound which can never be achieved alone. These videos taken from the internet have a certain fluidity to them, as if they are interacting with each other, even though they are of completely separate natures. This 21st century piece combines aspects of collaboration and taking someone’s work and applying it into something else.

http://thru-you.com/#/videos/1/

Antonio Vivaldi is a well known musician, whose intricate classical music has been shared around the world. His piece, “Four Seasons”, is lead by a violin, and conveys extremely strong emotions and setting through the upbeat and beautiful melody. The video of this song uses masks as a metaphor of feelings and movements, as they can be hidden or revealed in a different matter. Vivaldi is considered an innovator because he takes his music to the next level of intensity as unseen before.

Eric Whitacre is a well known conductor, broadcaster and public speaker. His most known piece is “Lux Aurumque” which is made up of 185 separate videos synced together to create a virtual choir. This video consists of 185 separate videos of different people in different countries. Eric Whitacre puts a spin on concerts and choirs as he is able to bring 185 strangers together to sing and make music together via the internet. “Lux Aurumque” is considered his ‘ground-breaking’ work.

Source:

http://ericwhitacre.com/biography

  • At the age of 48, Evelyn Glennie has become one of the most influential virtuoso percussionists. What makes her so inspirational and influential at the same time comes from that fact that is she deaf. Glennie is able to create music just through feel, and sight, and demonstrates to everyone that music isn’t just sounds to your ears. This video demonstrates her ability to speak and also play various types of percussion instruments. Without the ability to hear the sounds she’s making, Glennie is still able to inspire her audience to take their other senses and feel the sound through different ways. She innovates new ways to experience love for music and sound.

    Source

    The music produced by John Cage is mesmerizing  as the piece analyzed, Dream created in 1948. John Cage is one of the more influential media artists, because of the beauty and composition of his music. He was ahead of his time, his atmospherical music is gifted, technically and musically. He was a great influence for modern dance, as his affiliation with choreographer, and partner, Merce Cunningham, as they were able to work together to jump ideas off each other and improve the works of eachother.
    source – http://en.wikipedia.org/wiki/John_Cage

SEO

With Sam Legros, Jodie Quach, and Stanley Tsai.

Search engines are to find web pages on the internet, hence indexing them. The term “web indexing” is the process of finding web pages using a search engine like Google. Some search engines store the data on their own server or “corpus” (online storage of texts). Search engines not storing the indexes themselves use caches to save the information to their system. Caches, in regards to search engines are sort of like left-behind information of searches where the information is temporarily stored on a system or computer to facilitate and optimize future searches, because it retains some of the information. That is why some browsers recommend to clear caches in order for them to run faster.

Search engines use robots to literally scan web pages for relevance and information pertaining to a search that has been made. The easiest way to index, or find a page is simple HTML text. Because robots cannot scan through images for key terms as easily as tags for a blog post. When a web page is scanned, the information received in then stored in the index for future searches. An index is simply a database of information used for search. Ranking web pages on Google for example is the relevance of information towards the search terms as well as the traffic which the website receives. Web searches use very complex algorithms which determines the order of web pages on the index.

IP addresses can affect search engine optimization, it all depends on the shared IP address versus an independent one. Having a website that shares an IP with a popular, high traffic website will benefit your SERP (Search Engine Ranking Position). However, if you share your IP with a website which is slow and does not produce much traffic, it will affect your site indirectly. That is why there are pros and cons for both sides. Having your own dedicated IP address for your website means you are in control of how fast and where your site is coming from. That can be positive if you have an aptitude for website hosting, design, etc. However, competing with major corporations which specialize in website optimization and already have a high SERP, it will be difficult to bring your name to the top of the list as fast. Also security is an issue for both sides. Starting your web site from scratch, you need to implement your security yourself, whereas a shared IP hosting service may already have some security already in place. On the other hand, that shared IP may not have an adequate security as one you can develop yourself. As you can see, with any issue that may arise towards SEO, having either your own dedicated IP, or using a shared one, they both present good and bad qualities.

Keywords is essential to search engines. They are the main reason why your webpage is in the results of these searches and makes it possible to find your site. People use keywords to find websites that are relevant to the words. If your site contains the words, it is more likely that people will find your page. This will continue as search engines often retain previous searches for future searches. Using keywords in the tags is not enough, to maximize the use of keywords you must use them throughout your site. For example, in the titles, categories and of course, the content.

Search engines are becoming more effective in scanning webpages and like I mentioned previously, tags are not enough anymore, keywords must be used throughout the website in order to attract your intended audience. You can use these keywords in your html tags such as the title. The title html will be used as the title in the search results, When someone shares your link, the title tag will also be the title for the link and this title will attract people with similar interests. You can also use html tags to make your site more convenient for the users. By including links (the <A href=> tag), you can direct the users to different parts of your site making it more efficient and leaving a good impression for the user, encouraging them to revisit.

Robots.txt is acts as a protection online for information that you prefer some viewers not to view. It is simply a note that pops up before entering a site, to warn the viewer that a certain information will be shown. For example, when entering a website that contains inappropriate content, a message will pop up warning you that the inappropriate content is not appropriate for all ages, as it may involve nudity, violence or vulgar language. “You cannot prevent thieves from coming in but the good guys will not open to door and enter” (Webconfs.com).

By using tags and categories, a blog is more available and open for the world to search and evaluate. The use of an effective title cane easily vary the search results because each key word in the title will pop up. “When you begin thinking about a post’s tot;e. you shouldn’t select the most competitive keywords as your main keyword.” This being said, you also do not want to have irrelevant post titles, tags, or categories because this will be harder to narrow down what your blog is relating to.

Mobile devices have come so far, but they do have their limitations when compared to their computer counterparts. Many mobile phones have limits when it comes to flash player, and as well as video playing. While using SEO on mobiles devices your searches and results are constricted to what can be seen using your device. Many phones, such as the iPhone don’t allow for flash required files to play. These results, which may or may not be important to you; are pushed down past the ones that you are able to read properly. Although they are optimized to see what you need, not everything you could see on the computer will be there. Aside from the mentioned, there is not much different from the SEO we use on our computers.

Twitter is definitely and one of the largest users of SEO. The company itself, but mainly its users use the tweet system to their advantage. Companies, musicians, artists, all use twitter to promote their brand or work throughout twitter. Twitter accounts are made to tweet about their projects, what they do, what they stand for, and anything that relates to them. In turn, if these handles (usernames) become popular enough they show closer to the front page of search engines such as Google or Yahoo. Twitter is a platform fit perfectly for the use of SEO.

Sources:

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

http://mimech.com/search-engines/

http://www.zippykid.com/2013/02/21/do-you-need-a-dedicated-ip-address-for-seo/

http://www.wordstream.com/seo-keyword

http://usabilitygeek.com/7-html-guidelines-for-website-usability-seo/

http://www.webconfs.com/what-is-robots-txt-article-12.php

http://blog.talentlms.com/optimize-blog-posts-search-engines/

http://econsultancy.com/ca/blog/62180-how-do-mobile-and-desktop-seo-differ-and-how-can-you-improve-rankings

http://www.searchify.ca/10-twitter-seo-tips/

Article Reflection

The article Media Culture Society, written by Eugenie Shinkle talks about the power and effects that video games have on our society, and how they act as a “sixth sense”; mind simulation. Apart from the endless amount of time consumed by these video games, the idea itself is revolutionary and is already starting to change the world. It combines touch along with sight and spatial awareness to create a virtual simulation into the digital world. A much different concept than world we know, the user is able to have full control over a subject’s actions and decisions.

“Taking its methodological cues from the linked domains of phenomenology and cognitive neuro- science, the following discussion examines perception and gameplay in terms of the relationship between the body, the emotions and the proprioceptive senses, sketching out some of the possibilities for emotional expression offered by a generation of video game controllers that engage the human sensorium in a newly extensive way”, says Shinkle. He uses this concept in referring to an interaction that the human mind is unfamiliar with. The endless amount of time invested in producing these games has been recognized by the users, as the high quality and level of sophistication are apparent. Games such as car racing, sports, and adventure-based games, using your fingertips, are almost life-like. The graphics, layout, and interactivity of the games have become seamless and it seems that there is no stopping this type of simulation; the expansion and world-wide interest will soon transform this idea of a virtual world to a world of endless possibilities.

Shinkle’s article defines well the use, purpose, and future hopes for video games in this generation. He explains that the concept of a video game, unfamiliar to the human mind, will change the way the world views media interactivity. The concept was recently introduced to the digital world, and acts as a revolutionary idea for our upcoming years as a nation.

 

Works Cited

Shinkle, E. Video games, emotion and the six senses. Media Culture Society. November 2008 vol. 30 no. 6 907-915