Diseño de una página web
Desde los inicios de la World Wide Web, tanto el diseño de las páginas como de la propia estructura de los hiperdocumentos, ha variado enormemente. Si al principio, los hipertextos en la Web se limitaban a plasmar, sobre este nuevo medio, un texto impreso segmentándolo en pequeños bloques y colocando aquí y allá algunos enlaces, en la actualidad, las páginas web se han convertido en verdaderas obras de diseño gráfico, multimedia e ingeniería informática. Integración de bases de datos, servicios online, inclusión de sofisticadas herramientas de búsqueda y recuperación de información, dinamismo, usabilidad e interactividad, éstas son las claves de las páginas web actuales. Ya no importa sólo el contenido presentado, sino su diseño y, sobre todo, su funcionalidad.
En 1997, David Siegel en Técnicas avanzadas para el diseño de páginas web distinguía 3 generaciones en el desarrollo de las interfaces de la WWW:
Webs de primera generación:
estructura lineal
eventual inserción de fotografías y líneas de separación
baja definición (proyectados para terminales ASCII en blanco y negro)
Webs de segunda generación:
iconos en vez de palabras subrayadas con azul
menú de opciones
fondos coloreados o con imágenes
bordes azules alrededor de las figuras interactivas
Webs de tercera generación:
estructura entrada -área central- salida
uso de un layout tipográfico y visual para la descripción de una página bidimensional
utilización de metáforas
hegemonía del diseño sobre la tecnología
Sin embargo, hoy podemos hablar de una cuarta generación de webs en las que prima tanto el diseño gráfico como la tecnología. Los webmasters ya no son sólo diseñadores gráficos, sino expertos informáticos que han de conocer los nuevos lenguajes, dominar las nuevas herramientas de programación, conectividad a base de datos, seguridad, etc. El hipertexto ya no es una colección de textos enlazados, sino un espacio de intercambio de servicios de todo tipo: culturales, informativos, comerciales, sociales, etc.
Son muchos los factores que hay que tener en cuenta a la hora de diseñar un sitio web. Sin embargo, dos factores destacan sobre los demás: su contenido y el diseño de la interfaz. Los arquitectos de la información se ocupan ahora del diseño centrado tanto en el uso, como en el usuario para hacerle a éste las tareas lo más sencillas posibles.
Conocimiento tecnológico de internet
Es una forma de conocimiento que va más allá de la observación de los fenómenos existentes. Su interés está puesto en la creación de nuevos artefactos o sistemas y en la solución de problemas o necesidades a través de nuevos instrumentos tecnológicos.
Tiene como fundamento la inventiva y la innovación, ya que, está orientado a la fabricación de cosas que no existen. Artefactos posibles que están basados en principios naturales y científicos pero que requieren de la chispa creativa para volverse realidad.
Este tipo de conocimiento nace de la curiosidad, de un problema para resolver o una necesidad que requiere satisfacción. Por eso es fundamental en el desarrollo de la sociedad y tiene un gran impacto sobre ella.
Grandes hitos históricos han comenzado con el desarrollo de un dispositivo tecnológico. Una muestra de ello es la Revolución Industrial, cuando las máquinas llegaron para agilizar los procesos de producción, pero también para transformar toda la organización de la sociedad.
¿Qué es Hipertexto?
Sistema de organización y presentación de datos que se basa en la vinculación de fragmentos textuales o gráficos a otros fragmentos, lo cual permite al usuario acceder a la información no necesariamente de forma secuencial sino desde cualquiera de los distintos ítems relacionados.
"las enciclopedias en CD-ROM son un ejemplo de hipertexto"
¿Cuál es la estructura básica de un documento Web o HTML?
¿Qué programas podemos utilizar para el diseño de una página web?
· Wix
· SQUARESPACE
· WEEBLY
· SITE123
· GODADDY
¿Qué es un Administrador de sitios en la Web?
Administrador de
sitios web. Los administradores
de sitios web son los responsables de los sitios web de internet.
Se aseguran de que la información del sitio web es
correcta, segura y está actualizada. Trabaja estrechamente con diseñadores y
programadores y con los departamentos de ventas y marketing.
.
¿Que son los Enlaces (vínculos) y cuantos tipos hay?
Hipervínculo
de texto: Un hipervínculo
de texto es un enlace que se encuentra asociado a un texto, de forma que si
hacemos clic sobre ese texto, navegamos dónde indique el hipervínculo. Por
defecto, cuando creamos un hipervínculo de texto, el texto aparece subrayado y
en un color distinto al del texto normal, de forma que el visitante sepa que
existe ese enlace. Si volvemos a la página después de visitar el enlace, este
aparecerá con otro tono también. Aunque es interesante diferenciar el
hiperenlace, es posible que no queramos que aparezca así.
Hipervínculo de imagen: Un hipervínculo de imagen es un
enlace que se encuentra asociado a una imagen, de forma que si hacemos clic
sobre esa imagen, navegamos dónde indique el hipervínculo. Por defecto cuando
creamos un hipervínculo de imagen, la imagen aparece rodeada de un borde con un
color llamativo para que el visitante sepa que existe ese enlace.
Por otra
parte, los hipervínculos pueden referirse a páginas del mismo sitio web o de
otros sitios web.
Hipervínculo local o
interno: Un
hipervínculo local o interno es un vínculo a una página que se encuentra en el
mismo sitio web (sitio local). Así, para referirnos a ella tan solo basta con
poner la ruta o dirección en el disco duro. Si se encuentra en la misma
carpeta, basta con poner su nombre.
Por ejemplo, supongamos que tenemos un vínculo desde esta página a otra llamada curso que está en la carpeta access . El vínculo sería: access/curso.htm
Por ejemplo, supongamos que tenemos un vínculo desde esta página a otra llamada curso que está en la carpeta access . El vínculo sería: access/curso.htm
Hipervínculo externo : Un hipervínculo externo es un vínculo
a otro sitio web en Internet (sitio externo). Es un vínculo a cualquier otro
lugar fuera del sitio actual. Cuando ponemos un vínculo externo, escribimos la
dirección completa de la página incluido http://www....
Hipervínculo a una dirección de
correo electrónico: Un hipervínculo a una dirección de correo electrónico es un vínculo que
contiene una dirección de correo. Al pulsar en él, automáticamente se abre el
programa de correo que tenga el usuario instalado para poder escribir a esa
dirección de correo.
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Existen diferentes clases de rutas de acceso a la hora de definir los vínculos.
Referencia absoluta: Conduce a una ubicación externa
al sitio en el que se encuentra el archivo. La ubicación es en Internet, es
decir toda la url identificativa del archivo en la red. Los hipervínculos
externos siempre deben tener una referencia absoluta. Por ejemplo:
"http://www.ecomur.com". Los hipervínculos internos pueden tener
referencia absoluta o relativa. Por ejemplo:
"http://www.deciencias.net/disenoweb/elaborar/graficos.htm" o
"graficos.htm"
Referencia relativa (al sitio o
al documento): La
referencia relativa al sitio conduce a un archivo situado dentro del mismo
sitio que el documento actual partiendo del directorio raiz y al documento
conduce a un archivo situado dentro del mismo sitio que el archivo actual, pero
partiendo del directorio en el que se encuentra el actual.
Se emplea
más por ser menos engorrosa la relativa al documento. Pero hay que tener muy
presente la estructura del sitio en carpetas y subcarpetas y los niveles de
organización de los archivos:
Ejemplo: (al documento): " ../index.htm "; (al sitio): " disenoweb/index.htm"
Referencia a una parte de un documento: Conduce a un punto dentro de un documento, ya
sea dentro del actual o de otro diferente. Primero debemos definir un punto de
fijación, anclaje o marcador. El punto se define
dentro de un documento con el cursor en el lugar exacto a través del menú
Insertar , opción Anclaje con nombre (DW) o Marcador (FP).Ejemplo: (al documento): " ../index.htm "; (al sitio): " disenoweb/index.htm"
Después colocar el vínculo:" #nombre_anclaje" (misma página)
" nombre_documento#nombre_anclaje" (distinta página).
¿Cuáles son los tipos formatos de Imágenes compatibles con la Web?
Los formatos
Para la web existen 4 formatos de
imágenes: jpg, png, gif y svg. Cada uno tiene sus caracterísitcas y ventajas
propias que voy a detallar. Optimizar una imagen significa guardarla en el
formato más conveniente y logrando el menor peso posible del archivo final. El
peso de los archivos en la web es importantísimo ya que influye en la velocidad
de descarga del sitio, una variable que puede decidir si el usuario se queda o
se va.
Formato JPG:
El formato JPG es el indicado para
guardar imágenes fotográficas o con degradados. Este formato admite millones de
colores (24 bits) y mantiene el modo de color en RGB de la imagen original. Al
guardar en JPG se debe elegir una calidad de compresión. Conviene comprimir lo
más posible, mientras la calidad de la imagen sea aceptable (generalmente entre
40 y 60). Cuanto menos contraste de luces tenga la imagen, más compresión se
logra. Si a una imagen se le aplica el efecto desenfoque (blur), el archivo
resulta mucho más liviano.
Las galerías de fotos se hacen con
imágenes JPG. Si en mi boceto tengo planteada una galería de fotos que presento
en miniaturas y al cliquear se amplían, esas imágenes no las exporto desde el
boceto, sino que simplemente ahi decido el tamaño y la ubicación, pero el
recorte definitivo lo hago desde Photoshop, con todas las imágenes abiertas,
recortando y optimizando cada una en los dos tamaños (miniatura y ampliada).
Formato PNG:
La extensión PNG es la más usada para
iconos o marcas. No pudo ser aprovechada durante muchos años ya que IExplorer
no reconocía su mayor ventaja: la transparencia. Desde que los diseñadores
dejamos de preocuparnos por las versiones anteriores al IE8, lo estamos
aprovechando realmente. La transparencia de PNG a diferencia del GIF no tiene
halo, logrando una calidad de imagen mucho mayor y simplificando el maquetado,
permitiendo independizar las imágenes de sus fondos.
El PNG tiene dos opciones: PNG8 (con
paleta de color reducida hasta 256 colores) y el PNG24 ideal para
transparencias.
Formato GIF:
El GIF comprime mejor las imágenes
con plenos de color originados en dibujos vectoriales. Este formato reduce la
paleta a 256 colores como máximo. En el momento de guardar una imagen como gif,
los más importante es decidir la cantidad de colores porque de esto depende el
peso del archivo: cuanto menos colores, más liviano. Las imágenes gif además
pueden ser transparentes y animadas.
Los archivos GIF permiten seleccionar
áreas transparentes en el momento de exportar. La imágenes transparentes
necesitan un tratamiento especial: los bordes de la imagen deben ser suavizados
hacia el color sobre el que irá colocado en el HTML, de lo contrario la imagen
resultará con bordes duros (serruchados) o suavizados con halos de color
diferente al fondo. Para esto se utiliza la opción Mate que permite seleccionar el color similar al
fondo.
Actualmente este formato sólo se usa
para animaciones simples.
Formato SVG:
Es el único formato vectorial y por
lo tanto escalable para web con la enorme ventaja que eso significa para hacer
un sitio adaptable.
Se está empezando a usar recién ahora
ya que el IE8 no lo reconoce. El archivo SVG se guarda directamente desde
Illustrator y el resultado es un archivo que se puede ver en el navegador, pero
que también se puede abrir en el Sublime porque es puro código. Esto le da
infinitas posibilidades de uso para web, especialmente combinado con el
lenguaje javascript.
¿Cuáles son las etiquetas para Insertar tablas, instrucciones HTML y videos?
Tablas
Podemos pensar que las tablas no son necesarias porque no vamos a crear ninguna agenda, ni listas, ni nada por el estilo. Pero las tablas no solamente hacen esto, nos permiten colocar en partes de una página o de un espacio, diferentes objetos.
Un ejemplo de esto es un menú, como seguramente has visto en muchas páginas, el menú está en una tabla.
Esto se logra con la etiqueta <table>, la etiqueta <tr> (crea filas) y la etiqueta <td> (crea columnas). Veámos un ejemplo para entender mejor:
<table>
<tr>
<td> Celda 1, fila 1-</td>
<td>-Celda 2, fila 1</td>
</tr>
<tr>
<td> Celda 1, fila 2-</td>
<td>-Celda 2, fila 2</td>
</tr>
</table>
Esto se logra con la etiqueta <table>, la etiqueta <tr> (crea filas) y la etiqueta <td> (crea columnas). Veámos un ejemplo para entender mejor:
<table>
<tr>
<td> Celda 1, fila 1-</td>
<td>-Celda 2, fila 1</td>
</tr>
<tr>
<td> Celda 1, fila 2-</td>
<td>-Celda 2, fila 2</td>
</tr>
</table>
Resultado:
Celda 1, fila 1-
|
-Celda 2, fila 1
|
Celda 1, fila 2-
|
-Celda 2, fila 2
|
Para la creación de una tabla hay varios atributos importantes:
border: Indica el tamaño (en pixeles) del borde de la tabla (0 es sin borde).
cellspacing: Indica el espacio entre las celdas y filas (en pixeles).
cellpadding: El espacio desde el borde de la celda (en pixeles).
bgcolor: El color de la tabla.
background: Imagen de fondo de la tabla.
width: Ancho de la tabla (en pixeles o porcentaje).
height: Alto de la tabla (en pixeles o porcentaje), no es necesario ponerlo porque la tabla se hace tan alta como se necesita.
bordercolor: Color del borde (si se puso un valor mayor o igual a 1 en border).
align: Alinea el texto de una celda (right o center).
cellspacing: Indica el espacio entre las celdas y filas (en pixeles).
cellpadding: El espacio desde el borde de la celda (en pixeles).
bgcolor: El color de la tabla.
background: Imagen de fondo de la tabla.
width: Ancho de la tabla (en pixeles o porcentaje).
height: Alto de la tabla (en pixeles o porcentaje), no es necesario ponerlo porque la tabla se hace tan alta como se necesita.
bordercolor: Color del borde (si se puso un valor mayor o igual a 1 en border).
align: Alinea el texto de una celda (right o center).
Puedes ver la diferencia de cellpadding y cellspacing en la siguiente imagen:

