1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
---
title: 'Evaluación: Estructurando datos planetarios'
slug: Learn/HTML/Tables/Structuring_planet_data
translation_of: Learn/HTML/Tables/Structuring_planet_data
original_slug: Learn/HTML/Tablas/Structuring_planet_data
---
<div>{{LearnSidebar}}</div>
<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
<p class="summary">En nuestra evaluación te proporcionamos datos sobre los planetas de nuestro sistema solar y tu los estructurarás en una tabla HTML.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Requisitos previos:</th>
<td>Antes de comenzar esta evaluación deberías de haber leído los artículos de este módulo.</td>
</tr>
<tr>
<th scope="row">Objetivo:</th>
<td>Comprobar si has comprendido las tablas HTML y las características asociadas.</td>
</tr>
</tbody>
</table>
<h2 id="Punto_de_incio">Punto de incio</h2>
<p>Para comenzar esta evaluación, crea una copia local de <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, y <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> en una nueva carpeta de tu ordenador.</p>
<div class="note">
<p><strong>Nota</strong>: Como alternativa, puedes usar una web como <a class="external external-icon" href="https://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> para realizar tu evaluación. Puedes pegar el HTML, CSS y JavaScript en uno de estos editores online. Si el editor online que estas usando no tiene paneles separados para JavaScript/CSS, sientete libre de ponerlos en línea dentro del mismo HTML mediante el uso de <code><script></code>/<code><style></code>.</p>
</div>
<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2>
<p>Estás trabajando en la escuela; tus estudiantes están estudiando los planetas de nuestro sistema solar y quieres proporcionarles una forma sencilla de seguir los datos para buscar hechos sobre los planetas. Una tabla HTML sería ideal — tienes que coger los datos que tienes disponibles y convertirlos en una tabla siguiendo los pasos de abajo.</p>
<p>La tabla finalizada debería de verse así:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p>
<p>También puedes ver el ejemplo <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">aquí</a> (no mires el código fuente — ¡no hagas trampas!)</p>
<ul>
</ul>
<h2 id="Pasos_para_completarlo">Pasos para completarlo</h2>
<p>Los siguientes pasos describen lo que necesitas para completar el ejemplo de la tabla. Todos los datos que necesitarás están en el archivo <code>planets-data.txt</code>.<font face="consolas, Liberation Mono, courier, monospace"> </font>Si tienes problemas para visualizar los datos, mira el ejemplo de arriba o intentalo dibujando un diagrama.</p>
<ol>
<li>Abre tu copia de <code>blank-template.html</code>, y comienza la tabla dándole un contenedor exterior, una cabecera y un cuerpo. No necesitas un pie de tabla en este ejemplo.</li>
<li>Añade el subtítulo proporcionado a tu tabla.</li>
<li>Añade una línea a la cabecera que contenga todos los encabezados de columna.</li>
<li>Crea todas las líneas con su contenido, asegurandote marcar como cabecera aquellas celdas que lo sean.</li>
<li>Asegurate de que el contenido esta insertado en las celdas correctas — en los datos del .txt, cada línea del planeta esta al lado de su planeta asociado.</li>
<li>Añade atributos para que las líneas y columnas del encabezado no se puedan confundir con las líneas, columnas o grupos de líneas a las que encabezan.</li>
<li>Añade un borde negro alrededor de la columna que contiene los nombres de los planetas y sus encabezados.</li>
</ol>
<h2 id="Pistas_y_consejos">Pistas y consejos</h2>
<ul>
<li>La primera celda de la línea de enbezado tiene que estar en blanco y unir dos columnas.</li>
<li>Los encabezados de la filas agrupadas (p. ej. <em>Jovian planets</em>) que están a la izquierda de los encabezados de nombres de planetas (p. ej. <em>Saturn</em>) son algo complicados de resolver — asegurate de que cada uno agrupa el número correcto de líneas y columnas</li>
<li>Una manera de asociar encabezados con sus líneas/columnas es mucha más fácil que la otra.</li>
</ul>
<h2 id="Evaluación">Evaluación</h2>
<p>Si estas siguiendo esta evaluación como parte de un curso organizado, deberías de ser capaz de entregar tu trabajo a tu profesor(a)/mentor para ver la puntuación. Si estas aprendiendo por tu cuenta, puedes obtener la guía de puntuación preguntando en <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">Learning Area Discourse thread</a> o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenta hacer el ejercicio primero — ¡haciendo trampas no aprenderás nada!</p>
<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>
|
