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.

Características Especiales para la Publicación  Web

Mucho se comenta acerca de la generación de contenido en nuestras páginas de Internet. 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 donde 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, obligarietoridad 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.

El Color en la Web

El color es uno de los elementos más poderosos de que disponemos a la hora de comunicar emociones en un sitio web. La mayoría de estas emociones son percibidas de un modo sutil e inconsciente.

Psicología de los colores primarios

Amarillo: Es considerado como un tono alegre y cálido. Sin embargo, también propicia el cansancio de la vista y hace llorar a los bebés.

Rojo: Atrae rápidamente la atención, evoca emociones fuertes e incrementa el apetito; también se asocia con la pasión, la intensidad y el amor. No obstante, estudios demuestran que el rojo puede afectar tu rendimiento al hacer tareas de concentración como resolver exámenes o tomar decisiones, ya que se asocia con el peligro.

Azul: Es el color preferido por los hombres. Propicia la calma, la productividad y la serenidad, por lo que es el más usado en las oficinas. También es sinónimo de confianza y seguridad, por lo que es ideal para aseguradoras, bancos e instituciones financieras.

Colores secundarios y terciarios

Verde: Se asocia a la salud, a la tranquilidad, al dinero y a la naturaleza. Está comprobado que los trabajadores que laboran en un ambiente de este tono tienen menos dolores de estómago. Sin embargo, el efecto del verde depende mucho de su tonalidad; los tonos profundos evocan abundancia, mientras que los claro, calman.

Morado: Significa lealtad, bienestar, éxito y sabiduría. Ésta es la razón por la que reyes y otros líderes usan atuendos morados.

Rosa: Es un color que tranquiliza y evoca al amor. Los tonos oscuros se usan para expresar diversión, emoción, energía y juventud por lo que son perfectos para accesorios de niñas y mujeres; los rosas claros se asocian al romance. 

Blanco: Se relaciona a la pureza, a la inocencia y al vacío. Es ideal para usar en espacios pequeños ya que da una sensación de amplitud.

Café: Este color evoca a la tierra; a la confianza y la practicidad, pero también resulta algo aburrido y puede asociarse con suciedad.

Naranja: Este tono es sinónimo de entusiasmo, emoción, calidez y precaución. Por eso es usado para atraer la atención y provocar alegría.

Colores en la publicidad

Verde: Desde hace siglos es símbolo de fertilidad. De hecho, se dice que aun en nuestros días las M&M's verdes se asocian con un mensaje sexual.

Azul: Se suele usar para dar mensajes corporativos y evitar ser invasivos. Empresas que lo usan: Volkswage, Forbes y AT&T. 

Rojo: Estimular el apetito.

Los tonos negro, blanco, plata y dorado son generalmente usados para artículos de lujo, porque dan la sensación de sofisticación. Marcas que lo usan: Prada, Michael Kors y Chanel.

Rosa: Es un tono femenino. Éste, junto al lavanda y el blanco, sirve para atraer rápidamente a la audiencia de mujeres y se relaciona con la limpieza. Empresas que lo usan: Victoria's Secret y fundaciones de prevención del cáncer de mama.

El Color:Tono,Saturacion,Brillo e Iluminacion

Tono:Definimos tono como la propia cualidad que tiene un color. Tonos son todos los colores del círculo cromático, primarios, secundarios e intermedios sin mezclar con blanco o negro. Podemos decir que cuando se va a la izquierda o a la derecha en el círculo cromático se produce un cambio de tono.

Es el estímulo que nos permite distinguir un color de otro. Se define como la variación cualitativa del color, en relación con la longitud de onda de su radiación.

Dentro de cada tono encontramos una enorme diversidad de matices o de colores subjetivos, por ejemplo el rosa, el burdeos, etc. son matices del rojo. El Tono es una cualidad del color que nos permite diferenciar, nombrar y designar los colores. Cuando hablamos, por ejemplo, del color azul, en realidad sólo estamos definiendo una de sus cualidades: el tono

Saturacion:Es la intensidad cromática o pureza de un color. Cuando un color pertenece al círculo cromático se dice que está saturado, que tiene el máximo poder de pigmentación, de coloración. Pero no siempre nos encontramos los colores puros, sino que se suelen ver compuestos por mezclas complejas, con cantidades desiguales de colores primarios. Para cambiar la saturación de un color hay que mezclarlo con su complementario y, así, se obtiene la escala de saturación o de grises.

La máxima saturación de un color es aquella que se corresponde a la propia longitud de onda del espectro electromagnético y carece absolutamente de blanco y negro.La pérdida de saturación de un color puede producirse añadiéndole blanco o mezclándolo con su complementario, lo que daría un color neutro.

Brillo:Se entiende como la capacidad de un color para reflejar la luz blanca que incide en él. Alude a la claridad u oscuridad de un tono.

Iluminacion:Luminosidad es el grado de claridad u obscuridad de un color. Cuando un color lo mezclamos con blanco da como resultado ese mismo color, pero más claro. La luminosidad de un color genera una escala cromática de valor que termina en el blanco. Por otro lado, cada color tiene una luminosidad propia, por ejemplo el azul tiene una luminosidad más baja que el amarillo, el rojo tiene más luminosidad que el violeta, etc. En el siguiente ejemplo vemos como partiendo de verde RGB (0,255,0) mantenemos el número 255 (mantenomos el tono) y vamos aclarando añadiendo valor de luminosidad hasta llegar a blanco RGB (255,255,255)