jueves, 16 de julio de 2015

Qué es HTML?

HTML El HTML es un lenguaje de programación sencillo, basado en un lenguaje de marcas o etiquetas generalizado. El HTML utiliza tags o etiquetas para estructurar texto en: encabezado, párrafos, listas, enlaces de hipertexto, etc. Cada símbolo usado en la etiqueta es lo que le indica al Browser como presentar el documento contenido en la Página Web. El inicio de una etiqueta se indica de la forma siguiente: < etiqueta > y para indicar el fin de esa etiqueta se utiliza < /etiqueta >. La barra indica el fin de la etiqueta. Todo documento HTML se inicia con la etiqueta que actúa como contenedora de todo el documento. El documento se divide en un encabezado, que lo identificamos con la etiqueta , y es la sección utilizada para definir el título del documento, la declaración de estilos, scripts, etc. La otra sección corresponde al cuerpo que se identifica con la etiqueta . Esta es la sección que contiene toda la parte visual del documento. Para crear un vínculo dentro de un documento que referencie o direccione a otro documento se utiliza la etiqueta a seguida de la palabra clave href donde se colocará la dirección URL del documento a referenciar y el texto que aparecerá mostrado en el documento, mediante el cual se establecerá el enlace. Ejemplo: Ir al Ejemplo Esto se visualizara Ir al Ejemplo y al pasar el ratón sobre el texto se mostrará la mano del cursor que permitirá hacer click para navegar al documento.




Elementos:
Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas: atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio (por ejemplo, <nombre-de-elemento>) y una etiqueta de cierre (por ejemplo, </nombre-de-elemento>). Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas (por ejemplo, <nombre-de-elemento atributo="valor">Contenido</nombre-de-elemento>). Algunos elementos, tales como <br>, no tienen contenido ni llevan una etiqueta de cierre. Debajo se listan varios tipos de elementos de marcado usados en HTML.
El marcado estructural describe el propósito del texto. Por ejemplo, <h2>Golf</h2> establece «Golf» como un encabezamiento de segundo nivel, el cual se mostraría en un navegador de una manera similar al título «Marcado HTML» al principio de esta sección. El marcado estructural no define cómo se verá el elemento, pero la mayoría de los navegador web han estandarizado el formato de los elementos. Puede aplicarse un formato específico al texto por medio de hojas de estilo en cascada.

El marcado presentacional describe la apariencia del texto, sin importar su función. Por ejemplo,<b>negrita</b> indica que los navegadores web visuales deben mostrar el texto en negrita, pero no indica qué deben hacer los navegadores web que muestran el contenido de otra manera (por ejemplo, los que leen el texto en voz alta). En el caso de <b>negrita</b> e <i>itálica</i>, existen elementos que se ven de la misma manera pero tienen una naturaleza más semántica: <strong>énfasis fuerte</strong> y <em>énfasis</em>. Es fácil ver cómo un lector de pantalla debería interpretar estos dos elementos. Sin embargo, son equivalentes a sus correspondientes elementos presentacionales: un lector de pantalla no debería decir más fuerte el nombre de un libro, aunque éste esté en itálicas en una pantalla. La mayoría del marcado presentacional ha sido desechada con HTML 4.0, en favor de hojas de estilo en cascada.


______________*************______________


Elementos de una Página Web



Una Página Web puede contener cualquiera de los elementos siguientes: Texto, Imágenes, Audio, Objetos Animados (generalmente construidos con la herramienta Adobe Flash), hipervínculos (característica que permite la navegación de una página web a otra), Meta tags (son instrucciones en lenguaje HTML que le indican a los buscadores cuales son las palabras o términos por los que debe ser indexada una página para ser encontrada), hojas de estilo en cascada o CSS (Cascading Style Sheets) que permiten separar la presentación de la página de su estructura.



Elementos:

Texto: El texto es el elemento más significativo de cualquier sitio Web porque los usuarios navegan por la Web fundamentalmente en busca de información expresada en texto.
Imágenes:Aunque no debe abusar de las imágenes por el riesgo de aumentar el peso de la página, y por lo tanto, los tiempos de descarga, las imágenes constituyen un elemento esencial para ofrecer información visual del contenido y mostrar un diseño atractivo y personal.

Espacio Web: Para que nuestro sitio Web sea visible ante todos necesitamos colocarlo en un servidor.

Un nombre de dominio: Es la primera parte de una dirección Web que identifica al servidor que almacena y sirve su sitio.

Hipervínculos: Por sí misma, una página Web no puede hacer mucho. La magia de verdad comienza cuando relaciona varias página mediante enlaces.

Vídeo: Mientras Internet es cada vez más asequible, confiable y veloz, los programas de edición de video se hacen más cercanos a los usuarios.
Ahora es más fácil realizar un video desde una cámara digital o un teléfono móvil con cámara incorporada y que termine subiendo a la Web para ponerlo al alcance de todos.

