Guia de Aprendizaje 2

GUIA DE APRENDIZAJE 2: LENGUAJES DE PROGRAMACION
Camilo García López

Mayo 2019.
Centro de Materiales y Ensayos.

Servicio Nacional de Aprendizaje SENA.
Bogotá D.C.
Programación de Software.
TABLA DE CONTENIDO 2
FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE 1
Actividades de Reflexión inicial.1
Actividades de contextualización e identificación de conocimientos necesarios para el

aprendizaje.1
Actividades de apropiación del conocimiento (Conceptualización y Teorización)2
Ingles 4
Promover 6
Actividades de transferencia del conocimiento7
ACTIVIDADES DE EVALUACIÓN 7
REFERENCIAS 8
GUIA DE APRENDIZAJE 2 1
FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE
3.1 Actividades de Reflexión inicial.
- ¿Que se imagina, que hay detrás de una página web, cuando abre su navegador?
RTA:
-Detrás de una página web siempre me imagino una gran carpeta llena de índex y estilos, y
cada uno de estos índex llenos de muchas líneas de códigos toco un estilo integrado y propio.
- ¿Que concepto tiene de como se hace o diseña una página web?
RTA:
-Mis conceptos comprenden que una página web se hace con un diseño el cual sea fácil y
amigable con el usuario claramente usando Css y algunos implementos de JavaScript.
3.2 Actividades de contextualización e identificación de conocimientos necesarios para el
aprendizaje.
Etiquetas Una etiqueta (terminos a veces reemplazados por el

anglicismo tag) es una marca con clase que delimita
una región en los lenguajes basados en XML. También
puede referirse a un conjunto de juegos informáticos
interactivos que se añade a un elemento de los datos
para identificarlo (Oxford English Dictionary). Esto
ocurre, por ejemplo, en los archivos MP3 que guardan
información sobre una canción así como sobre el
artista que la ha cantado o compuesto.
Atributos Los atributos de las etiquetas HTML sirven para
definir detalles de comportamiento o presentación de la
etiqueta a los que se les coloca. Se escriben dentro de
la propia etiqueta con su nombre de atributo y el valor
del atributo entre comillas.
Enlaces Un enlace o link es texto o imágenes en un sitio web
que un usuario puede pinchar para tener acceso o
conectar con otro documento. Los enlaces son como la
tecnología que conecta dos sitios web o dos páginas
web. En el navegador se ven como palabras subrayadas
(como Ir al índice de FAQ's al final de ésta página).
Listas Las listas en HTML nos permite crear conjuntos de 2
elementos en forma de lista dentro de una página,
todos los cuales irán precedidos, generalmente, por un
guion o número.
Bloc de notas El Block de notas de Windows es la herramienta más
adecuada para comenzar la aventura como diseñador
de páginas web. Esto es por dos razones:
Utiliza el juego de caracteres internacional más
adecuado para los archivos HTML. Esto quiere decir
que la mayoría de los usuarios que visiten nuestras
páginas verán todo correctamente, incluidos los
acentos.
Aprender bien el lenguaje HTML es imprescindible
para convertirse en un experto diseñador de webs y el
Block de notas es una herramienta que no te permite
diseñar páginas si no es escribiendo tú mismo hasta la
última etiqueta de HTML. Esto puede parecer un
fastidio, pero es una manera excelente de aprender a
editar el HTML
3.3 Actividades de apropiación Del conocimiento (Conceptualización y Teorización).
3.3.1:
<HTML>: El elemento HTML <html> (o elemento HTML raiz) representa la raiz de un
documento HTML. El resto de elementos descienden de este elemento.
Dado que el elemento <html> es el primero en un documento, aparte de los comentarios, se
llama el elemento raíz. A pesar de que esta etiqueta puede ser implícita, o no requerida en
HTML, sí es requerida para abrir y cerrar en XHTM. Ejemplo de manejo.
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
<HEAD>: El elemento HTML <head> provee información general (metadatos) acerca del 3
documento, incluyendo su título y enlaces a scripts y hojas de estilos. Ejemplo de manejo
<html>
<head>
<title>Document title</title>
</head>
</html>
<TITLE>: Indica el título del documento.
Sus etiquetas son: <title> y </title> (ambas obligatorias)
Crea una caja:
Está definido como: Elemento de contenido de cabecera.
Puede contener: texto y entidades de caracteres, pero no puede contener código. Ejemplo de
manejo
<head>
<title>Ejemplo de uso del elemento title</title>
... otros elementos de cabecera...
</head>
<BODY>: El Elemento HTML <body> representa el contenido de un documento HTML.
Sólo puede haber un elemento <body> en un documento. Ejemplo de manejo
<html>
<body> 4
…Elementos del body.. como h1 o img
</body>
</html>
<H1>-<H5>: H1 es el elemento HTML utilizado, de manera habitual, para identificar la
cabecera más importante en una página web. Ejemplos de H1 serían el título de una página, el
título de un post, el nombre de un producto…
El lenguaje HTML nos permite establecer diferentes cabeceras según su importancia.
Concretamente, en una página web podemos crear desde H1 hasta H6, siendo la primera la de
mayor importancia y H6 la que menor peso tiene.
Si bien estamos acostumbrados a que únicamente haya un H1 por página, existen casos comunes
en los que puede haber muchos de ellos. Pensemos por ejemplo en la portada de un blog o en una
página de categoría de productos en una tienda online. En estos dos casos, cada uno de los títulos
de los posts y los nombres de los productos, estarían dentro de una etiqueta H1.
<DIV>: La etiqueta <div> define una división o una sección en un documento HTML.
El elemento <div> se usa a menudo como un contenedor para otros elementos HTML para
personalizarlos con CSS o para realizar ciertas tareas con JavaScript.Ejemplo de manejo
<body>
<div>elementos</div>
</body> 5
<P>: La etiqueta <p> define un párrafo.
Los navegadores agregan automáticamente algo de espacio (margen) antes y después de cada
elemento <p>. Los márgenes se pueden modificar con CSS (con las propiedades de
margen).Ejemplo de manejo
<p>Esto es un parrafo</p>
<IMG>: La etiqueta <img> define una imagen en una página HTML.
La etiqueta <img> tiene dos atributos requeridos: src y alt.
Nota: las imágenes no se insertan técnicamente en una página HTML, las imágenes están
vinculadas a páginas HTML. La etiqueta <img> crea un espacio de retención para la imagen a la
que se hace referencia.
Sugerencia: para vincular una imagen a otro documento, simplemente anide la etiqueta <img>
dentro de las etiquetas <a>.Ejemplo de manejo
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
<A>: La etiqueta <a> define un hipervínculo, que se utiliza para enlazar de una página a otra.
El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace.
De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los
navegadores:
Un enlace no visitado está subrayado y azul.
Un enlace visitado está subrayado y morado.
Un enlace activo está subrayado y rojo. Ejemplo de manejo

<a href="https://www.w3schools.com">Visit W3Schools.com!</a> 6
3.3.2 :
Teniendo en cuenta los temas vistos en el primer y segundo trimestre (Programación
orientada a objetos (POO), levantamiento y análisis de información, lenguaje de programación,
bases de datos, diagramas UML...), diseñar una página web que contenga:
Tipos de fuentes y sus características (Negrita, cursiva...).
Manejo de hipervínculos.
Encabezado.
Imágenes.
Etiquetas.
Colorimetría
Navegabilidad
Además de su creatividad.
RTA:Archivos dentro del rar (Archivo adjunto ).
3.3.3 INGLES:
GLOSSARY:
Hypertext Markup Language (HTML):Is the standard markup language for creating web
pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad
of cornerstone technologies for the World Wide Web.[4]

Source: Is an expression of the English language that belongs to the field of computer 7
science. Although it can be translated as "open source", it is usually used in our language directly
in its original version, without its corresponding translation.
Frame: Frames. A frame (or frame) is a separate window within the general browser
window.
3.3.3 PROMOVER:
CONCLUSIONES:
-Html se compone por diversas etiquetas que a la ves tiene diversas propiedades , cada una de
ellas sirve para algo diferente y puede que todas en conjunto hagan un buena pagina o proyecto
ademas de que todas se complementan por Ejemplo una imagen con un texto.
-Cada pagina web tiene su propia estructura diferente , lo unico en comun en las estrucutas es
el <html></html> lo restante todo puede ser distinto y “desordenado” segun la necesidad.
3.4 Actividades de transferencia del conocimiento.
3.4.1: No se hace - Ya Realizado En Sesiones
3.4.2: No se hace - Ya Realizado En Sesiones

8
REFERENCIAS
Alegsa. (2016). Alegsa. Obtenido de Alegsa: http://www.alegsa.com.ar/Dic/requerimientos.php

Concepto.de. (Noviembre de 2018). Concepto.de. Obtenido de Concepto.de:
https://concepto.de/lenguaje-de-programacion/
Concepto.de. (Diciembre de 2018). Concepto.de. Obtenido de Concepto.de:
https://concepto.de/diagrama-de-flujo/
Desarrollo de Software. (2019). Desarrollo de Software. Obtenido de Desarrollo de Software:
http://desarrollodesoftwaregabriel.blogspot.com/p/que-es-el-pseudocodigo.html
Oxford Living Dictionaries. (s.f.). Oxford Living Dictionaries. Obtenido de Oxford Living
Dictionaries: https://es.oxforddictionaries.com/definicion/problema
Oxford Living Dictionaries. (s.f.). Oxford Living Dictionaries. Obtenido de Oxford Living
Dictionaries: https://es.oxforddictionaries.com/definicion/algoritmo
SlideShare. (Octubre de 2012). SlideShare. Obtenido de SlideShare:
https://es.slideshare.net/videoconferencias/pruebas-de-escritorio
WikiVersity. (Marzo de 2018). WIKIVERSITY. Obtenido de WIKIVERSITY:
https://es.wikiversity.org/wiki/Fundamentos_de_programaci%C3%B3n/Variables_y_asig
naciones

Guia de Aprendizaje 2

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Guia de Aprendizaje 2

Transféré par

Droits d'auteur :

Formats disponibles

GUIA DE APRENDIZAJE 2: LENGUAJES DE PROGRAMACION

Camilo García López

Centro de Materiales y Ensayos.

FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE 1

Actividades de Reflexión inicial.1

Actividades de contextualización e identificación de conocimientos necesarios para el

Actividades de apropiación del conocimiento (Conceptualización y Teorización)2

Actividades de transferencia del conocimiento7

FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE

3.1 Actividades de Reflexión inicial.

- ¿Que concepto tiene de como se hace o diseña una página web?

amigable con el usuario claramente usando Css y algunos implementos de JavaScript.

3.2 Actividades de contextualización e identificación de conocimientos necesarios para el

Etiquetas Una etiqueta (terminos a veces reemplazados por el

3.3 Actividades de apropiación Del conocimiento (Conceptualización y Teorización).

<HTML>: El elemento HTML <html> (o elemento HTML raiz) representa la raiz de un

documento HTML. El resto de elementos descienden de este elemento.

Dado que el elemento <html> es el primero en un documento, aparte de los comentarios, se

HTML, sí es requerida para abrir y cerrar en XHTM. Ejemplo de manejo.

documento, incluyendo su título y enlaces a scripts y hojas de estilos. Ejemplo de manejo

<TITLE>: Indica el título del documento.

Sus etiquetas son: <title> y </title> (ambas obligatorias)

Crea una caja:

Está definido como: Elemento de contenido de cabecera.

<title>Ejemplo de uso del elemento title</title>

... otros elementos de cabecera...

<BODY>: El Elemento HTML <body> representa el contenido de un documento HTML.

Sólo puede haber un elemento <body> en un documento. Ejemplo de manejo

…Elementos del body.. como h1 o img

<H1>-<H5>: H1 es el elemento HTML utilizado, de manera habitual, para identificar la

título de un post, el nombre de un producto…

El lenguaje HTML nos permite establecer diferentes cabeceras según su importancia.

mayor importancia y H6 la que menor peso tiene.

<P>: La etiqueta <p> define un párrafo.

<IMG>: La etiqueta <img> define una imagen en una página HTML.

La etiqueta <img> tiene dos atributos requeridos: src y alt.

que se hace referencia.

dentro de las etiquetas <a>.Ejemplo de manejo

<img src="smiley.gif" alt="Smiley face" height="42" width="42">

De forma predeterminada, los enlaces aparecerán de la siguiente manera en todos los

Un enlace no visitado está subrayado y azul.

Un enlace visitado está subrayado y morado.

Un enlace activo está subrayado y rojo. Ejemplo de manejo

Teniendo en cuenta los temas vistos en el primer y segundo trimestre (Programación

orientada a objetos (POO), levantamiento y análisis de información, lenguaje de programación,

Tipos de fuentes y sus características (Negrita, cursiva...).

RTA:Archivos dentro del rar (Archivo adjunto ).

of cornerstone technologies for the World Wide Web.[4]

in its original version, without its corresponding translation.

el <html></html> lo restante todo puede ser distinto y “desordenado” segun la necesidad.

3.4 Actividades de transferencia del conocimiento.

3.4.1: No se hace - Ya Realizado En Sesiones

3.4.2: No se hace - Ya Realizado En Sesiones

Alegsa. (2016). Alegsa. Obtenido de Alegsa: http://www.alegsa.com.ar/Dic/requerimientos.php

Vous aimerez peut-être aussi