Desafío 3: "Code snippet- Pro"
Desafío 3: "Code snippet- Pro"
Requisitos de finalización
Recibir una calificación
Cierre: miércoles, 3 de marzo de 2021, 23:59
Objetivos:
- Trabajar la competencia digital área 1. Compromiso profesional: 1.1 Comunicación de la organización.
- Trabajar la competencia digital área 2. Recursos digitales: 2.3 Administrar, proteger y compartir recursos digitales.
- Explorar las posibilidades que nos ofrece el bloque "HTML personalizado" del editor Gutenberg.
Desarrollo
En ocasiones observamos en otros sitios webs elementos que nos gustaría usar en nuestra web de centro, como los acordeones, las pestañas u otros elementos. Pero, ¿de qué manera podemos hacerlo en nuestro sitio?
Como ya hemos visto, WordPress de EducaMadrid tiene integrado el editor Gutenberg, que nos permite editar el contenido por bloques. Uno de ellos es el bloque "HTML Personalizado". Este bloque permite insertar código para personalizar el contenido de nuestras páginas o entradas.
Algunas webs como w3chools.com nos ofrecen pequeños fragmentos de código, o code snippets, para nuestro sitio web que nos permiten añadir estas y otras muchas funcionalidades.
Esta actividad tiene tres partes:
- Primero, elige el elemento a incorporar en la página o entrada que desees.
- Después, incorpora el fragmento de código correspondiente usando el bloque HTML personalizado.
- Por último, adáptalo al contenido de tu sitio web.
• Parte A) Elige el elemento (acordeón o pestañas es lo que te recomendamos).
-
- Accede a https://www.w3schools.com/howto/
- Busca en el menú izquierdo qué fragmento (code snippet) quieres usar.
- Haz clic en él.
• Parte B) Edita el código para adaptarlo a tu sitio web.
-
- En la nueva página, pulsa el botón verde titulado "Try it yourself". Se abrirá una nueva página.
- Sustituye los textos que aparecen por defecto, por los que necesites para tu sitio, en el código que aparece en el lado izquierdo de la página. Además de textos, también puedes utilizar imágenes de tu interés (en cualquier caso siempre respetando la licencias de los recursos a publicar).
- Pulsa el botón verde titulado "Run", para comprobar el aspecto final. Si está correcto y acorde a tus necesidades, pasa al siguiente paso.
• Parte C) Incorpora el code snippet al bloque "HTML personalizado" de tu página o entrada.
-
- Copia todo el código que aparece en la mitad izquierda de la página.
- Pégalo en un bloque HTML personalizado en la página o entrada que desees.
- Haz clic en el botón "Vista previa" del propio bloque para observar cómo se verá el elemento.
- Copia todo el código que aparece en la mitad izquierda de la página.
El resultado de tu tarea será parecido al de este ejemplo:
Entrega
- Añade en la entrega:
- La URL de la página hipervinculada de tu espacio donde has ubicado el contenido creado.
- Una justificación de por qué has elegido ese elemento, qué aporta a vuestro sitio.
Evaluación
- La actividad se considerará superada si:
- Has entregado la URL hipervinculada donde aparece el elemento y la justificación solicitada.