Reflection on what I have learnt

First off all keeping up with producing weekly blog posts was not as easy as I had expected. I got there in the end. Internet issues at home was possibly a factor.
I did see myself using this blog every day and as a visual diary for all of my WITT subjects. I'm surprised that I didn't keep up, it seemed like a really good idea and a good way to keep track of progress, develop a style, gain inspiration and put together nice blog.

Blogger.com is a nice, simple platform to use. I've enjoyed my time on here. I just wish I posted more. I would have loved to have filled in some more personal posts and developed a style, but perhaps that takes more time, and those posts may come in the future.
Even though this project has come to an end, I would still like to keep posting on here.
It is a new experience, and will take some time to get to the level of steady and professional production that I want. I feel like a blogger has to keep up to date with posts - something I will need to improve on.

I feel slightly stronger with my writing skills, it takes a lot of thought to write a post and put your words out there for the world.

I've enjoyed learning HTML, a huge frightening monster to me at the beginning, but from the first day of learning about it I discovered that it was very interesting and a great skill to have. Practise makes room for improvement and I'm feeling positive about learning more.

Video embedding

It is simple to add a video to your page. There are just three things required to embed a video from a player like Youtube or Vimeo into a HTML webpage.

• The HTML file you want to insert a video to 
• An idea of the size you want the video to be
• Access to the video online

Find the share button on Youtube, then the embed button. Copy the <iframe> code and paste it into your HTML document. The same steps are applied if the video is from another website, like Vimeo. Find the share and embed button and the <iframe code> - Paste into HTML document.

Simple Menu

Menus are a common form of navigation for a webpage. The menu shows the main links that are accessible from the website. It is simply a list of links.

CSS is helpful for creating a menu that is pleasing to the eye. In CSS, styles can be applied to basic HTML lists. Floats and margins can change the positioning of list items. Vertical and horizontal lists/menus are easily created in CSS with different selectors.

Image Optimisation

Images take up a large amount of visual space on a webpage, it is important to reduce the amount of time it takes for a browser to load images.
The time it takes to display an image is based on a number of factors:

• The file size of images used in the webpage, the format of the image - by choosing the right format you can compress a file to make it smaller and easier to render 
• The number of images used 
• The HTML structure and how well it fits the images 
• The web browser used to view the page
• The internet connection 

      Different image formats each have their pros and cons

      

      JPG 

• Pre-PNG
• Does not support transparency 
• Good compression rate - lots of control 

     GIF

• Good for flat colours 
• Doesn't handle photos and gradients like drop shadows
• Supports transparency 

      PNG 

• Supports transparency 
• Okay level of compression - less control
• Works well on most devices 
• Larger file size  

Interface Design

• Simplicity - Keep the layout minimal and spacious 
• Space - Give modules space, images need room to breathe, create space but keep flow
• Structure the page based on importance
• Careful placement - Draw attention to the right things
• Consistency - Continue a similar layout throughout the whole website, create patterns in layout, design and language 
• Strategically use colour and texture - Use contrasting colours, or a simple bright colour against a plain background to draw attention 
• Don't be afraid to go big and bold with lettering and images 
• Consider fonts, size, placement, colour

I prefer the minimal look or 'less is more' style on webpages.

A simple but interesting/intriguing homepage would hopefully lead the viewer to want to see more, continuing to look at the rest of the website. 

I like the way the creators of this website have used a
simple colour palette that really stands out. The black background really gives impact and draws attention to the pinks and greens of the flower. I like how the soft pink is continued throughout the page and creates a sort of flow. The use of large white font over the black background is simple but effective. The different sizes of font creates hierarchy and clarity. The simple modules are appealing as they aren't too busy and distracting.

Including too many colours and textures is distracting and can take the viewers attention away from other important points you may have been trying to show. Use colour, contrast, light and texture to your advantage.

HTML Links

• Links on webpages allow users to click from one page to another
• Link pages together 
• HTML links are called Hyperlinks 
• A Hyperlink is a text or an image that you can click on that will take you to a different page. 
• In HTML, links are defined by the <a> tag 

      <a href="url">This is a link</a>

• The 'href' attribute specifies the link address/location 
• Attributes are used to provide additional information about the element 
• The link text is the only visible part of the link
• This can be text or an image, or any other HTML element 

     When you hover over a link, two things will usually happen:

• The cursor will change to a small hand
• The colour of the link element will change 

     By default links will appear as:

• Unvisited - Underline & Blue
• Visited - Underline & Purple
• Active - Underline & Red

Markup Structure

HTML - Hyper Text Markup Language
A markup structure is a way to determine how to turn a visual design into a code design.
HTML codes are added to text, in a way that defines each section of text and tells it how to look on a webpage. It adds a structure to the text.

HTML is mainly divided into two sections: The <head> section and the <body> section 

Inside the head section is the document declaration. This tells us what type of html you are using and ensures the code is rendered correctly. The body section contains everything able to be seen on the webpage. 

How to turn a visual design for a website into a code design:

