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
74
75
76
|
---
title: 'Prueba tus habilidades: controles HTML5'
slug: Learn/Forms/Test_your_skills:_HTML5_controls
tags:
- Aprendizaje
- Evaluación
- Formulário
- HTML5
- Principiante
translation_of: Learn/Forms/Test_your_skills:_HTML5_controls
original_slug: Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5
---
<div>{{learnsidebar}}</div>
<p>El objetivo de esta prueba es evaluar si has comprendido nuestro artículo <a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a>.</p>
<div class="blockIndicator note">
<p><strong>Nota</strong>: Puedes intentar resolver esta prueba en los editores interactivos más abajo, sin embargo, puede ser útil descargar el código y usar una herramienta en línea como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.<br>
<br>
Si te atascas, pide ayuda — mira la sección <a href="/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional">Evaluación o ayuda adicional</a> al final de esta página.</p>
</div>
<h2 id="Controles_HTML5_1">Controles HTML5 1</h2>
<p>Primero exploraremos algunos de los tipos nuevos de <code>input</code> en HTML5. Crea las etiquetas <code>input</code> apropiadas para que un usuario actualice sus detalles para:</p>
<ol>
<li>Email</li>
<li>Website</li>
<li>Número de teléfono</li>
<li>Color favorito</li>
</ol>
<p>Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:</p>
<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls1.html", '100%', 700)}}</p>
<div class="blockIndicator note">
<p><a href="/en-US/docshttps://github.com/mdn/learning-area/blob/master/html/forms/tasks/html5-controls/html5-controls1-download.html">Descarga el código inicial de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
</div>
<h2 id="Controles_HTML5_2">Controles HTML5 2</h2>
<p>A continuación, queremos que implementes un control deslizante para permitir al usuario escoger el número máximo de personas para invitar a su fiesta.</p>
<ol>
<li>Implemente un control deslizante básico que acompañe a la etiqueta provista.</li>
<li>Establezca un valor minimo de 1, uno máximo de 30 y un valor inicial de 10.</li>
<li>Crea un elemento de salida correspondiente para poner el valor actual del deslizador. Asígnale la clase invite-output, y asocialo semanticamente con le entrada. Si haces esto correctamente, el JavaScript incluido en la página automáticamente actualizará el valor cuando se deslice el control.</li>
</ol>
<p>Intenta actualizar el código en vivo más abajo para retrear el ejemplo terminado:</p>
<p>{{EmbedGHLiveSample("learning-area/html/forms/tasks/html5-controls/html5-controls2.html", '100%', 700)}}</p>
<div class="blockIndicator note">
<p><a href="https://github.com/mdn/learning-area/blob/master/html/forms/tasks/html5-controls/html5-controls2-download.html">Descarga el código inicial de esta tarea</a> para trabajar en tu propio editor o en un editor en línea.</p>
</div>
<h2 id="Evaluación_o_ayuda_adicional">Evaluación o ayuda adicional</h2>
<p>Puedes practicar estos ejemplos en los editores interactivos que se encuentran más arriba.</p>
<p>Si deseas que tu trabajo sea evaluado, o estás atorado y quieres solicitar ayuda:</p>
<ol>
<li>Pon tu trabajo en un editor en línea con capacidad de compartir como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a>. Puedes escribir el código por ti mismo, o usar los archivos de punto de inicio enlazados en las secciones superiores.</li>
<li>Escribe una publicación solicitando evaluacion y/o ayuda en el <a href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Tu publicación debería incluir:
<ul>
<li>Un título descriptivo como "Solicito evaluacion para la prueba de habilidad de controles HTML5 1".</li>
<li>Detalles de lo que ya has intentado, y que te gustaría que hiciéramos, por ejemplo, si estas atascado y necesitas ayuda, o quieres una evaluación.</li>
<li>Un enlace al ejemplo que quieres que sea evaluado o por el que necesitas ayuda en un editor en linea con capacidad de compartir (como se mencionó en el paso 1 más arriba). Esta es una buena práctica - Es muy dificil ayudar a alguien con un problema de codificación si no puedes ver su código.</li>
<li>Un enlace a la tarea o página de evaluacion actual, para que podamos encontrar la pregunta con la cual necesitas ayuda.</li>
</ul>
</li>
</ol>
|
