miércoles, 12 de febrero de 2020

Estructura básica de una página WEB





Los elementos de la Web se componen de textos, imágenes, vídeos… Y se colocan dentro de la página de la forma que facilite mejor su entendimiento y uso. La colocación de estos elementos sobre la página se llama estructura.
La forma en que se colocan los elementos se define como la estructura de la página.

Ver vídeo: Estructura Básica de un sitio web

Los elementos de una correcta estructura son:

  • Cabecera o header: normalmente se coloca en la parte superior de la página.
  • Logo: es la marca o título que tiene la página
  • Menú: es el elemento principal de navegación entre los apartados. Lo podemos encontrar también en el pie de página.
  • Cuerpo de la página o body: donde introducimos los contenidos principales.
  • Pie de página o footer: cierre, copyright, créditos…
La estructura más común es la que tenemos en este esquema.
La estructura es un elemento dinámico, no tenemos por qué seguir siempre la misma. Cuanto más diferente sea, más creativa será. Aunque hay ciertos límites. Cuanto más cambiemos el orden de estos elementos, más compleja se volverá la navegación y la comprensión de esta página, lo que reducirá irremediablemente el número de usuarios capaces de navegar por esa página. Esto no significa que siempre tengamos que hacer todas las estructuras iguales, solo que debemos tener en cuenta nuestro público objetivo antes de diseñar la página.


Practicas

Practicas

HTML


Guía rápida de comandos de HTML

GUÍA RÁPIDA DE COMANDOS HTML


 El HTML (HIPERTEXT MAKE UP LENGUAGE), son comandos con los que se desarrollan las páginas WEB. 

A continuación hay una lista con algunos de los comandos usados en HTML.  
DESCRIPCIÓN
INICIO
FINAL
COMENTARIOS
Obligatorias
Principio de Documento<html></html>Toda la codificación debe estar incluida en estas etiquetas
Encabezado<head></head>Dentro del encabezado se encontrará el título.
Título<title></title>Es el texto que aparece en la barra de títulos del navegador
Cuerpo<body></body>Cuerpo de la página
Para toda la página
Color de Fondo<body bgcolor="#RRVVAA">



Permite colocar un color uniforme de fondo a toda la página. Este color estará formado por 3 números hexadecimales que indiquen:
RR = tonalidad de color rojo
VV = tonalidad del color verde
AA = tonalidad del color azul
Imagen de Fondo<body background="nombreimagen.gif">nombreimagen.gifdeberá reemplazarse por el nombre de la imagen. Se recomienda utilizar formatos .gif o .jpg
Colores de texto color de enlaces
enlaces visitados
<body text="#RRVVAA"
Link ="#RRVVAA"
Vlink ="#RRVVAA"
Alink ="#RRVVAA"
Permite definir los colores que se aplicarán en forma genérica para el texto como para los enlaces. El color está representado por un número hexadecimal
Estilos <style></style>Permite definir un estilo de fuente, color, tamaño, etc para todo el documento.
Meta<meta
name="description" content="comentarios"
name="keywords" content="palabra1 palabra2 ... palabran">
</meta>Permite definir propiedades internas del documento.
Name = "description" content = ”Será el resumen con que se publicará en el buscador. No utilizar más de 25 palabras"
Name = "keywords" con­tent = "podrán definirse palabras claves para que nuestro documento sea encontrado por los buscadores"
Sonido<bgsound
src="xx.wav"
loop=infinite/n>
<embed

src="xx.wav"
width=200 height=55
autostart="true"
loop="true"
hidden="true"> 
Ejecuta un archivo de sonido.
xx.wav se debe reemplazar por el nombre del archivo; loop nindica la cantidad de veces que se repetirá.
La etiqueta Embed con sus propiedades, se utiliza por las incompatibilidades de los navegadores.
Con esta opción aparece una consola cuyas di­mensiones se definen con WidthHeight y que puede ocultarse con Hidden  = "true"
Presentación de texto
Encabezamientos<h1><h2>....<h6></h1></h2>....</h6> Opciones de formato de texto para encabezados,
Negrita
Cursiva
Subrayado
<b>
<i>
<u>
</b>
</i>
</u>
Coloca el texto incluido con éstos formatos.
Parpadeo<blink></blink>El texto estará parpadeante
Grande
Pequeña
<big>
<small>
</big>
</small>
Agranda el texto
Disminuye el texto
Subíndice
 Superíndice
