HTML

HTML significa "Lenguaje de marcas de hipertexto" 

es el lenguaje utilizado para representar documentos en la Web. 

Incluyen elementos multimedia:

• ·        Gráficos.
• ·        Vídeo.
• ·        Audio.
• ·        Enlaces (documentos o sitios de internet).
• ·        Se pueden crear y visualizar páginas desde cualquier sistema operativo por ser portable.

Ventajas:

•        Fácil de usar
•         Permite la comunicación rápida y directa con una o varias personas que se encuentren en cualquier parte del mundo.
•         Desarrollo de diferentes proyectos y propuestas para darlos a conocer a través de la red.
•         Se puede contactar con diferentes personas para realizar negocios, trabajos, proyectos, etc.

Desventajas:

•          Es muy básico
•          No ofrece diversidad de opciones
•          No es muy completo

¿Qué necesito para crear una página Web?

•          Contenido de la página.
•          Navegador.
•          Editor HTML.
•          Imágenes u otros archivos.
•          Un programa para subir la página al servidor como: WS_FTP.
•         Mantenimiento de la página.

¿Cómo empiezo a escribir HTML?

•          Se necesita de un editor de texto o Bloc de notas  y un navegador para visualizarlo.
•          Se realiza el código.
•          Se va guardar con extensión .htm o .html.
•          Cuando hagas doble clic sobre él se abrirá el navegador y se mostrará la página.

Etiquetas:

Las etiquetas son marcas insertadas en un documento HTML para proporcionar información sobre una unidad o contenido.

·    

•             Las etiquetas están encerradas entre los signos "<" y ">".
•             Generalmente vienen en pares <p> y <⁄p>.
•             La primera es de apertura y la segunda de cierre.
•             El texto que se encuentra entre dos etiquetas es el contenido del elemento.
•             Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea <b> es lo mismo que <B>.

Atributos:

Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML.

•         Los atributos siempre van con la estructura: nombre="valor".
•         Los atributos siempre van en la etiqueta de apertura.
•     Los valores siempre hay que ponerlos entre comillas

Complementos:

      Se le pueden agregar cosas como:

•         Formatos del texto
•         Listas
•         Enlaces
•         Imágenes
•         Multimedia
•         Tablas
•         Mapas sensibles
•         Formularios
•         Frames

Versiones:

Problemas Generales de una Pagina Web

•Para muchos, los problemas en una pagina no necesariamente tienen que ver con nuestro ordenador, o nuestra conexión a internet, o el navegador que estamos usando, sino simplemente son problemas que nosotros como usuarios y creadores de contenido web tenemos, por ello eh aquí un listado de problemas y soluciones habituales y no tan habituales para que nuestra pagina web sea agradable a todo publico, o por lo menos a la mayoría de los internautas.

•1.- El usuario debe saber qué se trata en el instante: Si un visitante no puede entender lo que es su sitio en un par de segundos, es probable que se vaya a otra parte. Su sitio debe comunicar por qué tengo que invertir mi tiempo allí, y rápido.

•2.- Hacer el contenido escaneable: Internet no es un libro, así que olvídate de grandes bloques de texto. Probablemente van a visitar su sitio mientras trabajan en otras cosas para asegurarse de que puede escanear a través de todo el contenido. Viñetas, encabezados, subheaders, listas. Todo lo que ayudará al lector a filtrar lo que está buscando.

3.- No requiere de un registro a menos que sea necesario : Vamos a poner esto en claro, cuando navego por Internet que quiere obtener la información, no al revés. No me obligues a registrarse y dejar a mi dirección de correo electrónico y otros detalles, a menos que sea absolutamente necesario (es decir, a menos que lo que usted ofrece es tan bueno que voy a tener con el registro).

•4.- No uso excesivo de Flash : además de aumentar el tiempo de carga de su sitio web, el uso excesivo del flash también puede molestar a los visitantes. Utilícelo sólo si usted debe ofrecer características que no son compatibles con las páginas estáticas.

•5.- No reproducir música: en los primeros años de los desarrolladores web de Internet siempre se trató de integrar con éxito a la música en sitios web. ¿Sabes una cosa?, han fallado miserablemente. No utilice la música, y punto.

6.- Asegúrese de incluir datos de contacto: no hay nada peor que un sitio web que no tiene información de contacto. Esto no es malo sólo para los visitantes, sino también para ti. Es posible que pierda información importante en el camino.

7.- Evite las estructuras complejas URL : uno simple, basada en palabras clave estructura de la URL, no sólo mejorará su posicionamiento en los buscadores, sino que también hará más fácil para el lector para identificar el contenido de sus páginas antes de visitarlas.

