Author Archives: Ian Smyth

Assignment Five: Formal Essay

My new media research methodologies essay on Synthetic Biology can be found by clicking this

Tagged , , , ,

Assignment One: Presentation

This is my Androids presentation.

From researching my presentation topic I learnt about the other side of creating Androids and humanoid robots; their design. If humanoid robots are to be integrated into society one day, we have to be able to comfortably accept them and be willing to work alongside them. Apart of this comfortability comes from how they look. What I found was that there is a certain design on humanoid robots that has us feeling threatened, because we find some parts of it frightening and others not. This is called the “uncanny valley”, which lies between robotics that we know are not human and robotics that we can’t distinguish from other humans. If Androids are to live alongside us, researchers must find a way to make them move and exist without lying in the uncanny valley, or our basic survival instincts will be to reject them.

Tagged , , ,

CSS 101

Group: Ian (1, 2, 3), Saria (4, 5, 6), Cristian (7, 8), Alejandro (9, 10)

1) What is CSS?

CSS stands for Cascading Style Sheet and was created in 1997 to separate design from content when creating websites. This way HTML could perform as scripting to actually produce content and create the webpages, and CSS could perform the task of designing the layout of the webpages. Every webpage is affected by a default CSS implemented by the browser which decides the default layout for things such as text font and size. However, the web designer can override this default by scripting CSS of their own, telling the browser to display a different kind of layout than the default.

CSS can be applied in the script of HTML itself by way of making a “style” tag (internal). It can also be applied by being scripted in a separate sheet and having that sheet be linked to the HTML page (external).


2) Through examples, explain how the CSS syntax works.

Example: body {background-colour: #FF0000;}

Body: this is an example of the selector, which is the part that the HTML script applies the style to (so this would be applied to the body).

{background-colour:}: this is an example of the property, which is what part of the webpage will be affected (in this case the background would be).

#FF0000: this is an example of the value, which is what style will actually be changed (the background colour would become this colour in this instance).

This can be implemented into the website via inline scripting (by using a tag) or by linking to the external styling page.


3) Through examples, explain the difference between id and class.

CSS allows you to specify your own selectors called id or class.

id selector: the id selector is used to specify a style for a single element. It is defined with a “#”. Example: #para {text-align: center; colour; red}

class selector: the class selector is used to specify a style for a group of elements. It is defined with a “.” Example: .center {text-align: center;}


4) Through examples, explain the difference between external style sheet, internal style sheet and inline style, when is it better to use one over the other?

There are 3 ways to insert CSS into style sheets. CSS can be inserted using external style sheet, internal style sheet, and inline style.

External Style Sheet: If the style you’re using is applied to a number of different pages, then the external style sheet would be ideal for this use. It is easier to manage because by simply changing one file you could alter the look of the entire webpage. In order for this to work, each page must link to the style sheet using the <link> tag, which needs to be inserted in the head section.

Internal Style Sheet: If each of the pages in the entire webpage is unique and different from the other, then the internal style sheet should be used. This allows you to alter the single document with unique styles using the <style> tag inserted below the <head> tag.

Inline Styles: Despite the true purpose of CSS, which is to separate design from content, inline styles allow you to add content to CSS simply by using the style attribute in the relevant tag.


a) “Three Ways to Insert CSS.” W3schools. N.p., n.d. Web. 22 Nov. 2013.

b) “CSS Tutorial.” N.p., n.d. Web. 22 Nov. 2013.

5) Through examples, explain the box model

The box model allows you to add a box around the html elements consisting of margins, borders, padding, and actual content. Using the margins usually clears an area around the border. It is completely transparent. As for the border, it goes around the padding and content. It’s usually affected by the background color. The padding clears as an area around the content. The content is where the actual text and images appear.

Source: “The CSS Box Model.” W3schools. N.p., n.d. Web. 22 Nov. 2013.

6) Through examples, explain what floating and positions do. What is the difference?

The CSS float allows elements to be pushed to the left or right, rather than up or down. It’s often used for images. Only elements after the float will flow around it, elements before will not be affected. For example, if an image is floating to the left, the text will float around it to the right.

Source: “What Is CSS Float?” W3schools. N.p., n.d. Web. 22 Nov. 2013.

7) Through examples, explain css grouping/nesting.

Grouping is when you take code that have the same properties and group them together but make them separate by adding a comma in between them. Nesting is the same thing but it is when you group within a group of selectors. Ex – Taking this…

h2 {color: red;}

.thisOtherClass {color: red;}

.yetAnotherClass {color: red;}

and grouping it to look like this:

h2, .thisOtherClass, .yetAnotherClass {color: red;}