Animaciones en Flash: Es una imagen animada, fácil de crear y sobre todo que ocupa poca memoria. Tiene diferentes usos, desde la creación de dibujos animados hasta el despliegue de dibujos interactivos.
Sonidos: Un elemento cada vez más importante. La comercialización de nuevos dispositivos digitales móviles como el iPhone ha potencializado este elemento.
Además de incorporar sonido a las páginas Web puede descargar de ellas archivos de audio para sus dispositivos móviles.

El formato MP3 es el más conocido y más usado por su calidad y nivel de compresión.



Otros elementos.

Otros elementos bastante comunes son:
Banner: Una imagen fija o animada utilizada generalmente para publicidad.
Marcos: También llamados frames, son una especie de recuadro independiente en el que puede cargar una página Web.
De esta forma es posible dividir una página Web en diferentes partes o ventanas, cada una con sus propios bordes y barras de desplazamiento, cargando dentro de cada una de ellas una página web externa independiente.
Los marcos se usaron mucho en un momento determinado, pero además de crear algunos inconvenientes en el diseño, es una opción que no recomiendo ya que los motores de búsquedano indexan correctamente los sitios realizados con marcos.
Actualmente se pueden obtener los mismos resultados con CSS.

Formulario: Zona para introducir datos o comentarios. Una plantilla o página con espacios vacíos para llenarse con alguna finalidad.
También se utiliza para referirse al conjunto de campos solicitados por un determinado programa, los cuales se almacenan para su manipulación y uso posterior.

El diseño Web
La Web se ha convertido en el medio de comunicación más importante del mundo gracias a su facilidad para ofrecer información con una rapidez nunca antes alcanzada por ningún otro medio.
Esta información puede ser consumida por cualquiera que tenga una conexión a Internet desde cualquier parte del mundo.
El desarrollo Web es una mezcla de tecnología, contenidos, arquitectura del sitio, diseño e interactividad.
El éxito de un sitio depende de la forma en que se combinan estos cinco factores que determinan en gran medida la rapidez con que se genera y ofrece la información, y por supuesto el éxito de un sitio.
Antes de analizar estos factores independientemente, debe considerar que ellos deben garantizar que el sitio sea fácil de mantener, flexible para cambiar de tamaño y realizar actualizaciones, atractivo y visualmente para los usuarios, interesante para su audiencia, práctico para realizar descargas rápidas y búsquedas efectivas; también sólidos técnicamente, sin vínculos rotos, ni comportamientos inadecuados.
En el contenido Web influyen la presentación, los conceptos de diseño y algunas estrategias comunes del trabajo en Internet.
Los elementos visuales como el calor, el diseño de tipografía y las imágenes, conforman la personalidad de un sitio y generan un impacto emocional que determina que el sitio sea atractivo.
Aunque el objetivo final de todo diseñador sea transmitir un mensaje a una audiencia determinada, ser un buen diseñador gráfico no significa necesariamente ser un buen diseñador para la Web.
Cualquiera independientemente de su nivel artístico, puede conseguir un diseño funcional con buena apariencia.



Un poco de experiencia y conocimiento de algunos principios básicos de diseño más cierto grado de inspiración, originalidad y buen gusto harán que tenga parte de la batalla ganada.

¿Qué es hipertexto y como funciona?


El Hypertext o hipertexto, es un mecanismo de comunicación que permite desde un documento navegar a otro documento. Este mecanismo se realiza insertando un enlace en algún texto del documento y es una facilidad que provee el lenguaje HTML. Cuando navegamos en Internet estamos visualizando Páginas Web. A cada Página Web le corresponde un único URL (Uniform Resource Locator o localizador uniforme de recursos), que es una secuencia de caracteres que se utilizan para identificar objetos (como documentos e imágenes) en Internet por su localización, ej: http://www.econta.com/demo/index.html El URL identifica en que ordenador se encuentra el objeto a mostrar (www.econta.com), bajo que estructura de directorio (/demo) y finalmente, el nombre específico del objeto (index.html). Cada enlace que se encuentren en una Página Web contiene una dirección URL, cuando efectuamos un click sobre cualquiera de estos enlaces se envía un requerimiento para obtener un documento que se encuentra alojado en un ordenador en alguna parte del mundo y que está identificado unívocamente por su URL. 



Características.


Las siguientes son características básicas de un hipertexto:
  • Esta tecnología debe proveer un medio adecuado para organizar y presentar información poco o nada estructurada, no ajustada a esquemas tradicionales y rígidos como es el caso de las bases de datos. Pueden utilizarse esquemas jerárquicos para la utilización de sistemas de documentación de texto tradicionales, muy organizados o simplemente creando estructuras de redes con poco o ningún atributo de precedencia.
  • Tener asociada una interfaz de usuario muy intuitiva, pues se pretende imitar el funcionamiento de la mente humana, haciendo uso de modelos cognitivos, por lo que el usuario no debería realizar grandes esfuerzos para obtener la información requerida.
  • La información se encuentra distribuída y puede ser accesada en forma concurrente por varios usuarios, por lo tanto es un ambiente compartido.
  • Es un ambiente colaborativo: un usuario puede crear nuevas referencias entre dos documentos cualesquiera en forma inmediata e independiente de los tipos de contenido, haciendo crecer su hiperdocumento, sin generar cambios en el hiperdocumento referenciado. Estas referencias pueden estar embebidas en el documento, de modo que aunque éste se cambiara de instalación, el enlace seguiría proporcionando acceso a la información referenciada.
  • Tiene asociados varios mecanismos de recuperación y búsqueda de información a través de las navegaciones, ya sean dirigidas o no dirigidas. 


