MÓDULO 3 - DESARROLLO WEB: HTML Y CSS (1/2) de Google actìvate

Cómo se escribe una página webMÓDULO 3  ⌛

 


Mari Ángeles tiene una tienda física de quesos en pleno centro de Madrid. Muchos clientes que han venido a la ciudad de visita le han sugerido que abra una página web para poder hacer envíos a todos los lugares de España.

1.  ¿Qué debe tener en cuenta Mari Ángeles a la hora de abrir una página web?

Tiene que descargarse un programa sofisticado para escribir una página web.

     respuesta ........ NO 😞

2.  Debe crear enlaces para crear hipertexto.

    respuesta ........ SI  😆

3. Debe saber que las páginas web tienen su propio vocabulario y gramática.

  respuesta ........ SI   😆

4. Debe saber que HTML es una herramienta para diseñar tu página web.

  respuesta ........ NO 😞

Tener pendiente 👲👲👲

A la hora de crear una página web es necesario tener en cuenta que la creación del hipertexto ya que el hipertexto es la característica principal que define a la web. Las páginas web tienen su propio vocabulario, que define las etiquetas que se deben emplear y la gramática, que son las reglas que establecen cómo se deben emplear dichas etiquetas para escribir un documento.

Sofía está organizando un nuevo proyecto en su empresa y para ello necesita hacer una división de las tareas. El nuevo proyecto es la creación de una página web para buscar casa. Para este proyecto necesitará varios perfiles, entre ellos los perfiles de desarrollador web y diseñador web.

¿De cuáles de las siguientes tareas se encargará el diseñador web?

 respuesta    

1.Elegir la tipografía.

2.Elegir los colores.

3.Elegir los tamaños.

Tener pendiente 👲👲👲

Cuando se habla de desarrollo web, mucha gente lo confunde con diseño web. Existen dos puestos diferentes en los que cada perfil tiene unas tareas determinadas. Las tareas del diseñador web están más destinadas al diseño visual de la página web, es decir, se encarga de tareas como elegir la tipografía y el tamaño del texto que aparecerá en la página web, así como de la elección de los colores.

Teresa es especialista en arquitectura de la información. Hoy se ha reunido con un cliente y al final de la sesión, ha acordado presentarle un prototipo de web en los próximos días. Para ello, ha tenido que dejar definidos varios criterios básicos que necesita conocer antes de empezar a trabajar.

¿Podrías identificar, del siguiente listado, qué datos necesita conocer antes de empezar?


 respuesta    

1. Cuáles son los objetivos del cliente.

2.Cuáles son las necesidades de los usuarios de la web.

3.Cuáles son los requisitos del proyecto.+

Tener pendiente 👲👲👲

Efectivamente nunca debemos comenzar un prototipo sin definir todos estos elementos. En los prototipos nunca se trabaja el diseño, de ahí que se utilice una gama de grises. Un prototipo funcional de alta fidelidad es una maqueta dinámica o HTML que simula o tiene implementadas partes del sistema final a desarrollar.

Luis es desarrollador web. Hoy ha acudido a una charla TED muy interesante sobre los orígenes del lenguaje de marcado. El ponente ha comentado que SGML es el padre de HTML y que, como todos los hijos, HTML tiene cosas en común con su padre, pero también rasgos propios.
Identifica, del siguiente listado, qué etiquetas son propias de HTML.

 respuesta    

 <a href="">


Tener pendiente 👲👲👲

SGML es un sistema de reglas de etiquetado surge en base a la ISO 1986 sobre organización y etiquetado de texto. Actualmente su equivalente es XML. HTML es un lenguaje de marcado y etiquetado con base en SGML su principal característica es la etiqueta para enlaces o hipervínculos <a href="">.


Marta quiere aprender a programar en HTML para progresar en su empresa. Está visitando tutoriales para comenzar su aprendizaje en HTML. Está revisando en concreto la estructura de los elementos que lo componen.

Ayuda a Marta seleccionando la opción correcta en cada una de las siguientes opciones.



        respuestas    


 1.Los atributos pueden llevar un valor.

  respuesta ........ SI  😆

2.La etiqueta final lleva atributos.
 
  respuesta ........ NO 😞

