Mapa del Sitio o Sitemap de una Web

Un Sitemap o Mapa del Sitio es la estructura de enlaces de páginas web que definirá la buena o mala navegación de un sitio web. Como veremos en este artículo, además un sitemap se puede usar para mejorar nuestro posicionamiento en motores de búsqueda.

Empezando por la página de Inicio hasta la página de contacto, todo sitio web debe tener un mapa para que la navegación del usuario web sea lo más fácil posible. El menú del sitio web debe contener las páginas principales, que pueden estructurarse en páginas y subpáginas, lo importante es que la navegación sea lógica e intuitiva.

Desarrollo Web y Mapa del Sitio

Una de las tareas principales en el momento de desarrollar un sitio web es la elección de los contenidos del sitio web. Para ello hay que crear un Mapa del Sitio, una lista de páginas web estructuradas, con una arquitectura de enlaces adecuada para una correcta navegación del usuario y un mejor posicionamiento en motores de búsqueda.

Clases de Sitemaps

Los dos sitemap más conocidos son: de página (de texto o html) y en formato xml. El sitemap de página suele ser una página web que incluye todos loslinks o enlaces  estructurados del sitio web. Un sitemap en formato xml se usa como herramienta de posicionamiento web para facilitar la rápida inclusión de esas páginas en el índice de los motores de búsqueda como Google.

Mapa de Mi sitio Web

Bibliografía

http://cursoweb20.net/2012/08/03/que-es-un-mapa-del-sitio-o-sitemap-de-una-web/

Lenguaje CSS

Definición de CSS

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe cómo se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille

¿Para qué sirve el CSS?

CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentación del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

¿Cómo funciona el lenguaje css?

El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.

Selector

El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.

Declaración

La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.

Propiedad o Atributo y Valor

Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándose le un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño, es decir, especifican qué aspecto del selector se va a cambiar.

Ventajas de CSS

CSS permite un mejor control en la presentación de un sitio web que los elementos de HTML, agilizando su actualización.

Aumento de la accesibilidad de los usuarios gracias a que pueden especificar su propia hoja de estilo, permitiéndoles modificar el formato de un sitio web según sus necesidades, de manera que por ejemplo, personas con deficiencias visuales puedan configurar su propia hoja de estilo para aumentar el tamaño del texto.

Una página puede tener diferentes hojas de estilo para mostrarse en diferentes dispositivos, como pueden ser impresoras, lectores de voz, o móviles.

Ejemplo CSS