Utilidades

El hipertexto permite almacenar grandes cantidades de información en poco espacio aparente, ya que la información se muestra al usuario de manera fragmentada. Puede incluir imágenes, gráficos, sonidos, animaciones, además de texto y se puede aplicar en entornos de programación, aplicaciones educativas y formación asistida por ordenador. Pero principalmente se utiliza cuando la información está organizada en muchos fragmentos relacionados entre ellos y el usuario necesita solo una pequeña parte de toda esa información.
En la práctica, el hipertexto se utiliza principalmente con:
Materiales de referencia (general o específica) en la que el usuario solo quiere obtener aquella información que busca. Un ejemplo puede ser cualquier manual en línea.
Material fragmentado en secciones cortas y autónomas que ofrezcan la información concreta y concisa que el usuario busca. Si su interés es mayor, puede acceder a información complementaria en otros enlaces mediante vínculos en el texto principal.
El hipertexto configura una nueva forma de escribir y de entender el texto. Los lectores escanean la pantalla sin leer todo lo que contiene, buscando elementos que destaquen y llamen la atención. La experiencia con el hipertexto le da al usuario un mejor manejo estratégico del mismo y le vuelve más crítico con el contenido de Internet. En ambientes educativos, el hipertexto ayuda a desarrollar actividades como asociar, relacionar, fragmentar o esquematizar.






El ejemplo más claro de hipertextos hoy en día son los links en las páginas de internet.



_____________**************_______________


Características de una Pagina Web

LAS 10 CARACTERÍSTICAS MÁS IMPORTANTES  QUE UNA PÁGINA WEB DEBE OFRECER


Mucho se comenta acerca de la generación de contenido en nuestras páginas de Internet, del HTML5, del posicionamiento en buscadores, de la web 2.0, etc. pero son muchas las empresas que obvian un aspecto fundamental: el diseño y características que su web debe cumplir para triunfar. Un contenido de calidad puede quedar deslucido debido a un diseño poco atractivo y útil de su sitio web. Es por ello que hoy traemos un decálogo de las características más imprescindibles que su página debe de cumplir para incrementar su efectividad, credibilidad y éxito.


1.-Utilidad.
El contenido debe de ser útil para el usuario y relacionado con su búsqueda y temáticas del sitio. De lo contrario abandonará la página a los pocos segundos para no volver en un tiempo.

2.-Facilidad de navegación.
No saber dónde está el usuario en cada momento y no encontrar la información rápidamente es otro aspecto que hará al navegante cansarse y abandonar el sitio.


3.- Apariencia.
La apariencia de un sitio es fundamental. Ten en cuenta tus colores corporativos, pero no uses colores fuertes ya que causan fatiga y rechazo. Recuerda que un buen contenido puede parecer malo si la apariencia no es la adecuada.


4.- Estructura clara.
La información mostrada debe de estar bien estructurada, haciendo que esta se presente de manera clara. Un aspecto a tener en cuenta es la posición de la información y la longitud de esta, ya que el usuario tiende a cansarse.


5.- Información actualizada, sencilla, creíble y concisa.

La información deberá ser lo más sencilla y concisa posible, pero suficiente. También deberá ser creíble, de lo contrario no será si quiera tenida en cuenta por la mayoría de visitantes. Obviamente deberá estar lo más actualizada posible dado que de lo contrario el usuario concibe la información como poco útil, antigua y se le causará una mala impresión de la empresa.




6.- Rapidez de descarga.

Páginas que tardan demasiado en cargar están abocadas al fracaso. Así que hazlas lo más ligeras posible y elige un buen hosting.



7.- Pocos clicks.
Fundamental. Cuanto más rápido, mejor.


8.- Evita malos hábitos.
Registros innecesarios, ventanas emergentes, obligatoriedad de instalar software, enlaces que no funcionan, contenido que no existe, etc. Son elementos que mayor rechazo provocan entre los internautas.


9.- Interactividad.
En la era social, la web también ha de serlo. El usuario ya no solo demanda información sino, además, la posibilidad de interactuar en la misma página.




10.- Información de contacto.

Su sitio ganará en crediblidad y confianza al ofrecer información de contacto de su empresa.
Concluyendo, no espere tener éxito con su portal si no cumple con unas mínimas características. Y no olvide medir sus resultados para detectar sus puntos débiles y corregirlos.