Practical 3 (Dynamic HTML)

I know some web pages had very dynamic features, content and style but i had no idea creating such flexibility could be simply achieved with JavaScript code and CSS. Honestly, i thought many world recognised interactive and dynamic webpages like all Google sites and BBC online had to be created using some language other than HTML.(DISCLAIMER: the examples provided are not based on any substantial proof or evidence of the language used in their development). With this practical, i realised all you can see and wish to have a webpage do is simply hindered or made possible with your imagination. (i had for a long time underestimated the power of HTML)

With practical 3 the task was to create a table that had a context menu from which new rows could be added and the existing rows of the table edited or deleted. The objective was to understand dynamic HTML, practice manipulating HTML objects using script and write event handler JavaScript function and linking it to the events of an HTML object. In as much as i do not want to overestimate or exaggerate, i can sincerely say that the practical 3 came to me with a lot of surprises. The major one was how easy the concept and implementaion of a context menu is. Seriously, i never percieved a context menu as a simple DIV element the is made visible and positioned at the coordinate of the mouse or event that invoked it(so simple to do). 

With this practical most of what we had to do was related to developing the functionalities to make the HTML element dynamic in nature. Firstly, on analysing the code we were given, i noticed that the function that allowed the displaying of the context menu and the other functions were uniquely attached to each of the four rows that were initially created. I started out to create dummy functions that would add rows and when the rows are clicked to simply pop an alert. I recognised that, the new functions did not respond to the dummy functions and no alerts were popped up when they were clicked. I played and experimented with the work alot to see the result of several ideas i thought of. For example, the question asked that the context menu should be showed when the table is clicked and i wondered if it could be done for the context menu to respond to a right click event. I searched and discovered that there was an "oncontextmenu" event handler but according to most online tutorials this was a component of HTML5. Despite this i tried it out in this practical, and though it was not recognized as a keyword by the editor i used it worked when i run the HTML document. There was however a little issue i just could not find a way around. The issue was that my customised context menu was always overshadowed by the browsers default context menu. Up until the time i had to submit the assignment, i could not find a way round it. Thankfully, i discovered the solution a few days ago, the simply solution was to invoke the "preventDefault" method on the "event" object in the function that did the displaying.

Focusing on the main tasking of the practical, one major challenged i had was obtaining the row index of the selected row the needed to be edited or deleted. I kept on having an undefined result when i tried alerting this index. Truthfully, this frustrated me for a long time and i had to abandon the work for a later time. After resting and taking another look at the code again, i realised the was another "onclick" event attached to the main DIV element that contained the whole table. The undefined result made sense then because the get row index function i was calling was rather being invoked on the div element, and that did not exist.

editing the content of a row

Apart from the many challenges this practical presented, there were a lot of things i learnt. Some of them are, creating "design style" in classes using CSS so that they  same design stlye could be applied to several elements, learning about the HTML event object, the concept of context menus, alternative ways of alerting the user when there is an error among many others.

In conclusion, one thing i also learnt from a friend after the assignment was instead of running through the collection of rows the table had in order to alternate the row style, CSS provided an easier option where in specifying the condition for the styling the rows, they would be automatically styled accordingly.

Practical 2 (introduction to javascript)

In the second practical, the task was to create a form that would allow user to your site register for a conference. The objectives was to learn about the HTML Form and its properties, the elements on the HTML form, introduction to the use of JAVA-SCRIPT and essentially how to validate the input a user gives from the browser side before sending the data to the server.

As usual i started out this practical with designing the interface of the webpage. For me, getting the concept about the interface and getting it right, makes it easy to figure out the functionality that would follow later. Honestly, i spent a lot of time putting the various elements of the interface together, because in this practical i want to learn the use of the DIV and SPAN tags instead of using the TABLEs i was used to. In addition to that, i took this practical as an opportunity to explore the role of the Cascading Style Sheet (CSS) components of web technologies.

Design of the form

