Final Post (for now): Reflection.

WHAT I THOUGHT.

Throughout this first project, I learned a lot about what I even thought about coding. I came into the class feeling that I am only doing it because I needed the skills to code, whether or not I enjoyed it, I planned to work hard to understand. To my surprise, I really started to enjoy the coding portion of the class. I do feel I was a bit ignorant to the ways of coding, even my attempts in the past weren't as intensive to understand and learn. Like most things that come with being me, I set low bars so I can hopefully be pleasantly surprised when I'm enjoying something. Perhaps it's not the best way to be, but it seems to have worked in regards to coding. I'm seriously considering working even harder to understand and work with code so I can put it as something that I'm relatively versed in for clients. I already knew I liked the design part of websites, so being able to work on it even more was really fun.



Admittedly, I've been a blog kind of person for quite some time, so that section was more focused on what kind of content I was to create over the layout and design of the blog (though, I had a problem with choosing a design). I aimed to create content that was more interesting to read through, with images created or taken myself (to my abilities that is). Although, with learning code, I was able to be even more custom with how I posted my content, and designed the blog. Overall, I still enjoy making blogs and posts, and I'll most likely be doing it a bit more seriously in the future.

Embed a Video

Video by Philippa Berry Smith

Instead of just throwing the video into a post, a HTML code found within the "share" option of YouTube was used to be able to bring the video into a post.

WEB DESIGN: Slicing/Image Optimization

A technique we used in class, after designing the webpage, is slicing the images directly through illustrator.

This method of cutting what we need helped in the organization and direction to go when it came to coding. Instead of just starting to place the bits and pieces, I'm going to code from the top down (though, I would be starting with the background). Starting with the header, and the image I decided to go with (instead of coding in the text and all it's attributes).

Now that the section is laid up, I go on to optimize the image in the way we're shown.

I decide to keep the transparency of the "text image" I've chosen, so I ungroup my other elements of the design, and keep just the title. With that in mind, I use the transparent "PNG" option to export my section.

And that's it. For the rest of my design, I'll be making decisions on what needs to be optimized and sliced in what ways to have a design that is easier for me to code up later.

WEB DESIGN: interface design and visual design

Making sure your design is user friendly is a huge thing for a successful website/webpage. If your consumer can't find what they're looking for easily, they're going to find another source to get their information/help.

To make sure that they stick around, there's a few things to consider when designing a website/webpage; starting with the target market. Who's your content for? Children? Adults? People requiring your expertise? Or even just to send awareness about a topic? It's huge to ensure you use the right layouts, other functionality techniques, and even the aesthetic choices.

Here's an example:

http://pbskids.org/

http://www.pbs.org/

Two websites, made by the same company, but both are extremely different. The first, bright colours and even moving images (when clicked into the site), and one that's more about sharing the information and navigation. Both fit their target markets; young kids, looking for something fun to do, and adults, getting information quickly. The colour choices, imagery, and even the fonts chosen help distinguish and engage their audiences. Even if the designs were swapped, and the information the same, they just wouldn't work.

Colours and look aren't the only thing that'll keep a consumer on your site, being able to switch easily between sections with buttons that are easy to find are key. Even if they don't "look conventional"; the target market can determine how they even look, based on the general psychology of someone in that group.

Using the previous examples; easy to understand language with large font styles would work for younger audiences, where older audiences wouldn't need such extreme obvious indications of where to click-- something a little more subtle and elegant can be enough.

HTML: basics/CSS: formatting design

Since HTML can only do so much when it comes to code. It creates the base of what you're site functions like; how and where things are placed. Designating spacing, divisions, sizes of the spaces, and what specific text is to be added into the site decided by the HTML coding you use. Which is where "marking up" your designs can come in real handy; so you know what goes where, and what division tags hold what.

When it comes to CSS, it's used to create the "fun stuff" that coding deals with; the "look" and "aesthetic" of your webpage/website. Colours, font choices, rounding of edges, and anything you can find (with the help of the internet, of course) can be added and manipulated to suit your design needs.

The coding rules are different when it comes to HTML and CSS-- and the easiest thing to think about when it comes to knowing the difference; HTML is your tech nut, CSS is your artsy brother who is kind of an ass. Both are finicky, both can be broken easily-- so you have to take special notice of both, so they BOTH work together to make an amazing webpage/website.

Mark Up Structure for HTML

Using colour coded sections, I put the different divisions of "RedBubble".

WEB: FOR PEOPLE WHO AREN'T TECHNICAL

The web isn't as pretty as-- well. This.

http://factor-tech.com/connected-world/19020-declaration-of-internet-rights-italy-introduces-web-bill-promoting-net-neutrality/

https://www.youtube.com/watch?v=1Ve5u7jfxds

It's tons of wires and connections that communicate all that information you wanna share. Like that picture of your cat you took. And you can't. Stop. Looking.

LOOK AT THIS CAT.

Your modem connects your computer to your ISP (Internet Service Provider). Your ISP has a network connection to another network that connects to another.. And so on.

http://homeschool4muslims.blogspot.co.nz/2010/03/visualising-internet.html

How do the networks connect? To the Network Access Point. This acts as said connector. Different ISPs have different Network Access Points, but they eventually all link up.

Since so many of us like sharing our cat videos and pictures, how do we know it's going to get to someone? Through Routers. They make sure the information gets around, and to the right viewer who agrees that cat is just so. Cute.

But how is it so fast? If someone is sharing information from their computer to yours, how's it get there without direct linkage? Not that it isn't impossible.. But, we want to share that cat with the world.  

WELL. The "high-speed backbone" is how the information can get everywhere, really quick. A fibre optic trunk, if you will. That's how information and data is zipped around for anyone to be able to see it.

Alright, hardware done.

IP address, you've probably heard of this one before. But what does it do? It's an individual computer's "Internal Protocol" that's always different from one another. They're a sequence of numbers that make sense to the computer, but for use of the Internet, they're turned into web addresses for our brains to make sense of.

http://www.123rf.com/photo_12389076_internet-cloud-vector-image.html

Speaking of web addresses, they're  not just words typed up to make your site. There's a system all their own. A DNS (Domain Name System) is needed to allow text to turn into the IP address so the computer can send you to the right place. You're most likely more familiar with the URL (Uninform Resource Location), which are the actual words used to find the website.

DNS servers make it possible to view the website; programs and protocols can be accepted so they can turn domain names into IP addresses.

It's long and complicated, so let's make a list.  

• Type in a website into the browser.
• Root DNS servers looks for the IP.
• Sometimes it doesn't work, another DNS server can take over.
• Browser asks the new DNS server for the goods.
• And the cycle continues until the IP is found.

DNS servers can also cach, which is a fancy term for the server to be able to look for that site again, so it can come up faster.  

DNS servers aren't the only type of service. Email servers, web servers, and FTP (File transfer Protocol) servers.

Servers aside, there is another mechanic that helps in viewing Internet content; the client.

Clients—ok, back to hardware—but clients are just what you download your website information to. It can be your desktop computer, laptop, tablet, phone, Nintendo DS. It's rendered out through whatever browser you're using.  

http://www.wikihow.com/Browse-the-Internet-on-Your-Nintendo-DS

Some browsers work better then others, just keep that in mind.  

So, the collaboration of all of this technical stuff is what gets that cat picture up and shared through out the everywhere. Use it wisely.