Abstract

This paper presents a web tutorial to support the teaching-learning process of a web fundamentals undergraduate course, for the generation of web pages based on the hypertext markup language and cascading style sheets. The basic elements that compose the tutorial are learning objects adapted to the objectives of the course. The tutorial is a web site organized according to the course syllabus, in which topics are presented through learning objects that cover the teaching-learning process by including explanations, examples and activities to illustrate and reinforce the topics covered in classes, showing the code corresponding to the languages used, so that it can be manipulated later by the student. The results of an instrument applied to students for the evaluation of learning objects are provided.

1. Introduction

In the curriculum of the Design undergraduate program ¹ of the Metropolitan Autonomous University, Cuajimalpa Campus (UAM-C) in Mexico, it is offered a course dedicated to the web design fundamentals, called Static Web Programming and Design Workshop ², which is based fundamentally on the use of the Hypertext Markup Language (HTML) and Cascading Style Sheets (CSS), for the production and presentation of content on the web. The importance of this course derives from the extensive use of the web in the different areas of contemporary life. It is an introductory course that aims for the student to know and use the basic principles of the functionality of static web applications and the technologies available for their development.

On the web there are different support materials for learning, such as those sites that present technical information derived from printed books ^{3, 4, 5} and manuals ^{6, 7}, usually in English or automatic translations into Spanish, such as HTML manuals ⁸, CSS tutorials ⁹, among others. However, the vast majority only give some code examples and lack of a more detailed explanation. In addition to the above, the aforementioned course syllabus covers certain aspects of static web development, without being exhaustive given its introductory nature, hence the need to have teaching materials adapted to the topics of the courses. Additionally, and aside from the technical references, which also exist in abundance on the Internet, such as manuals ¹⁰ or guides ¹¹, it was observed the need to generate a tutorial that exposes the corresponding information through explanations in a clear language and with the appropriate technical precision. This is the motivation of the web tutorial (in Spanish) presented in this paper, thought as a support option and self study, which also takes into account the opinion of the students when including them in the formulation of the example problems and their corresponding explanation, which are reflected through learning objects.

The rest of the paper is organized as follows. In section 2 the problems associated with the teaching-learning process of the static web are explained and a way of approaching them is proposed through the creation of didactic material based on learning objects. Section 3 presents the structure of the learning objects that compose the tutorial, where each of its elements is explained. Section 4 describes the topics in which the static web tutorial and the learning objects that compose each topic are divided. The design and main features of the tutorial are discussed in section 5. Section 6 provides a complete example of a learning object, along with screenshots of the static web tutorial, showing each of its elements. Section 7 shows other examples of learning objects that can be found in the tutorial. An evaluation instrument applied to students who attended the course and its results are presented in section 8. Finally, conclusions and future work are provided in section 9.

2. Problematic of Learning

The static web has as objective the domain of technologies and tools for the design and construction of web sites; his teaching focuses on the knowledge and management of HTML, responsible for providing the structure to the information presented; as well as the mechanism to give an appropriate appearance to the information structured through CSS. It should be noted that properly the static web is not a computer programming activity, but formatting, design and organization of information, this implies that a translation of the data to be presented must be made to an appropriate language that can be understood by a web browser. In addition, the sizes of the files that are intended to be moved in the network through the web site in question must be taken into account, whether they are image, sound or text files, which should preferably have small sizes.

Currently, there is a large number of tools that allow the creation of web pages without the requirement of a deep knowledge of these two languages, among the most used are the editors Amaya ¹² and Dreamweaver ¹³. However, the disadvantage of using these tools is that, without sufficient command of HTML and CSS, you can get pages whose coding is difficult to maintain, or even worse, that prevent an adequate visualization of the information, either because of the reduced visibility or because of the size of the resulting files; so its use is recommended once the static web coding is already mastered.

