Exercise 13: CSS 101

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>

Advertisements

Exercise 12: HTML 5 – 101

The difference between a website and a web page is quite simple. A website is a collection of web pages all under a similar domain. A web page is a unique page which is located on the web, under the collection of the website.

To create a web page, you will need to use HTML or HTML 5 coding. There are many elements which constitute HTML to format a web page.

Simply put, HTML is divided into two sections, the HEADER and the BODY. The HEADER consists of elements which have functions on a web page, but they are not visually displayed. Whereas the BODY contains elements of what can be seen on the web page. Coding inside of the BODY create format to the page, such examples are:

<p> creates a new paragraph

<br> breaks the link, moving elements down the page

<strong> creates bold text

To write an HTML tage, it must always have an opening tag at the beginning of the element ( <strong> ) and a closing one at the end ( </strong). There are some exceptions, such as inserting an image into a web page, this tag is singular, and does not require a closing tag. If tags did not close, the HTML reader would not be able to distinguish where an element starts or stops. A DOCTYPE tells the file reader what kind of file it is reading, an HTML file has the code HTML as it’s DOCTYPE.

The h1 tag determines Page Header titles and other significant text which will be displayed on the browser tag, and not simply on the page itself.

Having images on a webpage can be done two ways, either from a folder within the website, or linked from an external website.

Folder, the tag used would look like <img src=”image.png”>

External, the tag used would look like <img src=”http://answerguy.com/wp-content/uploads/2012/12/h1-and-influency-in-search-engine-optimization.gif“>

HTML 5 is the language makeup of the web. It is the text based language which can be read by web browsers where it translates it into the web pages we know today in Web 2.0. HTML 5 was developed alongside with the development of the internet. This coding stage allows for more complex applications and coding to be implemented into a website. Also, HTML 5 was developed to support cross-platform files.

FTP stands for File Transfer Protocol. It is used to transfer files from a local host to a web host on the internet, for example. Website developers would normally work offline on their computer, and then FTP their files onto the website host server, where they will then be read to format the website.

HTTP stands for HyperText Transfer Protocol. This is the language which web pages are read by web browsers on the internet. The browser interprets the HTML coding using HTTP to formulate the web page itself.

 

Sources:

Curee, Brian. “Webpage vs. Website; What’s the Difference?” Sonline MEDIA. N.p., n.d. Web. 7 Nov. 2013. <http://sonlinemedia.com/webpage-vs-website-whats-the-difference/>.

“File Transfer Protocol.” Wikipedia. Wikimedia Foundation, 13 Nov. 2013. Web. 7 Nov. 2013. <http://en.wikipedia.org/wiki/File_Transfer_Protocol&gt;.

“Glossary of Common Web Design Terms.” H2i Online. N.p., n.d. Web. 7 Nov. 2013. <http://www.h2ionline.com/web-design-glossary.html&gt;.

“HTML5.” Wikipedia. Wikimedia Foundation, 11 July 2013. Web. 7 Nov. 2013. <http://en.wikipedia.org/wiki/HTML5&gt;.

Lloyd, Ian. “Basic Structure of a Web Page.” HTML Elements | Learn HTML. Sitepoint, n.d. Web. 7 Nov. 2013. <http://reference.sitepoint.com/html/page-structure>.

“What Is HTTP?” Webopedia. Quinstreet Enterprise, n.d. Web. 7 Nov. 2013. <http://www.webopedia.com/TERM/H/HTTP.html&gt;.

Exercise 11: HTML 5 – 102

The optimal formats for web images would be JPEG, PNG, GIF, BMP, and PSD.

JPEG is good for keeping the file small, while losing a bit of information, reducing the quality a little bit. This format comes in 3 kinds, Baseline, recognized by all browsers. Baseline Optimized, this optimizes the colour for compression, recognized by most current web browsers. Progressive, this is where the image loads using a block like appearance. It pixelates until the final form is attained.

PNG is great because it has a small file size and does not lose quality or information. This file format is also good because it supports transparency, unlike JPEG.

GIF is a simple file format for images with limited colours. This format always reduces the amount of colours to 256. Resulting in loss of information and quality, however reducing the file size tremendously. This format is often used for web animations, buttons, banners, and other simple shapes where image quality is not the prime focus.

BMP is a format which is very large in file and does not lose any quality or information.

PSD are Photoshop files which contain all the information of an image (layers, masks, blending, etc). This format is not recognized to be displayed in a web browser. But they can be exported to any of the file formats above for previewing.