<sub>
<sup>
</sub>
</sup>
Representa el texto sobre el renglón o bajo el renglón.
Color del Texto <font color="#RRVVAA"></font>Permite colocar un color a la fuente. El color está representado por un número hexadecimal.
Tamaño del Texto <font size="n"></font>Define un tamaño de fuente específico. nrepre-senta un número del 0 al 7 al que luego podrán agregarle los signos + o -
Tipo de fuente<font face="nombre de fuente"></font>Permite definir un nombre de Fuente específico.
Estilo de fuente<tt></tt>Formato de fuente Courier de tamaño menor (Typewriter)
Texto preformateado<pre></pre>Formato de fuente tipo Courier. Se representan los espacios en blanco
Texto en Movimiento<marquee>(texto)</marquee>Permite que un texto tenga movimiento. Pueden agregarse atributos para dimensionar la marquesina, para alinear el texto, para modificar tamaño, fuente y color.
Línea Horizontal<hr="n"> No utiliza etiqueta de cierreTraza un línea horizontal cuyo grosor está representado por “n”
Espacio en Blanco&nbsp No utiliza etiqueta de cierreRepresenta un espacio en blanco.
Comentario<!- comentario> ->Comentarios que no serán visibles en la pantalla.
Caracteres especiales
EscriboPara ver
&lt;
&gt;
&amp;&
&quot;"
&aacute;á
&eacute;é
&iacuteí
&oacute;ó
&uacute;ú
&Aacute;Á
&Eacute;É
&Iacute;Í
&Oacute;Ó
&Uacute;Ú
&ntilde;ñ
&Ntilde;Ñ
&uuml;ü
&Uuml;Ü
&#191;¿
&#161;¡
Permiten que los caracteres especiales sean leídos por todos los navegadores en sus distintas versiones.

La escritura de cada carácter comienza con el signo ampersand (&) y debe terminar con punto y coma (;)

En esta tabla vemos como escribir algunos símbolos, signos, las letras Ñ y ñ, y las vocales acentuadas en mayúscula y minúscula.
Presentación de párrafos
Alineaciones<center>
<left>
<right>
</center>
</left>
</right>
Todo texto que se escriba entre estas etiquetas sufrirá esa alineación .
Sangría<blockquote></blockquote>Se utiliza para destacar una cita.
Parrafo
<p align= center*left*right*justify>

</p>
Realiza la separación entre párrafos, y la alineación de estos.
Renglones en blanco<br>Permite dejar renglones en blanco
Tratamiento de imágenes
Imagen Individual<img src="nombreimagen.gif">Permite insertar una imagen en la página que estamos diseñando. El archivo de la imagen deberá estar ubicado en la misma carpeta que la página, caso contrario se deberá indicar su ruta de acceso
Texto de la imagen<img src="nombreimagen.gif" alt="texto">Coloca un texto que po­drá leerse al pasar el puntero del ratón sobre la imagen o cuando ésta no se carga.
Alineación del texto<img src="nombreimagen.gif"
align= top * middle * bottom>
Indicará la posición en que ubicaremos al texto que acompaña a la imagen
Top Arriba *Middle Medio *Bottom Abajo
Ancho
Alto
<img src="nombreimagen.gif"
width="n"
height="n">
Define el tamaño de la imagen
Width = ancho * height = altura = será un valor en pixeles
Videos<img dynsrc="archivi.avi"
loop=infinite controls
start= mouseover>
Permite agregar archivos de video.
Listas
Lista numerada<ol type= A * a * I * i start=n>
<lh> título de la lista </lh>
<li> Primera opción
<li> Segunda opción
<li> Tercera opción 
</ol>Se utiliza cuando las opciones deben ser numerados. La opción typerepresentan número o letras ystart indicará el número con que inicia.
Lista no ordenada<ul type=square * circle * disk>
<lh> título de la lista </lh>
<li> Primera opción
<li> Segunda opción
<li> Tercera opción 
</ul>Se utiliza cuando las opciones no presentan un orden determinado. La opción typerepresenta la viñeta.
Lista con sangrado<dl>
<lh> título de la lista </lh>
<dt> Primer tema
    <dd> Primer detalle
    <dd> Segundo detalle
