martes, 27 de noviembre de 2018

7.0 Crear entornos digitales a través del diseño de una red de aprendizaje para la comunicación y el intercambio de información mediante el uso de herramientas de procesamiento de información en la nube.


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
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.
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).
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>
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).
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.
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:
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:


  1. 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:
  • 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).
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:
<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.
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>

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>
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).

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:

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

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:
  • &aacute;        á
  • &eacute;        é
  • &iacute;        í
  • &oacute;        ó
  • &uacute;        ú
  • &agrave;        à
  • &ntilde;        ñ
  • &lt;            <
  • &gt;            >
  • &amp;            &
  • &ccedil;        ç
  • &quot;            “
  • &nbsp;            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).

Tablas

Permite organizar la información en tablas.
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 nubenube 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