3. El atributo va después del contenido.

  respuesta ........ NO 😞

4. La etiqueta final se escribe con /.
  
  respuesta ........ SI  😆
Tener pendiente 👲👲👲

El orden dentro de los elementos de HTML es muy importante. Es el siguiente: etiqueta inicial, atributo, valor (pueden llevarlo o no), contenido y etiqueta final. La etiqueta final nunca lleva atributos y se caracteriza por llevar una /, es decir, etiqueta inicial , etiqueta final >.

David imparte clases de programación en HTML y va a realizar la primera práctica con sus alumnos. En esta práctica tienen que realizar una sencilla simulación creando un código utilizando las principales etiquetas y creando así los elementos para una demo.

Ordena el siguiente listado de etiquetas para que la demo funcione correctamente.

    respuestas    

 1. <html>

 2.<title>

 3.<h1>

 4.</html>

Tener pendiente 👲👲👲

Es muy importante recordar cerrar las etiquetas. La sección , a diferencia de la , sí que va a mostrar todo lo que se escriba en la página web. El código se puede escribir seguido o espaciado. Esto no implicará ningún cambio en la programación, lo importante es crear los elementos siguiendo el orden de los componentes correcto y teniendo en cuenta sus características específicas.

Jaime ya lleva bastante tiempo programando en HTML, charlando con Marta sobre su primera y exitosa experiencia con el bloc de notas de Microsoft, le ha recomendado utilizar el editor Notepad++ que dispone de herramientas muy útiles que facilitan la creación de código.

Señala qué opciones ofrece Notepad++.

respuestas    

 1.Lista para autocompletar etiquetas.

 2.Emparejamiento de etiquetas.

 3.Cierre de partes de la página.

Tener pendiente 👲👲👲

Notepad++ se puede descargar en el sistema operativo. Es un editor web con licencia GLP que permite, una vez descargado, editar cualquier fichero pulsando el botón derecho con la opción edit with Notepad++. La opción Control+ permite desplegar una lista para autocompletar las etiquetas. Seleccionando las etiquetas empareja la etiqueta de apertura con la de cierre, además, permite cerrar páginas para trabajar únicamente con la que se necesiten. Por último y muy importante, permite modificar los saltos de línea y cambiar el formato a UNIX y Macintosh.

Marta conoce bien cuáles son las palabras que forman el lenguaje HTML pero tiene dudas sobre las reglas que indican cómo combinar el vocabulario para formar textos complejos, es decir, la gramática.

Selecciona la opción correcta sobre reglas gramaticales comunes a todas las versiones de HTML.

respuestas    

 1.No todas las etiquetas tienen que cerrarse.

   respuesta ........ NO 😞

2.Los elementos aninados pueden seguir el orden que tú consideres.

  respuesta ........ NO 😞

3.Las etiquetas siempre deben ir en mayúsculas.

  respuesta ........ NO 😞

4.Los valores de los atributos siempre deben ir entre comillas simples o dobles.

 respuesta ........ SI  😆

Tener pendiente 👲👲👲

Además de que los atributos vayan entre comillas simples o dobles, se debe recordar otras reglas como que las etiquetas deben cerrarse, que pueden ir en minúsculas y que los elementos tienen que anidarse siguiendo el orden establecido. También es aconsejable utilizar los nombres de los ficheros del alfabeto inglés, los números, el guión y el guión bajo. Se pueden utilizar otros caracteres pero pueden dar problemas. Por último, es importante recordar que las extensiones de las páginas web son .htm o .html.

Alicia quiere incorporar en su página web diferentes tipos de listas. Unas listas atenderán a las características de los productos, por lo que el orden no es importante. Otras listas dependerán de la demanda de los productos, que serán expuestos en ranking. La última lista corresponderá al glosario de términos disponible para sus clientes.

¿Cuáles son los criterios que Alicia tiene que considerar dependiendo del tipo de lista? ¿Qué atributos puede utilizar con HTML4?

respuestas    

1.No ordenadas 

respuesta ........Los Elementos se indican con símbolos (cuadros ,circulos,rombos,etc.)

2.Ordenadas 

respuesta ........Se identifica con la etiqueta <ol>

3.Descriptivas

respuesta ........La descripción de un termino  se define con <dd>