<dt> Segundo tema
    <dd> Tercer detalle
    <dd> Cuarto detalle 
</dl>Se utiliza cuando las opciones llevan un título y una definición
Enlaces o Links
Enlace a otro URL<a href="xxx"> yyy</a>xxx se debe reemplazar por la dirección URL destino del enlace.
yyy es el texto indicativo que se leerá en la página. 
Enlace a un
e-mail
<a href = "mailto:dirección e-mail"> texto indicativo del enlace </a>Te permite un enlace directo a tu cliente de correo predeterminado
Marca para enlace dentro de la misma página
(Ancla - Anchor)
<a href="#marca"> Texto de enlace al ancla</a>Referencia una posición a la que luego se accederá.
Localizar enlace anterior<a name="marca"> texto del ancla</a>Enlaza una posición previamente marcada, dentro de la misma página 
Enlace a otra página con marca, dentro del mismo sitio<a href="ab.htm#marca"> texto indicativo del enlace</a>Enlaza a la posición establecida en marca, en la página ab.htm
Enlace con imagenes<a href="xxx"><img src="nombreimagen.gif"></a>xxx se debe reemplazar por la dirección URL destino del enlace.
nombreimagen.gifse debe reemplazar por el nombre de imagen seleccionado
Enlaza a la dirección URL haciendo un click sobre la imagen.
Tablas
Definición <table></table>Crea una tabla
Bordes 
Color de Bordes
<table border=n bordercolor="#RRVVAA">

= representa al grosor del borde. También se podrá especificar el color del borde 
Separación entre celdas <table cellspacing=n>Las celdas podrán sepa­rarse por el nvalor
Separación entre el borde y el contenido <table cellpadding=n>El contenido podrá estar separado del borde por el valor indicado en n
Alto
ancho
<table height=n o porcentaje
width=n o porcentaje>
Se puede establecer un valor o un porcentaje para definir el tamaño de la tabla
Color de Fondo o
Imagen de Fondo
<table bgcolor="#RRVVAA" background="imagen.gif">

