Category Archives: Week Nine

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).

Source: http://webdesign.about.com/od/beginningcss/a/aa021607.htm

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.

Source: http://html.net/tutorials/css/lesson2.php

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;}

Source: http://www.w3schools.com/css/css_id_class.asp

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.

Source:

a) “Three Ways to Insert CSS.” W3schools. N.p., n.d. Web. 22 Nov. 2013. http://www.w3schools.com/css/css_howto.asp.

b) “CSS Tutorial.” Tjzag.com. N.p., n.d. Web. 22 Nov. 2013. http://www.tizag.com/cssT/inline.php.

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. http://www.w3schools.com/css/css_boxmodel.asp.

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. http://www.w3schools.com/css/css_float.asp.

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. http://www.htmldog.com/guides/css/intermediate/grouping/.

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}p.date

{text-align:justify;} p.main

{text-align:justify;}

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. http://www.w3schools.com/css/css_text.asp.

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

This is the HTML:
<div id=”menu”>
<ul>
<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>
</ul>
</div>

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. http://www.htmlgoodies.com/beyond/css/how-to-create-horizontal-navigation-with-css3.html.

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

<html>
<head>
<style>
div.img
{
margin:5px;
padding: 5px;
border:1px solid #0000ff;
height:auto;
width:auto;
float:left;
text-align:center;
}
div.img img
{
display:inline;
margin:5px;
border:1px solid #ffffff;
}
div.img a:hover img
{
border:1px solid #0000ff;
}
div.desc
{
text-align:center;
font-weight:normal;
width:120px;
margin:5px;
}
</style>
</head>
<body>

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

</body>
</html>

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. http://www.w3schools.com/css/css_image_gallery.asp.

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. http://www.ransen.com/articles/Formats/Image-Formats.htm.
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. http://webdesignledger.com/tips/tools-and-tips-on-how-to-optimize-images-for-the-web.
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. http://allusefulinfo.com/5-easy-effective-tricks-to-make-your-website-load-faster/.
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. http://www.w3schools.com/css/css_background.asp.

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”>

</video>

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

Source:

a) “HTML5 Video.” W3schools. N.p., n.d. Web. 21 Nov. 2013. http://www.w3schools.com/html/html5_video.asp.

b) “HTML – YouTube Videos.” W3schools. N.p., n.d. Web. 21 Nov. 2013. http://www.w3schools.com/html/html_youtube.asp.

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. http://www.pr2020.com/blog/optimizing-video-for-your-website.

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.
Sources:
a) “50 Questions to Evaluate the Quality of Your Website.” Search Engine Journal. N.p., 20 Feb. 2008. Web. 21 Nov. 2013. http://www.searchenginejournal.com/50-questions-to-evaluate-the-quality-of-your-website/6400/.
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. http://www.htmlgoodies.com/beyond/css/article.php/3921766.
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. http://www.htmlgoodies.com/beyond/css/article.php/3921766.
Tagged , ,

Weekly Presentation

Cyborgs – Cristian (Nov. 29)

Cyborgs are humanoid robots that are part machine, part organic parts. Under a different method of thinking, cyborgs are also any humanoid creature that uses technology as an extension of themselves and their body, which includes us and our use of consumer technology as a commodity. In that sense, we’re cyborgs already.

In fiction, cyborgs are usually represented as a creature that’s part machine part human (Terminator, Robocop) and the applications that arise from such a combination. A researcher put magnets in his fingers and was able to control electromagnetic currents, so when his wife performed the same surgery, they were able to communicate with one another without speaking to each other. He could feel her hand raise. The couple used technology (magnets) as an extension of themselves to perform activities that would be otherwise impossible.

In the world of new media, there are huge applications to this. We could one day create technological art pieces using our minds and controlling things telepathically. The increased use of humanoid technology could help us achieve products (be it art or technology) that we couldn’t before.

Artificial Life (Nov. 22)

Artificial Intelligence – Bram and Raine (Nov. 15)

There are three types of artificial intelligence; symbolic, sub-symbolic, and statistical. Symbolic consists of knowledge taught by humans, and it has millions of triggers that react to different conditions and scenarios. Sub-symbolic uses fuzzy logic to determine the results of decisions by using a structure similar to the human mind. Statistical artificial intelligence is programmed with functions that can analyze data and create its own conclusion (this is the modern type of artificial intelligence).