Source: “Grouping and Nesting.” HTML Dog. N.p., n.d. Web. 22 Nov. 2013.

8) Through examples, explain how to align elements.

This puts the text where you would want it. After the code you can add {text-align:;} and then put either right, left, center, or justify. Justify will make all of the text equal to each other on the web page. Ex-

h1 {text-align:justify}

{text-align:justify;} p.main


This will make all the text on the webpage be equal In length to each other.

Source: “CSS Text.” W3schools. N.p., n.d. Web. 22 Nov. 2013.

9) Through examples, explain how to build a css navigation bar.

This is the HTML:
<div id=”menu”>
<li><a href=”index.html”>Home</a></li>
<li><a href=”aboutus.html”>About Us</a></li>
<li><a href=”services.html”>Services</a></li>
<li><a href=”contactus.html”>Contact Us</a></li>

This is the CSS for the whole menu:
#menu {
width: 550px;
height: 35px;
font-size: 16px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-color: #8AD9FF;
border-radius: 8px;

This is the CSS for the unordered list (ul):
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;

This is the CSS for the listed item (il):
#menu li {
display: inline;
padding: 20px;

This is the basics to build a very ugly navigation bar and there are many variations to how to make a navigation bar, but this is the most common and simple one.

“How to Create Horizontal Navigation With CSS3.” How to Create Horizontal Navigation With CSS3. N.p., n.d. Web. 22 Nov. 2013.

10) Through examples, explain how to build a css based image gallery.

padding: 5px;
border:1px solid #0000ff;
div.img img
border:1px solid #ffffff;
div.img a:hover img
border:1px solid #0000ff;

<a target=”_blank” href=”klematis_big.htm”>
<img src=”klematis_small.jpg” alt=”Klematis” width=”110″ height=”90″>
<div>Add a description of the image here</div>
<a target=”_blank” href=”klematis2_big.htm”>
<img src=”klematis2_small.jpg” alt=”Klematis” width=”110″ height=”90″>
<div>Add a description of the image here</div>
<a target=”_blank” href=”klematis3_big.htm”>
<img src=”klematis3_small.jpg” alt=”Klematis” width=”110″ height=”90″>
<div>Add a description of the image here</div>
<a target=”_blank” href=”klematis4_big.htm”>
<img src=”klematis4_small.jpg” alt=”Klematis” width=”110″ height=”90″>
<div>Add a description of the image here</div>


Although this is a very simple gallery, there are open source galleries that can be used for wordpress and other web services. These galeries though are not only based on CSS, but they requiere for the coder to call on Queries.

“CSS Image Gallery.” CSS Image Gallery. N.p., n.d. Web. 22 Nov. 2013.

Tagged , ,

HTML 102

Group: Ian (1, 2, 3), Saria (4, 5, 6), Alejandro (7), Cristian (8, 9, 10)
1. What Image File Formats should be used for web pages, why (how does compression affect loading?)?
Most image file formats can be described as either being “lossy” or “lossless”. Lossy formats (JPG, BMP) lose data every time they’re tampered with and exclude some information (such as colours and pixels) to make the full sized image a smaller file size. Lossless formats preserve all the information but may be large in size (PNG).
The size of the file affects the time it takes to load the content on the webpage. Large, PNG images will take longer to load than low quality JPG images because the file size is drastically different. On a webpage the most common, settled choice seems to be medium quality JPGs, as they are quick to load and preserve a good amount of detail. Of course, on websites such as those from major companies and the government, it’s important to have high quality imagery and thus longer page loading may be traded for higher quality images. It all comes down to the balance between image quality and page loading.
Source: “How to Choose the Right Image File Format for Your Needs.” Ransen Software. Cad and Graphics Software, 2012. Web. 21 Nov. 2013.
2. How do you optimize images for the web?
You can optimize images for the web by using online services that can shrink images while maintaining their original picture. Some services remove unnecessary bytes, leaving the bare minimum for the detail in the image. Other services turn your file formats into lossy formats, reducing the size of the image but also compromising the quality. Some services have even mastered the way to compress images to small file sizes without losing any information.
Source: Muller, Gisele. “Tools and Tips on How to Optimize Images for the Web.” WDL. N.p., 7 Feb. 2013. Web. 21 Nov. 2013.
3What tricks and tips can you use to make your webpage load faster?
a) Use less javascript in your pages. Javascript takes more time than usual scripting to be read by the browser so try to use the least amount as possible, as well as the compressed version.
b) Use small sized media files. Reduce the file size of images and video to have the webpage load faster, which can include lowering the quality of the media or cropping parts that don’t need to be there.
c) Have no blank space in the source code. Blank space is still read by a web browser, so by removing as much space as possible there’s less things to be read and therefore less time it will take to load the page.
d) Enable caching. Caching is a temporary storage that the browser uses to remember that you’ve visited the website before. Enabling caching on your website can greatly increase loading speeds as the browser will pull information from it’s memory (cache). This can also help reduce bandwidth usage and server loading.
e) Use the CDN (Content Distribution Network). CDN is a large system connected through multiple servers spread in multiple data centres across the internet. This can help make webpages full of multimedia and Javascript pages load quickly.
Source: Sharma, Raman. “5 Easy & Effective Tricks To Make Your Website Load Faster.” All Useful Info. N.p., 6 Oct. 2013. Web. 21 Nov. 2013.
4) How can you use images in css, show us examples?