8.- Evitar el "desplegable" menús: el usuario debe ser capaz de ver todas las opciones de navegación de recta. El uso de "desplegable" menús pueden confundir las cosas y ocultar la información que el lector estaba realmente buscando.

10.- Utilice una estructura de navegación sencilla: a veces menos es más. Esta regla se aplica generalmente a las personas y las opciones. Asegúrese de que su sitio web tiene una estructura única, una navegación clara. La última cosa que quiere es confundir al lector con respecto a dónde debe ir para encontrar la información que está buscando.

•11.-Evite "intros": no obligar al usuario a ver o leer algo antes de que pueda acceder al contenido real. Esto es evidente molesto, y se quedará sólo si lo que tiene que ofrecer es realmente único.

•12.- . No subrayado o color de texto normal: no subrayar el texto normal, a menos que sea absolutamente necesario. Igual que los usuarios tienen que reconocer los vínculos con facilidad, no deben recibir la idea de que algo se puede hacer clic cuando en realidad no lo es.

13.- No utilice archivos GIF animados: a menos que tenga banners publicitarios que requieren de animación, evitar GIFs animados. Ellos hacen un sitio de aspecto profesional y en detrimento de la atención del contenido.

14.- No utilice colores fuertes: si el usuario es un dolor de cabeza después de visitar su sitio durante 10 minutos consecutivos, probablemente debería conseguir un esquema de color mejor. Diseño de la paleta de colores en torno a sus objetivos (es decir, entregar un estado de ánimo, que la atención al usuario sobre el contenido, etc.)

15.-  No utilice ventanas emergentes: este punto se refiere a las ventanas emergentes de cualquier tipo. Incluso el usuario solicita las ventanas emergentes son una mala idea, dada la cantidad cada vez mayor de los bloqueadores de pop que hay.

16.- Incluya vínculos funcionales en el pie de página: la gente está acostumbrada a desplazarse hacia abajo al pie de página de un sitio web si no encuentran una información específica. Por lo menos que desea incluir un enlace a la página principal y, posiblemente, un enlace a la sección "Contáctenos" de la página.

17.- No al desplazamiento horizontal: mientras que algunos de desplazamiento vertical es tolerable, lo mismo no se puede decir de desplazamiento horizontal. La resolución de pantalla más usado hoy en día es 1024 x 768 píxeles, así que asegúrese de que su sitio web se ajusta dentro de la misma.

•18.-  No haya errores ortográficos o gramaticales: esto no es un error de diseño web, pero es uno de los factores más importantes que afectan a la calidad global de un sitio web. Asegúrese de que sus enlaces y textos no contengan errores ortográficos o gramaticales.

•19.- soporte para los diferentes dispositivos móviles: ok, ok, tu pagina puede ser la mejor del mundo pero, si solo funciona para un ordenador de PC no será muy útil en todos los casos ya que el mundo se esta revolucionando y por ende mayor numero de personas utilizan dispositivos móviles para entrar a internet, así que si tu pagina no tiene soporte para móviles, no será de gran ayuda.

PROBLEMAS DE ACCESIBILIDAD EN UN SITIO WEB

•Muchas páginas web son difíciles o incluso imposibles de usar por personas con deficiencias visuales, ceguera o deficiencias motrices graves (tetraplejia y miembros amputados por ejemplo). Por otro lado los sitios web complejos son difíciles de interpretar para personas mayores o personas con deficiencias cognitivas leves.

•Los problemas más habituales de accesibilidad a los sitios Web son:

•

• imágenes sin texto alternativo; 
• ausencia de texto alternativo para los puntos sensibles de los mapas de imagen; 
• elementos multimedia sin alternativas de texto; 
• ausencia de información alternativa para los usuarios que no pueden acceder a los marcos (frames) o a los programas integrados como JavaScript o Flash; 
• sitios con un contraste bajo entre el color de texto y fondo, o fondos complejos que dificultan la lectura 
• tablas difíciles de interpretar cuando se linearizan; 
• sitios demasiado complejos para encontrar la información relevante 

Diseño Adecuado Para una Pagina Web

›Las páginas Web se han convertido, con el tiempo, en excelentes herramientas de venta y proyección de cualquier tipo de negocio o fuente de información. Gracias a la constante evolución tecnológica, hoy podemos presentar un diseño Web atractivo con fotografías, animaciones y videos, incluso música. Este tipo de elementos han enriquecido el concepto de “diseño Web” elevando su potencial a niveles interesantes. Un diseño Web ahora se puede valer de todas estas herramientas visuales que, utilizadas de manera funcional, hacen que su página sea considerada y valorada por quienes la visitan.

Complementos que requiere un diseño adecuado para una pagina web