Optimizing images for web means it needs to go through a compression stage, where you will have a readable image file. Lossy compression is a saved imaged that is not exactly the original image, only noticeable by zooming in, as the data will only compress the image pixels at a 100% zoom view.

Lossless compression is the original image that takes up more memory as the image can be seen at high definition view, being able to be seen when zoomed in. This takes up more memory because the more spaces of data filled the more memory it will acquire.

When optimizing images for the web, there are many formats that are available yet few can be read on the web; JPEG, GIF and PNG files are examples. JPEG (.jpg) is a lossy compression, but is better for pictures with contrast and range of color.

GIF (.gif) seperates the data into every pixel allowing the user to examine the image from a zoomed in scale. GIF is also referred to as a series of pictures, created to appear as a looping video clip. PNG (.png), a greater color-depth along with takes up less memory, while it compresses a more defined photograph than .gif. It contains

There are many techniques focusing on different aspects of a website which can optimize website loading speed. First off, to reduce the size of images will greatly increase the load speed of the website. Perhaps an image which does not focus on quality should be in GIF (256 colours) format, instead of BMP (large file size). Also, when uploading an image to your website, upload the desired size for the image. Having an image load at 500×500 pixels which will then be displayed at 250×250 pixels will slow the loading speed. Reduce the size of the image before using it to upload. Also, enabling caches for your website can greatly increase loading time for your web page. Caches is information temporarily stored in the browser which will allow pages to load faster because it already has something to load. Using CSS (cascading style sheets) can allow pages to load faster. It has been tested that having a smaller amount of larger CSS files will load faster than many little CSS files.

Images are easily added to CSS or HTML through the use of the <img> tag. That means there is no opening and closing tag, and everything with between the two brackets. Find the simplified URL of the photo you desire, and insert into between the brackets with the img on the far left.  You can find these URLS easier by right clicking any photo and clicking “Copy Image Address.”

Example:

<img src=”smiley.gif” alt=”Smiley face”>

To add a YouTube video to your website, simply go to the desired video. Once on the page, click on the ‘Share’ button below the video. You will then have several options to choose from, select the “Embed” option and you will see HTML coding. Select the entire code and copy it. Then go to your coding for your web page and paste in the code to the desired location on the page. you may change the dimensions of the video by altering some of the code. If you look before, you will be width=”xxx” height=”xxx”. You may change these dimensions to those any you like.

Example of YouTube embed code:

To optimize videos for the web, the videos should use the appropriate codec, it should be short (12-30minutes), and small in dimension. Videos can be 320×240 pixels minimum, however if the dimensions are any smaller, it would become difficult to view. If viewers have high speed connection, larger video dimensions can be offered. With larger video dimension, you must use a data rate formula to maintain the quality of the video.

Data Rate= (frames per second) X (movie width) X (movie height) divided by 29000

To maintain quality, up the data rate in proportion to the image size. Remember that doubling image size (320×240 to 640×480) requires a 4X (not 2X) increase in data rate.

The video should be short rather than a 90minute movie because incorporating the video onto a webpage can take a while to upload. It can also take a while for it to load for the audience. To keep videos short, delete unnecessary scenes that are not essential to your topic.  After editing, experiment with different codecs and find which one creates the smallest acceptable file.

There are multiple ways to incorporate a video on to your webpage. One of the most popular ways, is via Youtube. Simply upload your video onto YouTube, grab your embed code and paste the code into your html code. The second method is inline video; this is similar to linking original pages to your website. Start by locating the video on your computer then link it using the html code:  <img=”video.avi”> Another option is using plug ins.

Sound/audio can be incorporated through MP3 files and the use of the <audio> and <audiocontrol> tags. These however are not excepted by internet explorer, but is by many other popular web browsers such as Chrome. You would need the open with <audio> and insert a <source src=”(audio file name)”type=audio(file type)”> for the file you would like. And close off with <Audio Control>

DO’S

DON’T’S

Maintain a theme throughout

Disorganization

Make your point clear to the viewer

Exaggerate/exceed color or fonts

Choose a color scheme visually appealing

Fill content strictly with images

Set up an easy navigation system

Fill page with too much text

Choose nice fonts and text is easily readable.

Forget to cite your sources

Make a blog on a topic you are passionate about too

Make a blog that bores you

The most common screen resolution is 1024 x 768, therefore you should optimize your webpage to that resolution. However,screen sizes vary and your webpage should be able to use a variety of resolutions such as 800 x 600 or 1280 x 1024 etc. Liquid layouts should be used, liquid layouts stretches to the user’s window.

