Guia-de-Aprendizaje-N-7-HTML-CSS

Vista previa del material en texto

GUÍA DE APRENDIZAJE Nº	2		
		1. IDENTIFICACIÓN DE LA GUIA DE APRENDIZAJE
	Programa de Formación:
	Código:228106
Versión: 
	Análisis y Desarrollo de Sistemas de Información
102
	Nombre del Proyecto:
	Código: 866036
	DISEÑO E IMPLEMENTACION DE SOFTWARE QUE AGILICEN LOS PROCESOS DEL CENTRO AGROEMPRESARIAL Y DESARROLLO PECUARIO DEL HUILA
	Fase del proyecto: ANÁLISIS
	
	Actividad (es) del Proyecto:
Construir la capa de datos, lógica de negocios y presentación del sistema de información aplicando estándares de calidad y buenas practicas de ergonomía.
	Actividad (es) de Aprendizaje:
	104
	MATERIALES DE FORMACIÓN
	
	
	
	DEVOLUTIVO 32 computadores
	CONSUMIBLE 
	Resultados de Aprendizaje:
"Realizar la codificación de los módulos del sistema y el programa principal, a partir de la utilización del lenguaje de programación seleccionado, de acuerdo con las especificaciones del diseño."
utiliza las herramientas de desarrollo, para la codificación de los módulos del sistema, aplicando las funciones propias del lenguaje de programación seleccionado, de acuerdo con las necesidades del sistema de información.
Ejecutar y documentar las pruebas del software, aplicando técnicas de ensayo-error, de acuerdo con el plan diseñado y los procedimientos establecidos por la empresa.
	Competencia:
CONSTRUIR EL SISTEMA QUE CUMPLA CON LOS REQUISITOS DE LA SOLUCIÓN INFORMÁTICA
	
	
	
	Duración de la guía ( en horas): 100 Horas
	
	
	
	
2. INTRODUCCIÓN
	HTML, JAVASCRIPT y CSS son tecnologías (o metalenguajes, ya que no puede considerárselos lenguajes de programación) que intervienen en prácticamente todo desarrollo, grande o pequeño. Se encargan de dotar de una estructura y presentación agradables a aquello que ve el usuario de páginas web.
Los lenguajes de programación del lado del servidor realizan procesos en el servidor (computador remoto que se encarga de enviar las páginas web a través de internet): podemos citar entre estos lenguajes Java (JSP), ASP.NET, PHP, o Perl, entre los principales.
Los lenguajes de programación del lado del cliente realizan procesos en el ordenador personal del usuario (efectos visuales, cálculos, etc.): podemos citar entre estos lenguajes Javascript, Java (applets), o VBScript, entre los principales.
En cuanto a bases de datos podemos nombrar MySQL, SQLServer y Oracle, entre las principales.
Las tecnologías se combinan entre ellas de muy diversas maneras. Podemos citar algunas combinaciones bastante habituales entre lenguajes de programación y bases de datos: Java + Oracle, ASP.NET + SQLServer, PHP + MySQL. Sea cual sea la combinación utilizada, en un desarrollo web moderno siempre intervendrá HTML y CSS.
En resumen, CSS es un lenguaje para dotar de presentación y estilo a páginas web cuyos aspectos básicos deben ser conocidos tanto por programadores web como por diseñadores web o maquetadores web. En la práctica, muchas veces se entremezcla el código de programación con el código HTML y código CSS, de ahí que coloquialmente se hable de “programación web” para referirse a todo este conjunto, aunque formalmente ni HTML ni CSS son lenguajes de programación.
Fíjate que estamos tratando de dejar claro qué es y para qué sirve CSS antes de empezar a estudiar este lenguaje porque si tenemos los conceptos claros nos será mucho más sencillo el aprendizaje, ahorraremos tiempo y cometeremos menos errores.
 
3. ESTRUCTURACION DIDACTICA DE LAS ACTIVIDADES DE APRENDIZAJE 
	3.1 Actividades de Reflexión inicial. 