The teaching of the static web requires the technical knowledge of HTML and CSS, which is achieved with a lot of perseverance and time of study to get to have an acceptable competence that facilitates its use and practice. This objective is obtained by means of a theoretical exposition of its foundations, syntax, conventions and organization, together with the continuous exercise and implementation through the elaboration of web pages that will eventually evolve in their complexity and functionality to be web sites. In order to satisfy the objectives of the aforementioned course, the mere elaboration of the pages and the compliance of standards is not enough, but the in-depth knowledge of the code that makes them visible in the web browser is required.

In the tutorial presented here we use learning objects oriented to the display of HTML and CSS as basic elements of teaching, which show the student a topic, its translation expressed in HTML and CSS and the result of its execution in the browser, leaving as learning elements the modification of the code of the proposed solution. The following section shows the definition of a learning object and its use in the static web tutorial.

3. Learning Objects

Given that the main objective of any approach to working with computers is the resolution of problems and more specifically the treatment of information, in the case of static web, as already mentioned, a fundamental aspect is teaching to represent in HTML and CSS code the desired multimedia data. Consequently, it is proposed as a teaching element the creation of learning objects in the tutorial, which will serve to expose a task, propose the solution in terms of HTML and CSS and show the result, thus fulfilling the objectives of the course corresponding to the Design undergraduate program of the UAM-C. The learning element consists in the study of the solution shown in the learning object and the proposal of an alternative solution.

David Wiley was the first author to refer to learning objects ¹⁴, defining them as instructional components that can be reused in different contexts; they are digital entities that can be distributed through the Internet and any number of people can access them simultaneously. From this definition, different authors and institutions devoted to education have provided their own interpretations of what learning objects are. In the case of this paper, we will take the definition provided by the Ministry of National Education of Colombia ¹⁵, which conceives a learning object as a set of resources that can be used in different contexts, with an educational purpose that is composed of at least three internal elements: contents, learning activities and elements of contextualization. In addition, the learning object must have an external information structure (metadata) to facilitate its storage, identification and recovery. Jaimez-González and Luna-Ramírez ¹⁶ used this structure to create learning objects, which support the teaching-learning process of structured programming courses.

In the static web tutorial presented in this document, a learning object is considered as a grouping of five elements: a) description, b) coding, c) expected result, d) explanation, and e) identification; and seven components, which configures each learning object with the structure shown below.

a) Description

1. Description of the topic

2. Explanation of the example

b) Coding

3. HTML code

4. CSS Code

c) Expected result

5. The execution of the code in the browser

d) Explanation of the result

6. HTML and CSS files

e) Identification

7. Keywords (topics)

4. Static Web Tutorial

The main elements of the tutorial are learning objects oriented to web development based on HTML and CSS, which for greater readability and study are organized by topics. The contents of the tutorial is based on the syllabus of the Static Web Programming and Design Workshop course. The number in parentheses is the number of learning objects per topic.

Text and their formats (3)

* Bold

* Italics

* Underlined

* Other formats

Images (2)

* Images

* Dimensions

Hyperlinks and anchors (3)

* Hyperlinks

* Anchors

* Use of CSS styles

Lists (4)

* Not ordered

* Ordered

* Definitions

* Use of CSS styles

Tables (3)

* Normal

* With expansion in columns and rows

* Use of CSS styles

 Image Maps (2)

* Delimitation of areas

* Maps and areas

Forms (5)

* Text boxes

* Password

* Radio buttons

* Checkboxes

* Textarea

* Drop down list boxes

* Buttons

Frames (2)

* Framesets

* iFrames

Other CSS styles (1)

In addition, the static web tutorial is composed of the following parts:

* A brief user manual, which describes the steps to follow so that a student can explore the tutorial, review the learning objects, and visualize them in a browser.

* A dictionary of learning objects, where it is specified the name of the learning object, topic or topics covered, its constituent elements, as well as the page that contains it in the tutorial.

* Several learning objects, with seven elements for each learning object:

1. Description of the topic

2. Description of the example

3. Expected result

4. HTML and CSS code

5. Explanation of HTML and CSS

6. HTML and CSS files for download

7. Keywords (relating to the topics of classification of the learning object).

5. Design and Features of the Tutorial

