Diseñador de Paginas Web, Css y Javascritp.

MODULO 1: DISEÑO DE ESTRUCTURA DE PÁGINA WEB

Actividad 1: -Investiga en diferentes sitios web los siguientes tópicos y describe
cada uno de ellos:

Tema 1: Elementos de Páginas Web

I- Orígenes de la Web

1. Web 2.0
La Web 2.0 es una segunda generación de servicios basados en la Web, que
enfatiza en la colaboración online, la conectividad y la posibilidad de compartir
contenidos entre los usuarios.

2. Web 3.0
Es una Web extendida, dotada de mayor significado donde cualquier usuario
podrá encontrar respuestas a sus preguntas de formas más rápidas.

3. La W3C y los estándares

Son lenguajes Web, protocolos y tecnologías inter-operativas e
internacionales creadas con la finalidad de guiar la Web hacia su máximo
potencial a través del desarrollo de protocolos y pautas estandarizadas.

II- Lenguajes de etiquetas:

1. SGML
SGML o Standard Generalized Markup Language fue definido por la norma ISO
8879 en 1986 y desde entonces ha sido considerado el lenguaje estándar para
mantener los depósitos centrales de la estructura documental. Se trata de un
lenguaje para marcar y describir documentos con independencia total del
hardware y software utilizados.

2. XML
El XML es una adaptación del SGML (Standard Generalized Markup
Language), un lenguaje que permite la organización y el etiquetado
de documentos. Esto quiere decir que el XML no es un lenguaje en sí mismo,
sino un sistema que permite definir lenguajes de acuerdo a las necesidades.

3. HTML
HTML es la sigla de HiperText Markup Language (Lenguaje de Marcación de
Hipertexto) es un lenguaje es se utiliza comúnmente para establecer la estructura
y contenido de un sitio web, tanto de texto, objetos e imágenes. Los archivos
desarrollados en HTML usan la extensión .htm o .html. El lenguaje de HTML
funciona por medio de "etiquetas" que describen la apariencia o función del
texto enmarcado.

4. XHTML
El XHTML es un lenguaje que adapta el HTML al XML. Dicho de otro modo:
se trata de una adaptación del lenguaje HTML para que sea compatible con el
lenguaje XML.

5. HTML5
 Diseñador de Paginas Web, Css y Javascritp.
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión
del lenguaje HTML. Esta nueva versión (aún en desarrollo), y en conjunto con
CSS3, define los nuevos estándares de desarrollo web, rediseñando el código
para resolver problemas y actualizándolo así a nuevas necesidades. No se limita
solo a crear nuevas etiquetas o atributos, sino que incorpora muchas
características nuevas y proporciona una plataforma de desarrollo de complejas
aplicaciones web (mediante los API’s).

III-Otros lenguajes relacionados al desarrollo web:

1. CSS/CSS3
CSS/CSS3 es un lenguaje de diseño gráfico que permite definir y crear la
presentación de un documento estructurado escrito en un lenguaje de
marcado. Es muy usado para establecer el diseño visual de los
documentos web e interfaces de usuario escritas en HTML.

2. JavaScript
JavaScript es el nombre de un lenguaje de programación: es decir, un
lenguaje formal que brinda instrucciones a una computadora (ordenador)
para generar ciertos datos. Se utiliza sobre todo para producir recursos
interactivos en una página web. Por sus características, JavaScript es
un lenguaje imperativo, basado en prototipos y orientado a objetos.

3. Ajax
AJAX son las siglas de Asynchronous JavaScript And XML, (Javascript
asíncrono y XML). No es en sí un lenguaje de programación, sino una
nueva técnica que combina varios lenguajes de programación.
La ventaja de Ajax respecto a otros lenguajes de programación web es
la asincronía. Esto consiste en que cuando queremos intercambiar datos
con el servidor (por ejemplo enviar o comprobar un formulario, consultar
una base de datos, etc.), la página no se queda parada esperando la
respuesta, sino que se pueden seguir ejecutando acciones mientras
tanto.

4. Tecnologías y lenguajes del lado del servidor

La programación del lado del servidor entra en juego en el desarrollo de
páginas web con elementos dinámicos y de aplicaciones web. Esta
tecnología de desarrollo web se basa en la utilización de scripts que
ejecuta el servidor web, con ayuda del lenguaje de programación
adecuado, cuando un cliente solicita el contenido.

Una tarea frecuente de los scripts consiste en extraer los datos que se
necesitan de una base de datos y de integrarlos en el proyecto web.
Aunque el usuario accede al proyecto a través de páginas HTML, el
código fuente de los scripts permanece oculto.

