Digital Literacy

Part One – Name searched: Marco Germinario

1) What does your partner’s current digital footprint says about him/her, does it say anything about their new media creative abilities or interests?
Well, when searching up for any information about Marco Germinario, one will find that there really isn’t very much to find. The only link that I found that was tied back to Marco was the link to his Facebook page (assuming that he wasn’t the Artistic Director and Founder of the Ragnarok Nordic Festival in 2010). Through his Facebook page, you can see that aside from being a normal kid, he has a photo album displaying a few of the paintings art pieces that he created, which are certainly impressive. The paintings show his ability to be creative and communicate his ideas and concepts, which is a key element for the creation of new media art pieces.

2) Do you think an  employer or teacher should be able to see that?
I would think that an employer or teacher should be able to see the work that Marco has done. It would give other people a good idea of what he is capable of in terms of artistic creation. In terms of the other photos and information that can be found about him on his Facebook page, there really isn’t anything there to show that he’s anything but a normal kid.

3) Where is the information coming from?  A blog, a website, Facebook, etc.
As stated earlier, the information I gathered came from Facebook.

 

Part Two

How to establish your digital footprint using web 2.0 technologies (Julia)

• Create personal profiles pages on social networking websites
• Comment on other people’s blog, profile pages, websites, etc
• Tag yourself in blog posts, videos, photos, etc
• Subscribe to other people’s posts
• Keep on top of what is being said about you and your own posts

How to create a data trail that can be searched and found via specific keywords (Julia)

• Add as many keywords and tags as your possibly can
• Be specific with your key-words, or be vague when you want to reach a wide audience
• Limit where each unit of information can lead- if you let them free, the trail can’t be followed
• Use unique keywords
• Try to think like your target audience – use the keywords that they would use.

A strategy would best serve the purpose of creating a digital identity that serves to inform teachers and potential employers of who you are as a new media creative professional (Marco)

Your identity in life is one perceived by others through your words and actions in the moment. Now image being able to sit down at your computer with that moment and tweak every aspect of your produced information. I’m pretty sure you would not only be the best but would look the best all the time, come on we’re all a little conceited. Well as crazy as that might sound its possible, how you say, well through something called your digital identity. The main purpose of which is to outsource your information as it suits you through a multitude of mediums. This information can be descriptive and beneficial to your social image as well as a way to inform teachers and potential employers of how you see yourself. As for a new media student it shows ones creative potential and professional caliber. Though the words you write, videos and photos you post it also helps familiarize yourself to your superiors and points out your creative abilities and interests, something very advantageous when yearning to get ahead of the rest. Altogether its a quick and easy way to outsource your information, like an ongoing, digital resume with and the space and customization for you to fill it with.

Web Literacy

So I’m pretty sure we were here before. Remember my 21st century skills post and the section about blue skies and dogs? I guess this is basically an extension of that.