<html>  <head>  <link rel="stylesheet" type="text/css" href="CSS.css">  <style type="text/css">  body {  color: purple;  background-color: #d8da3d }  </style>  </head>  <body>  </body>  </html>

BIBLIOGRAFIA

http://www.masadelante.com/faqs/css

http://posicionamientobuscadores.developers4web.com/css-ventajas-al-posicionamiento

LENGUAJE HTML

HTML

Es el lenguaje que se emplea para el desarrollo de páginas de Internet  Está compuesto por una serie de etiquetas que el navegador interpreta y da forma en la pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea, listas, tablas, etc

Estructura de un documento HTML

Todas las páginas web tienen la siguiente estructura:

    

<html>    <title>Primera página</title> </head> <body> </body> </html> <head>

Esta etiqueta es obligatoria dentro de la sección head.

Ventajas y desventajas HTML

El XML pretende en definitiva que en el mundo de Internet, los documentos sean más fáciles de integrar en esas páginas.

Ventajas del HTML:

• Es el lenguaje de formateo para los navegadores web.
• Es fácil de entender y utilizar
• Su uso es muy extendido

  

Desventajas de html

Inconvenientes que intenta suplir el XML.

• No tiene semántica. Uso de etiquetas con nombres diferentes
• El contenido no puede ser reconocido ni procesado por programas
• Tiene un costoso mantenimiento de las páginas
• No tiene estándares comunes.
• Solo tiene hiperenlaces simples(XML puede tener de 1 a n enlaces).Xlink

En resumen, el HTML es un lenguaje muy fácil de comprender y muy utilizado para la presentación de la información, pero esta no se puede procesar ni almacenar, ya que no permite su manipulación por un programa debido a su anarquía.

ETIQUETAS HTML

Etiqueta <html> y terminar con </html>.

Todo lo que figure entre estas etiquetas será interpretado por el navegador como un documento HTML. Lo que quede fuera de ellas será, en la mayoría de los casos, ignorado.El documento HTML se divide siempre en dos partes: cabecera y cuerpo

Etiquetas <head> y </head>.

 En ella se especifica el título, el autor, y otras características del documento que no se muestran físicamente en la página y que sirven para facilitar su indexación (son lo que se conoce como meta tags). En la cabecera también deben incluirse los scripts que necesite el documento (JavaScript, JScript, etc.) y las definiciones de estilos (si se utilizan hojas de estilos).

Etiquetas <Title> y </Title>.

Indica el título de la página para el navegador.

La etiqueta <title> define el título de un documento.

•        La barra superior del navegador.
•      Cuando lo agregamos a nuestros favoritos.
•       Los tabs de los nuevos navegadores.

La Etiqueta <SCRIPT>

La etiqueta <script> se utiliza para definir un script del lado del cliente, tales como JavaScript

Etiquetas <Link> y </Link>.

<Link> define un enlace entre el documento y algún recurso externo, que debe ser ubicado en la sección head del documento

 Etiquetas <body> y </body>.

 La etiqueta <body> puede llevar incluida información sobre las propiedades de la página:

<body bgcolor="#xxyyzz"> define el color de fondo de la página.

<body text="#xxyyzz"> define el color por defecto del texto en la página.

<body link="#xxyyzz"> define el color de los enlaces.

<body vlink="#xxyyzz"> define el color de los enlaces visitados.

<body alink="#xxyyzz"> define el color de los enlaces activos.

<body background="imagen.gif"> establece una imagen para el fondo de la Página.

 La etiqueta <table></table>

 se utiliza para definir una tabla, que se componen con las siguientes etiquetas:

<table width="XX%"> Determina la anchura de la tabla. Puede darse en píxeles

(no lleva el símbolo %), o en porcentaje de la página.

<table height="XX> Determina la altura de la tabla en píxeles.

<table border="X"> Establece el grosor en píxeles del borde de la tabla

<table cellspacing="X"> Define el espacio en píxeles entre las celdas

<table cellpadding="X"> Define el espacio en píxeles entre el borde y el texto

<tr>……<tr> determina cada una de las filas de la tabla

<td>……</td> determina cada una de las columnas dentro de las filas

ATRIBUTOS

ALINK="..." Especifica el color de las Direcciones activadas en la página.

BACKGROUND="..." Especifica el papel tapiz de la página. un Archivo *.jpg o *.gif.

BGCOLOR="..."Especifica el Color del Fondo del Documento.

SIZE="..." Fija el tamaño de las Letras, se usa un número entre 1 y 7 donde el 3 es el tamaño por omisión. Tambien permite

COLOR="..." Especifica el color de las Letras en todo el Documento.

NAME="..." Especifica el tipo de apariencia de la Letra en todo el Documento.

<Hn>...< /Hn>  Especifica un encabezado de texto de varios tamaños, n indica los tamaños de 1 a 6, 1 es el más grande y 6 es el más pequeño.

<B>...< /B> Resalta en Negritas el Texto encerradot.

 <BIG>...< /BIG> Incrementa el tamaño del Texto.

BIBLIOGRAFÍA

www.wikipedia.com

http://www.slideshare.net/maxymiliano/html-qu-es-y-para-que-sirve

http://ima.udg.edu/~dagush/cursohtml/etiquet1.htm

http://foros.abcdatos.com/viewtopic.php?t=10117

VOCABULARIO WEB

Terminología  más usada

Términos  utilizados en desarrollo web

Página Web.- Es  un documento creado en un lenguaje  HTML por un lenguaje que un navegado  contiene algún tipo de información como texto, imagen, video, animación u otros

.

Sitio Web.- es el conjunto de páginas web  también se los conoce como los directorios  estos pueden guardar imágenes  videos etc.  Son los que forman un sitio.

 HTML.  Es un lenguaje de marcación especialmente ideado para permitir la creación de contenidos basados en el hipertexto, es decir, enlaces que permiten desplazarnos a través de diversos documentos en cualquier momento.

Hipervínculo. (Enlace Web). E s un enlace, normalmente entre dos páginas web de un mismo sitio, pero un enlace también puede apuntar a una página de otro sitio web que es  conocido dentro de un lenguaje como Link.

Lenguaje de Programación.-  Es  un lenguaje artificial que puede ser usado para controlar el comportamiento de una máquina, especialmente una computadora que nos sirve para  hacer programas páginas web.

 Ejemplos de  Lenguaje de Programación enfocados  al desarrollo web

C++. Lenguaje de programación siendo este una mejora del lenguaje C, con el cual puedes crear muchos tipos de programas

C#. Es un lenguaje de programación diseñado para .net framework con el puedes hacer programas para Windows

Java. Crear un sistema que utilice una base de datos que este en un servidor, por ejemplo un sistema de control de inventario.

 Objetive-C. Es un lenguaje de programación orientado a objetos creado como un superconjunto de C para que implementase un modelo de objetos

Editor Web.- es una aplicación desarrollada para la creación de páginas web sin que, en general,  sea necesario saber programación o HTML que nos permite crear un software.

Ejemplos de editores web

Editores en modo texto. Es uno de los más conocidos y  es muy sencillo y parecido al Bloc de Notas de Windows.

Editores mixtos. Tiene una característica que le hace único. Con el "WebThing" se pueden preparar los textos, las tablas y los documentos
  Editores visuales: existe una gran variedad, por ejemplo, tenemos el FrontPage de    Microsoft que forma parte del paquete Office.

CMS.- (Content Management System) traducido literalmente por Sistema Gestor de Contenidos es un término  ha aplicado a los sistemas de gestión de contenidos orientados a crear páginas web.

Servidor Web.- Es un programa que se ejecuta continuamente en un computador, manteniéndose a la espera de peticiones de ejecución  de Internet es un servicio que nos presta  una empresa  que tenga una computadora disco duro al programa web.

FTP.- El protocolo FTP (Protocolo de transferencia de archivos) es, como su nombre lo indica, un protocolo para transferir archivos.

Cliente FTP.- Es un software que le permite al usuario  entrar al servicio web  y con eso podemos  administrar  nuestro servicio web.

HTTP:_  (Protocolo de transferencia de hipertexto) es el método más común de intercambio de información en la worldwide web, el método mediante el cual se transfieren las páginas web a un ordenador.

WWW.- World  Wide Web, es básicamente un medio de comunicación de texto, gráficos y otros objetos multimedia a través de Internered mundial.

Hosting.-   se lo conoce como hospedaje web dentro de un servicio web que es  el  avance de la tecnología ha permitido que nosotros tengamos acceso a mucha información no solo a través de los medios de comunicación como la Televisión, la radio y el periódico, también a través del Internet.

Dominio.- Es una red de identificación asociada a un grupo de dispositivos o equipos conectados a la red Internet   una dirección web asociada  a un servidor web.

Ejemplos de dominios

www.com.  Página de  servicios de ecuador

www.edu.ec .página de educación

www.gov .Pagina de gobierno

www.org .

Url.-http://www.google.com – (Uniform ResourceLocators,) localizador  universal de recursos e identifica a un determinado elemento y su ubicación exacta en la red de Internet es una cadena de texto que    nos permite acceder a la dirección de un sitio web.

Ftp: // significa protocolo de transferencia de archivos, es una herramienta de Internet más antigua que la WWW y es usada para recibir y/o enviar archivos de una máquina a otra.

ISP.- (Significa proveedor de servicios de Internet) .Es un proveedor de servicio  de internet. (Presta sus servicios integrales)

Applets.-se los conoce como otros nombres pequeños son programas pequeños sirven para hacer aplicaciones en una página web.

Widgets, Plugins. Es un software que permite leer todos lenguajes  de XML.

Navegador. Es un programa que permite visualizar páginas web en la red además de acceder a otros recursos, documentos almacenados y guardar información.

Ejemplos de  los navegadores más importantes

Internet Explorer

Google Chrome

Mozilla Firefox

Safari

Buscador.- es una página de internet que permite realizar búsquedas en la red. Su forma de utilización es muy sencilla, basta con introducir una o más palabras clave en una casilla y el buscador generará una lista de páginas.

 Metabuscador.- Es una página web que busca la información que le solicitamos en varios buscadores convencionales al mismo tiempo.

Frames(marcos).- Son componentes de área subdividen la página web y permiten aplicar en diferentes áreas.

Tablas.-  se conoce como un  elemento dentro de una página web   y a la distribución de los espacios  de las mismas.

Webmaster.- (Significa Maestro Web) Es el que puede  desempeñar como encargado  de mantenimiento  del desarrollo de una página web y gestiona los contenidos.

Banner.-Es un elemento grafico en el cual nosotros  ponemos publicidad  en un sitio Web.

Formato de Imagen.- Es un archivo  que representa un imagen, escanear, almacenar.

Investigar los formatos de imagen  y significado   de las siglas

BMP. es el formato de imágenes a gran escala o ,muy definidas, las imágenes en esta extensión suelen ser pesadas

TIFF. Es un formato de archivo informático para imágenes

GIF. Es un formato que utiliza compresión sin pérdida de información

PNG .Nace justamente, para reemplazar y mejorar al formato 

JPEG. s el formato de imagen más común utilizado por las cámaras fotográficas digitales y otros dispositivos de captura de imagen

          

Formatos de video.- Son  vídeos que  guardan los datos de un archivo de vídeo con el fin de que puedan ser interpretados por el ordenador. 

(ejemplos más importantes Formatos de video)

AVI. (siglas en inglés de Audio Video Interleave) es un formato contenedor de audio y video lanzado por Microsoft en 1992.

 MOV. son las extensiones que el sistema operativo usa para saber de qué archivo se trata y con qué programa abrirlo

 MP4. s un formato de codificación de audio asociado a la extensión mp4

 MP3. es un formato de compresión de audio digital patentado que usa un algoritmo con pérdida para conseguir un menor tamaño de archivo

Multimedia.- Multimedia es un sistema que utiliza más de un medio de comunicación para transmitir, administrar o presentar información, combinando texto, imagen, animación, sonido y vídeo.

Formatos multimedia

Texto: sin formatear, formateado, lineal e hipertexto.

Gráficos: utilizados para representar esquemas, planos, dibujos lineales...

Imágenes: son documentos formados por píxeles.

Animación: presentación de un número de gráficos por segundo que genera en el observador la sensación de movimiento.

Vídeo: Presentación de un número de imágenes por segundo, que crean en el observador la sensación de movimiento. Pueden ser sintetizadas o captadas.

Sonido: puede ser habla, música u otros sonidos.

  

Propiedades.- son características que nosotros le aplicamos  a este  archivo.

Blog.-  Es una publicación online con historias publicadas con una periodicidad muy alta que son presentadas en orden cronológico inverso, es decir  desarrolladores web.

Entrada.-  q en el campo de la informática, una serie de datos que es recibida por un determinado sistema que es una entrada de blog.
Redes sociales.-Es una estructura social compuesta por un conjunto de actores (tales como individuos u organizaciones) que están conectados por díadas denominadas lazos interpersonales

Ejemplos de redes sociales

Facebook

YouTube

Twitter

Wikipedia

LinkedIn

Google+MySpac+

Slideshare

SEO.  Significa optimizar los sitios web para que los buscadores sean capaces de indexarlos e interpretar sus contenidos, haciendo que de forma natural se sitúen en posiciones relevantes en los resultados de búsqueda.