5. Navegadores
 Diseñador de Paginas Web, Css y Javascritp.
Como navegador (o browser, en inglés) se designa, en informática, la
aplicación o programa que permite acceder a páginas web y navegar por
una red informática, principalmente Internet, ya sea desde computadoras
personales o dispositivos móviles.

6. Motores renderizados
Es un software que permite mostrar en pantalla contenido con estilo,
estructura y forma de acuerdo a contenido marcado e información de
formateo.

En otras palabras, el motor de renderizado se encarga de interpretar

las marcas (en HTML, XML, archivos de imágenes, etc.) o la información
de formato (como CSS, XSL, etc.), para mostrar el contenido formateado,
es decir, con las formas y estilos apropiados.

IV- Herramientas de desarrollo:

1. Software WYSIWYG
Se emplea en el terreno de la informática para nombrar a una
característica de los editores y de los procesadores de texto que
posibilitan trabajar con la información mientras se observa, de manera
directa, el resultado del trabajo.

Esto quiere decir que el usuario no observa un lenguaje de

programación, sino que se encuentra con los datos reflejados de manera
natural, tal como quedan al finalizar la edición o si se imprimen.

2. Otras alternativas
-GitHub
La plataforma de desarrollo de software líder en el mundo. GitHub es un
servicio que permite almacenar repositorios Git en la nube. En otras
palabras, es como un Google Drive para proyectos de software donde
puedes encontrar código.

-Intellij IDEA
Intellij es un entorno de desarrollo integrado. Un IDE (por sus siglas
en inglés) integra todas las herramientas que necesitas para desarrollar
una plataforma, de modo que éste cuenta con un editor de código, un
compilador, un depurador, etc.

-Stack Overflow
Stack Overflow es la comunidad online de programadores más grande
del mundo. Cada mes, la visitan más de 50 millones de desarrolladores.
Este es el lugar donde aprenden, comparten conocimientos e impulsan
su carrera.

3. Inspección de código desde el navegador

 Diseñador de Paginas Web, Css y Javascritp.
El inspector de elementos es una herramienta que nos permite analizar
los contenidos de un sitio web. Con él podremos ver el código fuente de
la página, así como analizar los diferentes elementos que la conforman.
Es muy útil cuando quieres ver cómo está hecho algo en una página o a
la hora de desarrollar para poder afinar estilos y depurar los scripts que
se ejecuten.

Tema 2: El Diseño De Una Página Web

I- Tipos de páginas Web:

1. Estática
Las páginas web estáticas son básicamente informativas y están
enfocadas principalmente a mostrar una información permanente, donde
el navegante se limita a obtener dicha información sin poder interactuar
con la página visitada. En las páginas web estáticas no se utilizan bases
de datos ni se requiere programación.

2. Dinámicas
Los sitios Web dinámicos son aquellos que permiten crear aplicaciones
dentro de la propia Web, otorgando  una mayor interactividad con el
navegante. Aplicaciones dinámicas como  encuestas y votaciones, foros
de soporte, libros de visita, envío de e-mails inteligentes, reserva de
productos, pedidos on-line, atención al cliente personalizada.

II- Puntos básicos en la elaboración de una página Web

1. El espacio
El espacio en la web tiene tres propósitos fundamentales: el interlineado,
que nos hace separar las líneas de texto unas de otras y que debe estar
en su justa medida, para que ni las líneas estén muy pegadas y nos
perdamos en el texto ni muy separadas para que no podamos seguir el
texto; el texto no debe nunca estar muy pegado al resto de objetos en la
pantalla; y debemos dejar huecos blancos para no saturar la página con
contenidos y darle equilibrio al diseño de la página.

2. Facilidad en la navegación
Los enlaces deben estar bien establecidos en la pantalla, fáciles de
localizar y de leer y que nos lleven donde queremos.
3. Colores
Sólo se necesita una paleta de tres colores para darle uniformidad a la
página. No hay que saturar de colorines la página, sino que, con 2 o 3
tonos de cada color tendremos todo lo que necesita una página web.

4. El tamaño de las imágenes

A nadie le gustan las imágenes pixeladas, así que tenga en cuenta el
tamaño de la imagen cuando las enlace o las suba a su página para que
no se vean los píxeles.
 Diseñador de Paginas Web, Css y Javascritp.

Tema 3: Estructura De Una Página Web

I- Jerarquía de directorio de un proyecto web

-Directorio de un solo nivel
Todos los archivos están contenidos en el mismo directorio, el cual es
fácil de soportar y entender sin embargo, cuando aumenta el número de
archivos o cuando hay más de un usuario un directorio de un solo nivel
tiene limitaciones considerables.

