Scribd
Carica
54 visualizzazioni

GT6 Guia HTML5-CSS. JS

Questo documento fornisce una guida di apprendimento per lo sviluppo di front-end web utilizzando HTML, CSS e JS. La guida include definizioni di base, attività di apprendimento come configurare l'ambiente di sviluppo e identificare il processo di progettazione web, e criteri di valutazione.

Caricato da

Jenny Guio
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
54 visualizzazioni

GT6 Guia HTML5-CSS. JS

Questo documento fornisce una guida di apprendimento per lo sviluppo di front-end web utilizzando HTML, CSS e JS. La guida include definizioni di base, attività di apprendimento come configurare l'ambiente di sviluppo e identificare il processo di progettazione web, e criteri di valutazione.

Caricato da

Jenny Guio
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 8

PROCESO DE GESTIÓN DE FORMACIÓN PROFESIONAL INTEGRAL

FORMATO GUÍA DE APRENDIZAJE

GT.Html-CSS-JS
1. IDENTIFICACIÓN DE LA GUÍA DE APRENDIZAJE
• Denominación del Programa de Formación: Programación de software
• Código del Programa de Formación: 233104 VER.2
• Fase del proyecto: Evaluación
• Competencia: DESARROLLAR LA SOLUCIÓN DE SOFTWARE DE ACUERDO CON EL DISEÑO Y
• METODOLOGÍAS DE DESARROLLO
• Resultados de Aprendizaje Alcanzar:
RAP 2. CREAR COMPONENTES FRONT-END DEL SOFTWARE DE ACUERDO CON LAS
NECESIDADES DEL CLIENTE

2. presentación

Estimado aprendiz, bienvenido a la actividad de aprendizaje de los programas html5, CSS Y JS,
donde se desarrollarán actividades concernientes a los conceptos y características básicas de la
programación orientada al desarrollo web.

Para el desarrollo de las actividades planteadas en esta guía, contará con el acompañamiento de
la instructora, quien lo orientará con las pautas necesarias para el logro de las actividades de
aprendizaje, brindando herramientas básicas de tipo conceptual y metodológico.

Es importante que organice su tiempo con un promedio de trabajo diario de dos horas, dada la
exigencia que demanda la realización de las actividades mencionadas en esta guía de
aprendizaje. No olvide revisar y explorar los materiales y videos de apoyo para el desarrollo de la
guía.

GFPI-F-135 V02
3. Actividad de reflexión inicial.

Con la llegada de la web surgió la W3C (World Wide Web


Consortium) como organismo encargado de velar por el
desarrollo de protocolos y pautas que aseguran el
crecimiento futuro de esta, haciendo posible la
comunicación humana, el comercio y las oportunidades
para compartir conocimiento. Teniendo como principal
objetivo la disponibilidad de información para el público en
general.

¿Qué tan importante es para la web que exista una


organización encargada de velar por su desarrollo, como lo
es la W3C?

3.2 actividades de contextualización e identificación de conocimientos necesarios para


elaprendizaje.

Al terminar la transferencia de conocimiento, el aprendiz deberá desarrollar un cuestionario con las


siguientes preguntas:

Html
a. Organizar grupo de dos personas, realizar un cuadro donde se haga una pequeña descripción
de las etiquetas más utilizadas en
HTML(<html>,<head>,<title>,<meta>,<body>,<center>,<h1>,<hr>,<br>,<p>,<font>,<a>,<ol><ul>,<
audio>,<section>,<article>, <div>,<header>).
b. Realizar un cuadro comparativo entre HTML y XHTML.
c. Consultar los tipos de editores de texto que hay en el mercado, teniendo claras las
características de cada uno, ¿Para usted cual es el que mejor se presta para diseñar páginas web
con HTML5 y CSS3?
d. ¿Por qué es importe HTML como lenguaje de marcado a la creación de estructura y contenido
de las páginas web en la “Web 3?0” o también llamada web semántica?
e. ¿Para usted que tanto ha cambiado la web con el uso de HTML5 y CSS3?, justificar la
respuesta.
f. Consultar a cerca de los elementos principales en CSS y dar un ejemplo de cada uno de ellos.
Css
g. Consultar acerca de los tipos de selectores (selectores de etiqueta, selectores de clase,
selectores de ID, selectores contextualizados o pseudo-clases, pseudoelemento, selector universal
y selectores de atributo).
W3c
h. ¿Cuál es la finalidad de la W3C?
i. ¿Cuál es la pila tecnológica del W3C?

GFPI-F-135 V02
4 FORMULACIÓN DE LAS ACTIVIDADES DE APRENDIZAJE

4.1 Actividad de aprendizaje 1: Definir el entorno para el desarrollo de soluciones en el lenguaje


de programación html, css y Js.

A continuación, se describen las actividades y las correspondientes evidencias que conforman


la actividad de aprendizaje 1:

Configurar el entorno de trabajo para el desarrollo de soluciones con el lenguaje HTML,


CSS Y JS visual studio code

Para el desarrollo de aplicaciones, es necesario contar con un software específico acorde con el
lenguaje de programación seleccionado; es indispensable que el equipo informático tenga
instalado y configurado el editor de texto VISUAL STUDIO CODE

Te invito a revisar el siguiente video:


Mi configuración de extensiones: https://www.youtube.com/watch?v=cwvpqNggpS8&t=7s

Evidencia N° 1: Informe - Configurar el entorno de trabajo para el desarrollo de soluciones con el


lenguaje html.css y js.
Evaluación conceptos básicos
Para entregar la evidencia remítase a fases del proyecto/ fase 4 Evaluación/Actividad 1 /
Evidencias