La etiqueta <td>, que sirve para crear columnas, además de las propiedades de la tabla (bgcolor, background, width, height y align) tiene otras:
valign: Podemos escoger si queremos que el texto esté alineado arriba (top), en medio (middle) o abajo (bottom) en la celda (alineación verticalmente).
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.
colspan: Expande una celda horizontalmente.
rowspan: Expande una celda verticalmente.
Veamos un ejemplo con todos estos atributos:
<div align="center"><table cellpadding="4" cellspacing="1" border="1" bordercolor="#999999" width="350">
<tr bgcolor="#DDEEFF"><td align="center" colspan="2">Celda con colspan 2</td></tr>
<tr><td align="center" width="50%">Celda 1</td>
<td align="center" width="50%">Celda 2</td></tr>
</table>
<br>
<table cellpadding="2" cellspacing="3" border="1" bordercolor="#999999" width="350">
<tr><td align="center" valign="top" bgcolor="#DDEEFF" rowspan="2">Celda con rowspan="2" y valign="top"</td> <td>Fila 1</td></tr>
<tr><td>Fila 2</td<></tr> </table></div>, resultado:
<div align="center"><table cellpadding="4" cellspacing="1" border="1" bordercolor="#999999" width="350">
<tr bgcolor="#DDEEFF"><td align="center" colspan="2">Celda con colspan 2</td></tr>
<tr><td align="center" width="50%">Celda 1</td>
<td align="center" width="50%">Celda 2</td></tr>
</table>
<br>
<table cellpadding="2" cellspacing="3" border="1" bordercolor="#999999" width="350">
<tr><td align="center" valign="top" bgcolor="#DDEEFF" rowspan="2">Celda con rowspan="2" y valign="top"</td> <td>Fila 1</td></tr>
<tr><td>Fila 2</td<></tr> </table></div>, resultado:


