DESARROLLO DE SOFTWARE 1

SENA: Programación de software

Esteban Rodríguez Ospina

1001

Fernando Villegas V.

Desarrollo de software

FICHA:16303309

Colegio de educación técnica y académica

Celestin Freinet

Bogota D.C

2018
 DESARROLLO DE SOFTWARE 2

Resolución de la guía 03

3. FORMULACION DE LAS ACTIVIDADES DE APRENDIZAJE:

3.1. Actividades de Reflexión inicial:

¿Qué elementos se pueden visualizar en una página web? :

Los elementos que se pueden evidenciar dentro de una página web son los siguientes:
1. Contenedor: Es aquello que definimos como body dentro del HTML y que contendrá todo el
diseño de la página web
2. logotipo: El logotipo es aquella imagen que representara la empresa a la cual se enfoca la
página web

3. Contenido: El contenido es la parte más importante de la página web puesto que en él se

pondrá toda la información respectiva a la empresa o producto del que trata la pagina
4. Especio negativo: El espacio negativo es todo aquel espacio que no posee información
dentro de la página web, pero que a su vez de vital importancia ya que permite al usuario
descansar y hace parte fundamental del diseño de la página
5. Footer: El Footer es donde se muestra el espacio legal de la página

¿Cómo se crea una página web?:

Para describir como se crea una página web primero debemos saber que es: una página web
En resumen es un documento HTML que es accesible por medio de un browser.
Teniendo esta definición clara lo fundamental para crear una página web es el lenguaje de
etiquetado HTML, ademas se requiere un nombre o dominio, luego se necesita un hosting que
es donde estara almacenada la pagina web, y finalmente se debera usar contenido.

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

el aprendizaje.

Qué diferencia hay entre los roles de un Front-end y un Back-end?:

Para la creación de un página web se debe tener en cuenta lo conceptos de Front-end y Back-
end, siendo el primero el diseño de una página web encargado de enfocarse en el estilo del
sitio, y el segundo enfocado en la lógica y que todo funcione como debería.
La diferencia presente entre estos dos conceptos es que mientras el Frond-end es visible para
el usuario puesto que es la parte del diseño y aunque también se relaciona con el código se
usa en lenguajes de marcado y de estilo como lo son HTML y CSS ; mientras que el Back-end
no es visible por el usuario, este no está presente en el diseño de la página web, pero se
encarga de que el sitio cumpla con sus funciones y ejecute sus labores tal y como debe ser, en
él se emplean lenguajes de programación como lo es JavaScript.

Realiza individualmente, según las tareas que ejecuta normalmente en internet, y lo que
ha leído en la introducción de la presente guía, realice un esquema o dibujo donde se
represente la interacción entre HTML, CSS, JavaScript y Bootstrap, socializar el trabajo
desarrollado en clases:
 DESARROLLO DE SOFTWARE 3

Página web

Se compone

Front-end Back-end

Quiere decir todo lo Se refiere a la lógica que

relacionado al diseño, es hace parte del sitio web, no
visible para el usuario puesto es visible por el usuario
que hace referencia al estilo pues e encarga de que todo
de la pagina funcione como debe

Usa lenguajes de Usa lenguajes de

estilos como programación como

HTMLCSS JavaScript

En grupo de dos consulte 5 diferencia entre desarrollo web y aplicaciones de Escritorio,

realizar un breve resumen en INGLES de 2 de las diferencia y sustentar con sus
compañeros:
Las diferencias entre las aplicaciones web y las aplicaciones de escritorio son:

1. las aplicaciones web se pueden usar de forma global en cualquier computador mientras que
las de escritorio deben estar en el equipo que las requiera
2. Las aplicaciones web requieren de un browser para ser ejecutadas mientras que las de
escritorio no
3. las aplicaciones web no están vinculadas al sistema operativo a diferencia de las
aplicaciones de escritorio
4. El tiempo de respuesta de las aplicaciones de escritorio es mucho más rápido que las
aplicaciones web
5. Las aplicaciones web no requieren ser actualizadas mientras que las de escritorio si
 DESARROLLO DE SOFTWARE 4

3.1.3 Actividad de aprendizaje 03_3: Reconocer los conceptos básicos en la web, a

través de la elaboración de un cuadro comparativo.

Individualmente elabore un cuadro comparativo con los siguientes conceptos, luego con dicha
información proceda a realizar una infografía, investigue como hacer una infografía y
desarrolle la actividad.
¿Qué es FTP?
¿Qué es un Hosting?
¿Qué es un dominio?
¿Qué es un servidor Web?
¿Que son mapas de navegación, como se crean y como se usan?
¿Qué es un prototipo Web?
¿Qué es Diseño Web?
¿Qué es Diseño gráfico?
¿Qué es Desarrollo Web?

termino definición
FTP Es un protocolo de trasferencia de archivos
entre sistemas conectados a una red
Hosting El hosting o host hace referencia a el
servidor que tiene almacenado la página web
Dominio Es la dirección en la que se encuentra la
página web
Servidor web Un servidor web es un computador con
grandes capacidades que permite el
almacenamiento de gran cantidad de
informacion
Mapas de navegación Es un esquema de la estructura de un sitio
web, es decir que es una representación
gráfica de la página para orientar a el lector
Prototipo web Un prototipo o mockup es un a maqueta o
modelo de un diseño o dispositivo de cómo
sera la pagina o producto final.
Es muy util para probar una funcionalidad
concreta o para ver el diseño.
Diseño web el diseño web es una actividad que consiste
en planificar y diseñar los sitios web, de
forma que un diseñador debe concentrarce
en como crear la pagina y como los usuarios
podran interactuar con ella.
Diseño grafico El diseño grafico es una especialidad cuyo
objetivo es satisfacer las necesidades de
comunicación visual y asi poder dar a
entender un mensaje especifico siendo
enfocado a una poblacion determinada.
Desarrollo web El desarrollo web e da en segundo plano y
es aquello que permite que la pagina tenga
un funcionamiento implacable logrando asi
que todo funcione como debe
 DESARROLLO DE SOFTWARE 5