The tutorial is composed of 25 learning objects that can be viewed according to the topics that are listed in the main menu of topics. The tutorial was made using only HTML and CSS, so it is completely portable and very easy to maintain, for example, adding new learning objects. Figure 1 illustrates the main page of the tutorial, which shows the menu of topics on the left, which include: text, images, hyperlinks and anchors, lists, tables, image maps, forms, frames and CSS styles.

To view a topic, click on the image corresponding to the topic. Once the topic to be viewed has been selected, the learning objects corresponding to that topic are shown to the student. Figure 2 shows the visualization of a topic that was selected along with its learning objects, aligned on the right side of the topic. In this case the topic is Images and the learning objects that are displayed are images and dimensions. In order to visualize the contents of a learning object, the student has to select one of those that are available.

When selecting the topic, a change in the design of the website is observed, which informs the student where it is at that moment. From each learning object, the student can access any of its parts; it is advisable to follow the indicated order: start reading the description and continue until obtaining the code, its result and complementary activities. In the upper right corner is the icon that takes the student to the main page of the tutorial, where all the topics that compose it are included.

6. Example of a Learning Object

This section shows a learning object from the beginning to the end, which exemplifies a study session on a particular topic, in this case the images.

Figure 3 shows the brief description of the topic once the student has selected the learning object images from the top menu. It is observed that a brief paragraph explains the corresponding topic, which in this case is the insertion of an image in a web page.

Once the topic has been explained, the student should continue with the analysis of the HTML and CSS code that gives the desired result, that is, the markup tags that make it possible to see the image on the web page. Figure 4 shows the tag corresponding to the images in HTML and the explanation of how it is used.

The learning object shows an example that makes use of the tag or tags of the topic chosen, in this case, the one corresponding to the insertion of an image in a web page. Additionally, there is a description of the attributes used by the tag, highlighted in bold for locating them in the code, as well as the data of the example image, as shown in Figure 5. For this example, it is observed the description of two attributes of the <img> tag: the src attribute, which indicates the URL of the image to be displayed, or simply the name of the image file that will be displayed (for example, image.jpg); and the alt attribute, which is used to indicate a description or alternative text of the image that will be displayed in case the image cannot be displayed in the web browser. The learning object also includes other relevant attributes for the corresponding <img> tag, which cannot be visualized in Figure 5: width, to specify the width of the image and height to specify the height of the image. In addition to the description of all the attributes of the tag for images, an example of its use is included. These same elements are specified for each learning object found in the tutorial, regardless of the topic to which it refers.

Figure 6 shows an example of HTML code to insert an image, which includes the header and the body of the complete document, in which the <img> tag can be seen to insert the corresponding image, by using the src attribute that contains the name of the image: playa.jpg.

The expected result of the HTML code shown previously is presented in Figure 7, where it is observed how the specified image playa.jpg would be displayed in a web browser.

For a better understanding of the solution that has been shown, after displaying the code in the web browser, as part of the learning element of the learning object the student is asked to download the HTML code, visualize it in its web browser and manipulate it on its computer to make changes. Figure 8 shows the hyperlink to download the HTML code and the learning activities: 1) insert an image in the file that was downloaded and 2) add a description of the image as alternative text.

In this way, through the use of learning objects in the tutorial, the explanations, technical details and examples of the HTML and CSS code are shown from beginning to end, so that they can be assimilated by the students and subsequently applied in the development of static web projects.

It should be noted that one of the fundamental contributions of this tutorial was the participation and opinion of the students, mainly of the Design undergraduate program, since both the graphic design and a large number of the problems of example included in the learning objects were proposed by them. The students started from the examples, exercises and assignments worked during the course ¹⁷ and with the help of the reference book Static Web Programming ¹⁸ and some digital resources that can be consulted and downloaded from the static web site ¹⁹. With this work the students covered the objectives of the static web design course, which requests the design and static web solutions to various proposals. Additionally, this teaching material was generated with their collaboration, which has been used by their peers from other courses.

7. Other Learning Objects

This section presents three learning objects that are contained in the web tutorial. Unlike the previous section, only the initial screenshots of the learning objects are provided, without showing them in detail. It should be noted that all learning objects have the same components shown in the previous section.

