Diseño de una página web
- Conocimiento tecnológico de internet: 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.
- ¿Qué es Hipertexto?: El hipertexto en informática es una herramienta de creación, enlace y distribución de información de diversas fuentes, que opera en base a una estructura no secuencial sino asociativa, es decir, no lineal, directa, sino que lleva de una cosa a otra, muy a la manera del pensamiento humano.Esto se da mediante enlaces asociativos denominados hipervínculos o referencias cruzadas, que llevan de un documento principal a otros secundarios en los cuales es posible rescatar información suplementaria o complementaria. A esta dinámica se la denomina enlace o link (del inglés), y es fundamental en el uso de Internet.
- ¿Cuál es la estructura básica de un documento Web o HTML?
- <html>: Este elemento envuelve todo el contenido de la página (excepto la DTD)
- <head>: Este elemento designa la parte de encabezado del documento. Puede incluir información opcional sobre la página Web, como puede ser el título (el navegador lo muestra en la barra de título), palabras clave de búsqueda opcionales y una hoja de estilo opcional.
- <body>: Este elemento alberga el contenido de su página Web, es decir, aquello que queremos que aparezca en el área de navegación del navegador..
- ¿Qué programas podemos utilizar para el diseño de una página web? Estos programas son para la edición de código HTML, cuentan con tutoriales específicos, como editores WYSIWYG. (What You See Is What You Get, lo que ves es lo que obtienes. Se aplica a los procesadores de texto y otros editores de texto con formato, como los editores de HTML que permiten escribir un documento viendo directamente el resultado final, frecuentemente el resultado impreso). Algunos ejemplos de estos programas son: Dreamweaver, Adobe GoLive, HTMLKit. Komposer, TsWebEditor, Edit plus, Arachnophilia, Coffee Cup free y Front page
- ¿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.
- ¿Que son los Enlaces (vínculos) y cuantos tipos hay?
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?
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.
- ¿Cuáles son las etiquetas para Insertar tablas, instrucciones HTML y videos?
| Atributo | Valor | Descripción |
|---|---|---|
| src | Dirección URL | Video a reproducir. Obligatoria si actua como etiqueta contenedora. |
| poster | Dirección URL | Muestra una imagen a modo de presentación. |
| preload | auto | metadata | none | Indica como realizar la precarga del video. |
| mediagroup | nombre | Establece un nombre para un grupo de contenidos multimedia. |
| autoplay | - | Comienza a reproducir el video automáticamente. |
| loop | - | Vuelve a iniciar el video cuando finaliza su reproducción (bucle). |
| muted | - | Establece el video sin sonido (silenciado). |
| controls | - | Muestra los controles de reproducción. Por defecto no se muestran. |
| width | tamaño | Indica el tamaño de ancho del video. |
| height | tamaño | Indica el tamaño de alto del video. |
¿Qué entiendes por nube?: Lo que yo entiendo po nube es un almacenamiento externo que sube datos en alguna parte del internet para ahorrar almacenamiento interno.
- ¿Qué es la nube?La definición de la nube puede parecer poco clara, pero, básicamente, es un término que se utiliza para describir una red mundial de servidores, cada uno con una función única. La nube no es una entidad física, sino una red enorme de servidores remotos de todo el mundo que están conectados para funcionar como un único ecosistema. Estos servidores están diseñados para almacenar y administrar datos, ejecutar aplicaciones o entregar contenido o servicios, como streaming de vídeos, correo web, software de ofimática o medios sociales. En lugar de acceder a archivos y datos desde un equipo personal o local, accede a ellos en línea desde cualquier dispositivo conectado a Internet, es decir, la información está disponible dondequiera que vaya y siempre que la necesite.Las empresas utilizan cuatro métodos diferentes para implementar recursos en la nube. Hay una nube pública, que comparte recursos y ofrece servicios al público a través de Internet; una nube privada, que no se comparte y ofrece servicios a través de una red interna privada, normalmente hospedada en el entorno local; una nube híbrida, que comparte servicios entre nubes públicas y privadas, según su finalidad; y una nube comunitaria, que comparte recursos solo entre organizaciones, por ejemplo, con instituciones gubernamentales.
- ¿Como puedes crear una red social y que es? Las redes sociales son espacios en donde personas con intereses en común pueden interactuar. Todo lo demás es variable. Las empresas pueden crear una red social para fortalecer la comunicación entre sus clientes y empleados. Un colegio o universidad para los alumnos y toda la comunidad educativa. También se puede aprovechar para el lanzamiento de un nuevo producto
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.