Infografía:(fuentes)

* ” http://www.masadelante.com/faqs/dominio”

* “https://www.strato.es/faq/article/2095/Que-es-FTP-y-como-se-utiliza.html”

*“http://www.academia.edu/8402805/QUE_ES_MAPA_DE_NAVEGACION”

*“https://hipertextual.com/2017/03/crear-los-mejores-prototipos-paginas-apps-moviles”

*“https://webdesignerandmore.wordpress.com/2012/09/25/que-es-diseno-web/”

* “https://conceptodefinicion.de/diseno-grafico/”

*”http://blog.openclassrooms.com/es/2017/09/11/que-es-el-desarrollo-web/”

* “https://duplika.com/blog/que-son-los-servidores-web-y-por-que-son-necesarios/”

Informe detallado en Microsoft Word cuadro comparativo sobre las “Características de

un sitio web moderno”:

Un sitio moderno debe ser muy agradable para el usuario, objetivo, que no sobrecargue de
información al lector pero que a su vez pueda satisfacer la curiosidad del cliente y logre llamar
su atención sobre el producto o empresa tratado.
Debe poseer un interfaz atractiva y llamativa, pero que a su vez no canse o desgaste después
de pasado el tiempo, además su diseño tiene que estar muy relacionado con el logo y los
colores de la empresa, de forma que sea reconocible al cliente el producto del que trata; un
claro ejemplo de una interfaz reconocible puede ser el siguiente:

Se puede ver que en la pagina principal de “COCA-COLA” los colores de fondo permiten a el
lector tener un descanso sobre la lectura y que no haya un desgaste al momento de
permanecer mucho tiempo en el sitio, ademas que las personas consumiendo el producto
permite identificarlo facilmente y asociarlo con el titulo de la pagina, de forma que el usuario
pensara “estoy en la pagina de coca-cola”.
 DESARROLLO DE SOFTWARE 6

Otro elemento importante que se debe tener en cuenta es que la pagina web debe contener un
material informativo del producto y de la empresa que esta promocionándolo, aunque esta
información no debe ser insuficiente tampoco puede sobrecargar de lectura a el cliente debido
a que probablemente la pase por alto, para enriquecer esta información se utilizan imágenes.

Podemos evidenciar como en la pagina oficial de la marca “Adidas” se encuentra varios menús
desplegables con las opciones hombres, mujeres , niños, deporte y marcas, en donde se
encuentra la variedad de productos que manejan y una imagen de cada uno
 DESARROLLO DE SOFTWARE 7

En esta imagen pudimos dar un ejemplo de lo ya anteriormente estipulado, puesto que en el

menú desplegable hombres se encuentran todos los productos disponibles por “Adidas” y los
precios que estas manejan para esta población determinada.

Actividad de Aprendizaje: 03_5 Retos de Aprendizajes o talleres

- De acuerdo a lo leído conformar equipo de 2 personas, dirigirse al Material de Apoyo

de la Guía y desarrollar los siguientes Retos de Aprendizajes
- Desarrollar los Retos de Html del 1 al 9 en el archivo 03_5_TALLER_RETOS_HTML:

<html lang=es>
<head>
<title>World Wide Web</title>
</head>
<body>
<h1>World Wide Web</h1>
<p>
En informática, la <strong><em>World Wide Web</strong></em>
(WWW) o Red informática mundial comúnmente conocida como la
web, es un sistema de distribución de documentos de
hipertexto o hipermedios interconectados y accesibles vía
Internet. Con un navegador web, un usuario visualiza sitios
web compuestos de páginas web que pueden contener texto,
 DESARROLLO DE SOFTWARE 8

imágenes, vídeos u otros contenidos multimedia, y navega a

través de esas páginas usando hiperenlaces.
<h2>Historia</h2>
<p>
La web se desarrolló entre marzo de 1989 y diciembre de 1990
por el inglés Tim Berners-Lee con la ayuda del belga Robert
Cailliau mientras trabajaban en el CERN en Ginebra, Suiza, y
publicado en 1992.
</p>
<p>
Desde entonces, Berners-Lee ha jugado un papel activo guiando
el desarrollo de estándares web (como los lenguajes de
marcado con los que se crean las páginas web), y en los
últimos años ha abogado por su visión de una web semántica.
</p>
<p>Fuente: <em>Wikipedia</p></em>
</html>

*un error notable en el código es que en la línea de código “ <html lang=es>” es que el
atributo es debe ir dentro de comillas

*los errores presentes en el código son en la línea “ <p>

En informática, la <strong><em>World Wide Web</strong></em>” el <em> debe ser
cerrado primero que el strong debido a que el strong es un elmento de línea que
contiene al em

*en el primer párrafo del contenido se encuentra en un elemento de bloque <p> pero al final de
este no se cierra

*en la línea de código <p>Fuente: <em>Wikipedia</p></em> se puede evidenciar que el

elemento de bloque <p> contiene al elemento de línea <em> y por ende este debe
ser cerrado primero que la etiqueta <p>

*finalmente podemos evidenciar que al finalizar el contenido cierra el html mas no realiza un
cierre del body