Se puede establecer un color de fondo de toda la tabla o colocar una imagen de fondo
Título<caption
align=top * bottom> texto del título
</caption>Posibilita colocar un título a la tabla alineadotop=arriba obottom=abajo
Definición de filas<tr
align=left*center*right valign=top*middle*bottom bgcolor="#RRVVAA"> 
</tr>Por cada fila que tenga la tabla deberá utilizarse esta etiqueta: se podrá establecer la alineación del contenido, la ubicación dentro de la fila y el color de fondo.
Definición de títulos<th align=left*center*right*justify*decimal valign=top*middle*bottom*baseline bgcolor="#RRVVAA"> </th> Permite definir los nom­bres de las columnas.
Definición de datos o contenidos<td align=left*center*right*justify*decimal valign=top*middle*bottom*baseline bgcolor="#RRVVAA"> </td>Coloca contenidos a cada celda
Celda que ocupa muchas filas<td rowspan=numero de filas> </td>Se puede combinar una celda para que ocupe muchas filas.
Celda que ocupa muchas columnas<td colspan=numero de columnas> </td> Se puede combinar una celda para que ocupe muchas columnas.
Formularios
Definición<form>Inicia un formulario. Se utiliza para la entrada o el envío de datos.
Acciones<form action="mailto:direccion@email"
method=post enctype="text/plain">Texto referente
Envía la respuesta inmediatamente a la dirección especificada en formato de texto.
Introducción de datos<input
type="text"
name="nombre del campo formulario"
value="asignación de un dato"
size="número"
maxlenght="número">
Ingresa un objeto dentro del formulario, se deberá definir el tipo de objeto, el nombre del campo formulario, el valor inicial que se le asigna, el tamaño máximo de visualización del campo y el tamaño máximo de caracteres que puede tener ese campo.
Con el type = "text" no se asigna Value
Opciones de
type
button
checkbox
file
hidden
image
password
radio
reset
submit
text
checkbox = se visualiza un cuadro de verificación, si deseamos que aparezca tildado agregamos CHECKED.
password = el ingreso se representa con asteriscos.
radio = visualiza botones de radio y permite que el usuario elija una opción entre varias. Se agregan tantos input como opcio­nes deseamos.
reset = visualiza un botón que al hacerle click borrará los datos.
submit
 = visualiza un botón que al hacerle click enviará los datos.
text = crea un campo para ingresar caracteres alfa­numéricos
Ingreso de un texto que ocupa muchas líneas<textarea
name="nombre del campo formulario"
rows="cantidad de filas"
cols="cantidad de columnas">
</textarea>Permite ingresar un texto extenso, por ejemplo comentarios
Ingreso por medio de un menú<select name="nombre del campo formulario">
<option>1º opción
<option>2º opción
<option>3º opción
</select>Permite optar por los datos de un menú
Frames o Marcos
Definición<frameset></frameset>Inicia la definición de un frame.
Frames en columnas
Frame en filas
<frameset cols="20%,80%">
<frameset rows="30%,70%>
Define dos frame en co­lumnas ocupando uno el 20% de la pantalla y el otro el 80% restante.
Define dos frame en filas ocupando una el 30% de la pantalla y la otra el 70% restante
Contenido de cada frame<frame src="frame1.htm">
<frame src="frame2.htm" name="principal">
Define en que frame se cargará cada página.
Se asignará unname en este casoprincipal para indicar que se visualicen allí los futuros enlaces
Destino del frametarget="principal"Se utiliza como atributo de un enlace e indica en que frame deberá visualizarse ese enlace.
"_ blank" = se abrirá una nueva ventanadel nave­gador y se visualizará en ella.
"_self" = el enlace se carga en el propio frame.
"_top" = el enlace se carga a pantalla completa en la misma ventana, suprimiendo los otros frame.
Atributos del tag frameset
border=0
frameborder=0
framespacing=0
Border = 0 indica que no habrá huecos de separación entre frames (para Netscape). 
frameborder = 0
indica que no habrá borde de separación entre frames.
framespacing = 0indica que no habrá huecos de separación entre frames (para Explorer).
Atributos del tag frameframeborder="no"
marginheight="número"
marginwidth="número"
name="nombre del frame"
noresize
scrolling="yes/no/auto"
src="dirección.htm"
Frameborder =elimina los bordes de un frame
marginwidth
 ymargin­height = definen el ancho y alto de los margenes del frame.
name = define el nombre del frame.
Noresize = indica que el fram no podrá redimen­sionarse.
scrolling = inidca si tendrá o no barra de desplaza­miento.
src = indica el contenido del frame.
Si el frame no puede visualizarse<noframes></noframes>Si el navegador no cuenta con la posibilidad de incluir Frames, con este tag puede definirse una dirección alternativa. Se coloca luego de los tag FRAME y llevan dentro un texto definifo entre los tag <body> </body>

viernes, 7 de febrero de 2020

La evolución del diseño WEB

evolucion-del-diseño-web-blog-hostgator
La evolución del diseño web
lunes, 30 de septiembre de 2019 | Comentarios
Escrito por 
¿Qué tal escuchar este post?