4.Start y Taype

respuesta ........Atributos de Html4 para <ol>

Damián está terminando su trabajo fin de máster y tiene que revisar toda la bibliografía que ha utilizado para hacerlo. Tiene que incluir también varios enlaces a páginas web y a documentos externos pero tiene que tener cuidado a la hora de escribir estos enlaces.

¿Qué consejos debería seguir Damián para que sus enlaces fueran comprensibles y realizaran efectivamente su función?


respuestas    

 1.Cuidado con las Mayúsculas y Minúsculas 

 2.Cuidado con los Caracteres Extraños 

 3.Cuidado con las rutas en los Enlaces 

Tener pendiente 👲👲👲

A la hora de crear un enlace es importante tener cuidado con las mayúsculas y las minúsculas. Normalmente se recomienda usar letras minúsculas. Hay que tener cuidado a la hora de introducir caracteres extraños en los enlaces, ya que pueden resultar confusos. Por último, se debe prestar especial atención a las rutas de los enlaces creados para que redirijan al usuario al punto deseado.

Rocío está creando una página web para subir actividades a sus alumnos de inglés. Hasta ahora siempre había utilizado el sistema operativo Windows, pero hace unos meses se ha comprado un ordenador de Apple por lo que ahora tiene que utilizar Macintosh. Ha visitado foros para ver cómo utilizar editores y ha leído que, por ejemplo, los editores no siempre funcionan de la misma manera en los diferentes sistemas operativos.

De la información que ha podido recopilar Rocío sobre los editores de texto, ¿cuáles de las siguientes opciones no son correctas?

respuestas    

 1.Los Editores Son Todos de Pago

 2.Se debe acostumbrar a un mismo editor 

Tener pendiente 👲👲👲

Existen editores de texto gratuitos y de pago, y dentro de estos hay editores de texto que sirven para Windows, otros para Linux y otros para Macintosh. Es importante saber trabajar con más de un editor de texto.

Concha es ingeniera de telecomunicaciones jubilada. Ha trabajado en este sector toda su vida por lo que tiene un alto conocimiento de lo que ocurre al usar los navegadores web. Ha creado un blog de dudas para usuarios de HTML en el que va a intentar resolver todas las dudas que los usuarios le propongan.

¿Cuáles son los tres errores típicos al utilizar HTML?


respuestas    

 1. Saltos en Linea 
 2. Espacios en Blanco 
 3.Referencias  de Caracteres 

Tener pendiente 👲👲👲

Los tres errores típicos más cometidos son: utilizar los saltos en línea de manera errónea (por ejemplo utilizándolos en el contenido de un párrafo), los espacios en blanco que no se detectan y las referencias de caracteres, ya que se utilizan de forma errónea.


Susana va a empezar a realizar un prototipo de web para un cliente. Le han enviado una estructura de carpetas para tener organizado todo el material relativo a su proyecto.

Ayúdala organizándolas de tal forma que sepa qué incluir en cada fase del proyecto en cada una de ellas.

respuestas    

 1Prototipos.
 2.Documento Maestro
 3.Registro de Cambio
 4. Finales

Tener pendiente 👲👲👲

Es importante tener una carpeta en la que ordenes tus prototipos, y guardar los originales hacienco una copia del documento maestro. Es aconsejable trabajar con editables y registrar los cambios relevantes del diseño en un documento además de preparar versiones finales independientes para subirlas a Internet.

Cómo se escribe una página web


 1 Cuando creamos un fichero con código HTML tenemos que guardarlo con la extensión:

Respuesta ⌛

 .HTML

 2.El diseño visual de una página web define:
 
Respuesta ⌛

El look&feel de la página.

3. ¿Qué es un Wireframe en el desarrollo de una página web?

Respuesta ⌛

Un dibujo que representa la estructura visual de una página web, indica qué contenido debe de estar presente y define el comportamiento funcional de la misma.

4.¿Cuál de estos elementos no estaba incluido en la primera versión de HTML?

Respuesta ⌛

Tablas.

Comentarios

Entradas más populares de este blog

MÓDULO 5 - DESARROLLO WEB: HTML Y CSS (1/2)

MÓDULO 4 - DESARROLLO WEB: HTML Y CSS (1/2)