Objectives
Nowadays, having a digital footprint is an essential tool to enhance our personal and professional profile. The course STIC proposes an exercise of exploration in which we can create our own digital identity by exploring the tools that make it possible. The task includes getting familiarized with HTML language, CSS language, SVG, javascript and general programming concepts. This exercise is assigned as part of the first project for the class and is intended to articulate the technological and pedagogical component of the course all along the development of the course.
Design
The idea behind the design is to present personal and academic information in a professional way. The home page shows general information about the creator and the main sections of the website which allows the user to find information intuitively. The upper part has a navigation bar that adapts to both web and cellphone versions, it also includes the sections: Home, About me, Portfolio, Maltt and Contact me. The navigation bar centralizes the information and makes navigation easier for the user. The color and design will be improved along the development of the course.
Production
The production of the first exercise required using different combinations of knowledge acquired during the exploration of HTML, CSS, SVG and Javascript.
- Personal website located in TECFA server: First, it was necessary to study the information related to the course topics. After that, there was an exploration of different websites done by colleagues. This was useful to have ideas in terms of design and structure. During the programming section, I created the home page first, then I started adding more elements such as colors, letter formats, backgrounds, links. Later, I used a video tutorial to create the navigation bar which did not work at some points. These problems were mostly related to spelling errors, so I had to fixed them to make it work.
- Page personal wiki: After reading the basic guidelines for editing in wiki sites, I started writing my personal page and adding the details demanded for the task. I included pictures and additional sections to introduce people to my work experience.
Self-assesment
The first exercise was a real challenge as I had no experience with programming. However, I am proud of the knowledge I acquired while working with html and css. I created a personal website that follows the guidelines for the first part of the course and shows the progress on understanding the different coding languages and computational thinking. I had particular difficulties with images and using some elements such as markers or spans. I am still not sure how they work so I changed the codes with elements that were familiar to me in order to resolve the problems. I will look into it though. The website needs to be improved in terms of design and ergonomics, I will work on that as well.
Bibliography
- Workshops HTML et CSS Edutechwiki
- HTML y CSS Course from ZERO by Dalto.
- Como hacer una barra de navigación con HTML y CSS by divcode.
Resources
For this exercise, I used photos from my own gallery and fonts from google. In addition, I used some tutorial videos referenced in the bibliography to have a better understanding of how to create the navigation bar.