When designing for mobiles, web pages should be kept simple. Web pages on mobile devices have a limited amount of space and resolution for content. If the web page is overcrowded with content, it makes the functionality difficult. Keep in mind people download and use your mobile apps/web page because they need info on-the-go, the user should be able to access what they’re looking for with minimum taps, swipes, and attention required.

Sources:

Chastain, Sue. “Which Graphics File Format Is Best To Use When?” About.com Graphics Software. About.com, n.d. Web. 10 Nov. 2013. <http://graphicssoft.about.com/od/graphicformats/f/summary.htm>.

Nela, Dunato. “Optimizing Images for Web.” inObscuro. 2012.

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

Sharma, Raman. “5 Easy & Effective Tricks To Make Your Website Load Faster.” All Useful Info. Disqus, n.d. Web. 10 Nov. 2013. <http://allusefulinfo.com/5-easy-effective-tricks-to-make-your-website-load-faster/>.

“HTML Images”.w3schools. np.nd. Web. 13 Nov 13.

<http://www.w3schools.com/html/html_images.asp>

Clark, Scott. “How To Add a YouTube Video to Your Web Site.” HTML Goodies. Developer.com, n.d. Web. 10 Nov. 2013.

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

“Web Video Optimization tips” Website Optimization. np. 29 Jun 07. Web. 13 Nov 13. <http://www.websiteoptimization.com/speed/tweak/video/>

“HTML5 Audio”. w3schools. np.nd. Web. 13 Nov 13.

Stone, John. “20 Do’s and Don’ts of Effective Web Design.” Web Design Ledger

RSS. <http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design>

Shaun Anderson.”Best Screen Resolution to Design Websites”. Hobo Web. 13 Nov 13.

<http://www.hobo-web.co.uk/best-screen-size/>

Oleg Lola. “10 Tips for Designing a Mobile-friendly Website”. Sitepoint. 13 Nov 13.

<http://www.sitepoint.com/10-tips-designing-mobile-friendly-website/>

Exercise 10: MLA Styles

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.

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.

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.

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

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.

Sources:

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.

Exercise 9: Networking 101

With Jesse Maxwell Perez, Jodie Quach, and Stanley Tsai.

A computer network is a system of communication established between machines (in this case, computers) which allow them to exchange data to each other. The connect between computers can either be wireless (internet) or via cable. The most famous computer network is the internet. When a computer is connected to another computer, or the internet, it becomes a “node”. A node is an attachment to the network where it can send, receive, forward, and perform other functions of information. One example of a node would be a router which is connected to a computer, which connects everything to the internet. The router is in charge of downloading and uploading information to and from the computer and internet. Another example of a computer network would be the connection of your computer to your printer. Some may have it set up where they share the same wifi, or USB cable.

LAN) Is a Local Area Network. It is a computer network of a small, close proximity nature. They tend to be small router with several ethernet cable ports. The LAN device can connect several computers to a shared network.

WAN) Is a Wide Area Network. It is a network which reaches a bigger scale. WANs operate on the function of smaller LAN networks. The internet, for example is a WAN computer network.

Internet) In simple terms, it is a network of networks. It is a worldwide network consisting of LANs, WANs, satellites, etc. This network supports various methods and facilities in order to download (receive) and upload (send) information from one node to another

Intranet) It is an internal computer network inside of the internet. Where it could be a school portal network which is connected to the internet. Because an intranet is define by its own protocol, it can host private websites or information accessible only to those connected to the respective intranet. It’s restrictions from being accessed globally are defined using software on the web.

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

Peer-to-peer) It’s a network system which the computer, or nodes, communicate with each other directly using a medium such as the internet. These nodes (peers) can send and receive information to each other. The connection between peers are direct, and not centralized, where the connection is literally from computer to computer.

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.

The client and server are the frameworks of the internet. Similar to their names, a server is something that provides a service to a machine. A client is the machine that requests the service. For example, the internet use a client and service infrastructure. The client is the computers where the user requests information or a service from the server. The client and server are connected by the internet and the service provided through the web.

The OSI model is a seven layer system that defines how a network transmits and receives messages within a network. The layers are organized by hierarchy from highest to lowest: application, presentation, session, transport, network, data link and physical.

  • Application contains functions such as directory services, electronic messaging, file and printer access and resource sharing.

  • Presentation is known to be the “translator” for the network as this is the layer that formats the information to be used in the application process.

  • The session layer is what enables two application processes to establish, use and terminate a connection.

  • The transport functions are simply to transport information accurately with no errors, losses or duplications. Messages are often broken down into smaller pieces of information to be transported. Once it reaches the destination, it is reassembled to the original message.

  • The network decides the path where the data should go based on the conditions, priority and other factors.

  • The data link layer transfers data  frames .It is the link  between two nodes.

  • Electrical, mechanical and functional are elements to the physical layer of the OSI model.The physical layer is responsible for  the  transmission and reception.