I think artificial intelligence has huge implications for not only advancements in technology, but implementation in consumer technology. Eventually, when the cost is low enough to develop software for it, I think artificial intelligence will be implemented in our technology in such a way that unifies it. Imagine a smart home; when you walk in the door your AI assistant recognizes it’s you and relays social networking notifications via audio through the house. You can speak to this AI; schedule appointments, record TV shows, make a grocery list, warm the oven up.

AI is used in consumer technology today, albeit very basically. Siri and searching on Google are fantastic examples of the technology, and we’ve already realized how much it’s assisted our lives. As we can build technology to become more aware and intelligent, we could replace human labour with robotics to reduce costs and take people out of hard working situations. There possibilities are endless.

Transmedia – Saria (Nov. 8)

I’m so conflicted about transmedia – I hate it and I love it. Transmedia is the method of telling multiple different stories from a franchise, spawning multiple different mediums. A fantastic example would be the Batman franchise. There are comics, video games, films, and animations that all feature Batman as the main character but have him in a completely different story.

I hate this because of my love for the absolute. When a television show or movie is made with a specific story and that story finishes, I want it to stay that way. For instance; Star Wars. The complete Star Wars series, from episodes one to six were envisioned and created by George Lucas. Lucas is the “god” of the Star Wars universe, without him the Star Wars universe doesn’t have its original vision, which makes it feel betrayed in a way. I don’t want to see Star Wars done by someone else because it’s not Star Wars anymore. There are tons of video games and books written set within the Star Wars universe but telling different stories of events, not by George Lucas. The problem with this is technically none of these stories are “real” within the fictional Star Wars universe, they’re just a professional version of fan fiction. This isn’t the same as a continuation of the original Star Wars stories on other mediums, that’s multimedia. If George Lucas made more Star Wars in comics or books, that would be okay because he’s the one making it. As soon as someone else makes it about a different story though, I don’t like it. I want my original stories to be absolute.

I love Transmedia, though, because it can reach consumers from all types of markets. The comic book reader, the film critic, the television fanatic, the avid reader; they can all enjoy Star Wars and different stories about characters on Star Wars (even though they aren’t done by George Lucas). Technically, it’s still Star Wars, and more people will have access to content from the franchise. Transmedia can also spawn better stories from that franchise. Christopher Nolan’s “The Dark Knight” trilogy is arguably Batman’s best foray into media of any kind, surpassing that of even the original Batman from the very first comic books. Nolan didn’t invent Batman, but he made the best story about Batman. I know this contradicts my earlier statement, but if someone with enough respect and admiration for the original franchise wanted to make their own story it can be okay. More often than not though, it becomes a disgrace to the franchise (“The Bourne Legacy” is a great example of this).

In today’s world, people have access to various mediums on one device. Computers can play movies, television shows, download books, comic books, and animated series. With this availability, it’s no wonder transmedia is so popular; when a consumer likes a franchise, they yearn for more stories set within the universe that can satisfy their cravings. Although the stories may not live up to the original, they can still be good companion pieces to the franchise. In today’s world, a story simple doesn’t stay a story anymore, it becomes an event; transcending all forms of media.

Gaming – Alejandro (Nov. 1)

Gaming is a huge industry in the media and technology world. It’s one of the only mediums that are truly interactive. Instead of just absorbing content, the consumer can interact with the content and influence the direction the content (game) will take. There is no other media form as cognitive as gaming, no other medium that has consumers making split decisions and stimulating their mind as if they were interacting with someone in real life. Therefore, video games are also huge methods of tinkering. Players can become curious and see what impact their in-game decisions will make. Although there’s usually a storyline to follow, a good video game would not be complete without extra areas to explore and things to tinker with. Humans are naturally curious and game developers take that into consideration when building their environments. Who wants to play a game where you have to follow an absolute strict set of rules and not go off the beaten path? Character customizations, weapon/vehicle choice, and interactive characters all create a richer experience for the gamer.

Not only are video games fun but we learn from them greatly. We learn how to think quickly and logically, see the consequences of our actions, and be apart of an environment that promotes creativity and character studying. I think gaming could be applied to learning in schools as well. I’m a strong believer that teaching yourself something is the best way to learn something, as you develop not only an understanding of the content but an understanding of how to learn it. If children could learn certain things through self discovery in video games I think it would benefit them greatly. Science programs could be applied to this, making children more interested in taking up a career in the industry. For instance, there could be an educational game where the child has to build a rocket and fly off Earth. They would go collect the rocket parts, put it together, and angle it in the right way to leave earth. The child would not only have learnt some basic physics but would feel good about it too. There are a lot of possibilities for gaming in education.

