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.
¿Qué es Hipertexto?
El hipertexto es una estructura no secuencial que permite crear, agregar, enlazar y compartir información de diversas fuentes por medio de enlaces asociativos y redes sociales . El hipertexto es texto que contiene enlaces a otros textos. El término fue acuñado por Ted Nelson alrededor de 1965.
La forma más habitual de hipertexto en informática es la de hipervínculos o referencias cruzadas automáticas que van a otros documentos (lexías). Si el usuario selecciona un hipervínculo, el programa muestra el documento enlazado. Otra forma de hipertexto es el stretchtext que consiste en dos indicadores o aceleradores y una pantalla. El primer indicador permite que lo escrito pueda moverse de arriba hacia abajo en la pantalla.
El hipertexto no está limitado a datos textuales, se pueden encontrar dibujos del elemento especificado o especializado, sonido o vídeo referido al tema. El programa que se usa para leer los documentos de hipertexto se llama navegador, browser, visualizador o cliente, y cuando el lector o usuario sigue un enlace, se dice que está navegando por la web. El hipertexto es una de las formas de la hipermedia, enfocada en diseñar, escribir y redactar texto en un medio.
¿Cuál es la estructura básica de un documento Web o HTML
El esqueleto básico de HTML
Para crear un verdadero documento HTML comenzará con tres elementos contenedores:<html> <head> <body>
Estos tres se combinan para describir la estructura básica de la página:
<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..
Sólo hay una manera correcta de combinar estos tres elementos. He aquí su colocación exacta, con el doctype al comienzo de la página:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Toda página Web utiliza esta estructura básica. Los puntos suspensivos (...) muestran dónde insertaría la información adicional.
Una vez colocado el esqueleto XHTML, debe añadir dos conectores más a la mezcla.
Toda página Web requiere un elemento <title> en la sección del encabezado. A continuación, deberá crear un contenedor para el texto en la sección del cuerpo de texto (<body>).
Un elemento contenedor de texto multiuso es <p>, que representa un párrafo. Veamos con más detalle los elementos que hay que agregar:
- <title>: Establece el título de la página Web, el cual tiene varias funciones. Primero, los navegadores lo muestran en la parte superior de la ventana. Segundo, cuando un visitante crea un marcador para la página, el navegador emplea el título para etiquetarlo en el menú Marcadores (o favoritos). tercero, cuando la página aparece en una búsqueda Web, el motor de búsqueda suele enseñar este título como primera línea en los resultados, seguido de un fragmento del contenido de la página.
- <p>: Indica un párrafo. Los navegadores no los sangran pero añaden un pequeño espacio entre varios consecutivos para mantenerlos separados.
He aquí la página con estos dos nuevos ingredientes:
<!DOCTYPE html>
<html>
<head>
<title>Bienvenido a mi sitio Web</title>
</head>
<body>
<p></p>
</body>
</html>
Si abre este documento en un navegador Web, verá que la página está vacía, pero ahora aparece el título.
Cuando un navegador muestra una página Web, el título se presenta en la parte superior de la ventana, con el texto al final. Si el suyo utiliza la navegación por pestañas, el título también aparece en ellas.
Tal y como está ahora, este documento HTML es una buena plantilla para futuras páginas. La estructura básica está en su lugar; simplemente necesita cambiar el título y añadir algo de texto.
Lo primero que tenemos que saber es que en toda página web existen dos partes claramente diferenciadas: la cabecera, o head, y el cuerpo, o body.
Vamos hacer es crear una carpeta, dentro de "Mis documentos", para almacenar los ficheros de prueba que vayamos a usar.
A esta carpeta la llamaremos pruebas-html en el resto de los ejercicios. Con la carpeta abierta, haga doble clic sobre el ícono que representa al bloc de notas
¿Qué programas podemos utilizar para el diseño de una página web?
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.
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 interne
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.
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.
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?. 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.
¿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.
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.
¿Que son los Enlaces (vínculos) y cuantos tipos hay?
En el HTML los enlaces se marcan con la etiqueta <a></a> y el atributo principal es href="" donde se escribe la ubicación del archivo de destino que puede estar en la misma carpeta que el archivo que lo está llamando, en otra carpeta del mismo sitio o en otro sitio web.
Entre las etiquetas <a href=""></a> se puede colocar cualquier elemento html que funcionará como botón, generalmente se coloca un texto o una imagen. Si es un texto, el navegador por defecto lo muestra en color azul y subrayado. Si es una imagen, algunos navegadores especialmente las versiones anteriores a las actuales, le pueden agregar un borde azul.
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 absoluta del 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?
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?
Un primer ejemplo muy básico para colocar un video en nuestra página web:
<video src="video.mp4" width="640" height="480"></video>
Sin embargo, esto mostrará el primer fotograma del video, con un tamaño de 640x480, pero se verá como una imagen, ya que no muestra los controles del video y tampoco tiene la autoreproducción activada. Podríamos solucionarlo indicando los atributos controls o autoplay.
Otro ejemplos básicos para colocar videos en nuestra página:
<video src="video.webm" poster="presentacion.jpg" controls></video>
<video src="video.mp4" autoplay muted loop></video>
En este caso cargamos un video, pero que no se mostrará porque se ha indicado que se utilice una imagen de presentación que se mostrará hasta que el usuario pulse en el botón de reproducir de los controles. En el segundo ejemplo, tenemos un video que se reproduce automáticamente al cargar la página, en silencio y en bucle, iniciándose una y otra vez.
Formatos de video soportados
Antes de continuar con el modo avanzado de etiquetas de video, debemos conocer una serie de conceptos básicos y los diferentes formatos de video que existen actualmente. En primer lugar, debemos saber que un archivo de video tiene dos partes principales: el formato contenedor, que es el formato del video en sí, mientras que en su interior puede tener múltiples componentes codificados con diferentes codecs.
No hay comentarios:
Publicar un comentario