Módulo de Diseño de Pagina Web
Objetivo.El diseño web es una actividad que consiste en la planificación, diseño, implementación y mantenimiento de sitios web. No es simplemente la implementación del diseño convencional ya que se abarcan diferentes aspectos como el diseño gráfico web, diseño de interfaz y experiencia de usuario, como la navegabilidad, interactividad, usabilidad, arquitectura de la información; interacción de medios, entre los que podemos mencionar audio, texto, imagen, enlaces, video y la optimización de motores de búsqueda.
ETIQUETAS DE HTML
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen.
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas Vacías son <hr>, <img>, <input>, <link>, <meta>, <paramDe clic aqui en aulaclic> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.
Por ejemplo,<ahref="https://www.aulaclic.es">Visita aulaClic</a>
BLOC O BITÁCORA
Es un sitio Web donde se recopilan cronológicamente mensajes de uno o varios autores, sobre una temática en particular siempre conservando el autor la libertad de dejar publicado lo que crea pertinente, también llamado blog o bitácora.
ETIQUETAS DE HTML
Las etiquetas (marcas) delimitan cada uno de los elementos que componen un documento HTML.
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien la sintaxis de las etiquetas. El siguiente esquema muestra las partes de una etiqueta HTML genérica.
La etiqueta de apertura está delimitada por el signo < "menor que", a continuación el propio nombre de la etiqueta (en este caso p), y opcionalmente, un atributo (en este caso class="fondo"), finalmente el signo > "mayor que".
A continuación está el texto del contenido de la etiqueta, lo más frecuente es un texto, pero podría ser otra etiqueta, una imagen.
La etiqueta de cierre está delimitada por el signo < "menor que", a continuación la barra inclinada /, el propio nombre de la etiqueta (en este caso p), y finalmente el signo > "mayor que".
Algunas etiquetas no tienen contenido, y se cierran sobre sí mismas, no tienen etiqueta de cierre, se llaman etiquetas vacías, como la etiqueta <br>. En estas etiquetas opcionalmente se puede colocar una barra justo antes del signo >, por ejemplo: <br />. La etiqueta <br> produce un salto de línea. Las etiquetas vacías no tienen contenido pero si pueden tener atributos. Algunas otras etiquetas Vacías son <hr>, <img>, <input>, <link>, <meta>, <paramDe clic aqui en aulaclic> y <source>.
En una etiqueta, la primera palabra que aparece es el nombre de la etiqueta. También podemos encontrar atributos con sus valores, siguiendo el formato <etiqueta atributo1="valor" atributo2="valor">. La forma más correcta es escribir el nombre de la etiqueta y los atributos en minúscula, y los valores entre comillas dobles.
Por ejemplo,<ahref="https://www.aulaclic.es">Visita aulaClic</a>
Etiquetas de HTML utilizadas
- <div> </div>:sirve para asignar un párrafo de texto
- </p>:permite asignar un párrafo de texto.
- <html>:es un lenguaje de marcado que se utiliza para el desarrollo de páginas de Internet.
- <head>:contiene información sobre la página. Por ejemplo contiene etiquetas que pueden decir de qué trata la página, el título que debe de mostrar en la barra del navegador, o código javascript y estilos, que pueden estar en el propio encabezado o como enlaces a otros archivos.
- <body>:encontramos el contenido de la página, lo que se ve a través del navegador: texto, imágenes, enlaces, tablas, etc... Por lo tanto dentro del <body> pueden ir la gran mayoría de las etiquetas html.
- <h1>:es el elemento HTML utilizado, de manera habitual, para identificar la cabecera más importante en una página web.
- <h2>:es un elemento similar al H1, que indica títulos de importancia para subsecciones del documento web actual. Por su naturaleza, puede haber varios H2 en un sitio, que indiquen los diferentes títulos de importancia de la página en la que nos encontramos.
- <h3>:nos permiten definir títulos de subapartados de un bloque encabezado con un H2.
- <class>:asigna nombres de clases al elemento.
- <title>:texto informativo o título del elemento.
- <br>:permite un salto de linea en el texto.
Página Web
¿Qué es una pagina web?
Una página
web, o página electrónica, página digital, o ciber página es
un documento o información electrónica capaz de contener
texto, sonido,videos, 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. Las páginas web pueden
estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el
acceso únicamente a redes privadas.
Existen dos tipos de páginas: estáticas y dinámicas
¿Qué son paginas estáticas?
Es aquella que está compuesta de una serie de archivos que contiene el código HTML que constituye la página en sí y que permiten mostrar los textos, imágenes, vídeos etc. que conforman el contenido de la página.
Es aquella que está compuesta de una serie de archivos que contiene el código HTML que constituye la página en sí y que permiten mostrar los textos, imágenes, vídeos etc. que conforman el contenido de la página.
Ejemplos
Curriculum Vitae
Cada día nos encontramos con más personas que
utilizan la Web para presentar su curriculum vitae, es una buena manera de
presentarse hacia las empresas a la hora de encontrar trabajo o establecer
relaciones comerciales.
WEB QUEST
Son
sitios Web desarrollados principalmente por profesores y universidades, con un
claro objetivo educativo, proponiendo a un grupo de alumnos un tema en
particular (biología, geometría, física, literatura con un serie de cuestiones
formuladas acerca del tema elegido, el grupo tiene disponible).
BLOC O BITÁCORA
Es un sitio Web donde se recopilan cronológicamente mensajes de uno o varios autores, sobre una temática en particular siempre conservando el autor la libertad de dejar publicado lo que crea pertinente, también llamado blog o bitácora.
¿Qué son paginas dinámicas?
No debe ser un espacio en internet para mostrar información estática. Las nuevas tecnologías brindan muchas posibilidades que se pueden aplicar para hacerlo más atractivo, rápido e interactivo. Alcanzan gran vistosidad, sus presentaciones son más entretenidas que las que se consiguen utilizando únicamente HTML y son interactivas. 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.
Ejemplos
Buscadores
Buscadores
Páginas creadas para que los usuarios realicen sus consultas y éstos les devuelvan una serie de resultados con las mejores páginas sobre esa determinada consulta. Pueden incluir publicidad, de hecho Google consigue la mayoría de sus ingresos de su programa Google Adwords por la publicidad en su buscador.
Tiendas online
Los ecommerces o tiendas online son sitios webs en los que se comercializan productos o servicios. En la actualidad están teniendo un gran crecimiento debido a que muchos usuarios ya realizan sus transacciones por Internet y también muchos comercios tradicionales se han lanzado a desarrollar este tipo de sites para generar negocio en la red.
Wikis
Son páginas web dónde los usuarios son los que crean y modifican su contenido directamente desde su navegador. La wiki más famosa es la Wikipedia, una de las páginas web más visitadas del mundo.
¿Qué es protocolo IP?
El protocolo de IP (Internet Protocol) es la base fundamental de la Internet. Porta datagramas de la fuente al destino. El nivel de transporte parte el flujo de datos en datagramas. Durante su transmisión se puede partir un datagrama en fragmentos que se montan de nuevo en el destino y también es un protocolo no orientado a conexión usado tanto por el origen como por el destino para la comunicación de datos a través de una red de paquetes conmutados.
- Protocolo orientado a no conexión.
- Fragmenta paquetes si es necesario.
- Direccionamiento mediante direcciones lógicas IP de 32 bits.
- Si un paquete no es recibido, este permanecerá en la red durante un tiempo finito.
- Realiza el "mejor esfuerzo" para la distribución de paquetes.
¿Qué son Navegadores?
Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, además de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software realmente habitual y muy utilizado actualmente.
¿Qué es navegadores web?Un navegador web es un software, aplicación o programa que permite el acceso a la Web, interpretando la información de distintos tipos de archivos y sitios web para que estos puedan ser visualizados nos permite la visualización de documentos de texto, posiblemente con recursos multimedia incrustados. Además, permite visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo, entre otras funcionalidades más.
Ejemplos
Google Chrome
Navegador popular del gigante de Internet Google. Se centra en el rendimiento mejorado de las aplicaciones web. Cientos de extensiones de útiles se pueden descargar e instalar de forma gratuita desde Chrome Store y se pueden usar para uso personal.
Mozilla Firefox
Un navegador web diseñado para la simplicidad, seguridad, extensibilidad y flexibilidad y potencia. Disponible para Linux y Android también. Hay muchos complementos y extensiones con algunas herramientas de desarrollador potentes.
Un navegador web diseñado para la simplicidad, seguridad, extensibilidad y flexibilidad y potencia. Disponible para Linux y Android también. Hay muchos complementos y extensiones con algunas herramientas de desarrollador potentes.
Navegador web de opera
En constante evolución y mejora, y con el navegador móvil más popular, Opera ha recorrido un largo camino desde ser un navegador hasta una suite de Internet completa. Navegador rápido y gratuito con buen soporte para actualizaciones.
En constante evolución y mejora, y con el navegador móvil más popular, Opera ha recorrido un largo camino desde ser un navegador hasta una suite de Internet completa. Navegador rápido y gratuito con buen soporte para actualizaciones.
¿Qué son hojas de estilo?
Son conjuntos de instrucciones, a veces en forma de archivo anexo, que se asocian a los archivos de texto y se ocupan de los aspectos de formato y de presentación de los contenidos: tipo, fuente y tamaño de letras, alineación y posicionamiento del texto, colores y fondos, etc. Las hojas de estilo permiten liberar la composición del texto de los aspectos visuales y favorecen que se estructure y anote mediante códigos que permiten un tratamiento más eficaz de los contenidos. El uso adecuado de las hojas de estilo es uno de los aspectos clave de la edición digital.
¿Qué es una tabla o plantillas?
Una tabla no es otra cosa más que un medio de organizar datos en filas y columnas. Este concepto ha estado presente en nuestra sociedad por un largo período de tiempo y ha sido adoptado por HTML en sus etapas iniciales, como una forma de transmitir información que, de otro modo, no sería comprendida tan fácilmente. En documentos HTML una tabla puede ser considerada, resumidamente, como un grupo de filas donde cada una contiene a un grupo de celdas. Esto es conceptualmente distinto a un grupo de columnas que contiene a un grupo de filas, y esta diferencia tendrá un impacto en la composición y comportamiento de la tabla.
¿Qué son marcos (frames)?
Un marco (o frame) es una ventana independiente dentro de la ventana general del navegador. Cada marco tendrá sus bordes y sus propias barras de desplazamiento. Así cada página se dividirá en la práctica en varias páginas independientes. Para crearlos necesitaremos un documento HTML específico, que llamaremos documento de definición de marcos. En él especificaremos el tamaño y posición de cada marco y el documento HTML que contendrá.
¿Qué es un software de edición de sitios web?
Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM ,editor HTML es un software para editar y crear código HTML que se utiliza para sitios web u otros documentos web.Con los editores HTML basados en texto, el código fuente puede ser editado directamente.
¿Qué es un publicador de sitios web?
El Publicador es una herramienta que creamos que permite modificar contenidos dentro del Sitio Web. Dicha herramienta permite la adaptación de acuerdo a las necesidades de cada cliente, pudiendo así actualizar los sectores que usted necesite modificar asiduamente, siendo estas fotos, imágenes, textos y otros.
Para poder utilizar ésta herramienta no necesita conocimientos previos en informática.
El mantenimiento de su Sitio Web depende de la o las personas que usted desee y puede ser realizado por varias personas al mismo tiempo.
Un editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWYG, hasta editores WYSIWYM ,editor HTML es un software para editar y crear código HTML que se utiliza para sitios web u otros documentos web.Con los editores HTML basados en texto, el código fuente puede ser editado directamente.
¿Qué es un publicador de sitios web?
El Publicador es una herramienta que creamos que permite modificar contenidos dentro del Sitio Web. Dicha herramienta permite la adaptación de acuerdo a las necesidades de cada cliente, pudiendo así actualizar los sectores que usted necesite modificar asiduamente, siendo estas fotos, imágenes, textos y otros.
Para poder utilizar ésta herramienta no necesita conocimientos previos en informática.
El mantenimiento de su Sitio Web depende de la o las personas que usted desee y puede ser realizado por varias personas al mismo tiempo.
No hay comentarios.:
Publicar un comentario