A veces nos encontraremos que se puede lograr un mismo efecto usando HTML, usando CSS ó usando un lenguaje de programación. ¿Por qué tantas formas para hacer una misma cosa? ¿Dónde está la frontera entre cada lenguaje? Esta pregunta no es de fácil respuesta. Vamos a ver con un ejemplo lo que puede ocurrir para algo tan sencillo como aplicar algunos efectos a un texto. No obstante, ten en cuenta que este ejemplo relativo a texto podría aplicarse a otros conceptos como bordes, márgenes, animaciones, etc. El lenguaje HTML permite aplicar algunos efectos visuales al texto. Escribe o copia este código y guárdalo en un archivo de nombre ejemplo1.html.
Con Javascript podemos hacer algo parecido. 
http://aprenderaprogramar.com/index.php?option=com_attachments&task=download&id=702
	3.2 Actividades de contextualización e identificación de conocimientos necesarios para el aprendizaje.)
Empezar a usar javascript a partir de html y css básicos (menú, listas, links, formularios, etc.)
http://aprenderaprogramar.com/index.php?option=com_attachments&task=download&id=704
El código anterior es HTML y CSS y lo usaremos a lo largo del curso para poner diferentes ejemplos, por lo que lo denominaremos "código base HTML del curso" o “código base CSS del curso”. Para seguir este curso debes ser capaz de comprender todo el código HTML y CSS que hemos usado, su significado y sintaxis. Si no comprendes el código anterior no continues avanzando, dirígete a la web aprenderaprogramar.com y en la sección cursos busca los cursos “Curso básico del programador web: HTML desde cero” y “Curso básico del programador web: CSS desde cero” y realízalos. Si no lo haces así no entenderás o no le sacarás todo el partido posible a este curso.
Visualiza el documento HTML en un navegador. Debes obtener un resultado similar a este (si te falla alguna imagen puedes cambiar las rutas y poner otra imagen que tú desees):
	3.3 Actividades de apropiación del conocimiento (Conceptualización y Teorización). 
Para la apropiación del conocimiento con el fin de aplicarlo en su proyecto de grado con el fin de dar solución a los requerimientos solicitados por el cliente.
Aquí podrá ver video tutorial utilizando un MVC llamado Bootstrap
https://www.youtube.com/watch?v=eFywnP-lquA&list=PLpOqH6AE0tNhW4kDFOTPs4keq1GcvJnwI 
	3.4 Actividades de transferencia del conocimiento.
Creamos una interfaz gráfica
· Vamos al archivo html y css luego diseñamos una interfaz de usuario según lo solicitado por la dependencia a cargo.
 Programamos la interfaz gráfica
Ejemplo guía
Web ejemplo - Ejemplo de una página web desde cero en HTML y CSS
https://www.youtube.com/watch?v=S0dSsqN30j0
	3.5 Actividades de evaluación. 
	Evidencias de Aprendizaje
	Criterios de Evaluación
	Técnicas e Instrumentos de Evaluación
	Evidencias de Conocimiento
 
Evidencias de Producto 
Diseñar y Desarrollar la interfax de usuario con conexión a la BD del sistema de información solicitado por el cliente
	
Crea la base de datos en el motor de base de datos seleccionado, siguiendo especificaciones técnicas del informe, según normas y protocolos de la empresa.
construye la interfaz del aplicativo, siguiendo los parámetros establecidos en el diseño que cumpla con las necesidades del usuario final.
"utiliza las herramientas de desarrollo, para la codificación de los módulos del sistema, aplicando las funciones propias del lenguaje de programación
seleccionado, de acuerdo con las necesidades del sistema de información."
	Evidencias de Producto:
Lista de chequeo
	
	SERVICIO NACIONAL DE APRENDIZAJE SENA 
SISTEMA INTEGRADO DE GESTIÓN
Procedimiento Ejecución de la Formación Profesional Integral
GUÍA DE APRENDIZAJE
	Versión: 02
	
	
	Código: GFPI-F-019
	
	SERVICIO NACIONAL DE APRENDIZAJE SENA 