Remix Culture – Cristina (Oct. 25)

Remix culture is about mixing together existing products to make new ones. In the modern world many things made are not technically “original” anymore. Most films are not original thematically or archetypically anymore. A group of characters in one film can be easily compared to a group of characters in another film (Heroes and Lost). Likewise, themes and story lines can be compared as well (Pocahontas and Avatar). In today’s media storytelling, artists borrow ideas from other artists all the time. Because of this, these “remix” skills have surfaced amongst artists that bring together unoriginal ideas to create an original product. YouTube is a fantastic example of this, where amateur videographers almost never create their own original songs for their film projects. Instead, they’ve developed the skill of mixing produced songs to create the sound they want to set the tone they want for their film. If they need a setting with a big scope they could also set their actors against a green screen and take the background from another film.

Under the context of new media and technology, there are huge possibilities for remix culture. Wikipedia is a great example of this culture, where people from all over the world come together to add and change information. Blogs and websites are fantastic sources to post content that has been remixed by an artist. Major musicians use remixing in their songs all the time too, called “sampling”, which is taking another song and mixing it with their own. Their new song is technically “original”, but some of the content within that originality is not. In the future, I expect this culture to only keep growing as more people enter various industries and the history of the work of others becomes larger. There will be more pressure to create “new” things, which will be harder to do considering there aren’t a lot “new” things left to cover.

Simulations – Danny (Oct. 11) 

Danny’s presentation was about the use of simulations as real world applications. A ton of different industries are using simulations as apart of their training programs to allow workers to be prepared in their field without having to risk them failing as a novice. What I didn’t realize was how many industries use simulations, and to what extent they use them. First responders have to clock a certain number of hours in simulations to be ready for their days on the field, and pilots have to spend hundreds of hours in a virtual plane before they can even sit in the real thing. Simulated learning is apparently working very well for industry companies, allowing them to save money on training as well as the health of those involved. This relates to new media research in the way that it’s an evolving technology with an impact on the way those in our society are trained for the work force and taught important skills. Simulation learning offers a new way to learn.

Ethnography – Erich (Oct. 4)

I found this topic a little hard to understand. From what I understood in Erich’s presentation as well as a bit of research I did at home, ethnography is the study of human behaviour of a particular culture from the perspective of those being surveyed. This doesn’t only apply to cultures such as past civilizations and the way of living in different parts of the world, but how people live and behave within certain circumstances. For instance, would customers be more inclined to visit a Wind Mobile store if it was closer to a Futureshop or Bestbuy because of the similarities in products? If you had a friend in your calculus class but hate sitting in the front row, where would you sit if he wasn’t there and if he was, would you sit in the front row with him? These are quite random examples but show the vast area of research ethnography can cover. The cultural behaviour of people in different under different circumstances is essential to new media research and attempting to predict which mediums will fade, which mediums will gain interest, and which mediums will be next. In the 1920s film was a medium meant only for people with a less than ideal lifestyle, mostly immigrants who needed cheap entertainment to take their minds off their mindless jobs and less than favourable wages. Film was a “lower-middle class” form of entertainment, but when the culture of urban cities shifted during the second world war, more people of higher class needed entertainment to take their minds off things and film as a medium became increasingly popular.

Social Media – Seif (Sept. 27)

In Seif’s presentation he talked about the sheer scope of social networking and some insight into the effect it’s having on our personal lives. According to his research, “social networking is the number one activity on the web.” That’s absolutely huge, considering the number of people connected at any given second. The use of social networking is beginning to have an effect on our personal lives too, as anything we do that’s digitally captured remains online forever. This is particularly troubling, and as Seif mentions “there is no escaping it.” For anyone who’s read 1984 by George Orwell, the presentation certainly brings to surface Big Brother and the state’s lack of escaping penetrating technology. Although I don’t agree that “there is no escaping it”, Seif does make a good point about how fast social networking is growing and how documented our lives are becoming online. It’s now more important than ever to protect your reputation and learn the skills of self presentation, because now the entire world wide web could be watching.