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.