-Directorio de 2 niveles
Cada usuario tiene su propio directorio de archivos de usuario (user file
directory, UFD) cada UFD tiene una estructura similar, pero lista solo los
archivos de un usuario. Cuando comienza un trabajo de  usuario o se
conecta un usuario, se hace una búsqueda en el directorio de archivos
maestro (master file directory, MFD).

-Directorio con estructura de Árbol

Se puede visualizar como un árbol de dos niveles, la generalización
natural consiste en extender la estructura del directorio e un árbol de
altura arbitraria. Esta generalización permite a los usuarios crear sus
propios subdirectorios y organizar sus archivos con  base en esto.

Con un sistema de directorios con estructura de árbol, los usuarios

pueden tener acceso a los archivos de otros usuarios, además de sus
propios archivos.

-Directorios de Graficas A cíclicas

 Diseñador de Paginas Web, Css y Javascritp.
Una estructura de árbol prohíbe el compartimiento de archivos o
directorios. Una gráfica a cíclica (grafica sin ciclos) permite que los
directorios tengan subdirectorios y archivos compartidos. El mismo
archivo o subdirectorio puede estar en dos directorios diferentes. Una
gráfica  a cíclica es una generalización natural del esquema de
directorios con estructura de árbol. Cuando varias personas están
trabajando  como equipo, todos los archivos que se van a compartir
pueden colocarse juntos en un directorio.

Una estructura de directorios de grafica a cíclica es más flexible que una

estructura sencilla de árbol, pero también es más compleja.

II- Elementos de estructura para el diseño de una página Web: Concepto

1. Regla utilizada para validar y certificar una página web
1. Un sitio web de calidad siempre tiene un autor definido y
reconocible: El desarrollar contenidos no es gratis, generalmente
implica costos, y no pocos recursos humanos. Por lo tanto, el anonimato
no es propio de los sitios web con contenidos confiables.

2. Un sitio web de calidad se actualiza periódicamente: un sitio web

de calidad, está actualizándose constantemente.

3. Una web de calidad tiene propósitos definidos: un sitio web de

calidad, define sus propósitos comunicacionales y se guía por ellos.

4. Una web de calidad es objetiva: Es necesario que un sitio web de

calidad sea objetivo en el tratamiento de su información. Esto se debe
exigir tanto en la calidad de los contenidos como en el diseño de la
estructura de la web.

5. Un sitio web de calidad vela por la precisión en los

contenidos: este punto es clave para validar un sitio web y evaluar sus
contenidos.

6. Una web de calidad muestra sus fuentes: ya sabemos que casi el

70% de la información disponible en la web está en sitios web de
personas naturales.
 Diseñador de Paginas Web, Css y Javascritp.
7. Navegabilidad y estructura definida: buena navegabilidad hace
referencia a qué tan simple es para un usuario navegar por todo el sitio
web que visita sin salirse de él y sin pinchar enlaces rotos. A esto nos
referimos como un “diseño web eficiente”.

2. Reglas para escribir HTML

 Delimitar el ámbito de las etiquetas (salvo excepciones)
 Etiqueta interna se cierra antes que externa
 Etiquetas a nivel de bloque pueden contener etiquetas a nivel de
línea, pero no al revés
 Etiquetas no sensitivas a mayúsculas
 En vez de espacios agregar raya al piso

3. Etiquetas
Las etiquetas HTML son fragmentos de código que permiten crear
elementos HTML, estructuras básicas del lenguaje de
programación HTML en el que se escriben las páginas web porque es el
que entienden los navegadores.

4. Atributos
Los atributos de HTML son palabras especiales utilizadas dentro de la
etiqueta de apertura, para controlar el comportamiento del elemento.
Los atributos de HTML son un modificador de un tipo de elemento
de HTML.

5. Elemento HTML
Un elemento de HTML es un tipo de componente de documento
de HTML (Hypertext Markup Lengua), uno de los diversos tipos de
nodos de HTML (hay también nodos de texto, nodos de comentario y
otros).

6. Elementos en línea y en bloque

Una etiqueta de línea es aquella que ocupa el espacio mínimo necesario
en horizontal, y permite que otro elemento se coloque a su lado.

En cambio una etiqueta de bloque, ocupa todo el ancho disponible y no

permite que otro elemento se coloque a su lado (aunque aparentemente
tenga lugar suficiente).

7. Estructura básica de un archivo web

Diseñador de Paginas Web, Css y Javascritp.