Si hablamos de tecnología, las cosas ocurren muy rápido, cada año tenemos nuevos modelos de teléfonos inteligentes, y aplicaciones nacen y mueren todos los días para facilitar nuestras vidas.
La evolución del diseño web no ha sido diferente. Desde la creación del primer sitio web, hasta hoy los cambios son abismales. Y lo más interesante de todo es que esta evolución es constante.
Así que si te interesa el diseño web te invitamos a un breve recorrido a través de la historia del diseño web, que ya está cerca de alcanzar su tercera década.
evolucion-del-diseño-web-hostgator

Cronología

Con el correr del tiempo, las necesidades y las formas de resolver las dificultades que se han ido presentando en el mundo del diseño web fueron variando. Sin embargo, la apuesta fija siempre ha sido evolucionar hacia la experiencia del usuario. Evolucionar para hacer con que el usuario pueda tener una experiencia fácil e intuitiva a la hora de navegar por internet.

(1989) El inicio. La época oscura del diseño web

Todo comienza en la década de los 90, conocida como la época oscura para el diseño web. En sus inicios, el diseño web se basaba en pantallas negras con píxeles monocromáticos que le daban el toque de color. En pocas palabras, no existía el diseño web, ya que el texto dominaba la pantalla.
Hacia 1991 se publicó la primera página web “World Wide Web”, de la mano de Tim Berners-Lee, un físico inglés considerado uno de los grandes creadores de la web. Este sitio web tenía como único objetivo informar qué era la World Wide Web (o red informática global). Hoy, más de 27 años después, podemos garantizar que sus usos sin duda se han multiplicado, y que la evolución del diseño web está más activa que nunca.

Diseño con tablas. A partir de 1995


La invención de los navegadores que permitían mostrar imágenes representa el primer paso en la evolución del diseño web en sí mismo. Las tablas llegaron para otorgarle orden al contenido, siendo la forma que permitía mezclar diseños estáticos y fluidos, a través de tablas dentro de tablas.
De alguna forma las tablas fueron el punto de partida de lo que hoy es el diseño responsivo.
Durante un buen tiempo el método de tablas fué el más utilizado para diseñar páginas web. Y de alguna forma esto produjo una separación entre el diseño y el desarrollo. Mientras los diseñadores creaban los diseños, los desarrolladores buscaban la forma de que funcione, administrando la información en diferentes elementos.

JavaScript. 1995

JavaScript llegó para resolver varias de las limitaciones del HTML. Y fué con su aparición que el diseño web ganó dinamismo. Sin embargo, una de las cuestiones más comentadas como punto en contra es que hace más lenta la carga de la página.
Si bien en la actualidad muchos evitan JavaScript para resolver cuestiones que pueden realizarse utilizando CSS, aún se mantiene fuerte tanto en front-end como en back-end. Siendo el front-end lo relacionado a aquello que se ve en un sitio web. Mientras que el back-end garantiza que los datos correctos se envíen al navegador y crean la funcionalidad del sistema.

La era de Flash, y la libertad del diseño. 1996

Llegó Flash e impresionó con la posibilidad de efectos visuales, quebrando las barreras que existían en el diseño web del momento. Era el sueño cumplido a través de una sola herramienta. Con un archivo que se envía al navegador para ser mostrado.
Esta época marcó un hito, pero con el tiempo quedó a la vista que los efectos e interacciones no eran abiertos para las búsquedas que indexan HTML, además de consumir poder de procesamiento. Ésto hizo que con el tiempo pierda fuerza.

El auge del CSS. 1998

Cascading Style Sheets – Hojas de Estilo en Cascada
Este lenguaje se hizo popular con una propuesta que separa el contenido de la forma de presentación. Es decir, que en HTML de trabaja el contenido, mientras que en CSS se define el formato y la apariencia.
El CSS paso por un proceso de evolución que demoró varios años hasta lograr sus mejores resultados. Al comienzo la visualización variaba dependiendo el navegador, lo que dificultaba la actividad del desarrollador.