›La elección adecuada de los colores en la web

› atender los conceptos básicos de el diseño de una pagina web.

›

Conceptos básicos de el diseño de una pagina web  

›1.Utilidad.

›2.Facilidad de Navegación.

›3.Apariencia.

›4.Estructura Clara.

›5.Informacion Actualizada, Sencilla, Creíble, Concisa

›6.Rapidez de Descarga.

›7.Pocos clicks.

›8.Evitar malos Hábitos

›9.Interactividad

›10.Informacion de Contacto

Etapas para el diseño adecuado de una pagina web

›El diseño visual . En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.

›Estructura y relación jerárquica de las páginas del sitio web. Una vez que se tiene el boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML.  La importancia de la estructura y arborescencia web radica en que los visitantes no siempre entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.

›

Posicionamientos de buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda.  Aún para el año 2014 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos   .

Lenguajes de programación que se pueden usar para programar una pagina web 

oHTML

oPHP

oAsp

oAspx

oJavaScript

oJSP

oPython

oRubi

Accesibilidad:

El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG

Fundamentos de HTML :

›Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la web semántica . Debido a la permisibilidad de algunos navegadores web como Internet Explorer , esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario ,etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.

Según los estándares de los sitios web:

›El diseño de páginas web se ha desarrollado a medida que ha evolucionado Internet. En 1992 sólo había alrededor de 50 sitios web. Estadísticas (2005) nos afirmaban que la cantidad de sitios web ronda los 8.000 millones de sitios, a los que diariamente se les suma a raíz de 4400 por día.

›Rápidamente, su importancia alcanzará las mismas cuotas que la televisión o el teléfono. Datos recientes estiman que hay alrededor de 2 mil millones de páginas colocadas  y se espera que en los próximos años llegue a los 8 mil millones, excediendo el número de habitantes del planeta. Sin embargo, sólo una fracción de este número es visitado habitualmente por la mayoría de los usuarios (sólo alrededor de 15.000 sitios webs, el 0,4% del total).

›

Herramientas Profesionales Para El Diseño Web

El diseño efectivo de sitios web puede ser una tarea compleja, difícil y larga. Por suerte, las herramientas de software de diseño de sitios web pueden hacer el proceso mucho más fácil. Cuando se trata de diseño de sitios web, incluso los expertos utilizan software de diseño web, en lugar de diseñar desde cero. Es más fácil, uno se ahorra tiempo y lo típico es que así se logre un mejor resultado.

OCrear una pagina web nunca ah sido tan fácil. En los últimos años, han surgido un montón de herramientas diversas que nos facilitan el proceso de creación de un sitio web y nos ayudan a hacer cosas que difícilmente podríamos hacer tan rápido.

OEn esta entrada vamos a repasar algunas de las herramientas mas populares para que así puedas descubrirlas y empezar a usarlas si estás pensando en crear tu propia pagina web.

Los Mejores Programas Para Diseñar Sitios Web

OExisten varias herramientas con las que puedes crear una pagina web los cuales son los siguientes:

OHTML

OPHP

OASP

OASPX

OJAVA SCRIPT

OJSP

OPYTHON

OFROM PAGE

OWORD (PAGINA WEB)

OHTML.- es la sigla de HiperText Markup Language (Lenguaje de Marcación de Hipertexto) es un lenguaje es se utiliza comúnmente para establecer la estructura y contenido de un sitio web, tanto de texto, objetos e imágenes. Los archivos desarrollados en HTML usan la extensión .htm o .html.

OEl lenguaje de HTML funciona por medio de “etiquetas” que describen la apariencia o función del texto enmarcado. Este lenguaje puede llegar a incluir un script o código que tenga incidencia en el comportamiento del navegador web de elección

O

Editor HTML

OADOBE DREAMWEAVER:

Es el editor web más conocido y más utilizado por los diseñadores. Forma parte de la suite creative cloud de adobe y, por tanto, es perfectamente compatible con otras herramientas de diseño grafico.

Es una herramienta idónea si tienes conocimientos de HTML5 o PHP, de lo contrario, quizá lo mejor sería que optaras por una herramienta un poco más accesible hasta que adquieras un conocimiento mayor de estos códigos. 

OMicrosoft From Page.- es un editor de paginas web para el sistema operativo Windows. Formó parte de la suite Microsoft Office. Muchos consideran que el código HTML generado por esta aplicación es un poco descuidado y muchas veces reiterativo, especialmente en versiones antiguas. Otro ejemplo es que posee funciones que sólo funcionan en Internet Explorer 

WORD (PAGINA WEB).-Para crear una pagina web con Word,se crea un documento nuevo,se captura lo que se desee y se guarda como:Pagina Web.