Taller 23 Abril

Servicio Nacional de Aprendizaje – SENA
Fecha:
REGIONAL TOLIMA
CENTRO DE COMERCIO Y SERVICIOS Versión 1.0
Sistema de Gestión ANALISIS Y DESARROLLO DE SISTEMAS DE INFORMACION
de la Calidad Página 1 de 2
TALLER HTML Y DESARROLLO DE UN PROYECTO WEB
TALLER PRÁCTICO Commented [1]: A TRABAJAR CABRONES

Commented [2]: sapo
Objetivo: Analizar e identificar los aspectos más relevantes en el desarrollo de un proyecto web, además
de construir el instrumento de aplicación al cliente potencial que requiere su implementación. Commented [3]: :3
Actividades:
Realizar las consultas correspondientes en internet, más las cibergrafia sugerida, para dar respuesta a
los siguientes interrogantes.
1. En qué consiste w3c, cual es su función, quienes lo conforman, cuando surgió.

2. Ubique en la web sitios donde pueda referenciar al menos cinco errores comunes para una pagina web,
enumérelos y si es posible de soluciones al problema
3. Ubique en internet el error más común encontrado en el diseño de un sitio web, analícelo y discuta con
sus compañeros de equipo la causa.
4. Listar las páginas web con mejor diseño para lo que va transcurrido del año 2018. Mencione las causas
de obtener este calificativo y quien es la entidad, sitio o ente con el criterio para hacer la clasificación.
5. Realice una consulta sobre el uso adecuado de los colores en el diseño de sitios web.
6. Defina cuales son las etapas del desarrollo de un sitio web.
(http://www.slideshare.net/movieclip/etapas-del-desarrollo-web)
7. Identifique en la red, 10 consejos o tips a tener en cuenta en el desarrollo de un proyecto web
(http://www.cristalab.com/blog/8-consejos-para-enfrentar-un-proyecto-web-c74834l/)
8. Visite los siguientes link:
72 PREGUNTAS PARA SUS NUEVOS CLIENTES WEB
● http://www.eldomo.net/blog/72-preguntas-para-sus-nuevos-clientes-web/
PREGUNTAS QUE TE AYUDARÁN A COMENZAR UN NUEVO PROYECTO WEB

● http://applendamos.com/2010/09/20/preguntas-que-te-ayudaran-a-comenzar-un-nuevo-proyecto-web/
Luego de haber realizado la lectura, genere un documento de recolección de información el cual luego de ser
analizado y depurado, será el instrumento que aplicará el día que visite al cliente interesado en el desarrollo
de un sitio web.
RESPONDA LOS SIGUIENTES CONCEPTOS
9. Que es una página web

10. Defina las siglas HTML
11. Cuáles son las características de HTML
12. Que es un documento Hipertexto
13. Que es Hipermedia
14. Qué tipo de licencia utiliza HTML
15. Establezca la estructura básica de programación para empezar a codificar una página web en HTML
16. Defina que función hacen las siguientes etiquetas:
INICIO DE ETIQUETA FIN DE ETIQUETA FUNCIÓN

BASE
<HTML> </HTML> Define la raíz del documento
<HEAD> </HEAD> Define información hacerca
del documento
<TITLE> </TITLE> Define un título para el
documento
<BODY> </BODY> Representa el contenido
principal de un documento.
TEXTO
<FONT> </FONT> Esta etiqueta permite
controlar tres atributos del
texto que se encuentra
encerrado entre ellas:
Tamaño (SIZE), el color de
letra (COLOR) y el tipo de
letra (FACE).
<BR> </BR> Define un salto de línea.
<P> </P> Define un párrafo
<N> </N> Negrita
<K> </K> Cursiva
<BLOKQUOTE> </BLOKQUOTE> Define una sección que tiene
otra fuente
ALINEACIÓN
<CENTER> </CENTER> Este elemento hace que el
texto englobado esté
centrado dentro de los
márgenes. No soportado en
HTML5. Declarado en
desuso en HTML.
<LEFT> </LEFT> La propiedad izquierda afecta la
posición horizontal de un
elemento posicionado. Esta
propiedad no tiene ningún
efecto sobre el elemento no
posicionado
<RIGHT> </RIGHT>> alineación de texto a la izquierd
y a la derecha.
TABLA
<TABLE> </TABLE> Define una tabla
<TR> </TR> Define una fila en una tabla
<TD> </TD> Define una celda en una
tabla
OTROS
<LI> </LI> Define un objeto de una lista
<OL> </OL> Define una lista ordenada
<UL> </UL> Define una lista desordenada
<BGSOUND> </BGSOUND> Para colocar sonido
<IMG> <7IMG> Define una imagen
“Estudiar no es un acto de consumir ideas, sino de crearlas y recrearlas” Paulo Freire

SOLUCIÓN
1.En qué consiste w3c, cual es su función, quienes lo conforman, cuando surgió?
R/ es el sitio para desarrolladores web, la cual consiste por medio de tutoriales y referencias sobre lenguajes de
desarrollo web como HTML,CSS,JAVASCRIPT,PHP,SQL,w3,CSS y BOOTSTRAP.
Fue creado en 1998 por Refsnes Data, una compañia de noruega de desarrollo de consultoría de software.
2.Ubique en la web sitios donde pueda referenciar al menos cinco errores comunes para una página web, enumérelos
y si es posible de soluciones al problema.?
R/ ncorrect usage of googletag.Slot defineSizeMapping: Size mapping has to be an array
· HYBS >> thirdQuartile

· Failed to load resource: net::ERR_TIMED_OUT
· Incorrect usage of googletag.Slot defineSizeMapping: Size mapping has to be an array
3.Ubique en internet el error más común encontrado en el diseño de un sitio web, analícelo y discuta con sus
compañeros de equipo la causa.
R/ en ocasiones el poco diseño profesional, en alguno de los casos en manejo de los colores y las formas de los diseños,
también hay una gran diferencia entre lo bonito y lo funcional al momento de crear una página ya sea por las
animaciones en los botones , mal uso del lenguaje de programación, aveces dejamos contenido desactualizado en la
página web y no la actualizan también un uso excesivo de anuncios y publicidad. no poder contar con una versión móvil
en muchos de los casos ,funcionalidades como los botones dañados o enlaces internos que no redireccionan a ningún
lado, la falta de confiabilidad y seguridad.
concluyendo como puedes ver, existen muchas razones para que una página web fracase.
Has visto que los errores al diseñar páginas web que te comento son muy básicos y por ende sencillos de solucionar. Yo
diría que tus acciones a partir de ahora deben estar dirigidas a ponerle cariño y dedicación a tu pagina web para alcanzar
el éxito. Si le dedicas más tiempo a mejorar los detalles de tu página, de seguro tendrás un resultado mejor adaptado a
lo que representa tu negocio.
4. Listar las páginas web con mejor diseño para lo que va transcurrido del año 2018. Mencione las causas de
obtener este calificativo y quien es la entidad, sitio o ente con el criterio para hacer la clasificación.
R/
● Formigari (http://www.formigari.it/)
Empezamos con una creación de diseño web realizada para Formigari, una empresa dedicada a la instalación y
modelado de trabajos hechos en piedra para proyectos de interiorismo lujoso. El concepto de mostrar un modelo 3d de
lo que vendría a ser un trozo de piedra natural, haciendo una transformación a un bloque de piedra trabajado es
impresionante. Si navegamos por los apartados interiores, veremos que nos encontramos con un diseño web muy fino y
elegante. Minimalista y sobrio. Todo esto, junto con la elección tipográfica y las transiciones, hacen de éste sitio web
uno de los mejores diseños web del 2017 2018.
● a world with no heroes (https://noheroes.ghostrecon.com/)

Otra vez los cracks de Make Me Pulse, esta vez junto con DDB Paris, nos sorprenden con un interactivo sitio web, el cual
nos muestra de manera interactiva, una ficción sobre un cartel de narcotraficantes en Bolivia. Seduciendo al usuario con
un impresionante vídeo presentación, acabaremos sumergidos en un mapa interactivo que parece más un minijuego
que un sitio web.
● Dunkirk (https://webvrgame.dunkirkmovie.com/)
Dunkirk es un sitio promocional para un film que está creando Warner’s Brothers. Para publicitar la película, han creado
este impresionante website, donde dentro de un entorno multijugador, debemos escapar del enemigo. El diseño y
desarollo web están realizados por JAM3, un estudio de diseño web de Canadá.
● Ouigo-Let’s play (http://letsplay.ouigo.com/)

Desarollado por Merci-Michel y Rosapark, este website, nos brinda la oportunidad de jugar en un original pinball. Una
experiencia web muy trabajada.
● mendo (https://www.mendo.nl/)
Desmarcandonos de la tónica anterior, donde el uso de objetos o entornos 3D tomaban el protagonismo, destacamos el
sitio web de Mendo. Un magazine muy visual con un diseño impecable además de un trabajo de usabilidad muy bien
elaborado. Imágenes a gran tamaño, grids de punta a punta y tipografías bien grandes.
● open continents (http://opencontinents.com/) FAV

Open Continents es un website que mediante una exposición cinematográfica, nos cuenta varias historias alrededor del
globo. Mediante el ratón, podemos hacer zoom y desplazarnos por todo el mundo en busca de las historias. Este
impresionante diseño web ha sido creado por Kuva_x_Toyfight, estudio de diseño web en Reino Unido.
● Rainforest Foods Experience (https://www.rainforestfoods.com/) FAV

Desarrollado y diseñado por Immersive Garden, este sitio web, es una experiencia visual, en la que nos adentramos en
un bosque nombrado “Rainforest Foods”. El sitio web puede tener ciertos problemas en cuanto a la carga de
contenidos, pero una vez cargado, veréis lo impresionante que resulta.
● Gleec chat (https://gleec.com/)

Este se trata de un sitio de promoción para la APP Gleec Chat. De forma muy dinámica, podremos informarnos de todas
las funcionalidades y ventajas que nos ofrece esta aplicación de chateo, donde ponen en especial énfasis a la seguridad y
cifrado de los datos. El sitio web ha sido realizado al igual que el anterior, por Immersive Garden.
● your Beyond awaits (http://outlanderphev-beyondawaits.com/)

Este interactivo sitio web, ha sido diseñado para Mitsubishi, la reconocida marca de automóviles. El sitio web cuenta con
unas impresionantes animaciones realizadas en Canvas. Mostrando un vídeo presentación como entrada al website. Una
vez finalizada la intro, nos sumergimos en un mapa interactivo sobre el cual realizamos una ruta guiada que avanza
según realizamos scrolldown. Las transiciones y animaciones son espectaculares, además del mapa realizado a todo
detalle.
5. Realice una consulta sobre el uso adecuado de los colores en el diseño de sitios web.
R/ Combinación monocromática
En este caso se apuesta por un solo color y se utilizan variaciones de saturación de este para obtener distintos tonos. Es
una elección de muy bajo contraste.
Combinación complementaria
Una combinación de muy alto contraste. Los colores complementarios son los que están uno delante del otro en la
rueda de color, como por ejemplo rojo y verde o azul y amarillo. Crea una imagen muy vibrante, aunque es poco
recomendable usarlo en grandes cantidades, sirve para destacar algo.
Combinación colores triádicos
Se trata de un esquema que usa colores equidistantes alrededor de la rueda. También tienen un resultado vibrante. Es
importante usar un color dominante y los otros para destacar elementos para obtener un equilibrio.
Combinación colores tétradas
Utiliza un rectángulo en la rueda, de forma que usa cuatro colores en dos grupos de pares complementarios. Las
posibilidades de variación son enormes, pero también funciona mejor si se usa un color dominante y el resto para
complementar.
Combinación colores análogos
Una combinación que recurre a colores que están uno junto al otro en la rueda, ofreciendo un diseño que transmite
serenidad, armonía y confortabilidad. Sin embargo, es más difícil obtener contraste, por lo que es recomendable usar
uno dominante con un segundo de apoyo, y utilizar el tercero junto a negro o gris para acentuar elementos.
Combinación colores split-complementarios
Una variación del anterior en el que se utiliza un color base junto a los dos adyacentes a su complemento. Ofrece un
buen equilibrio de armonía con elementos destacados.
6. Defina cuales son las etapas del desarrollo de un sitio web?.
R/ preparación estratégica:Es la fase de conocimiento del producto y de la realización de una hoja

de ruta que guíe tanto al cliente como al ejecutor. Detectar el objetivo de negocio y la estrategia idónea son
las bases para que el resto de procesos se realicen adecuadamente.
Recopilación de datos:En la primera etapa es importante recabar información entre las partes interesadas sobre
los objetivos, el público al que va dirigido y el tipo de contenidos que albergarán las páginas que forman parte del
sitio web.
Investigación y planificación:En este punto cada departamento investiga sobre el mercado y el

punto de partida en el que se encuentra. Cobra especial importancia saber qué elementos y funcionalidades
se incluirán.
Diseño:Una vez se tiene el “esqueleto” del proyecto y se ha decidido a quién se dirige, cómo se
presenta la información y cuáles serán sus puntos fuertes respecto a lo que ofrece el mercado, comienza
la fase de especificación de los estilos.
Desarrollo:Llegados a este punto crucial es necesario establecer cuáles son las tecnologías más
adecuadas para el proyecto y cómo se comunicarán entre sí.
Lanzamiento: Aunque pueda parecer que esta etapa solo comprende el lanzamiento del producto al
mercado, en realidad es un momento clave en el que los entornos y los equipos deben estar muy bien
alineados para que todas las piezas “encajen”
7.Identifique en la red, 10 consejos o tips a tener en cuenta en el desarrollo de un

proyecto web?
R/Disposición:Mantener el diseño de tu página de inicio limpio y fácil de usar es esencial. Los visitantes
del sitio tienden a sentirse abrumados si se les presenta una cantidad excesiva de información e imágenes .
Imágenes:Una imagen vale más que mil palabras. Cuando se trata de tu página de inicio, este dicho tiene
aún más veracidad. Las fotos tienen la capacidad de permitir que tus visitantes sepan de lo que tu sitio web se
trata.
Colores y Fondos:Estos elementos simples pero importantes marcan el tono de tu página de inicio, y
probablemente será el mismo a través de todas las páginas de tu sitio.
Botones:No todas las páginas de inicio tendrán o incluso necesitarán botones, pero si vas a usarlos debes
hacerlo bien. Tus botones o llamadas a las acción, son puertas de enlace a otras páginas, sitios web, artículos
de promoción, galerías de productos y mucho más.
Texto:No se puede tener una página de inicio perfecta sin un buen texto sólido. Tu primer objetivo debe ser
garantizar que los visitantes entiendan de inmediato de qué se trata tu sitio
cargar rapido: despertar interés al usuario en tan solo 10 segundos .
Mapa: si el sitio web es muy grande lo mejor es tener un mapa para facilitar el acceso al usuario.
Atrápalo con un titulo poderoso:Si pones un titulo que llame poderosamente su atención, atraerás
su interés por ver que es lo que tienes para el, y permanecerá mas tiempo lo que aumenta la posibilidad de
que puedas venderle tus productos o servicios.
Pon a la vista lo que ofreceUn stakeholder es, según R. E. Freeman (creador del término):
“Quienes pueden afectar o son afectados por las actividades de una empresa”. Es decir
socios, colaboradores, distribuidores, clientes, etc. El desarrollo puede implicar colaboración
con ellos, o herramientas específicas para sus necesidades relacionadas con la
empresa.s:Enséñales claramente y desde un primer momento los productos o servicios que vendes, si tus
prospectos no están seguros de que va tu sitio web, se confundirán se marcharan y es muy poco probables
que les recuperes.
8:Qué preguntas harían para el desarrollo de una página web?

R/ ¿Quiénes son los clientes?
¿Quién es la competencia?
¿Qué tiene la competencia que queramos tener nosotros?
¿Quiénes son los stakeholders?
Un stakeholder es, según R. E. Freeman (creador del término): “Quienes pueden afectar o son
afectados por las actividades de una empresa”. Es decir socios, colaboradores, distribuidores,
clientes, etc. El desarrollo puede implicar colaboración con ellos, o herramientas específicas para sus
necesidades relacionadas con la empresa.
9:Que es una página web?.

R/es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces,
imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida
mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede
proporcionar acceso a otras páginas web mediante enlaces de hipertexto.
10.Defina las siglas HTML?.

R/es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet. Se trata de la sigla que
corresponde a HyperText Markup Language, es decir, Lenguaje de Marcas de Hipertexto, que podría ser
traducido como Lenguaje de Formato de Documentos para Hipertexto
11. El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.
● El Web tenía que ser hipertexto y debía ser fácil navegar por él.
● Tenía que ser compatible con todo tipo de ordenadores (PCs, Macintosh, estaciones de trabajo...) y con todo
tipo de sistemas operativos (Windows, MS-DOS, UNIX, MAC-OS,...).
● Debía ser dinámico: el proceso de cambiar y actualizar la información debía ser ágil y rápido.
● El Web tenía que ser distribuido: La información repartida en páginas no muy grandes enlazadas entre sí.
Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación
de páginas Web.
12. Documento Hipertexto: Documento digital que aprovecha la ventaja de la computabilidad para permitir un acceso no
secuencial a la información. En este sentido, se entiende un hipertexto como contenido de la información, incluyendo los
fragmentos de información y las conexiones entre esos fragmentos, indiferentemente de cuál sea el sistema utilizado
para leer o escribir tal documento.
13. Hipermedia: es el término con el que se designa al conjunto de métodos o procedimientos para escribir,
diseñar o componer contenidos que integren soportes tales como: texto, imagen, video, audio, mapas y otros
soportes de información emergentes, de tal modo que el resultado obtenido, además, tenga la posibilidad de
interactuar con los usuarios.
14. La Licencia Pública General de GNU o más conocida por su nombre en inglés GNU General Public License
(o simplemente sus siglas en inglés GNU GPL) es la licencia de derecho de autor más ampliamente usada en el
mundo del software libre y código abierto,6 y garantiza a los usuarios finales (personas, organizaciones,
compañías) la libertad de usar, estudiar, compartir (copiar) y modificar el software. Su propósito es doble: declarar
que el software cubierto por esta licencia es libre, y protegerlo (mediante una práctica conocida como copyleft) de
intentos de apropiación que restrinjan esas libertades a nuevos usuarios cada vez que la obra es distribuida,
modificada o ampliada. Esta licencia fue creada originalmente por Richard Stallman fundador de la Free Software
Foundation (FSF) para el proyecto GNU.
15. Estructura básica

● Cada página comienza con: < HTML > .
● A continuación viene la cabecera, delimitada por < HEAD > y < /HEAD > .
● Después, el comando < BODY >, que indica el comienzo del cuerpo de la página. Las
instrucciones HTML se escribirán a continuación, y finalizarán con < /BODY >.
● La página acabará con < /HTML > .
Es decir:
<HTML>
<HEAD>
Definiciones de la cabecera
</HEAD>
<BODY>
Instrucciones HTML
</BODY>
</HTML>
16.
Webgrafía
● https://www.ibiblio.org/pub/linux/docs/LuCaS/Manuales-LuCAS/doc-curso-html/doc-curso-
html/x38.html
● http://www.hipertexto.info/documentos/hipertexto.html
● https://materialesmarketing.wordpress.com/2012/05/09/diseno-de-paginas-web-10-aspectos-basicos-a-
tener-en-cuenta-para-disenar-una-web/
● https://es.wikipedia.org/wiki/Hipermedia
● https://es.wikipedia.org/wiki/P%C3%A1gina_web
● http://fpsalmon.usc.es/genp/doc/cursos/html/estructura.html

Taller 23 Abril

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Taller 23 Abril

Uploaded by

Copyright:

Available Formats

Servicio Nacional de Aprendizaje – SENA

TALLER PRÁCTICO Commented [1]: A TRABAJAR CABRONES

1. En qué consiste w3c, cual es su función, quienes lo conforman, cuando surgió.

PREGUNTAS QUE TE AYUDARÁN A COMENZAR UN NUEVO PROYECTO WEB

RESPONDA LOS SIGUIENTES CONCEPTOS

9. Que es una página web

INICIO DE ETIQUETA FIN DE ETIQUETA FUNCIÓN

“Estudiar no es un acto de consumir ideas, sino de crearlas y recrearlas” Paulo Freire

R/ ncorrect usage of googletag.Slot defineSizeMapping: Size mapping has to be an array

· HYBS >> thirdQuartile

● a world with no heroes (https://noheroes.ghostrecon.com/)

● Ouigo-Let’s play (http://letsplay.ouigo.com/)

● open continents (http://opencontinents.com/) FAV

● Rainforest Foods Experience (https://www.rainforestfoods.com/) FAV

● Gleec chat (https://gleec.com/)

● your Beyond awaits (http://outlanderphev-beyondawaits.com/)

Combinación colores triádicos

Combinación colores tétradas

Combinación colores análogos

6. Defina cuales son las etapas del desarrollo de un sitio web?.

R/ preparación estratégica:Es la fase de conocimiento del producto y de la realización de una hoja

Investigación y planificación:En este punto cada departamento investiga sobre el mercado y el

7.Identifique en la red, 10 consejos o tips a tener en cuenta en el desarrollo de un

cargar rapido: despertar interés al usuario en tan solo 10 segundos .

8:Qué preguntas harían para el desarrollo de una página web?

9:Que es una página web?.

10.Defina las siglas HTML?.

15. Estructura básica

You might also like