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.
El conocimiento tecnológico se refiere a un conjunto de saberes dirigido a la creación, manipulación y evaluación de artefactos tecnológicos.
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.
Características del conocimiento tecnológico
El conocimiento tecnológico goza de una serie de características que lo diferencian del conocimiento científico y el conocimiento empírico:
Es codificable
Todo el conocimiento tecnológico puede ser traducido de forma precisa en dibujos, fórmulas matemáticas, números o descripciones verbales. Gracias a ello es posible consignarlo, explicarlo y transmitirlo.
Por ejemplo, el funcionamiento de un avión puede codificarse a través de un dibujo o un diseño visual que explica el funcionamiento de la máquina, combinado con las fórmulas físicas que explican su funcionamiento.
Es transmisible
El conocimiento tecnológico tiene la posibilidad de ser transmitido, comunicado o explicado a otras personas. Esta característica está directamente relacionada con la codificación: entre más codificable sea un conocimiento, es más fácil de transmitir.
Gracias a esta característica, es posible lograr que una invención pueda pasar de generación en generación y sea aplicada por otros y mejorada cada vez más.
Es observable
El conocimiento tecnológico es observable. Incluso cuando se trata de tecnologías microscópicas o virtuales, al ser mecanismos creados por el ser humano, siempre hay una forma de observar su funcionamiento.
Es dependiente
Cualquier conocimiento tecnológico depende siempre de otros saberes que pueden ser científicos o empíricos. Esto significa que para poder comprender el funcionamiento de cualquier mecanismo, es necesario tener siempre alguna información previa.
Los conocimientos previos no siempre tienen que ser complejos: por ejemplo, para comprender el mecanismo de un avión, hace falta entender algunas leyes físicas.
Sin embargo, para comprender el funcionamiento de la rueda, basta con la observación empírica.
- ¿Cuál es la estructura básica de un documento Web o HTML?
La estructura básica de una página web es la siguiente:
<html>
<head></head>
<body>
</body>
</html>
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código, podemos cambiar el título de la página.
<html>
<head>
<title>Esto es el título de la página.</title>
</head>
<body>
Hola mundo!<br>
<b>Esto es negrita.</b><br>
<i>Y esto itálica.</i><br>
</body>
</html>
Para verlo, puedes ver el código fuente de esta misma página. Para eso, haz clic en el botón derecho => ver código fuente, y verás así el código HTML de la página:
Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una “i” con acento, es decir, “í”. Esto se explicará en un capítulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
- ¿Qué programas podemos utilizar para el diseño de una página web?
Sin embargo, para comprender el funcionamiento de la rueda, basta con la observación empírica.
- ¿Cuál es la estructura básica de un documento Web o HTML?
La estructura básica de una página web es la siguiente:
<html> <head></head> <body> </body> </html>
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código, podemos cambiar el título de la página.
<html> <head> <title>Esto es el título de la página.</title> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html>
Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una “i” con acento, es decir, “í”. Esto se explicará en un capítulo posterior.
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una “i” con acento, es decir, “í”. Esto se explicará en un capítulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
- ¿Qué programas podemos utilizar para el diseño de una página web?
Si bien, para crear páginas web, existen infinidad de programas y herramientas, la realidad es que son muy pocos aquellos que se acoplan a las necesidades de las personas con pocos y escasos conocimientos en desarrollo web. Esta fue una de las principales razones por las que en OK Hosting, decidimos desarrollar OK Builder.
Su objetivo es claro, que tú y otras personas que no se dedican precisamente al desarrollo web, puedan tener como alternativa, una herramienta intuitiva, versatil, novedosa, pero con el poderío de las herramientas a nivel profesional.
Antes de que continues con la lectura de este artículo, te invito a conocer nuestra herramienta, te aseguro que te quedarás con ella, por encima de una gran cantidad de programas costosos que existen actualmente.
Tener un sitio web actualmente, es realmente indispensable. Básicamente si cuentas con un negocio o tal vez ofreces algún servicio, y no tienes presencia en internet, sencillamente no tienes presencia en el mundo actual, es entonces cuando Crear Páginas Web se vuelve un objetivo o almenos crear la tuya. Pues una de las cosas que debemos aceptar, es que el internet se ha desarrollado en gran manera y actualmente forma parte de un mundo alterno al nuestro, de donde podemos encontrar una gran cantidad de clientes o seguidores, dependiendo de cual sea el caso o la utilidad.
Pero bueno, sin mucho más que hablar por delante, te haré una pregunta ¿Sabes que programa es el mejor para hacer un sitio web?. Por supuesto, existen una gran cantidad de programas y herramientas para crear páginas web, pero en realidad no todos son tan buenos como quisiéramos. Aunque realmente el problema de mucho de estos, es que necesita cierto nivel de conocimientos para hacerlos funcionar. Es por eso que al final del artículo les tenemos una grata sorpresa, pero primero vayamos a ver los más complejos, para concluir con el más fácil de usar.
Algo que debes saber, es que antes de empezar, dividiremos los programas para crear páginas web, en 2 tipos. El primer tipo se conformará de los editores WYSIWYG, mientras que el segundo se integrará por editores visuales de mayor costo posiblemente, pero que requieren menor conocimiento lógico. Sabiendo esto, entonces ya podemos dar inicio.
Si bien, para crear páginas web, existen infinidad de programas y herramientas, la realidad es que son muy pocos aquellos que se acoplan a las necesidades de las personas con pocos y escasos conocimientos en desarrollo web. Esta fue una de las principales razones por las que en OK Hosting, decidimos desarrollar OK Builder.
Su objetivo es claro, que tú y otras personas que no se dedican precisamente al desarrollo web, puedan tener como alternativa, una herramienta intuitiva, versatil, novedosa, pero con el poderío de las herramientas a nivel profesional.
Antes de que continues con la lectura de este artículo, te invito a conocer nuestra herramienta, te aseguro que te quedarás con ella, por encima de una gran cantidad de programas costosos que existen actualmente.
Tener un sitio web actualmente, es realmente indispensable. Básicamente si cuentas con un negocio o tal vez ofreces algún servicio, y no tienes presencia en internet, sencillamente no tienes presencia en el mundo actual, es entonces cuando Crear Páginas Web se vuelve un objetivo o almenos crear la tuya. Pues una de las cosas que debemos aceptar, es que el internet se ha desarrollado en gran manera y actualmente forma parte de un mundo alterno al nuestro, de donde podemos encontrar una gran cantidad de clientes o seguidores, dependiendo de cual sea el caso o la utilidad.
Pero bueno, sin mucho más que hablar por delante, te haré una pregunta ¿Sabes que programa es el mejor para hacer un sitio web?. Por supuesto, existen una gran cantidad de programas y herramientas para crear páginas web, pero en realidad no todos son tan buenos como quisiéramos. Aunque realmente el problema de mucho de estos, es que necesita cierto nivel de conocimientos para hacerlos funcionar. Es por eso que al final del artículo les tenemos una grata sorpresa, pero primero vayamos a ver los más complejos, para concluir con el más fácil de usar.
Algo que debes saber, es que antes de empezar, dividiremos los programas para crear páginas web, en 2 tipos. El primer tipo se conformará de los editores WYSIWYG, mientras que el segundo se integrará por editores visuales de mayor costo posiblemente, pero que requieren menor conocimiento lógico. Sabiendo esto, entonces ya podemos dar inicio.
Editores WYSIWYG para Crear Páginas Web
Adobe Dreamweaver
Seguramente esta es una de las herramientas que conoces o que almenos haz escuchado mencionar desde hace tiempo. Se trata de un editor para crear páginas web. Si hablamos de ofrecernos posibilidades para armar algo de calidad, sin duda Dreamweaver se lleva a todos de gane. Sin embargo que crees, para poder sacarle el máximo provecho a esta herramienta, deberás contar con alguna buena cantidad de conocimientos en el desarrollo de página web o lenguajes de programación en web, tales como HTML o el mismísimo Javascript.
Si bien es cierto, que Dreamweaver no ofrece una gran cantidad de ventajas, cuenta con un ambiente gráfico, es compatible con Windows y Mac. La realidad es que no deja de ser un software de paga, el cual trabaja mediante una licencia, debe estar instalado en tu computadora y desde ahí deberás trabajar. Talvez te suene bien, sin embargo no es precisamente lo que la tendencia marca en el software actual. Así que vamos a ver cual es el número 2.
WebSite X5 Evolution
Ahora bien. Si Dreamweaver se nos complica, por lo que mencioné acerca del conocimiento en dos lenguajes indispensables, entonces posiblemente WebSite X5 Evolution sea la alternativa que necesitas para Crear Páginas Web. Pues no solamente se trata de una herramienta más económica, si no que cuenta con muchas ventajas por encima de Dreamweaver. Aunque obviamente esto va de acuerdo a las necesidades de cada quien, pues te aseguro que un programador como tal, seguirá dándole preferencia a su herramienta por encima de cualquier cosa.
Ahora bien. Si Dreamweaver se nos complica, por lo que mencioné acerca del conocimiento en dos lenguajes indispensables, entonces posiblemente WebSite X5 Evolution sea la alternativa que necesitas para Crear Páginas Web. Pues no solamente se trata de una herramienta más económica, si no que cuenta con muchas ventajas por encima de Dreamweaver. Aunque obviamente esto va de acuerdo a las necesidades de cada quien, pues te aseguro que un programador como tal, seguirá dándole preferencia a su herramienta por encima de cualquier cosa.
Características de WebSite X5 Evolution
- Cuenta con versión económica y Cara
- Cuenta con diseño responsive
- Se adapta a cualquier dispositivo
- Diseño de Plantillas incluido
- Permite subir tu sitio a internet
- Cuenta con versión económica y Cara
- Cuenta con diseño responsive
- Se adapta a cualquier dispositivo
- Diseño de Plantillas incluido
- Permite subir tu sitio a internet
Avanquest WebEasy Professional
Para continuar con las herramientas WYSIWYG para Crear Páginas Web y no variarle aún, tenemos a Avanquest WebEasy Professional. Posiblemente la carta principal de este programa, e la posibilidad de tener a la mano más de mil combinaciones de plantillas posibles. Considerando que en total cuenta con unas 600 plantillas para personalizar tus diseños, sin duda se vuelve una herramienta indispensable para quienes buscan algo más visual y sencillo, aunque nuevamente, con conocimientos para trabajar con una herramienta WYSIWYG.
Como puntos favorables de Avanquest, podemos mencionar la facilidad de uso, que sin duda es relativo por el conocimiento que puedas tener, pero además de eso, es mucho más barato que las herramientas anteriores, por lo que las ventajas se suman considerablemente. Así que vamos a ver las características de Avanquest, para ver que más nos ofrece.
Características de Avanquest WebEasy Professional.
- Editor WYSIWYG.
- Precio más económico pero no tanto.
- No es recomendable para usuarios avanzados.
- No necesita saber programar.
- Cuenta con Módulos para redes sociales.
Para continuar con las herramientas WYSIWYG para Crear Páginas Web y no variarle aún, tenemos a Avanquest WebEasy Professional. Posiblemente la carta principal de este programa, e la posibilidad de tener a la mano más de mil combinaciones de plantillas posibles. Considerando que en total cuenta con unas 600 plantillas para personalizar tus diseños, sin duda se vuelve una herramienta indispensable para quienes buscan algo más visual y sencillo, aunque nuevamente, con conocimientos para trabajar con una herramienta WYSIWYG.
Como puntos favorables de Avanquest, podemos mencionar la facilidad de uso, que sin duda es relativo por el conocimiento que puedas tener, pero además de eso, es mucho más barato que las herramientas anteriores, por lo que las ventajas se suman considerablemente. Así que vamos a ver las características de Avanquest, para ver que más nos ofrece.
Características de Avanquest WebEasy Professional.
- Editor WYSIWYG.
- Precio más económico pero no tanto.
- No es recomendable para usuarios avanzados.
- No necesita saber programar.
- Cuenta con Módulos para redes sociales.
MAGIX Web Designer 11
Continuando con los editores html que nos ayudan en la posibilidad de Crear Páginas Web, sin duda MAGIX no se podía quedar de lado. Y es que este editor, cuenta con esa fórmula que cualquiera necesita para poder crear un sitio web exitoso fácilmente. De por si, por el simple hecho de ser parte de la familia Magix, ya le da bastante renombre, pues son una de las empresas más reconocidas en cuestiones multimedia actualmente, ahora imagínate, con lo que este web designer no ofrece.
- Adaptación para cualquier dispositivo
- Edición de imágenes básica
- Integración con redes sociales
- Cuenta con versión básica y premium
- La versión premium cuenta con hospedaje de regalo y un dominio.
Originalmente contaba con algunas cuentas herramientas más de editores WYSIWYG, sin embargo todos ofrecen prácticamente lo mismo y siendo realistas estos son las mejores opciones. Sin embargo, ¿para quienes son ideales este tipo de herramientas?, principalmente para personas que ya conocen un poco el medio, el lenguaje de programación y el ambiente de trabajo óptimo para el desarrollo de un sitio web desde cero, osea, desde no tener mas que una plantilla y en ocasiones ni eso.
Afortunadamente, dentro de los programas para crear páginas web de este año, ya podemos encontrar los editores visuales. Es por eso a continuación, veremos cuales son algunos de los mejores editores visuales, para revolucionar el mercado de la creación de páginas web, pero al final… hasta el final del artículo les mostraré cual es la herramienta más sencilla de usar. Si quieres sáltate todos de una ves, si no, presta atención y demos lectura a lo que sigue.
Editores Visuales para Crear Páginas Web
Jimdo
¿Quiéres hacer una tienda online y no sabes como?. Te aseguro que con un editor de lo que te hablé anteriormente, no podrás lograrlo tan fácilmente. Sin embargo en el ámbito de los editores visuales, existen herramientas especializadas en lo que son las tiendas online. Y un claro ejemplo de esto es Jimdo precisamente. Así que vamos a hablar un poco de el, como una de las primeras opciones en el ámbito de los editores visuales. Recuerda que el mejor lo encontrarás al final.
Como te mencionaba, Jimdo es una herramienta muy fácil de usar, esta es una de las primeras cartas que utiliza a su favor. Además de que es especialista en la creación de tiendas online. Posiblemente en este punto, varios dejarán de leer acerca de el y algunos otros seguimos con la lectura.
Entre otras cosas favorables. Jimdo cuenta con opciones de optimización SEO para que tu tienda se encuentre bien optimizada, algo que se agradece realmente y por supuesto te da la posibilidad de disfrutar de una cuenta de email de forma gratuita, lo que te ayudará en tus negocios sin duda.
¿Sus precios?. Si bien Jimdo cuenta con una versión gratuita como demo. Su plan inicial está en los 115 MXN mensuales y su versión total, la más completa, ronda los 310 MXN Mensuales. Considera que estos precios son por contrato anual, sin embargo el costo si es bajo realmente.
Wix
Seguramente una de las herramientas más conocidas, Porque se le ha hecho publicidad hasta en la sopa. Wix es uno de los editores online no solo más famosos de la actualidad, si no también uno de los más utilizados. Pero ¿Qué nos ofrece?. Bueno pues a continuación vamos a ver que es lo que Wix nos ofrece y sobretodo a que precio, porque esto también es una parte que debemos analizar.
Una de las principales cosas por las que destaca Wix, es por su estupendos diseños, se podría decir que lo visual es lo suyo, por supuesto que es la parte por donde enamora a sus clientes y estos enseguida caen, aunque no es la mejor alternativa, como les dije, al final del artículo les mostraré cual es el mejor.
Otra de las cosas por las cuales Wix destaca, es por contar con una buena cantidad de animaciones y por supuesto, la posibilidad de adquirir aplicaciones en la app market, algo que otras plataformas de este tipo no tienen.
Claro que Wix cuenta con una versión gratuita demo. Pero su costo menor inicia en los 54 pesos MXN para el domain connect y llega hasta los 214 MXN en caso de querer realizar una ecommerce, lo cual la hace incluso más económica que Jimdo.
Weebly
Si nuestro enfoque se dirige hacia la facilidad de uso. Posiblemente Weebly sea superior a los 2 anteriores que te acabo de mencionar. Pues su facilidad de uso es impresionante y sus diseños muy bonitos, incluso el utilizar su tienda online es todo un placer y te evitarás cualquier tipo de complicación innecesaria.
Pero entonces ¿Cuál es el problema con Weebly?. En primera, comprar un dominio en Weebly puede salir sumamente caro, el precio por los dominios es realmente alto y no te aconsejaría hacerte de un dominio con ellos. Lo siguiente, es que las cuentas de correo no van integradas, de hecho ni una sola cuenta de correo electrónico estará disponible para usarse, almenos que la adquieras de forma separada.
Y como tercer punto, Weebly no cuenta con soporte en español, por lo que si llegas a tener algún problema, seguramente se te hará muy complicado, por lo que aunque es muy fácil de utilizar, con un soporte en ingles ya no conviene tanto.
Si tienes pensando contratar con Weebly, lo primero que debes saber es que sus precios son en dólares y ésto ya lo hace un poco más caro, su paquete inicial se coloca en los 7,42 US, mientras que el más alto es de 24,92 US
¿Cuál es el Programa para Crear Páginas más Fácil de Usar?
OK Builder
Ahora te hablaré no solo de una herramienta o un programa, si no del mejor programa para crear páginas web que podrás encontrar. Existe un elemento fundamental y es que para utilizar OK Builder, no necesitas prácticamente nada de nada en cuestiones de programación o lenguajes informáticos y lo mejor es que además podrás hacer una prueba gratis de la herramienta para que conozcas sus bondades.
Entre las ventajas que OK Builder nos ofrece, destacamos las más de 172 plantillas para crear un sitio web, diseños elegantes y muy acordes a lo que se utiliza hoy en día en tendencia web. Esto sumado con el hecho de que se puede crear el sitio web directamente desde un dispositivo móvil. De esa forma podrás empezara subir fotos, generar información o incluso el logotipo en minutos. Solo necesitarás un poco de imaginación y creatividad.
Por supuesto, algo que OK Builder te ofrece y otras herramientas no, es la posibilidad de optimizar tu sitio web en cara a los buscadores como Google. Te permitirá mantener bien optimizado el contenido y cada una de las secciones, para que puedas analizar tu posicionamiento de forma constante y no dependas unicamente de las visitas por redes sociales, si no que las personas que necesitan algo de tu sitio web, lo puedan encontrar desde el mismo Google.
- ¿Qué es un Administrador de sitios en la 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.
Alguno administradores también diseñan y configuran los sitios. Se los conoce también como administradores web o webmasters.
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.
Alguno administradores también diseñan y configuran los sitios. Se los conoce también como administradores web o webmasters.
Actividades labores:
Los administradores de sitios web planifican y organizan el desarrollo técnico de uno o más sitios web. Esto puede incluir seleccionar el hardware y el software que permita a la empresa realizar negocios a través de internet (el denominado comercio electrónico).
Las responsabilidades principales de los administradores incluyen garantizar que el sitio web funciona correctamente y de forma precisa y que está actualizado. Esto es clave ya que las organizaciones usan los sitios web para proporcionar un servicio y mostrar su imagen y su esencia.
El administrador también se encarga de que cualquier adición al sitio web sigue el estilo existente, por ejemplo, en términos de diseño, plantilla y estructura. Deben comprobar que toda la información nueva coincida con el estilo editorial existente y realizar cambios cuando se precie. Pueden emplear un sistema de gestión de contenido web para actualizar el sitio.
Los administradores de sitios web pueden ser responsables de decidir dónde y cómo usará el sitio web contenidos multimedia, como fotografías, sonido, vídeos, gráficos y animaciones.
A menudo trabajan con los departamentos de comunicación, relaciones públicas y marketing. Deben procurar que el sitio web transmita la imagen adecuada a los clientes de la organización y que el sitio sea fácil de encontrar mediante los motores de búsqueda. Se aseguran de que el sitio web cumple con la ley y que es accesible para todos los usuarios, por ejemplo, facilitando una versión de texto ampliado o subtítulos en los videos.
Los administradores procuran obtener información de los usuarios del sitio web. Reúnen estadísticas mensuales que muestran cuánta gente ha visitado el sitio durante este tiempo y qué páginas y funciones han usado. Esta información ayuda a la empresa a comercializar sus servicios con mayor eficacia.
Los administradores son responsables de la seguridad del sitio web. En una organización comercial, esto significa que deben asegurarse de que sólo las personas autorizadas pueden acceder a la información de los clientes como, por ejemplo, a direcciones de correo o a tarjetas de crédito.
Deben gestionar también los comentarios y las quejas de los usuarios del sitio. Se encargan de que los problemas o errores se subsanen lo antes posible y que se tengan en cuenta las sugerencias.
Los administradores pueden supervisar o coordinar el trabajo de un equipo que puede incluir diseñadores, artistas, escritores, investigadores, programadores, desarrolladores y especialista multimedia. En una empresa pequeña, pueden encargarse ellos solos del diseño del sitio web, así como de su desarrollo y mantenimiento.
También deben asegurarse de que los diseñadores y programadores disponen de las herramientas específicas que necesitan, por ejemplo, para manipular fotografías o animar partes del diseño.
Los administradores también evalúan las necesidades de formación y desarrollo y pueden decidir, por ejemplo, que un formador externo visite la empresa.
Algunos administradores trabajan en servicios de intranet (el uso de tecnologías de internet y servicios de correo electrónico en una red interna, dentro de la empresa). Tratan con personas de la empresa y se preocupan de sus necesidades
¿Que son los Enlaces (vínculos) y cuantos tipos hay?
Rutas de enlaces:
Se llama ruta al valor que se escribe dentro del atributo href="" y se pueden clasificar en dos tipos:
Rutas absolutas:
Las rutas absolutas son las que definen la ubicación completa de un archivo en la web y empiezan desde http://nombredelsitio.com.ar/archivo.html (el archivo de destino puede ser de cualquier extensión). Por ejemplo si queremos vincular nuestro sitio con Facebook, usaríamos una ruta absoluta y el código sería:
<a href="https://www.facebook.com/pagina">Estamos en Facebook</a>
Rutas relativas:
Las rutas relativas en cambio, definen la ubicación del archivo de destino en relación a la ubicación del archivo que lo está llamando. Ejemplo: si el archivo index.html vincula con quien-soy.html y están en la misma carpeta, el código sería asi:
<a href="quien-soy.html">Quién soy</a>.
Tipos de enlaces
Existen diferentes tipos de enlaces que detallo a continuación:
Enlaces internos entre archivos .html
Son los enlaces principales de un sitio. Si en el archivo index.html, queremos agregar un vínculo a contacto.html el código sería así:
<a href="contacto.html">Contáctenos</a>.
El texto que queda encerrado entre las etiquetas <a> es lo que ve el usuario en color azul y subrayado.Enlaces externos
Son los enlaces entre diferentes sitios web. Si queremos vincular un sitio web con otro, tenemos que indicar la ruta absolutadel sitio escribiendo la url completa que conviene copiarla del navegador. En este caso, es común usar el atributo target=""que nos permite abrir el enlace en una pestaña nueva. Por ejemplo, si quisiera poner un vínculo a Google y que éste abra en pestaña nueva, sería así:
<a href="http://google.com" target="_blank">Ir a Google</a>
Enlaces internos: anclas
Las anclas son enlaces hacia un punto determinado dentro de un html. Se usa en varios casos, por ejemplo en una página de preguntas frecuentes donde las respuestas están desarrolladas debajo de las preguntas, o en Wikipedia, cuando el texto es extenso el menú tiene vínculos con anclas. También en los textos largos, al finalizar muchas veces se coloca un botón para subir. En los sitios de una sola página donde los botones en realidad hacen scroll, esas son anclas.
El punto de destino tiene que estar marcado con el atributo id="algo" y en el enlace se coloca un # (numeral) seguido del nombre. Por ejemplo:
<a href="#respuesta4">Pregunta 4</a>
"salta" a este párrafo: <p id="respuesta4">acá está escrita la respuesta</p>
Enlaces para ampliar una imagen
Es común armar una galería de fotos con imágenes miniaturas que vinculan a imágenes ampliadas. Si combinamos este recurso con código javascript, logramos galerías de fotos muy atractivas. El código HTML es así:
<a href="imagenes/foto1-ampliada.jpg"><img src="imagenes/foto1-miniatura.jpg" alt="descripción de la foto"></a>
El navegador le muestra al usuario la foto miniatura y si cliquea en ella, le muestra la foto ampliada.Enlaces para descargar archivos
En realidad, dentro del atributo href="" podemos colocar la ruta hacia cualquier tipo de archivo. Si el navegador reconoce la extensión, lo abre por ejemplo: html, jpg, png, gif, svg, pdf, etc. Pero si no lo reconoce o es un archivo comprimido (.rar, .zip), el navegador le ofrece al usuario descargarlo. Ejemplo:
<a href="fotos.rar">Descargá todas las fotos</a>
Enlaces a una dirección de correo
Se puede vincular una dirección de correo para que abra en el programa de correo predeterminado. El código se escribe así:
<a href="mailto:info@dominio.com">Consúltenos a info@dominio.com</a>
Este recurso está bastante cuestionado por dos razones: primero porque muchos usuarios utilizan correo webmail (Gmail, Yahoo, Hotmail) por lo que este enlace no les sirve (incluso molesta) y segundo porque les estamos facilitando a los robots que encuentren nuestro correo y lo incluyan en una base de datos para spam.
- ¿Cuáles son los tipos formatos de Imágenes compatibles con la Web?
Las imágenes son parte fundamental de cualquier sitio web. Pero cuando se trabaja con ellas debe tenerse en cuenta el equilibrio necesario entre su calidad y el tamaño de descarga de las mismas. Un sitio web con imágenes de alta calidad consumirá mucho ancho de banda y será lento a la hora de renderizarse en los navegadores, lo que puede penalizar el comportamiento: los usuarios abandonarán el sitio web si tarda mucho en mostrarse.
Los formatos de imagen utilizados en la web
Los formatos de imagen utilizados en la web
Por lo tanto, es necesario conocer los distintos formatos de imágenes que pueden utilizarse en una web y saber en qué ocasiones elegir uno u otro. Los formatos más utilizados actualmente son tres: JPG o JPEG, GIF y PNG. Los tres son formatos de imagen de mapa de bits, es decir, que representan una imagen mediante la codificación de los valores del color y de la transparencia de cada píxel en contraposición a los formatos vectoriales (como SVG) que almacenan líneas, puntos y polígonos para crear la imagen.
La gran ventaja de los formatos de mapa de bits es que permiten una gran compresión de la información, dando lugar a archivos poco pesados. Sin embargo, cuando se realiza un zoom sobre ellos, la imagen puede acabar distorsionada o difuminada, apreciándose los píxeles. Por consiguiente, saber optimizar las imágenes para que parezcan de buena calidad y tengan poco tamaño de bytes es una labor que exige cuidado y conocimiento.
Una imagen de mapa de bits no es más que una cuadrícula con dos dimensiones de píxeles (alto y ancho). A modo de ejemplo, una imagen de 200 x 200 píxeles tiene un total de 40.000 píxeles, cada uno de los cuales tendrá un valor RGBA (Red, Green, Blue, Canal Alfa o Transparencia) y esta información ocupará un total de 4 bytes (32 bits) por cada píxel. De modo que una imagen de 200 x 200, sin ningún tipo de optimización o comprensión, tendrá un tamaño de 160.000 bytes = 156 Kbytes. Fácilmente se puede ver que este tamaño es demasiado grande para los estándares de la web en una imagen de pequeñas dimensiones. Por eso se utilizan formatos de imagen que comprimen la información.
Seguidamente se describirán los tres formatos de imagen para luego dar una serie de pautas sobre cuándo utilizar cada uno de ellos. Por último, veremos como podemos optimizar imágenes usando software de edición de imágenes como Adobe Photoshop o GIMP.
JPG o JPEG (Joint Photographics Experts Group)
Las imágenes suelen tener extensión .jpg o .jpeg y es el formato más utilizado actualmente. Es un algoritmo de compresión con pérdidas o lossy (que no permite la reconstrucción del original a partir del archivo comprimido), que se basa en que el ojo humano capta mejor los cambios de brillo que los de color y que percibe mejor estos cambios en zonas de color homogéneo que en los bordes de los objetos de la imagen. El algoritmo matemático en que se basa quita toda la información no esencial para el ojo humano.
JPG dedica, en principio, 24 bits a cada píxel para almacenar su información, con lo que puede trabajarse con más de 16 millones de colores distintos. Pero a la hora de aplicar la comprensión, podemos elegir una serie de parámetros para controlar la conversión como el grado de compresión, que se indica con un porcentaje. Como norma se considera que un 80 % es una imagen de alta calidad, un 50 % de calidad media y un 10 % de baja calidad. En la web es común trabajar con valores de entre el 70 y el 80 %.
Además, JPG permite guardar las imágenes en modo progresivo, es decir, que la imagen se carga en varias fases, una opción de interés cuando se trabaja con conexiones lentas, aunque produce archivos algo más pesados. También es posible suavizar la imagen para evitar bordes demasiado pixelados, aunque ello suele causar el desenfoque del conjunto de la imagen.
El formato JPG es el recomendado para trabajar con imágenes con miles o millones de colores: fotografías, imágenes con gradientes... Pero no es adecuado para imágenes con texto, formas simples o que contengan grandes bloques monocolor porque genera bordes llenos de ruido. Además, una imagen JPEG no puede soportar transparencias.
GIF (Graphic Interchange Format)
Fue el primer formato de imagen utilizado en la Web, ya que se creó pensando precisamente en un método de comprimir imágenes para ser compartidas en redes de ordenadores. Las imágenes tienen la extensión .gif.
Al contrario que JPEG, GIF es un formato de compresión sin pérdidas, es decir, que permite la reconstrucción del original pues guarda la información de color y transparencia de cada píxel y no distorsiona la imagen. Sin embargo, solo trabaja con 8 bits para cada píxel, lo que permite disponer únicamente de 256 colores distintos. Ante esta limitación de colores, GIF utiliza una serie de métodos de tramado (dithering) para simular colores que no existen dentro de la paleta de colores limitada que GIF tiene disponible.
Pero GIF tiene una característica que le hace único dentro de estos tres formatos de imagen: permite ser animado. Un GIF puede tener varias imágenes o frames que se pintan en distintos períodos de tiempo simulando un vídeo. Por esa razón, su utilización está actualmente aumentando en la Web. También es posible realizar imágenes con fondo transparente aunque en una implementación algo limitada, ya que solo puede tener dos valores: todos los píxeles son transparentes u opacos, no se puede especificar un valor de transparencia para cada uno de ellos.
Cuando se elabora un GIF con un editor de imágenes pueden además elegirse dos características adicionales. Aunque se ha dicho que, por defecto, GIF usa 256 colores, es posible variar esta paleta de colores y definir que use 32, 16 u 8 colores únicamente, consiguiendo tamaños de imagen aún menores. También puede crearse un GIF entrelazado que permite a dispositivos lentos cargar una imagen que se construye de forma gradual en la pantalla sin esperar a que se pinte línea a línea.
GIF es ideal para crear imágenes de colores limitados como iconos, botones, textos en imagen y, sobre todo, para realizar animaciones gráficas sencillas.
PNG (Portable Network Graphics)
El formato PNG surgió en 1996 como alternativa al GIF cuando este formato no era de licencia libre. Sus imágenes tienen extensión .png y permite almacenar información con mayor profundidad de contraste, con mayor calidad.
Utiliza un algoritmo de compresión sin pérdidas que fue diseñado específicamente para ser utilizado en páginas web y por eso tiene una serie de características interesantes en este contexto: incluye un amplio rango de profundidades de color, tiene un sofisticado sistema de transparencia, un entrelazado óptimo y correcciones automáticas según el gamma del monitor e incluso puede almacenar pequeñas descripciones textuales sobre la imagen que pueden ser rastreadas por los motores de búsqueda web.
PNG soporta varias profundidades de color o canales: escala de grises (1 canal), escala de grises con transparencia (2 canales), canales rojo, verde y azul (RGB) o color verdadero (3 canales) y color verdadero con transparencia (4 canales). Según cuantos canales sean utilizados será el número de colores o de grados de transparencia que pueda utilizarse. El PNG-8 o PNG indexado solo utiliza 256 colores. El PNG-24 usa el mismo número de colores que JPEG.
La compresión que utiliza PNG permite utilizar una paleta con millones de colores preservando un alto grado de resolución, por lo que las imágenes son de alta calidad aunque con tamaños de archivo más grandes que los que genera JPG.
Por otro lado, PNG es el formato más adecuado cuando se necesitan imágenes transparentes de calidad en las que pueda decidirse qué píxeles son transparentes y en qué grado. También se utiliza ampliamente en capturas de pantalla y es mejor para presentar imágenes de texto que el formato JPG. Y, por supuesto, es el formato preferido para los logos o los fondos de página por su capacidad de manejo de la transparencia.
¿Qué formato elegir en cada caso?
Cuando se necesita crear una imagen para la web es recomendable realizar el proceso siguiente a modo de preguntas:
1. ¿Es necesaria una animación?
Si es así, el formato que debe elegirse es, sin discusión, el GIF, el único que lo permite (aunque existen algunas implementaciones de PNG que también lo hacen, como APNG o MNG, pero no son tan ampliamente soportadas por los navegadores web). Pero ténganse en cuenta sus limitaciones de color (solo 256) y de transparencia (lo es toda la imagen o no lo es). El tamaño, en cualquier caso, siempre es reducido.
2. ¿Necesita conservarse los detalles de la imagen con precisión y con la mejor resolución?
Si la respuesta es sí, debe elegirse el formato PNG, pues su algoritmo de compresión es sin pérdidas. La siguiente decisión en este caso es seleccionar la paleta de colores más adecuada, pues de ello dependerá que el tamaño del archivo sea más o menos grande. Si se necesitan menos de 256 colores tendrá que elegirse un PNG-8. Si es para una fotografía se usará el PNG-24, sabiendo que los archivos PNG siempre serán, en igualdad de condiciones, de mayor tamaño que los JPG.
3. En cualquier otro caso, la elección más adecuada es el formato JPEG, aunque deberá experimentarse con las distintas opciones de compresión para llegar a un tamaño adecuado sin una pérdida apreciable de la calidad de la misma.
El tamaño de las imágenes
Los formatos de imágenes ayudan a optimizar las imágenes tratando de minimizar la información de color que almacenan sus píxeles: cuantos menos bits sean necesarios, más ligera será la imagen.
Pero el otro modo de bajar el peso en kilobytes de una imagen es controlar su tamaño. Debe asegurarse siempre que la imagen subida a la web no es más grande que el espacio destinado a su visión. Redimensionar una imagen reduce el número de píxeles de la fotografía y también el número de bytes necesarios para dibujarla en el navegador. A modo de ilustración, si se dispone de una imagen de 250x250 píxeles y el espacio destinado a mostrarla es únicamente de 200x200, el ahorro final es de 2.500 píxeles, es decir, 10 KB menos de peso en una imagen sin comprimir.
Redimensionar la imagen no es lo mismo que modificar o escalar la imagen en la web mediante código HTML. De este modo se ve adecuadamente en la web, pero la imagen tienen un tamaño mayor del necesario.
Por lo tanto, una labor incluso previa a la optimización de la imagen es reducirla a la anchura y altura adecuadas para la página web donde se va a colocar.
Optimización con Photoshop y GIMP
Los editores de imágenes como Photoshop o la alternativa en software libre GIMP permiten controlar todos los aspectos de la optimización de imágenes.
Ambos pueden variar el tamaño de la imagen y además asegurar que la imagen no se distorsione en esta acción bloqueando la relación de aspecto entre altura y anchura. GIMP en el menú Imagen > Escalar imagen; en Photoshop en Imagen > Tamaño de imagen.
Cuando se crea una imagen en cualquiera de estas dos herramientas se trabaja con formatos nativos, de la misma de forma que pueden ir añadiéndose capas, efectos, etc. Son PSD en Photoshop y el XCF en GIMP. Pero estos tipos de imagen no pueden ser utilizados en la web y es necesario convertirlos a alguno de los formatos anteriormente explicados: JPG, GIF o PNG.
Es este momento cuando debe tomarse la decisión sobre qué formato utilizar y qué parámetros de la conversión quieren controlarse o experimentarse. Si se está utilizando GIMP, debe irse al menú Archivo > Exportar como y elegir cualquiera de los tres formatos. En Adobe Photoshop se encuentra en el menú Archivo > Guardar como. Dependiendo del formato elegido, aparecerán estas opciones:
- GIF, si se quiere un GIF entrelazado o, si PSD o XCF tienen varias capas, si se desea crear un GIF animado especificando el retraso en milisegundos.
- JPG. Lo primero es seleccionar la calidad de compresión. Además, hay algunas opciones avanzadas: si se quiere crear una imagen progresiva, con qué cantidad de suavizado e incluso otros, modificar algunos parámetros de la compresión con submuestreos o distintas variantes del algoritmo matemático.
- PNG. En este caso puede definirse el nivel de compresión si se guarda información del color de fondo, gamma o si se desea crear una imagen
- ¿Cuáles son las etiquetas para Insertar tablas, instrucciones HTML y videos?
Imágenes
En esta lección aprenderemos a insertar o colocar imágenes con código HTML, y también veremos cómo hacer que esa imagen tenga un enlace.
Llego el momento de insertar nuestra primera imagen con HTML, la etiqueta que sirve para agregar imágenes es <img> pero al igual que la etiqueta para crear enlaces, necesitamos agregar un atributo para especificar la ubicación, en este caso, de la imagen.
Para insertar una imagen lo haremos así:
<img src="ubicación"
Donde SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>.
Los navegadores (Netscape, MsIe, Opera etc.) reconocen numerosos formatos gráficos, aunque los más utilizados son dos: GIF (Graphics Interchange Format) y JPEG (Joint Photographics Experts Group). En los últimos meses, asistimos a la difusión a nivel internacional de otro formato:PNG (Portable Network Graphics).
El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.
El elemento <IMG> va acompañado de diversos atributos que facilitan su uso. Veamos ahora juntos cuáles son.
ALT
El uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones:
En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
<IMG SRC="immagine.gif" ALT="Obra de K. Haring">
WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas de la imagen que el navegador se ha encargado de buscar automáticamente. Es posible definir la anchura y la altura de la imagen gracias a los atributos width y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de K. Haring">
BORDER
Con el atributo BORDER podemos aplicar un borde a la imagen. Los valores son numéricos y van expresados en píxel. Si impostamos el valor BORDER en 0, la imagen no va recuadrada. Cuando omitimos este atributo, el navegador no aplica ningún borde, pero si la imagen es también un enlace automáticamente se le asignará un BORDER=1. La sintaxis correcta es:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring">
ALIGN
El atributo ALIGN define la posición de la imagen respecto al texto colocado inmediatamente antes o después de la misma. Existen varias opciones para el atributo ALIGN:
ALIGN=top: alinea la primera línea de texto con la parte superior de la imagen
IMÁGENES COMO FONDO DE UN DOCUMENTO
Un efecto muy utilizado es el uso de imágenes como fondo de un documento HTML. La manera de hacerlo es con el atributo BACKGROUND de la marca <BODY>.
La imagen de fondo en general será más pequeña que el área de documento del navegador. Lo que hace entonces el navegador es repetir, partiendo de la esquina superior izquierda, la imagen que hemos elegido como fondo del documento.
A la hora de elegir la imagen de fondo, es preciso tener en cuenta que el texto del documento debe ser legible por encima de la imagen, por lo que hay que evitar colocar imágenes con colores demasiado fuertes.
Un ejemplo de la inclusión de imágenes en HTML es el siguiente:
<html>
<head>
<title>Los seres vivos</title>
<head>
<body>
<body background="nubes11.jpg">
<center>
</body>
Tablas
Las tablas son una de las herramientas más útiles de que disponemos en HTML, ya que nos van a permitir en cierto modo "maquetar" nuestro documento, ayudándonos a situar dentro del mismo los diferentes elementos que lo componen, siendo esta la única forma coherente que había antes de la introducción de las Hojas de Estilo y de las etiquetas.
Es por esta facilidad a la hora de organizar con tablas nuestras páginas el que el 99% de las que veamos en Internet las usen, aunque muchas veces no las veamos directamente porque están "ocultas".
Estructura de una tabla
Las tablas están formadas por filas, columnas y celdas. Cada espacio horizontal continuado es una fila y cada espacio vertical continuado esuna columna, definiéndose una celda como el espacio formado por la intersección de una fila y una columna.
columna 1 | columna 2 | columna 3 | ||||||||||
fila 1 |
| |||||||||||
fila 2 | ||||||||||||
fila 3 |
Lo primero que tenemos que hacer cuando queremos introducir una tabla es decirle al navegador dónde empieza y dónde acaba esta; esto se consigue mediante la etiqueta de inicio <TABLE> y su correspondiente de cierre </TABLE>.
Seguidamente debemos decirle cuantas filas vamos a tener en nuestra tabla, cosa que hacemos con las etiqueta de inicio de fila <TR>> y su correspondiente de cierre de fila</TR>, por lo que deberenos insertar una pareja de etiquetas por cada fila que queramos que tenga la tabla.
Por último, dentro de cada fila deberemos indicar cuantas celdas va a haber, que inicialmente deben corresponderse con el número de columnas que deseemos tenga la tabla. Esto se consigue mediante las parejas de etiquetas <TD> y </TD>.
De esta forma, y siguiendo con nuestra tabla inicial de Ejemplo , el esquema de etiquetas sería el siguiente:
<TABLE> | |||||||||||||
<TR> |
| </TR> | |||||||||||
<TR> | </TR> | ||||||||||||
<TR> | </TR> | ||||||||||||
</TABLE> |
Este es el esquema general de toda tabla simple, que traducido a código HTML quedaría de la forma:
<TABLE>
<TR>
<TD> celda(1,1) </TD>
<TD> celda(1,2) </TD>
<TD> celda(1,3) </TD>
</TR>
<TR>
<TD> celda(2,1) </TD>
<TD> celda(2,2) </TD>
<TD> celda(2,3) </TD>
</TR>
<TR>
<TD> celda(3,1) </TD>
<TD> celda(3,2) </TD>
<TD> celda(3,3) </TD>
</TR>
</TABLE>
Multimedia
Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.
Los formatos de sonido más habituales en Internet son el WAV, el MP3 y en algunas ocasiones el MIDI, aunque existen otros formatos diferentes que también pueden utilizarse. Lo ideal es incluir algún archivo de audio que no ocupe mucho espacio, y que no por ello sea de mala calidad.
El navegador Internet Explorer puede reconocer la etiqueta <bgsound>, que se utiliza para incluir sonido de fondo. Esta nueva etiqueta no necesita etiqueta de cierre.
A través del atributo src hay que especificar la ruta y el nombre del archivo de audio.
Con el atributo loop indicamos el número de veces que se tienen que reproducir el sonido. Si se desea que el archivo de audio se reproduzca continuamente en un bucle, habrá que asignarle el valor infinite o -1.
Por ejemplo, podríamos insertar un sonido de fondo escribiendo el siguiente código:
<bgsound src="varios/audio.mid" loop="-1">
La etiqueta <bgsound> puede situarse en cualquier parte del documento, pero es preferible que la situemos siempre en un sitio fácil de encontrar, por si deseamos hacerle alguna modificación. Podríamos, por ejemplo, incluirla justo debajo de la etiqueta <body>.
Vídeo y audio <embed>
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.
Los formatos de vídeo que suelen utilizarse en Internet son el AVI, el MPEG y el MOV.
La etiqueta <embed> es la que se utiliza para insertar archivos de vídeo. Puede incluirse la etiqueta de cierre, pero en realidad no es necesaria, ya que entre las etiquetas <embed> y </embed> no hay que insertar nada.
A través del atributo src hay que especificar la ruta y el nombre del archivo de vídeo.
Los videos insertados a través de esta etiqueta se reproducen automáticamente al cargarse la página, y se reproducen solamente una vez. Esto puede cambiarse a través de los atributos autostart y loop.
El atributo autostart indica si el archivo se reproducirá automáticamente al cargarse la página, y puede tomar los valores true o false.
El atributo loop indica si el archivo se reproducirá continuamente en un bucle, y también puede tomar los valores true o false.
Los atributos width (anchura) y height (altura) sirven para especificar el tamaño de la consola de control de vídeo. Estos atributos pueden tomar como valor un número, que indica el tamaño en píxeles. Si no se especifican estos atributos, la consola de control de vídeo se mostrará con el tamaño más adecuado al tamaño del vídeo.
A la derecha tienes un ejemplo de un archivo de video, para el que se muestran los controles de video. Puedes reproducirlo pulsando sobre los controles.
Para insertar el vídeo anterior, se podría escribir:
<embed src="varios/cotorra.avi" autostart="false" loop="true">
Existen algunos navegadores que no reconocen la etiqueta <bgsound>, por lo que no es posible utilizar esta etiqueta para incluir un sonido de fondo. En su lugar, se utiliza la etiqueta <embed>, que funciona del mismo modo para los archivos de audio y de vídeo.
No hay que olvidar que para los archivos de audio también se mostrarán los controles de reproducción.
A la derecha tienes un ejemplo de un archivo de sonido, para el que se muestran los controles de audio. Si lo deseas, puedes reproducirlo pulsando sobre los controles.
Para insertar el archivo de audio anterior, se podría escribir:
<embed src="varios/audio.mid" autostart="false" loop="true">
Si no se desea que se muestren los controles de un archivo de audio, porque va a ser utilizado como sonido de fondo, puede hacerse que los atributos width (anchura) y height (altura) valgan cero.
También puede utilizarse el atributo hidden, con los valores true o false. Cuando su valor estrue, se ocultan los controles de reproducción.
Por ejemplo, para insertar sonido de fondo se podría escribir:
<embed src="varios/audio.mid" autostart="true" loop="true" hidden="true" >
O también:
<embed src="varios/audio.mid" autostart="true" loop="true" width="0" height="0" >
- ¿Qué es la nube?
- La nube informática no es un producto. Es un modo de transmisión y almacenaje de datos. Es un paradigma que permite un acceso universal, práctico a la demanda de una red compartida y a un conjunto de fuentes informáticas configurables (como por ejemplo, redes, servidores, almacenaje, aplicaciones y servicios) que pueden estar aprovisionados y liberados con un mínimo de administración.Este servicio informático, que funciona a través de Internet, tiene como objetivo el poder utilizar recursos informáticos sin tenerlos, así como también el disponer de ellos en cualquier momento y lugar que tenga acceso a Internet.Actualmente, la mayoría de las informaciones personales que se utilizan diariamente se conservan en la nube informática. Por ejemplo: Facebook, Windows Azure, Dropbox, etc…
- ¿Como puedes crear una red social y que es?
- ¿Como puedes crear una red social?
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.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.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.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.
Que es
¿Que es una red social?
Las redes sociales son sitios de Internet formados por comunidades de individuos con intereses o actividades en común (como amistad, parentesco, trabajo) y que permiten el contacto entre estos, de manera que se puedan comunicar e intercambiar información.
Los individuos no necesariamente se tienen que conocer previo a tomar contacto a través de una red social, sino que pueden hacerlo a través de ella, y ese es uno de los mayores beneficios de las comunidades virtuales.
Comentarios
Publicar un comentario