4.2 Actividad de aprendizaje 2: Identificar el proceso de diseño y estructuración web html5.

Importancia de la nueva versión del lenguaje de marcado que se usa para estructurar
páginas web
Bueno antes que todo están las preguntas básicas, ¿qué es?, ¿para qué es?, ¿En qué me
beneficio?, y no pueden hacer falta en este mundo del diseño y la estructura web y
específicamente en este tema de HTML5
¿Qué es html 5? – Simplemente Como su nombre indica, HTML 5 es el sucesor de HTML4.
Este trabajo o proyecto de HTML5 se inició a finales de 2003 con un grupo de trabajo que se
propuso a hacer un lenguaje que llegara con un conjunto de tecnologías que permiten
construir la nueva Web.
No fue sino hasta 2007 que el HTML5 del W3C acepta la visión mediante la incorporación en ella
del grupo de trabajo. Los principios de diseño son claras: para simplificar el uso de HTML, la
formalización de las prácticas actuales, y garantizar la máxima compatibilidad con versiones
anteriores.

Revisar los siguientes videos:


• página oficial de la W3C: HTML y CSS - W3C
• menú de animaciones: tutorial html y css | crear menu con animacion en css3 - YouTube
• ¿Cómo crear nuestra primera página web con HTML y CSS, URL:
http://www.w3.org/Style/Examples/011/firstcss.es.html

GFPI-F-135 V02
• Lista de animaciones
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
http://libro.cursohtml5desdecero.com/snippets/html/

Con el fin de contextualizar y afianzar sus conocimientos sobre eltema, investigue Sobre,
• Alojamiento web
• Servidores http
• Navegadores
• Peticiones http
• Las URLs
• Dominio y subdominios

Nota: Se debe socializar a los compañeros

1. DISEÑAR Y DESARROLLAR LA SIGUIENTE INTERFAZ

Evidencia N° 2 Para entregar la evidencia remítase a la Actividad 2 - Evidencias

GFPI-F-135 V02
2. Con el fin de contextualizar y afianzar sus conocimientos sobre eltema, investigue Sobre,

• Qué es CSS y cómo lo podemos usar para aplicar estilos


• Qué estilos podemos aplicar a cada elemento HTML
• Cómo combinar HTML y CSS
• Cómo funciona la herencia de estilos

3. Puedes acceder a los snippets interactivos de CSS a través de la siguiente URL:


http://libro.cursohtml5desdecero.com/snippets/css/

4. ACTIVIDADES DE EVALUACIÓN

Evidencias de Aprendizaje Criterios de Evaluación Técnicas e Instrumentos de


Evaluación
Evidencias de Conocimiento: Define que es HTML Técnica: Socialización.
y CSS.
Cuestionario con temas
Instrumento: Cuestionario.
vistos en transferencia de
Define las ventajas de
HTML y CSS.
HTML y CSS. Instrumento: Listas de
Evidencias de chequeo
Desempeño: Define las etiquetas
usadas en HTML5. Evidencias de Producto:
Evaluar el nivel de
Realizar aplicación básica
efectividad del desarrollo
de las actividades, de Define los tipos de en HTML , CSS, y JS
acuerdo al tiempo selectores en CSS. teniendo en cuenta las
estimado. funcionalidades que realiza
Define los principales el gestor de emprendimiento
Evaluar evidencias de elementos de CSS. en la aplicación Propuesta
aprendizaje de acuerdo a
la lista de chequeo, con
el fin de verificar que la
aplicación se haya
realizado correctamente
de acuerdo a los
estándares que propone
la w3C.

GFPI-F-135 V02
5. GLOSARIO DE TÉRMINOS

HTML: Es el lenguaje que se emplea para el desarrollo de páginas de internet.


1. CSS: CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene
siendo coloquialmente “una página web”.
Etiquetas: son fragmentos de texto destacado de una forma especial que permiten la definición de las
distintas instrucciones de HTML, tanto los efectos a aplicar sobre el texto como las distintas estructuras del
lenguaje.
W3C: El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones
Miembro, a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares
Web.
XHTML: XHTML es un lenguaje similar a HTML, pero con algunas diferencias que lo hacen más robusto y
aconsejable para la modelación de páginas web.
SELECTORES: Los selectores identifican a un elemento dentro de la página Web para luego poder definir sus
propiedades.

GFPI-F-135 V02
6. REFERENTES BIBLIOGRÁFICOS

W3C (2012) HTML y CSS. [En línea].Sitio oficial de la World Wide Web Consortium (W3C). Disponible en:
http://www.w3.org/standards/webdesign/htmlcss .
LIBROSWEB (2015). [En línea]. Introducción a HTML. Disponible en: http://librosweb.es/libro/xhtml/capitulo_1.html .
Platzi. John Freddy Vega. (2014). ¿Qué es HTML y cómo funciona?. [Vídeos]. YouTube.
Sidar (2015). SELECTORES. [En línea].Sitio web. Disponible en : http://www.sidar.org/recur/desdi/mcss/manual/sel.php

GFPI-F-135 V02
7. CONTROL DEL DOCUMENTO

Nombre Cargo Dependencia Fecha


Autor (es) Ing. JENNY GUIO Instructor Articulación Junio de 2021
Revisó

8. CONTROL DE CAMBIOS (diligenciar únicamente si realiza ajustes a la guía)


Nombre Cargo Dependencia Fecha Razón del Cambio
Autor (es)

GFPI-F-135 V02

Potrebbero piacerti anche