Thursday, 27 October 2016

Tables and Validation

So it seems my post from last week as disappeared... Hmmm... I will have to rewrite it. This blog is also good for me to look back and see how much I've covered, so it's important for me to cover everything that I have done. This weeks' blog is based on work surrounding the use of tables (but not chairs) and the W3C Validator.


Tables are html elements that are used to hold tabular data. So for instance, tables could be used to represent a timetable or a collection of data from a survey. In years gone by, tables were used to construct entire layouts of web pages. Nowadays, using tables for this purpose is semantically incorrect and the use of tables are less flexible than divs are, especially when it comes to utilizing media queries for responsive design.

This weeks lab work consisted of building three tables to show the use of 'rowspan' and 'colspan'. The use of 'rowspan' within a tabular data cell allows for the cell to expanded downwards over however many rows are specified. In a timetable, this would be used to show lectures which span more than 1 hour (or more than one row). Conversely, 'colspan' allows for cells to be merged across columns. This could be used for setting the title of the table to span the entire first row of the table.

When constructing a table the use of table header tags are also available for use. Table header tags put emphasis on the first entries to the table so the user can see what type of data is being displayed clearly. Similarly, table body tags can then be used to define the area of the table which contains the main body of the data.

W3C Validator

The w3c validator is a tool which was developed by the W3C, which stands for the World Wide Web Consortium, in order to validate and check the quality of HTML and XML documents in accordance with the w3c's standards as well as ISO standards (ISO 8879 & ISO/IEC 15445). To validate a web page you can do one of the following:

  • Upload your document
  • Validate an already hosted document
  • Validate via direct text input 
For the final part of our lab work, we were asked to validate two web pages and to correct the errors that were given by the w3c validator. Using semantically safe design and development ensures minimal output of errors. The non-use of header tags within articles and sections was deemed as an error as were the use of sections as general content holders. Correcting these issues and re-uploading the documents proved to be successful in eliminating the w3c's warnings.  

Thursday, 13 October 2016

Back to Basicss

Back to Basicss

Styles, styles and more styles. CSS sure comes packed with styles! This weeks' lesson in CSS was jam packed with styles. This week we styled paragraphs, headings, text, lists. We also used color in a variety of different way. Hexadecimal colors are colors represented by 3 or 6 numbers and/or letters from 0 to 9 and from a to f respectively, with #000 representing black and #fff (#ffffff) representing white. 

RGB (Red, Green, Blue) colors are created by using different volumes of each of the primary colors. Their ranges are between 0 and 255. Rgb(255,255,255) represents white and rgb(0,0,0) represent black. Another way to use rbg colors is with the use of opacity. Rgba(0,0,0,0) would represent black with an opacity of 0, meaning it is fully transparent. Whereas rgba(255,0,0,0.5) would represent red with semi-transparency. 

We also touched on the positioning of elements using the 'text-align' property to align text within a container and how to center a container. Centering a container can be done in a few different ways, but one of the most common ways is to set the width of the container or div and then to set its margins on both sides to auto. The margins can also be set manually. For instance, if a container is set with a width of 70%, setting the margin on each side to 15% and 15% will center the div also.

Furthermore, we went on to style out text with font stylings, first setting up the font family for the text and then styling the text with properties such as italic and oblique. Text decoration was next in line and we styled our anchor links as we wanted them to appear depending on which state they were in. Using pseudo selectors, it is possible to style an anchor link or href link when the link is being hovered, is active or has already been visited. Styles such as text underline, line-through and color changes are normally used for each of the behaviors set through pseudo selectors. It is also possible to use these pseudo selectors on divs or other elements when they are hovered to produce effects, which is what I did on this weeks assignment.

The Assignment
This weeks assignment was to build a website explaining all about css and to use jsFiddle to display our uses of css. Our css styles were then embedded through the use of iframes on the website.

Still loving the CSS. Bring it on! 

Thursday, 6 October 2016

Absolutely More CSS - Relative to Week 2

Right, it's late again. Later than the last time. I need to start writing earlier! Another college week gone by and so much more experimentation with CSS. Over the past week, we had to create a website about DIT regarding the Computer Science modules we are studying. I realized creating a lot of content is quite tough and it's always better to do research first. Very important! But it was quite an interesting project.

The second part was to create a website about the history of the internet. I decided to take a chance and do a one page, hover story. So I created 5 divs, each for the 5 stages I was going to describe about the history of the internet. My idea was to create the 5 divs, split them each into two parts (a header and a section) and position the section of each absolutely, relative to the surrounding div (which was positioned relatively). Then I aligned the contents above each other, but only showed the contents of the div when the relative year was hovered based on the header div.

And it worked a treat! Each year that is hovered showed a different image and unique content based on that year. I will definitely be pushing the limits of absolute positioning over the coming months! Researching the Internet was also very interesting.

Thursday, 29 September 2016

Well, it's late. That I am sure of, but my assignment is due at 23.59 tonight and I haven't got the foggiest of what to write! I've made plenty of websites over the years, but I've never blogged about making them. Applying for college was daunting, but I got in and I'm now studying for my degree in Computer Science. This blog is part of one of the ongoing assignments for my web development module, but I think I should've starting blogging many moons ago as I have learned a lot over the past 10 years as a designer. I've designed for musicians half the way across the world, for hotels in the rainforests of Brazil and yet, writing content for a blog always felt daunting. Then again, when I was about 11 years old sitting in front of my father's computer trying to figure out the difference between a <tr> and a <td>, building a website was more than daunting. But I persisted and here I am, blogging about my lab work for my web development module.

Hard to believe it's week 3 already! While I have done more than my fair share of designing and developing over the years, I'm very glad to be doing web development as part of my coursework. While I feel I know a lot, as with everything there is always more that can be learned. I intend to focus on my speed in creating functional content rich websites while doing this module and also  to try some new methods. In lab week 1, we worked primarily with basic html. Even so, I have found it very beneficial to read up on the documentation provided by the W3 schools on some of the newer element tags. Browsers (including IE) seem to finally be getting up to speed with html5 specs, which is fantastic news for designers and developers the world over. Another great website stood out to me as a great tool, especially for beginners in this field - the W3C's Markup Validator. As with any language there are rules for vocab used and syntax. HTML and XHTML are no different and the validator checks for syntax errors on pages you specify. A very handy tool indeed.

Tables.... How I hate(d) tables. Not sure if the '(d)' belongs with the end of 'hate' just yet, but I'm sure it'll get there eventually. Looking over the brief for the lab I saw we needed to use a table. Flashbacks to my disdain of <tr> and <td> took hold! Thankfully, the great Jonathan McCarthy - our lecturer for this web development module - gave me permission to use divs instead of using tables. Now, it's not that I have a fear of tables (it's not a listed phobia - I had to check!) but I remember a time when entire websites were entirely made of tables. We should never go back to those times and if you ever find someone who has built a website out of tables, you should try and block them from ever accessing the internet again! So in my head, tables are for sitting at and eating at, not for structuring content. But then again recent experiences have started to change all that. But then again again, using divs and utilizing proper classes  to structure the divs can lead to a better and more responsive layout for data that needs to be displayed in a table-like manner. Check back next week to see if that changes ('s doubtful).

 To wrap this week up, the rest of the lab work was fine. No fears or phobias regarding tags or elements came up for me, so I went ahead and used them (appropriately of course). The regular <p>, <img> and <hr> (my disdain for <hr> tags are another weeks mumblings) were slotted in and in the end I needed for my own sanity to hook up a css file. I can't finish something until it's finished. This week's styling was a bit bare, but I did what I could to glam her up.

Okay, 2 minutes to midnight - next on the playlist.