The five network architecture is called the Transmission Control Protocol (TCP). They include, process and application, transport, internet, network, and physical.

  • Process and application provides services to to users and programs

  • Transport provides a link between two nodes

  • The internet, also known as Network layer, is responsible for network addressing.

  • Network, also known as the Data link layer, is responsible for what the Ip will run over.

  • Physical refers to all hardware under the network layer.

Protocols → Internet protocol refers to the starting letters of the address. “http” or “https” are normally the protocol letters for the internet. The protocol will always end with “://” to signify the end of the protocol.

TCP/IP → TCP is Transmission Control Protocol and IP is Internet Protocol. TCP is the more reliable way of passing on information on email or transferring files. It connects through computers using the internet, intranet or local area network.

FTP → which stands for File Transfer Protocol. This will transfers files using the internet as its access to connect with other machines. It will remember information for accounts such as a “clear-text sign in protocol” when signing in.

HTTP → HTTP is an internet protocol, means HyperText Transfer Protocol. HTTP is the world wide fundamental communication protocol, as for a website to be seen on the world wide web, is must begin its address with “http” or “https” or it will not be able to be coded onto the internet.

Telnet → Telnet is a network protocol that transfers information from your device to other devices, such that they need to know. For example: When changing a password on the internet, the password needs to be set if you were to log onto the same account on a another computer.

A router is a device that helps information flow from network to network as well as keeps devices attached to the internet service. A router can help an individual set up a LAN (local area network) or a WLAN (wireless local area network). With a router used a gateway for internet access, it would be impossible to be in a wireless range without a router acting a connector and secure hold for devices with internet connection. A router is usually not as fast as a physical internet connection because it works over waves and satellites, and not with electricity.

A firewall refers to the security system (hardware or software), built into the computer that monitors mass information that comes into the hardware and software of the computer, and has the power to block information from entering the computer, protecting the device from any harm that might be entering into the machine, and can only be avoided by using the firewall to detect the harmful information.

An FTP or File Transfer Protocol and a webserver are very similar yet also different. A web server is something that we use daily on web 2.0. Web servers transfer information back and forth between our computers and the network to allow us to view their pages. This information isn’t saved into our computer’s memory but is held there until the pages are changed. A FTP is different because it is a direct connection between file servers. A two way exchange is created from both the computer and the server and are saved into both memories.

And IP address stands for Internet Protocol. Every computer and internet service has a address of their own. These addresses are codes that allow servers to know where to send information, and computer to send information back to servers themselves. These addresses allow for basic features such as search engines and Facebook. You can also upload specific files using file sharing servers such as Mediafire or FileShare, using the same process.

File transferring can be done in two ways. The first way, is simply receiving information from a server. For this you will need internet access, and a device that can connect to the internet. Any browser that is opened is automatically connected to a homepage. And that’s it, that homepage’s server has sent you its information and allowed it for your computer to access it. For the second, you will need to create an FTP. You can do this by downloading a program like Serv-U on both computers where you want to transfer files from.

1)      Create a login.

2)      Agree to all registrations.

3)      Enter the IP Address of the other computer you want to transfer to.

4)      Test the connection through the program.

5)      Voila.

Sources:

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

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

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

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.differencebetween.net/technology/difference-between-client-and-server/

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

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

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/Telnet

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

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

Exercise 8: New Media Innovators

With Jesse Maxwell Perez, Jodie Quach, and Stanley Tsai.

Artists that are considered to work in the New Media genre are those who tie new technologies into their art. They use a combination of modern mediums as well as applications. The artists below share their own unique approach to media, where they were each considered a New Media artist by their own means. For example, music may not be considered a new media application today, because it has been around since humans could drum up a beat. However, genres of music change and develop with cultures. Such is the case with with Vivaldi, his style of music was quite “avant-guarde” for his time.

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 new media piece combines aspects of collaboration and taking someone’s work and applying it into something else.

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.

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.

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.

 

Sources:

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

http://ericwhitacre.com/biography

http://www.evelyn.co.uk/evelyn-glennie.html

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

Exercise 7: SEO

With Jesse Maxwell Perez, 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/