Images are usually added to HTML because it’s a lot easier. In order to add images in CSS, this following code must be used:

Body {background-image:url (‘insert name of file.jpg’) ; }

For example, if my file name was called “flower.jpg” this following code would be used:

Body {background-image:url (‘flower.jpg’) ; }

“CSS background properties are used to define the background effects of an element.”

Source: “CSS Background.” W3schools. N.p., n.d. Web. 21 Nov. 2013.

5) How To Add a YouTube Video to Your Web Site and video in html5?

To add videos to html5 this following code should be used:

<video width=”340” height=”450” controls>

<source src=”nameoffile.mp4” type=”nameoffile/mp4”>

<source src=”nameoffile.ogg” type=”nameoffile/ogg”>


To add a video from YouTube, this following code should be used:


a) “HTML5 Video.” W3schools. N.p., n.d. Web. 21 Nov. 2013.

b) “HTML – YouTube Videos.” W3schools. N.p., n.d. Web. 21 Nov. 2013.

6) How do you optimize video for the web and incorporate it in your web page?

 In order to optimize the video, keep in mind these few tips.

– Make sure the video is in its right file format:

Here are a few file formats: .mpg, .mp4, .mov, .wmv, .asf, .avi, .ra, .ram, .rm, .fly

– Page title

The page title should say something about the video to enhance search results

– Description

Keep the description brief and straight to the point. A description is important because it highlights what the video’s main points are to the page viewers.

– Comments

Allow viewers to post comments on your videos. It’s a way for viewers to engage with content.

– Rating

Allow viewers to rate your videos as popularity is one of the factors that determine the strength of your content

– Social media buttons (crucial!)

Make sure your videos have social media buttons so that page viewers can share this video to Facebook, Twitter, Tumblr… etc.

Source: Moehring, Keith. “Optimizing Video For Your Website (Part 3 of 3).” PR 20/20. N.p., 18 Aug. 2010. Web. 21 Nov. 2013.

7. How do you optimize sound for the web and incorporate it in your web page?

Audio files can be optimized by making sure the file names for audio are easy to locate, and easy to recognize. It is not the same to have a sound file name called: ding01.mp3, 01.mp3, ding.mp3 or even aif5b9e.mp3. Based on the previous examples, the best one would be ding01.mp3, because it is possible that there are other ‘ding’ files in the same file. By placing a number after the name, it will categorize it, and make it easier to locate. Also, a user will not be looking for a specific file but for a link that leads them to that file, it is very necessary to have links, text and transcripts to be very specific when referring to a specific file specifically video and audio files since browsers have a difficult time indexing them.

There are some easier ways to optimize audio, and that would be a tag called ID3 which helps to add information to an audio file. The ID3 is like having meta tags to your audio files so that the file can be easy located or so that the file can display its properties when called for. A final way to help optimize audio in a web page is to share the file with other sites that can spread the music, like radio station sites, iTunes or Soundcloud.

Source: “Multimedia SEO Guide: How to Optimize Images, Videos & Audio for Top Rankings.”
Ineedhits RSS. N.p., n.d. Web. 22 Nov. 2013.

8. What are some of the dos and don’ts of web design with media?

• People should be able to navigate through the website easily without problem. It should not take very long to go from place to place within the website.
• Everything should be close to each other and the colours used should be more understated so that it is easy to read the website.
• The fonts should be easy to read and understand.
• The content should all be related and put under certain headings so that they are easy to find.
• The security of the website should not be visible and it should be well protected.
a) “50 Questions to Evaluate the Quality of Your Website.” Search Engine Journal. N.p., 20 Feb. 2008. Web. 21 Nov. 2013.
9. What resolution should you design for?
• The most used resolution for designing websites is 1024×768, which is the most popular resolution.
Source: Rohde, Michael. “What Screen Resolution Do You Design For? Using the Less Framework.” HTML Goodies. N.p., n.d. Web. 21 Nov. 2013.
10Designing for mobiles?
When designing for a website it is best to use the resolution of 320×480.
Source: Source: Rohde, Michael. “What Screen Resolution Do You Design For? Using the Less Framework.” HTML Goodies. N.p., n.d. Web. 21 Nov. 2013.
Tagged , ,