As i mentioned earlier on in my first post, the only way i knew how to nicely organize the content of a web page was to use tables. But in using the DIV and SPAN elements i realized that they was more control and room to alter the properties of these elements that would give a very appealing design structure. The STYLE attribute of the element i tired included, rounding the borders of the elements of the page, changing the border colors,  centering the elements, hiding and showing elements when needed and using the positioning of objects to make certain elements overlap other (with that knowledge i decided to add a loading mask effect to the form).

the loading mask

One thing i realized was that it was very easy to alter the properties set in the CSS using JavaScript also. JavaScript was not entirely new to me, i had actually used it in a web application i worked on during my summer internship last year(2011). However, at the time i used it i was not really familiar with the language, though it is a lot like java, i did not understand some fundamental concept underlying the structure of the language. This time around, what i did was to go through the w3school tutorial on JavaScript to understand the concept and structure of the language. 

Having said that, i realized that the online tutorials available, had very good content but they lacked very practical examples. Most of the examples were so basic and not varied at all. Also considering the very limited debugging functionality of web browsers, fixing a bug was very annoying and frustrating. What i resolved to do was to Google almost anything i needed to do. I realized the questions i had were not new ones and i found many sites (especially stack overflow) that had forums discussing most of the issues i had.

From hindsight, i would say that this practical was really helpful, i learnt and practically witnessed the use and application of CSS and JavaScript in web designing and the powerful results one can get from combining the two, regular expressions, the use of the DIV and SPAN tags, and most importantly i got a fair understanding of what most of the error messages during debugging really means.

Practical 1 (simple HTML pages)

The first practical for the Web Tech class had its objectives as learning and understanding how to write HTML pages, learning the use of tags, learning how to create the basic HTML objects; such as tables, links, list, img, etc. Truthfully, we have done some HTML during the very first weeks of my PROGRAMMING I class in my freshman year. I remembered that during those times that  the major difficulty i faced was organizing the content of the web page in a nice and appealing way. However, one thing i learnt was the use of tables throughout the page to organise the content of the page. I started out this practical assignment with that thought of tables in mind. Fortunately, during that week out Human Computer Interaction class focused on web designs and how effective and efficient the content of a webpage could be set up. We came to a conclusion that web sites should be clean, make all the necessary information the users needs available to them, should have a sense of consistency in their design and most importantly be visible enough for the users to interact with the system. (a little jist about the orientation i had before starting with my practical)

In building my first web pages for the first practical, the internet on campus was not really working so i had trouble going online to get access to online resources on HTML. Most of what i did was to play around with the few HTML tags i knew of. Basically, i started out on the index page to create a fundamental skeletal framework all the web-pages should have. The webpages had a simple 3x8 table as a grid. The first row was designed to have the name of the company or the website, the second row was for space, the third row housed the other links in the website, the fourth row was left to indicate to the user the current page of the site you are currently viewing, the fifth row housed the main content of the page, the sixth has again the other links to the other pages of the website, the seventh row has other links outside the website and finally the last row contained a signature of the designer of the website.


After getting and defining the purpose of the grid, i copied the grid layout and pasted that across the other web-pages to be created. This was just to make sure all the pages are the same. In getting the actual design of the pages, i did not have access to the internet so i opened to view the source code of the many web-pages i had saved. In looking at this code i was able to try out new tags, select the Hexadecimal representation of the different color codes used in the design of these saved web-pages.

In conlusion, i would say that after this practical though i learnt about more HTML tags and the use of these tags i realised that the major thing that made webpage intersting and sometimes frustrating was defining the color theme throughout the pages. Without the right or appropriate color scheme, the webpage despite its content loses the reason for the pages to be viewed at all by any user. I realized in talking with some friends that the use of actual tables doesn't give the develop the room and flexibility to develop better grid and design layout for the websites, He advised i tried using the DIV and SPAN tags next time. or my next assignment i would learn and try out the using these tags.