La web 2.0. 2003

Comienza la era de la información basada en los usuarios, y la web 2.0 se hace popular junto con las redes sociales y blogs.
Con interfaces visualmente más agradables y con alta usabilidad, entramos en una fase más evolucionada del diseño web, en el que se comenzó a pensar tanto en los usuarios como en los buscadores. El foco en la experiencia de navegación mediante el uso del diseño web.

Diseño de grilla y framework. 2007

La llegada del diseño para móviles.
El diseño web se vio en la necesidad de evolucionar con la llegada de los smartphones. A partir de este momento era necesario generar versiones del sitio basadas en el tamaño de la pantalla. Y ésto era posible a través del uso de grillas y framework. Fue un reto muy importante.
La primer mejora fue con la idea de columnas, hasta que se definió el sistema de rejilla con una división en 12 columnas como sistema que se utiliza hasta la actualidad.

Diseño responsivo. 2010

Desde del año 2010 en adelante, llegando hacia el año 2012 aparece el último gran cambio en el diseño web. El diseño responsivo o adaptable llegó para resolver el conflicto de tamaño de las diferentes pantallas de los dispositivos inteligentes.
Con un mismo contenido (un sólo sitio web), pero con diferentes diseños según el tamaño del dispositivo, se encontró una forma de presentar de manera más amigable la información al usuario. De esta manera es posible utilizar imágenes que ocupan el ancho completo de pantalla, y se abre el camino hacia el diseño web minimalista con apariencia más sencilla y limpia. Es decir, que el contenido vuelve a ganar protagonismo.
Con estos cambios se ha privilegiado un diseño más plano, regresando a las raíces que colocan al contenido en primer lugar, dejando atrás los efectos de sombra y regresando a la fotografía, tipografía y los detalles de líneas. La simplicidad de la mano de la practicidad.
De alguna forma parecería que de manera más evolucionada el ciclo vuelve a sus comienzos. Pero como todo proceso, sigue en constante cambio y posiblemente en un futuro no lejano la concepción del diseño web nos continúa sorprendiendo con cambios e innovaciones. Incluso se estima que los cambios y la propia evolución de los dispositivos continuarán influyendo en el mundo del diseño, ya que dependemos de éstos como medio para exponer los sitios. Y si los dispositivos cambian, el diseño web deberán acompañarlos.

Mobile First

Es común confundir Mobile first con el diseño responsivo. Aunque tienen el objetivo de mejorar la experiencia de navegación en los dispositivos móviles, no significan lo mismo. De hecho su estructura y forma de creación es bien diferente.
Cuando hablamos de Mobile First nos referimos a que la creación del sitio web se piensa y realiza primero para dispositivos mobile, y después se adapta para desktop.

Actualidad

Con la evolución del diseño web, hoy en día no es necesario ser un experto para crear una página. En la actualidad están en alta los creadores de sitios como herramientas prácticas para construir sitios web desde plantillas y con la posibilidad de agregar componentes para personalizar el sitio web.
WordPress, en 2018 también lanzó el nuevo editor Gutenberg, compuesto de bloques, haciendo mucho más fácil el proceso de diseño y creación de sitios web. También el diseño 3D y el dominio de los gráficos vectoriales en un nivel más avanzado ha tomado bastante fuerza. Y tú, ¿cómo crees que seguirá la evolución del diseño web?
Te dejamos una síntesis con los datos principales de la evolución. Y nos tocará aguardar para saber cómo continuará la historia. Lo cierto es que con total seguridad el camino continuará en constante transformación y progreso.
Si quieres conocer tips para mejorar tu sitio web, o para crear uno, te puede interesar leer los siguientes temas:


Materiales del curso

Reglamento Interno

Encuadre

Competencias de la asignatura

Evaluación diagnostica

Test de aprendizaje

Instrucciones para enviar portafolio del alumno


HTML