Podemos crear tablas dentro de otras, dentro de un <td> y que en vez de que las columnas sean celdas, serán tablas:
<div align="center"><table cellpadding="0" cellspacing="0" border="1" width="500" bordercolor="#FF0000"><tr bgcolor="#FA5D00">
<td align="center" colspan="2">2 Tablas en dentro de un <b>td</b></td></tr>
<tr><td>
<table cellpadding="1" cellspacing="0" border="0" width="250"><tr bgcolor="#00CCFF"><td align="center">Fila 1</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila 2</td></tr>
<tr bgcolor="#00CCFF"><td align="center">Fila 3</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila 4</td></tr></table></td>
<td valign="top"> <table cellpadding="0" cellspacing="1" border="2" bordercolor="#111111" width="250"><tr bgcolor="#FFCC00"><td align="center">Fila 1</td></tr>
<tr bgcolor="#0000FF"><td align="center">Fila 2</td></tr>
</table>
</td></tr></table></div>, resultado:
<td align="center" colspan="2">2 Tablas en dentro de un <b>td</b></td></tr>
<tr><td>
<table cellpadding="1" cellspacing="0" border="0" width="250"><tr bgcolor="#00CCFF"><td align="center">Fila 1</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila 2</td></tr>
<tr bgcolor="#00CCFF"><td align="center">Fila 3</td></tr>
<tr bgcolor="#00FF00"><td align="center">Fila 4</td></tr></table></td>
<td valign="top"> <table cellpadding="0" cellspacing="1" border="2" bordercolor="#111111" width="250"><tr bgcolor="#FFCC00"><td align="center">Fila 1</td></tr>
<tr bgcolor="#0000FF"><td align="center">Fila 2</td></tr>
</table>
</td></tr></table></div>, resultado:

- Insertar audio/video
A veces, es bueno que pongamos música en nuestra página web para que se vea mejor. También podemos también compartir algún video de nosotros o alguna película. Debemos colocar el archivo (de audio o video) en el mismo directorio (o carpeta) que está el archivo de la página (html -en este caso).
Los códigos aquí escritos, son para reproducir solo con el Reproductor de Windows Media y visualizarlos con Internet Explorer. Debemos tener en cuenta varias cosas:
Los códigos aquí escritos, son para reproducir solo con el Reproductor de Windows Media y visualizarlos con Internet Explorer. Debemos tener en cuenta varias cosas:
- No toda la gente tiene internet de banda ancha, para cargar rápido el archivo.
- Al subir un archivo a la web vía FTP (ve el manual de FTP), generalmente tarda unos minutos, a menos que tengas internet de 512Kbps (o más).
- Si comprimes mucho un archivo (de audio o video), puede ser que al escucharlo (o verlo) esté con mala calidad.
Existen 2 formas para colocar audio-video en una página web:
bgsound: Con esta etiqueta (y los siguientes atributos) colocamos solamente archivos de audio, ésta etiqueta se pone entre la etiqueta<HEAD>...</HEAD>. Lo único que tenemos que hacer es indicar algunos valores. Es importante saber que con esta etiqueta, se reproduce un sonido y se puede repetir, pero no hay un botón en específico que detenga el sonido (aunque con Esc se detiene).
Atributos:
→ src: Indica la ruta (donde está el archivo) y el nombre del archivo (por ej: musica.mp3).
→ loop: Indica si se repite o no el sonido, y si se repite indica cuantas veces se repite (el valor -1 indica reproducir infinitamente).
→ volume: El volúmen que se escuchará el sonido (mínimo -10,000 y máximo 0).
Atributos:
→ src: Indica la ruta (donde está el archivo) y el nombre del archivo (por ej: musica.mp3).
→ loop: Indica si se repite o no el sonido, y si se repite indica cuantas veces se repite (el valor -1 indica reproducir infinitamente).
→ volume: El volúmen que se escuchará el sonido (mínimo -10,000 y máximo 0).
Código:
<head> <bgsound src="Samples/My_Heart_Will_Go_On.mid" loop="-1" volume="0"> </head>
object: Con esta etiqueta se reproduce un tipo de archivo (audio y video). Podemos indicar que empiece la reproducción automáticamente o manualmente, el tamaño del "reproductor" que aparece en la página, mostrar u ocultar la barra del reproductor (botones de reproducir, detener...).
Atributos:
→ classid="identificador del objeto": Indica la ruta del objeto o un componente para reproducir el archivo.
→ type="tipo de archivo": Indica el tipo de archivo.
→ width: Indica el ancho del reproductor.
→ standby: Muestra un mensaje mientras se carga el archivo.
→ height: Indica la altura del reproductor.
Existen algunos parámetros para indicar el aspecto del reproductor y mostrar u ocultar objetos (aquí pongo los más importantes). El código de un parámetro es:
Atributos:
→ classid="identificador del objeto": Indica la ruta del objeto o un componente para reproducir el archivo.
→ type="tipo de archivo": Indica el tipo de archivo.
→ width: Indica el ancho del reproductor.
→ standby: Muestra un mensaje mientras se carga el archivo.
→ height: Indica la altura del reproductor.
Existen algunos parámetros para indicar el aspecto del reproductor y mostrar u ocultar objetos (aquí pongo los más importantes). El código de un parámetro es:
<param NAME="Nombre del parámetro" VALUE="Valor (True=Sí / False=No)">
→ autostart: Reproducir automáticamente o no.
→ filename: Indica la ruta y nombre del archivo.
→ ShowStatusBar: Muestra u oculta la barra de estado del reproductor.
→ filename: Indica la ruta y nombre del archivo.
→ ShowStatusBar: Muestra u oculta la barra de estado del reproductor.
Un ejemplo de un archivo de audio, mira los valores que están en negrita. Código:
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media" type="application/x-oleobject" NAME="MC1" ID="MC1" height="52" width="300">
<param NAME="FileName" VALUE=" My_Heart_Will_Go_On.mid">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="False">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
<param NAME="FileName" VALUE=" My_Heart_Will_Go_On.mid">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="False">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
Ahora, un ejemplo de un video (Trailer de Harry Potter y El Cáliz de Fuego). Mira los valores que están en negrita:
<object CLASSID="CLSID:22D6f312-B0F6-11D0-94AB-0080C74C7E95" CODEBASE="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Cargando los componentes del Reproductor de Windows Media" type="application/x-oleobject" NAME="MC1" ID="MC1" height="250" width="350">
<param NAME="FileName" VALUE="http://raincloud.warnerbros.com/harrypotter/us/med/goblet/teaser/teaser_100.asx">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="True">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
<param NAME="FileName" VALUE="http://raincloud.warnerbros.com/harrypotter/us/med/goblet/teaser/teaser_100.asx">
<param NAME="AutoStart" VALUE="True">
<param NAME="ShowStatusBar" VALUE="True">
<param NAME="ShowGotoBar" VALUE="False">
<param NAME="TransparentAtStart" VALUE="True">
<param NAME="Volume" VALUE="-10000">
<param NAME="Loop" VALUE="-1"> </object>
Etiquetas basicas
<HTML> … </HTML>
Delimita y engloba toda la página web, que consta de cabecera y cuerpo.
<HEAD> … </HEAD>
Delimita y engloba la cabecera de una página, que contiene un conjunto de informaciones que no se muestran en la ventana, entre ellas el título de la página, pero que pueden ayudar a los navegadores y a los buscadores para interpretar o a encontrar correctamente la página.
<TITLE> … </TITLE>
Dentro de la cabecera (HEAD), lo que se incluye aquí se muestra en la barra del título de la ventana del navegador.
Metadatos
La cabecera admite otras muchas etiquetas (ver apuente 6 y 6.1.)
<BODY> … </BODY>
Delimita y engloba el cuerpo de la página, que son el conjunto de informaciones (texto e imágenes) que se muestran en la página, así como las indicaciones de cómo deben mostrarse.
Admite atributos (ver jac 8 y apuente 5.3 y 14.3).
Admite atributos (ver jac 8 y apuente 5.3 y 14.3).
Formatos de párrafo
El texto de la página se puede estructurar en encabezamientos de los diferentes apartados de la página, que pueden tener distintos niveles de 1 a 6 (siendo 1 el más importante) y párrafos normales.
<H1> ... </H1> o <H2> ... </H2> (hasta 6)
Párrafos que son encabezamientos (con distintos niveles).
<P>... </P>
Párrafos normales.
<P align="center">... </P>
El atributo align permite alinear el texto del párrafo. Se puede aplicar igual a las etiquetas <H1>, <H2>, etc ...
<BR>
Permite partir un párrafo empezando una línea nueva pero sin dejar espacio.
<HR>
Pone una linea horizontal de separación. (admite atributos) (ver apuente 11.1).
<BLOCKQUOTE>…</BLOCKQUOTE>
Sangra el párrafo.
Formatos de texto
El formato de caracteres permite cambiar tanto el tipo de fuente como su tamaño y aspecto.
Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de caracteres:
Se pueden utilizar varias etiquetas HTML para dar distintos formatos a un grupo de caracteres:
Formatos Físicos:
- Negrita: <B>…</B>
- Cursiva: <I>…</I>
- Subrayado: <U>…</U>
- Teletipo: <TT>…</TT>
- Tachado: <STRIKE>…</STRIKE>
- Grande: <BIG>…</BIG>
- Pequeña: <SMALL>…</SMALL>
- Superíndice: <SUP>…</SUP>
- Subíndice: <SUB>…</SUB>
Formatos Lógicos:
- Cita: <CITE>…</CITE>
- Código: <CODE>…</CODE>
- Definición: <DFN>…</DFN>
- Énfasis: <EM>…</EM>
- Grueso: <STRONG>…</STRONG>
- Palabras clave: <KEY>…</KEY>
- Ejemplos: <SAMP>…</SAMP>
- Usuario: <KBD>…</KBD>
- Variables: <VAR>…</VAR>
- Ejemplo literal: <XMP>...</XMP> (ignora las etiquetas HTML de dentro)
Posibilidad de combinar etiquetas (anidándolas, esto es, una dentro de otra):
- <B>…<I>…</I>…</B> (Correcto)
- <B>…<I>…</B>…</I> (Incorrecto)
<FONT COLOR="red"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el color (ver jac 8.2)
<FONT SIZE="+1"> ... </FONT>
Indicación expresa del tipo de letra a usar, en este caso el tamaño (ver jac 8.1-segunda parte)
La etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR, SIZE y FACE
La etiqueta FONT permite combinaciones cualesquiera de los atributos COLOR, SIZE y FACE
Caracteres especiales
Existe una serie de caracteres del ISO-LATIN-1 que no se pueden representar directamente en un documento HTML, puesto que forman parte del propio vocabulario del lenguaje, como por ejemplo los símbolos <, >, &, etc.
Adicionalmente, las vocales acentuadas y algunos signos de puntuación deben ser especificados de forma distinta, puesto que los navegadores pueden no entender el código del carácter utilizado y convertirlo a otro diferente.
Los caracteres especiales más usados son:
Adicionalmente, las vocales acentuadas y algunos signos de puntuación deben ser especificados de forma distinta, puesto que los navegadores pueden no entender el código del carácter utilizado y convertirlo a otro diferente.
Los caracteres especiales más usados son:
- á á
- é é
- í í
- ó ó
- ú ú
- à à
- ñ ñ
- < <
- > >
- & &
- ç ç
- " “
- espacio en blanco
(ver apuente 10.1)
Listas
(ver apuente 7)
<UL> ... </UL>
Lista numerada.
<OL> ... </OL>
Lista no numerada.
<LI> ... </LI>
Elementos de una lista.
Enlaces
Sirven para acceder desde una página a otra página o a otro recurso disponible (ver apuente 15).
<a href="http://servidor/recurso.html">texto del enlace</a>
Enlace absoluto a una página
<a href="recurso.html">texto del enlace</a>
Enlace relativo a una página
<a name="marcador"> ... </a>
Marcador (enlace interno) dentro de una página
<a href="#marcador">texto del enlace</a>
Enlace a un marcador de la misma página
<a href="recurso.html#marcador">texto del enlace</a>
Enlace a un marcador de otra página (que puede darse con dirección absoluta o relativa)
<a href="recurso.html" target="_blank">texto del enlace</a>
Enlace a otra página (absoluta o relativa, con o sin marcador) que se abra en otra ventana.
Imágenes
<img src="nombre.gif">
Muestra una imagen, que normalmente es de tipo GIF o JPG
Admite atributos (ver apuente 14).
Admite atributos (ver apuente 14).
Tablas
Permite organizar la información en tablas.
También sirve para maquetar (dar forma general) al aspecto de la página.
También sirve para maquetar (dar forma general) al aspecto de la página.
¿Qué entiendes por nube?
la nube,nos sirve para guardar todos nuestros documentos,imaguenes y etc mas importantes o los que queramos. bno eso pienso io :3
¿Qué es la nube?
La computación en la nube (del inglés cloud computing), conocida también como servicios en la nube, informática en la nube, nube de cómputo, nubede conceptos o simplemente "la nube", es un paradigma que permite ofrecer servicios de computación a través de una red, que usualmente es Internet.
¿Como puedes crear una red social y que es?
1. Elgg
Elgg es una de
las herramientas más recomendadas por sus múltiples funcionalidades y soporte
multilenguaje. Permite a las empresas, escuelas, universidades y asociaciones
crear sus propios entornos sociales con todas las características y
aplicaciones más comunes.
Elgg es de código abierto. Integra
RSS, perfiles para usuarios, soporte para celulares, personalización mediante
plantillas y plugins y usa Open ID. La ONG internacional Oxfam, el gobierno
australiano, entre otros, la usan.
2. Budypress
BuddyPress también
es un software libre y open source. Su comunidad de programadores se encarga de
dar soporte a su código, crear plugins y temas.
A diferencia de los servicios
alojados, BuddyPress permite mantener el control de tu sitio y crear una
experiencia única, totalmente personalizada. Pueden crearse perfiles para
usuarios, grupos, integrar un sistema de mensajería, blogs, foros y chat.
3. Pligg
Pligg es una
plataforma de red social con la que puedes generar sitios como Digg y Menéame.
Una red colaborativa con sistemas de votación en donde los usuarios comparten
sus contenidos y los valoran.
Integra perfiles de usuarios,
correo, sistema de comentarios, RSS, soporte multilenguaje, entre otros. Para
hacer uso de esta herramienta se requieren PHP y MySQL.
4. AroundMe
AroundMe es un proyecto que nace para brindar
software libre para ayudar a que las organizaciones sociales en todo el mundo
se comuniquen y comparten en comunidad.
Permite crear sitios web de
colaboración social (como Ning, MySpace, Yahoo o Google groups). Cada grupo
puede crear una página web, libro de visitas, blog, foro y wiki. Es
multilenguaje y soporta personalización mediante temas.
Cada grupo es totalmente
personalizable utilizando XHTML, CSS, JavaScript y PHP. Se puede interactuar
con otras redes sociales y actualizarlas o revisar sus últimas noticias.
5. SocialEngine
SocialEngine es la herramienta de pago mas usada
para crear redes sociales, esta desarrollada en PHP. La secuencia de comandos
le permite crear fácilmente su propia red social o comunidad en línea. Incluye
grupos personalizados, álbumes de fotos, mensajes, perfiles de miembros,
videos, noticias. Usa arrastrar y soltar como funcionalidad para administrar el
CMS, y mucho más.
6. Mahara
Mahara es un
sistema de código abierto que permite crear comunidades en línea y redes
sociales a través de grupos, blogs y foros.
Los usuarios pueden crear sus
portafolios con carpetas y subcarpetas y cargar múltiples archivos, gestionar
un blog, crear listas de amigos, incluye un constructor de currículum vitae.
7. CrowVine
CrowVine ofrece
un entorno social muy fácil de crear para fines más específicos. Ayuda a
organizadores de conferencias y seminarios a generar una comunidad alrededor de
su evento.
Los usuarios pueden crearse
perfiles. Integra un sistema de preguntas y comentarios, búsqueda mediante
etiquetas, un sistema de mensajería y contacto, grupos de interés. Además
pueden compartir un calendario con las fechas del evento y agregar un sistema
de puntuación. Permite exportar contactos y usa OpenID.
8. SocialGO
SocialGo te
permite crear una red social totalmente gratis. Es altamente personalizable con
plugins y temas. Puedes crear para tu comunidad perfiles de usuarios, Blogs,
foros, moderación de contenidos, compartir imágenes y vídeos, chat, correo
interno, boletines informativos y calendarios. Ofrece integración con Facebook
y Twitter.
9. Lovdbyless:
Lovbyless es
otra solución de código abierto escrito en Ruby on Rails. Los usuarios pueden
seguir a otros usuarios, realizar comentarios en los perfiles, enviar mensajes
internos, crear blogs, galería de fotos, buscar amigos y ver su actividad
reciente. Ofrece integración con Flickr y YouTube.
10. !Social
iSocial es una forma rápida y fácil para crear una
red social. Incluye soporte para OpenID y autenticación abierta, así como Facebook
Connect. Una vez que la red esté en funcionamiento, los usuarios pueden
compartir archivos multimedia como fotos y vídeos y añadir eventos.

No hay comentarios.:
Publicar un comentario