• The first step is to use a div map (teacher's terminology) to divide the page into rectangles/div boxes to indicate the page layout and work how the code structure will be created.
• Ensure the rectangles are complete and don't overlap. 
• Rectangles can be nested inside one another. 
• Write down appropriate tag names for each element of the design. 
• Use the div map as a guide for creating your own website. 

We practiced this in class with a preset design, and we also designed our own template using adobe illustrator, then made a div map and used it as a guide to write an appropriate code.

Studio Practice

In studio practice, our class formed into teams
and were presented the task of using the space of the art block and turning it into an installation, scale being one of the factors to consider.









Our team started with a blank canvas, the windows.
We taped coloured cellophane to the windows and let
the light do the rest of the work. The outcome was brilliant,
as the sun moved throughout the sky, the light streamed in through the windows and created a beautiful reflection of
colours onto the usual dull grey concrete floor.

I'm proud of the way our team worked together to create something so beautiful :-)

CSS

Controlling the presentation elements of HTML becomes a lot easier with the use of another coding software by the name of CSS - Cascading Style Sheets

HTML is used to structure the content. CSS is used for formatting/styling that structured content.

Instead of creating different style tags in HTML for every single element on every single page, CSS universally cascades styles across a whole HTML document or set of pages.

      

      With CSS you can:

• Change font color and style 
• Change dimensions of objects (<img> and <div>)
• Add margins and padding
• Position and float objects 
• Change the colours of objects, text, links etc 
• Control how links look and behave 
• Control how images look
• Make gradients, drop shadows 
• Make rounded corners and other basic special effects 
• Control the layout of many different pages from one single style sheet
• You have more precise control of the layout compared to HTML

Social Media Intro

Social media refers to online, electronic, or virtual interaction and communication among people in which they create, and share information, ideas, personal messages, videos or images. 

Posting on social media turns one into a creator of content rather than a consumer of content. 

• Each member of the class is required to set up a social media account in this case, starting small, the site being Twitter.
• We must follow each other and link the account to our blogs.
• Posting on social media changes you from a consumer into a creator.
• Twitter is a website where members can share brief 140 character updates and also links, photos, and videos.
• I’ve never had any use for making an account or posting status's, but by following my classmates I will be able to receive their updates which is useful.

HTML Intro

I began this class with no experience of HTML or code editing. I’m looking forward to the learning experience :-)

HTML is a system for tagging elements inside a document so a browser knows what to do with it. 
A simple piece of code may be laid out like this :  <tagname>content</tagname>

• HTML stands for Hyper Text Markup Language 
• In our class for Web Media we use the code editor Adobe Dreamweaver. 
• The idea behind HTML is to take a piece of text and manipulate it by wrapping it in tags. 
• Each tag describes the portion of text it’s wrapping around. 
• There are many different tags to learn. Each one adds a different effect to your webpage. 
• Tags normally come in pairs <p> </p>
• Each tag begins with < > and ends with </ > (Forward slash indicates closing tag) 

Web browsers interpret HTML documents and display them. The browser wont show the tags, it uses them to determine how the HTML content is shown. 

In class we have learnt some basic tags

- <h1>, <h2>, <h3> - Continues to <h6> - Heading tags, size varies according to level of importance.
- <p> - Paragraph tag
- <strong> - Bold text
- <em> - Italics
- <img> - Image
- <a> - Anchor - For links
- <title> - Page name

How the Web works

Computers connected to the Web are called clients and servers.

• Clients are the Web user's Internet-connected devices (computer connected to Wi-Fi, or cellphone connected to mobile network) and a web browsing software on those devices (Chrome, Firefox, etc). 
• Servers are computers that store webpages, sites, or apps. When a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web browser.

• Websites are a collection of files. 
• When a website is published, the files are copied to an online location that allows other people to access it too. 
• When a person views a website, they are downloading a copy of these files. 
• The internet is a collection of interconnected networks that all link together. 
• Every computer connected to the internet is part of the network. 
• Computers connect to the internet via a modem and an Internet Service Provider (ISP) The ISP then connects to a larger networks. 
• Network access points (NAPs) allow these networks to link together. 
• Routers ensure that correct data is transferred to it’s intended destination on each computer. 
• High-speed backbones have a large capacity and interconnect at various NAPs around the world. These cables allow people from all over the globe to connect and transmit data extremely fast.
• Every computer has it’s own identifying number (IP address)
• The Domain Name System (DNS) automatically maps the IP address into a web address. 
• The Uniform Resource Locator (URL) is composed of the domain name and other information such as ‘http’ and ‘www’. 

The history of the World Wide Web

The web is one of the largest technological revolutions of our lifetime. More than 2 million people are connected. The web has changed the way we can accomplish tasks and has allowed anyone with a connection to quickly publish and distribute words videos images and software, globally, instantly and virtually for free.

Ideas for the web date back to as early as 1946 but it wasn't until 1989 when Tim Berners-Lee, a member of CERN, developed a basic hypertext program by the name of ENQUIRE. The program was designed to make information readily available to workers at CERN.
The world's first web page address was http://info.cern.ch/hypertext/WWW/TheProject.html
This web page provided information about the world wide web project, information on hypertext, how to search the web, and how to make a website.

First readily accessible web browser (Line Mode Browser)

Now browsing the web is much easier. Examples of common web browsers include Chrome, Firefox, Internet Explorer, Safari.

Some of the most visited websites include

• Google - Search engine 
• Facebook - Social network
• Youtube - Video sharing
• Amazon - Retail 
• Wikipedia - Encyclopedia 

For further information on the World Wide Web: The Virtual Revolution (Video)

Blogging Setup

Diploma in Creative Technologies : Web Media : Project 1 : Search and explore.

As part of our first lesson for web media we created a blog. The blog set up was simple. My blog will be used as a digital workbook and personal record. This will include weekly blog posts documenting my work and progress as I learn about the basics of code and the core technologies of web design.
I'm hoping my blog posts will improve as the project continues because for the moment my confidence in writing is poor.