GUÍA DE APRENDIZAJE
SISTEMA INTEGRADO DE GESTIÓN
Proceso Gestión de la Formación Profesional Integral
Procedimiento Ejecución de la Formación Profesional Integral
	Versión: 02
	
	
	Código: GFPI-F-019
Página 7 de 8
			
	Página 8 de 8
4. RECURSOS PARA EL APRENDIZAJE
	ACTIVIDADES DEL PROYECTO 
	DURACIÓN 
(Horas)
	 Materiales de formación devolutivos: (Equipos/Herramientas)
	Materiales de formación (consumibles)
	Talento Humano (Instructores)
	AMBIENTES DE 
APRENDIZAJE TIPIFICADOS
	
	
	Descripción 
	Cantidad
	Descripción
	Cantidad
	Especialidad
	Cantidad
	ESCENARIO (Aula, Laboratorio, taller, unidad productiva) y elementos y condiciones de seguridad industrial, salud ocupacional y medio ambiente 
	Construir la capa de datos, lógica de negocios y presentacióndel sistema de información aplicando estándares de calidad y buenas practicas de ergonomía.
	 100
	• computadoras 
de escritorio
• Mesas para trabajo colaborativo con ubicación para 2 aprendices.
• sillas
	30
16
32
	N/A 
	 N/A
	 Ingeniero de sistemas
	 1
	104 
	 
abstract: Abstracto.Aplicable a clases o métodos.
array: Variable que posee varias posiciones para almacenar un valor en cada posición. Las posiciones son accedidas mediante un índice numérico.
break: Palabra clave que finaliza la ejecución de un bucle o de una instrucción switch.
bucles: Tipo de estructura iterativa, que permite repetir un conjunto de instrucciones un número variable de veces.
clase: Estructura que define como son los objetos, indicando sus atributos y sus acciones.
clase base: Clase de la cuál se hereda para construir otra clase, denominada derivada.
CLASSPATH: Variable de entorno que permite a la máquina virtual java saber donde localizar sus clases.
constructor: Función especial empleada para inicializar a los objetos, cada clase posee sus propios constructores.
derivada: Clase que hereda de una clase base.
Excepcion: Objeto empleado para representar una situación de excepción (error) dentro de una aplicación java.
herencia: Característica que permite que una clase posea las características de otra, sin tener que reescribir el código.
herencia sencilla y múltiple: Dos tipos de herencia, con una sóla clase base, o con varias.
instancia: Un objeto creado a partir de una clase.
instanciación: Proceso de creación de un objeto a partir de una clase.
interfaz: Define un tipo de datos, pero sólo indica el prototipo de sus métodos, nunca la implementación.
JDK: Java Development Kit, es el conjunto de herramientas proporcionadas por sun, que permite compilar y ejecutar código java.
jerarquía de herencia: Árbol construido mediante las relaciones de herencia en las clases java.
máquina virtual: Es la encargada de ejecutar el código java.
multiplataforma: Posibilidad de existir en varias plataformas (sistemas operativos)
package: Paquete. Carpeta creada para contener clases java, y así poder organizarlas.
PATH: Variable de entorno, empleada por los sistemas operativos para saber donde localizar sus programas ejecutables.
Sobrescritura: Poseer el mismo método, pero con código distinto, en una clase base y en una clase que deriva de ella.
transformación de datos: Cómo cambiar el tipo de una información, por ejemplo cambiar el literal "23" al valor numérico 23.
5. GLOSARIO DE TERMINOS
6. REFERENTES BIBLIOGRÁFICOS
 
	· https://www.java.com/es/download/faq/helpful_concepts.xml
· http://panamahitek.com/los-7-pasos-seguir-para-el-manejo-de-mysql-con-java/
· 
7. CONTROL DEL DOCUMENTO (ELABORADA POR)
	ING. HUGO FERNANDO POLANIA DUSSAN