Figure 9 shows one of the learning objects of the Lists topic; in particular, it deals with unordered lists in HTML. The screenshot shown in Figure 9 shows the description of the topic, the HTML tags involved <ul> and <li> for unordered lists, and the corresponding attributes.

Figure 10 shows a learning object for the topic of Forms; in particular, HTML text boxes are addressed in this one. The screenshot shown in Figure 10 illustrates the description of the topic, the HTML tags involved <input> and <form> for text boxes and forms, and the attributes corresponding to the <input> and <form> tags.

Figure 11 shows a learning object for the topic of Frames; in particular, it deals with frames of type iFrame in HTML. The screenshot shown in Figure 11 illustrates the description of the topic and the HTML tag involved <iframe>, for the creation of frames in a web page.

8. Evaluation Instrument

The web tutorial with learning objects presented in this paper belongs to the category of digital content ²⁰, since it groups the educational materials that offer diverse contents and activities related to any area of knowledge, which can be accessed on the Internet through a web browser and are aimed at students or teachers.

Since this tutorial aims to support the teaching-learning process of static web topics, the target audience are undergraduate or postgraduate students who study subjects with this content. In particular, the population that participated in the evaluation reported in this section was composed of 20 students (8 women and 12 men) who attended the course Static Web Programming and Design Workshop at the UAM-C.

In order to evaluate the web tutorial and its learning objects, an evaluation instrument was created, which was designed to assess the following aspects: interface design, usefulness and didactic features. The evaluation scale used was the following:

a) Very suitable;

b) Suitable;

c) Little suitable; and

d) Not suitable.

Table 1 shows the evaluation instrument and the results for the interface design aspect.

The part of the evaluation instrument that refers to the usefulness aspect is presented in Table 2.

The part of the evaluation instrument that refers to the aspect of didactic features is shown in Table 3.

9. Conclusions and Future Work

This paper presented a web tutorial with learning objects to support the teaching-learning process of the Static Web Programming and Design Workshop course, which is part of the Design undergraduate program at the UAM-C. This tutorial and its learning objects were the product of the need of suitable teaching material (in Spanish) for this course, in which for each learning object it was presented a description of the topic being discussed, the explanation of tags and attributes, complete examples with explanation of the code in HTML and CSS, the expected results of the examples, the download of the corresponding files and complementary learning activities. The preparation of the learning objects had the participation of the students of the course, which generated a greater acceptance among the students, because the formulation of the examples and their explanations were suggested by their peers.

The use of the web tutorial was evaluated with students who attended the course, through an evaluation instrument that measured aspects of interface design, usefulness and didactic features. The results obtained in the evaluation of the interface design aspect reflected a favorable opinion and acceptance of the majority of the students, since 75% of them mentioned that the interface of the web tutorial and of the learning objects is very suitable or suitable. Regarding the evaluation of the usefulness aspect, 80% of the students considered that the presentation and content of the learning objects that are included in the web tutorial is very suitable or suitable. Finally, in the evaluation of the didactic features aspect, 75% of the students interviewed considered that the learning objects were very suitable or suitable to support in the comprehension, learning and reinforcement of the topics that are covered in the course of static web, which was the goal of the web tutorial developed. The joint work of the teacher with the students is very important in the development and evaluation of didactic materials of this type, since the main users of these works are the students.

It is planned the incorporation of more learning objects for each of the topics of the web tutorial, with the intention of having a greater number of support materials for students. It is also planned to incorporate dynamic elements, through a web programming language; in this way, the tutorial could offer features that help the student during static web learning and allow him to execute the code directly in the browser, showing him the output obtained directly on the tutorial screen, without having to leave the website, giving continuity to what has been proposed in other proposals for innovative didactic materials, such as the web platform of interactive tutorials to support teaching ²¹, or the visual web editor for HTML, CSS and JavaScript ²². Thus, the user could have access to a static web programming lab and access it to work from any computer that has an Internet connection, using only a web browser, avoiding the need to install and configure the necessary software in the computer from where he works.

References