Semana 1

Temas aprendidos

Esta semana aprendí sobre fundamentos de las tecnologías web y elementos de Visual Studio Code, interfaz de usuario, extensiones útiles, atajos de teclado del programa y cómo se utilizan los códigos emmet para agilizar la construcción de código.

Ejercicios

Ejercicio 1: Tabla con Bootstrap

Código Emmet:

table.table>thead>tr>th[scope="col"]{\#}th[scope="col"]{First}th[scope="col"]{Second}th[scope="col"]{Tree}^^tbody>tr*3>th[scope="row"]{$}+td{Mark}+td{Otto}+td{Jhonson}

Resultado:

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Second</th>
            <th scope="col">Tree</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>Jhonson</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>Jhonson</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>Jhonson</td>
        </tr>
    </tbody>
</table>

Ejercicio 2: Estructura de página web

Código Emmet:

div.container>header#header{header}+nav#nav{nav}+section#section{section>article#article{article}^+aside#aside{aside}}+footer#footer{footer}

Resultado:

<div class="container">
    <header id="header">header</header>
    <nav id="nav">nav</nav>
    <section id="section">
        section
        <article id="article">article</article>
        <aside id="aside">aside</aside>
    </section>
    <footer id="footer">footer</footer>
</div>

Ejercicio 3: Tabla con 20 registros

Código Emmet:

table>thead>tr>th{ID}+th{Nombres}+th{Apellidos}+th{Dirección}^tbody>(tr>td{$}+td{Nombre $}+td{Apellido $}+td{Dirección $})*20

Resultado (primeros 5 registros):

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombres</th>
            <th>Apellidos</th>
            <th>Dirección</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Nombre 1</td>
            <td>Apellido 1</td>
            <td>Dirección 1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Nombre 2</td>
            <td>Apellido 2</td>
            <td>Dirección 2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Nombre 3</td>
            <td>Apellido 3</td>
            <td>Dirección 3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Nombre 4</td>
            <td>Apellido 4</td>
            <td>Dirección 4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Nombre 5</td>
            <td>Apellido 5</td>
            <td>Dirección 5</td>
        </tr>
        <!-- ... continúa hasta el registro 20 -->
    </tbody>
</table>

Reflexión final

Me doy cuenta de que comprender las tecnologías web y sus componentes básicos es fundamental para desarrollar soluciones digitales efectivas. Identificar los distintos tipos de aplicaciones y los roles en el desarrollo me ayuda a ubicarme mejor como futuro profesional en este campo. Además, el uso de herramientas como Visual Studio Code me permite mejorar mis habilidades prácticas y reconocer cómo el conocimiento teórico se aplica en la práctica.

¿Qué aprendí?

Aprendí los fundamentos de las tecnologías web, sus tipos, funcionamiento y el uso básico de Visual Studio Code.

¿Cómo aprendí?

Aprendí a través de la explicación del docente, la práctica en el laboratorio y la exploración directa de la herramienta VSC.