Web literacy: It’s defined as “the ability to make critical use of the Web to access information, and to prepare documents and Web sites that make effective and appropriate use of this medium” (thanks http://dp.biology.dal.ca).

Basically, it means sorting out the good stuff from the crap.

I find that I’ve been a fairly decent judge of what is good and bad information. Having to do many research papers and such in my high school days, I’ve learned how to figure out how legitimate the information is on a website by analyzing who wrote it, what organization they work for, and the sources they used. It’s fairly simple, you ask yourself the following questions:

• Who wrote the information?
• Do they have the credentials that prove they know what they’re talking about?
• Can you verify the credentials?
• Is there contact information for the author?
• Where is the website being hosted?
• What organization is sponsoring the webpage?

By asking these questions, you can start to formulate an idea of who wrote the information, any bias they might be holding based on their personal beliefs or their company’s beliefs, and the legitimacy of the information.

Having grown up as someone who has known the Internet for their entire life, I consider myself someone who knows how to use it for my own benefit. As I grow with the technology, I will discover new and more effective ways of finding the information I need….I hope.

 

Signing off in 3…2…1…

*click*

CSS 101

What is CSS and how does it work?
CSS stands for Cascading Style Sheets. You can embed CSS code into HTML files or link them together. Like HTML, CSS code is downloaded, interpreted, rendered, then displayed as the final product (web page).

How the CSS syntax works:
Below is an image of the fundamental CSS model

The difference between id and class:
IDs and Classes can be described as “hooks” – meaning they allow us to directly access and modify different portions of the document.
IDs are unique. Each element can only have one ID, and each page can only have one element with that ID.
Classes are not unique. You can use the same class on multiple elements, and you can use multiple elements on one class.

The difference between external style sheet, internal style sheet and inline style:
External Style Sheet – styles are called up using a separate page
example:

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

Internal Style Sheet – styles are referenced on the same page
example:

<head>

<style type=”text/css”>
<!–
.body {background: #000000;}
–>

</style>
</head>

Inline Style – style attribute goes right on the tag
example:

<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>

When is it better to use one over the other?
External – when a style is applied to many pages
Internal – when a single document has a unique style
Inline – when only one small section of a document is different

The box model:
The box model is literally a box that wraps around HTML elements. It consists of margins, borders, padding, and the content. The box model allows you to place a border around elements in relation to other elements.

• Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent
• Border – A border that goes around the padding and content. The border is affected by the background color of the box
• Padding – Clears an area around the content. The padding is affected by the background color of the box
• Content – The content of the box, where text and images appear

What does floating and position do?
Position rules are used to position an element in the document flow in relation to other elements.

Floating is when you render two elements so they sit side-by-side with each other.


CSS grouping/nesting:
Grouping is a technique used to minimize code when there are elements with the same style.
Example – the code below:
h1
{color:green;}
h2
{color:green;}
p
{color:green;}
…can be group selector-ed into the code below:
h1,h2,p
{color:green;}

Nesting is a technique used to apply a selector within a selector.
In the example below, one style is specified for all p elements, one style is specified for all elements with, and a third style is specified only for p elements within elements with:
p
{color:blue;
text-align:center;}
.marked
{background-color:red;}
.marked p
{color:white;}

How to align elements:
There are two properties used when aligning elements. The choices are for each property are shown below:

text-align: [left, right, center, justify]
vertical-align: [auto, baseline, sub, super, top, middle, bottom, text-top, text-bottom]

How to build a CSS navigation bar:
Since a navigation bar is simply a list of links, you just need to use the tags for an unordered list <ul> and a link <li>:
<ul>
<li><a href=”default.asp”>Home</a></li>
<li><a href=”news.asp”>News</a></li>
<li><a href=”contact.asp”>Contact</a></li>
<li><a href=”about.asp”>About</a></li>
</ul>

Then you simply remove the bullets, margins, and padding:
ul
{list-style-type:none;
margin:0;
padding:0;}

Self Directed Learning

To be honest, I’m not entirely sure what I’m supposed to talk about here. I mean, I’ve skimmed through the readings I’m supposed to do (they’re big and scary) and I’ve found some charts with items that can potentially be called “skills” related to this topic, but I’m not quite sure how to approach discussing them. Most of the items remind me of things that I would see on a rubric for a high school project. “Students identify, determine, and articulate their own learning goals”…what am I supposed to say about this? “Yes, of course I identify, determine, and articulate my own learning goals, professor. Every good, focused, and determined student does this on a daily basis.” No, of course I don’t say this. To be even more honest, I don’t think I even do this kind of thing for school. I basically follow the format of “this is your assignment, learn this then do that”, in which my learning goals are articulated, determined, and identified already for me.

Instead of going through every single item that I found in this huge PDF file and complaining about how much it sounds like a high school rubric, I shall list them all for you here:

• Students identify learning tasks to achieve the goals
• Students chart their learning processes
• Students challenge themselves and set the standards for the achievement of their learning goals
• Students formulate questions and generate relevant inquiries
• Students explore a range of possibilities and make sound decisions
• Students self‐plan and self‐manage their time
• Students critically reflect on their learning and initiate gathering of feedback from teachers and peers to achieve their learning goal
• Students apply what they have learnt to new contexts
• Students utilize the skills that they have acquired to learn beyond the curriculum contents

See what I mean??? High school all over again! But now that I’ve taken a second to read over the items again, I realize that I do this on a daily basis (when I have school work to do) without stopping to realize that I’m ACTUALLY doing it. Let’s see if I can apply this idea to the blog post I’m currently writing.

1. I was told to write a blog post about the skills I possessed regarding self directed learning. (There’s my learning goal, articulated, identified and determined)
2. I realized that I didn’t know what skills and attributes were associated with self directed learning (I’m going to shorten this to SDL) so I conducted some online research. (That would be me identifying my learning tasks)
3. I started writing a blog post in hopes of communicating the skills I have regarding SDL. (Here I set the standards for achievement)
4. As I was writing the post, I started wondering exactly what I was writing about. (Formulating questions and generating inquiries)
5. I began to think what would happen if I just wrote down exactly what I was thinking, as per most of my other blog posts…and here I am doing just that. (Exploring the range of possibilities, making decisions)
6. I currently have nothing to do for two hours. Seems like a good time to do some school work. (Self – planning and self – managing my time)
7. It has come to my attention that my classmates have been reading my blog posts. If you read this post, please come talk to me about it. I have no idea what I’m talking about, and I want to know who was in the same boat. (Gathering feedback from peers to achieve my goals)
8. I’m actually having a lot of fun making blog posts. I think I might start up my own blog in the future. (That’s probably as close as I can get to utilizing the skills I’ve acquired)

Well, perhaps that made sense. I know it at least made a little sense to me. I think I went off topic approximately eighteen times, but who’s counting? So I guess, in some kind of conclusion, that if we’ve all made it this far, then we all possess some degree of these self directed learning skills. Especially in a course like this, we have to know how to learn on our own.

 

RANDOM OFF-TOPIC MOMENT (#19 I guess?)

I jumped out of a plane on September 30th. It was freaking awesome. When I get the video I will post it so I can share my experience with you. It was definitely life-changing.

BACK TO YOUR REGULARLY SCHEDULED SIGN-OFF

WHITE TEXT MOMENT

Signing off in 3…2…1…

*click*

HTML5 – 102

Completed by Elsie A, Marko G, Sam L, and Julia W.

What Image File Formats should be used for web pages, why (how does compression affect loading?)?
Web pages normally use JPG files because JPG compresses the data to be very much smaller in the file.

How do you optimize images for the web?
You can do this by

• stripping meta data from JPEGs
• optimizing JPEG compression
• converting certain GIFs to indexed PNGs
• stripping the un-used colours from indexed images

 

What tricks and tips can you use to make your webpage load faster?

1. Optimize your images
2. Use a local host
3. Use a decently priced hosting system – cheap systems use cheap equipment
4. Enable PHP caching
5. Check the speed of your bandwidth
6. Keep your CSS files small
7. Optimize your database for maximum performance
8. Limit hotlinking
9. Use less Javascript – if you have any, compress it

 

How can you use images in css, show us examples?
To use images in css you must use the simple tag of <img> or the tag <p> and insert the web URL of the image and then close the code with </img> or </p>.

How To Add a YouTube Video to Your Web Site and video in html5?
To add a YouTube Video to your site take the embedded YouTube video URL and copy it from the web broswer’s addrress bar and paste it on a line by itself in the post editor. It should not be hyperlinked.

How do you optimize video for the web and incorporate it in your web page?
Pick the best and most appropriate:

• Streaming media format
• Delivery method
• Playback platform
• Data rate
• Audio quality
• Codec

How to put it on your webpage:

• Add it as an embeddable video from a 3rd party website
• Convert it to a Flash video and embed it on your website
• Use screen capture software

 

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

• Optimize landing page
• Provide an online player
• Keyword in URL and file names
• Optimize audio files
• Transcribe show in RSS feed (for podcasts)
• Use ID3 tags
• Promote podcast In audio search and podcasting directories
• Include graphics
• Include iTunes tags
• Check your files from an outside view (subscribe to your own posts)
• Define audio properties

How to put it on your webpage:

• Use an RSS feed
• Use a Flash player
• Embed the audio on your website

 

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

1. DO: Keep your page structured/ DONT: Just place boxes everywhere
2. DO: Focus on what’s important/ DONT: Place irrelevant ads across your page
3. DO: Choose the right color scheme/ DONT: Overdo it with 20 different colors
4. DO: Make it easy to scan your pages/ DONT: Write one paragraph per page that is 1,000+ words long 
5. DO: Keep it simple stupid/ DONT: Go on and on (and on) about nothing
6. DO: Focus on killer copywriting/ DONT: Stuff your pages full of keywords 
7. DO: Set your navigation up properly/ DONT: Make your readers search to find something
8. DO: Optimize your load times/ DONT: Make everything on your page an image
9. DO: Choose the right fonts and sizes/ DONT: Have 5 different fonts in 10 different sizes
10. DO: Make your page visually appealing/ DONT: Throw a bunch of crap together and think you’ll do well

 

What resolution should you design for?
Some designers stated that they design their pages for 900 pixels wide, some still swear by the 960 grid system and there are those that simply stated to go with your client’s preference and their audience, but most people nowadays use Less Framework, which is a CSS3 styling option that makes the framework recognizes the visitors screen resolution and sizes the web page accordingly.

Designing for mobiles?
There are three options you can take when making your website mobile friendly. If you have a more complex website its easier if you create a separate site (.mobi), it looks good however it is difficult and costly to update and manage. If your site is visited often by users making a mobile app for your website is very affective, however it also is costly. A Responsive Website is probably the best option for it adjusts its size via mobile device, again this option is also cost affiliated.

SOURCES

http://www.scantips.com/basics09.html
http://zemalf.com/1366/how-to-optimize-images-for-web/
http://designmodo.com/9-tips-to-make-your-website-load-faster/
http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design
http://www.htmlgoodies.com/beyond/css/article.php/3921766/What-Screen-Resolution-Do-You-Design-For-Using-the-Less-Framework.htm
http://www.searchenginepeople.com/blog/responsive-design.html
http://www.websiteoptimization.com/speed/tweak/video/
http://www.ericstips.com/tips/lesson41/
http://www.feedforall.com/audio-file-optimization-tips.htm
http://www.ericstips.com/tips/lesson42/