HTML 101

Group: Ian, Cristian, Saria, Alejandro

The presentation about HTML and be found by clicking this.

I learnt from this how distinct CSS really is from HTML. HTML is essentially just designed as a way to implement the content of your website onto the web, but CSS is completely and utterly about how that content is presented and seen. One feels like work and one feels like play. It’s interesting how the two scripting languages play on each other and combine to produce a finished website.

Tagged , ,

MLA Styles

Group: Cristian (1, 2), Saria (3), Alejandro (4), Ian (5, 6)

1) To cite a novel you must include, the authors name, the publisher, the complete title, the publication information, and the edition of the novel if posted. – EX. Last name, First name. Title of Book. Place of Publication: Publisher, Year of Publication. Medium of Publication. – Medeiros, Cristian. Lost in Time. New York: Whitehorse, 2008. Print.  (The second line of the citation should always be indented)


“MLA Citation Style.” Cornell Universtiy Library. Cornell University Library, n.d. Web. 8 Nov. 2013. <>.

2) To cite an article it is very similar to citing a novel but you would need to include the Volume number swell as the inclusive page numbers. – Ex Last name, First name, Title of Article, Publication Name, Volume Number, Publication Date, Inclusive Page Numbers, Medium of Publication. – Matarrita-Cascante, David. “Beyond Growth: Reaching Tourism-Led Development.” Annals of Tourism Research 37.4 (2010): 1141-63. Print. (The second line of the citation should always be indented)


“MLA Citation Style.” Cornell Universtiy Library. Cornell University Library, n.d. Web. 8 Nov. 2013. <>.

3) To cite a website, start by putting the author’s last name, comma, then first name, period. Then, in quotations  put the title of the article, period. After, in italics, put the name of the website, period. Write the date it was published (day month year), period. If there’s an organization that published it, put their name, period. Then write the date you accessed it, period. Lastly comes the URL, with the front and end capped with a “<“.

Example: Mallick, Heather. “Rob Ford Has Nothing to Lose but His Chain: Mallick.” The Star. N.p., 22 Nov. 2013. Web. 22 Nov. 2013. <>.

Source: “Create Your MLA Website Citation: (Guidelines Below).” Study Guides and Strategies. N.p., n.d. Web. 22 Nov. 2013. <>.

4) To cite a video or film in MLA, it begins with the title of the film in italics, period. Then comes the directors name, period. You can choose to include the name of actors after this, period. Then comes the name of the distributor of the film, comma, the year of release, period. Finally, write the medium of the video, period.

Example: Nolan, Christopher, dir. The Dark Knight. Perf. Christian Bale, Aaron Eckhart, Maggie Gyllenhaal, and Heath Ledger. Warner Brothers, 2008. Film. 22 Nov 2013.

Source: “How to Cite a Film in a Bibliography Using MLA.” Bibme. N.p., n.d. Web. 22 Nov. 2013. <>.

5) To cite a lecture, start by putting the speakers last name, comma, then first name, period. Then comes the presentation title in quotation marks, followed by a period and the name of the meeting/event (and if it’s a class lecture, the course/class name), then another period. Then comes the sponsor if there is was (for a class lecture, this is where the name of the institution would be written), a period, and then the name of the venue, comma, and city it took place in, period. The complete date should be written next, with the format “day month. year.” To end the citation, list what type of lecture it was, followed by a period.

Example: Pausch, Randy. “Really Achieving Your Childhood Dreams.” Journeys. Carnegie Mellon University. McConomy Auditorium, Pittsburgh. 18 Sept. 2007. Lecture.


“How to Cite a Lecture in a Bibliography Using MLA.” Bibme. N.p., n.d. Web. 8 Nov. 2013. <>.


The Library

The major difference between the university library and other libraries I’ve used in the past comes down to the ability to search countless databases for specific and peer reviewed articles. The Ryerson online library can connect me to an enormous amount of organizations that host scholarly articles for research, which really helps when it comes to researching topics for projects and essays.

High school libraries don’t even compare to this, as they have a limited selection of books and access online to only what’s in the library in the school. Public libraries get better, with a large selection of books and an online system to find the books in the library. It’s the university libraries that have access to scholarly organizations and peer reviewed articles, which are essential for research purposes.

Source: “Navigating the Library’s Electronic Sources.” Research Skills Workshops. Ryerson University, Toronto. 17 Sept. 2013. Lecture.