Introducción a HTML

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

Problemas Generales de una Pagina Web

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.

Ej(malo)www.edgarelbailadorquebailachidocuandohaycumbiasbienjarcosyseemborrachaconfrutsisysecae.com.mx

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.

9.- No mezclar la publicidad dentro del contenido: la publicidad de mezcla, como unidades de Adsense dentro de su contenido podría aumentar su porcentaje de clicks en el corto plazo. En el largo plazo, sin embargo, esto reducirá su base de lectores. Un visitante molesto es un visitante perdido.

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

Herramientas Profesionales para El Diseño Web

En el desarrollo web tenemos unas herramientas para el diseño, otras para la maquetación, otras para la programación, y para la depuración. Todas las herramientas que usemos son muy importantes, desde el Sistema Operativo hasta el comando más insignificante, y por ello debemos elegir la más adecuada a nuestras necesidades y capacidades.

Sistema Operativo

Para desarrollar una web, lo primero que necesitamos es un Sistema Operativo, como es lógico, y su elección no es tan trivial. Hay que tener en cuenta las aplicaciones de las que dispone el Sistema Operativo y sus costes.

Por ejemplo, tenemos Microsoft Windows, cuyas aplicaciones son muy caras, como Photoshop, Dreamweaver, Fireworks, ASP .NET… Y por otro lado tenemos GNU/Linux, con GIMP, Inkscape, Amaya, Aptana, PHP (aunque todos ellos también están disponibles en Windows).

Otra característica a tener en cuenta es las facilidades que el Sistema Operativo aporta al desarrollador, y en este sentido GNU/Linux se lleva de calle a Windows. Y esto es porque Windows no fue diseñado para los desarrolladores, sino para personas que no tienen muchos conocimientos sobre informática.

Y por el contrario GNU/Linux fue creado por desarrolladores, y para desarrolladores; y por lo tanto en GNU/Linux podemos encontrar infinidad de herramientas que nos harán la vida mucho más fácil, que además son libres.

Fases de desarrollo de una web

Para elegir las herramientas a utilizar, antes debemos identificar las fases del proceso que forman el ciclo de vida de un desarrollo web.

• Diseño:

el diseño consiste en crear esbozos de la web final mediante una herramienta gráfica, como Photoshop, GIMP o Inkscape.

• Maquetación HTML/CSS:

la maquetación consiste en convertir los esbozos creados en la fase anterior en plantillas HTML, su respectiva hoja de estilos, y las imágenes usadas. Es posible saltarse la fase anterior para comenzar directamente con esta fase, dependiendo de si dominamos herramientas como Photoshop o no.

• Programación cliente:

la programación cliente consiste básicamente en Javascript. Una web puede no tener necesidad de hacer programación cliente, como puede ser una pequeña web corporativa con poca información estática, o puede que requiera enormes esfuerzos en esta fase, como ocurre con los proyectos Web 2.0.

• Programación servidor:

en esta fase, que se desarrolla junto con la anterior, crearemos la aplicación web en un lenguaje de servidor, como puede ser PHP, ASP .NET, Python, Perl, etc.

• Depuración:

esta fase enlaza la anterior con la siguiente, y es donde haremos las pruebas unitarias, aserciones, trazas, etc.

• Pruebas en local:

en nuestro servidor local haremos todas las pruebas posibles.

• Subir ficheros al hosting:

una vez nuestra web esté completada y bien testeada en nuestro servidor local (desarrollo), la subiremos al servidor del hosting elegido (producción). Dependiendo del hosting, podremos usar FTP, SFTP (SSH), WebDAV, o incluso Subversion. Yo aconsejo usar Subversion si así lo permite el servidor, por su comodidad y rapidez, además de por su principal utilidad, que es la de control de versiones.

• Pruebas en hosting:

realizaremos las últimas pruebas en el servidor del hosting para comprobar que el cambio de servidor no ha afectado a nada. Para evitar problemas, nuestro servidor local debe tener exactamente la misma configuración que el servidor del hosting.

Herramientas: desarrollo en PHP

A continuación enumeraré las herramientas básicas para el desarrollo de una web en PHP, en sus diferentes fases de diseño e implementación.

Fases: diseño y maquetación

• Adobe Photoshop:Esta aplicación sólo está disponible en Windows, y es el más caro, aunque es el más usado y gracias a ello dispone de una gran comunidad de usuarios con los que poder contar ante cualquier problema. Con él crearemos el diseño, así como las imágenes que usemos en la maquetación.
• GIMP: Es el equivalente de software libre más próximo a Photoshop. Al ser libre es posible conseguirlo gratuitamente, y de hecho cualquier distribución GNU/Linux lo incluye. Al igual que en Photoshop, con él podremos crear el diseño y las imágenes de la maquetación HTML. También disponible en Windows

Fase: maquetación

• Inkscape: El equivalente en Windows es Adobe Fireworks. Es un excelente editor gráfico vectorial con el que poder crear iconos, banners, y demás dibujos de forma muy fácil y sencilla, incluso para aquellos que no tengan demasiados conocimientos en edición gráfica digital.
• Adobe Fireworks: El editor de gráficos vectoriales más fácil de usar que he tenido la oportunidad de usar, aunque no lo eché de menos cuando descubrí Inkscape. Al igual que su compañero Photoshop es muy caro, y más aún si tenemos una gran alternativa gratuita como es Inkscape.

Fases: maquetación, programación cliente

• Dreamweaver, Aptana, Amaya: Estas herramientas las describí en mi anterior artículo sobre los principales editores web del mercado, así que os remito a él para más información. Con ellos crearemos el código HTML/CSS (maquetación), siendo Aptana la opción más profesional para la programación cliente (Javascript).

Fase: programación servidor

• Zend Studio: Sin duda el mejor IDE existente en el mercado para desarrollo web con PHP. Es comercial, aunque no demasiado caro teniendo en cuenta la excelente herramienta que es. Además es posible descargarlo desde la web de Zend para probarlo durante 30 días.

Con él crearemos fácilmente la aplicación web en PHP. Aunque podremos usar igualmente cualquier editor. Una muy buena alternativa es Eclipse con el plugin PHP.

Otra aplicación muy útil que está muy ligada a Zend Studio es Zend Platform, un módulo para Apache que permite depurar una web directamente en el navegador (Internet Explorer o Firefox), además de otras funciones más complejas, como alertas configurables para que nos envíe un email por cada error ocurrido en la web, o cuando un script sobrepase un tiempo determinado de ejecución, por ejemplo.

Fase: prueba local

• Apache Instalar un servidor web Apache en la máquina donde desarrollamos es fundamental. De esta manera haremos pruebas rápidamente: editamos un fichero PHP, vamos al navegador, actualizamos, y vemos los cambios.

Fases: pruebas en local, depuración

• Firefox / Firebug / Web Developer Extension: Firefox es sin duda la mejor herramienta creada en los últimos tiempos para los desarrolladores web, y con Firefox sus dos extensiones más útiles para nuestra profesión: Firebug y Web Developer.

Con Firebug podremos depurar Javascript, editar HTML y CSS en la misma página para ver los cambios en tiempo real, consultar los tiempos de carga de la página en conjunto, de las imágenes, javascripts, hojas de estilo, etc, así como sus tamaños, etc. Y Web Developer nos ofrece herramientas muy útiles como ver las cookies de la web, ocultar imágenes, cambiar el tamaño del navegador a resoluciones estándar, etc.

Subir ficheros al servidor del hosting

Una vez hayamos concluido todas las fases anteriores, y nuestro proyecto esté listo, deberemos subirlo al servidor del hosting.

La herramienta a utilizar dependerá de las opciones que nos ofrezca el hosting, que desgraciadamente en la mayoría de los casos es solamente el antiguo FTP. En Dreamweaver y Zend Studio tenemos un cliente FTP y SFTP (SSH), y la tarea consistirá simplemente en configurar el FTP y copiar y pegar los directorios que queramos subir.

Confío en que esta guía sirva de ayuda a la hora de afrontar un desarrollo web. Hay que tener muy en cuenta las fases de desarrollo y usar las herramientas adecuadas: la que nos resulte más fácil de usar, la más económica, la que mejor conozcamos, etc.

Diseño Adecuado para una Página Web

Para el diseño de páginas web debemos tener en cuenta las siguientes etapas:

Estas son algunas etapas que se sugieren para diseñar eficientemente un sitio; es conveniente no comenzar a escribir ninguna línea de código HTML antes de completar las primeras etapas.

Delimitación del tema

Esta es la etapa crucial, se define de qué se va a tratar el Web, que cosas se incluirán y qué no. También es el momento para definir tanto las audiencias (normalmente es mas de una) y los objetivos (intentando priorizar entre objetivos primarios y secundarios).

Si no se evalúa adecuadamente la cantidad de tiempo que se dispone contra la cantidad de tiempo requerida para elaborar un sitio de la magnitud deseada, el resultado puede ser desastroso. Muchos proyectos Web fracasan porque comienzan a crecer y crecer sus especificaciones, sin que haya detrás un trabajo ordenado de delimitación de contenidos.

Obsérvese lo siguiente: la mayoría de los sitios que son premiados con distinciones como "Lo mejor de...", "La mejor página de la semana...", "Top 5% del Web", son sitios que se dedican a temas muy específicos. La gente no quiere un montón de sitios que tengan referencias a otros lugares, la gente lo que busca es el contenido.

Recolección de la información

En esta etapa se recolecta la información que se va a poner en el Web, de acuerdo a la especificación hecha en la etapa anterior.

Es conveniente asociarse con alguien como un "proveedor de contenido", puesto que como mencioné antes hay mucha gente que si bien le tiene aversión a los computadores y que dispone de valiosísima e interesante información.

Las organizaciones en general producen grandes cantidades de información, también en esta etapa hay que delimitar cuanta de la información histórica, que ya no es relevante, será incluida en el sitio web, por ejemplo, se puede definir que la información de más de 3 años de antigüedad no será incluida, etc.

Agregación y descripción

Una vez que tenemos la información que irá en el sitio, comenzamos una clasificación apropiada. Aquí hay que encontrar un adecuado balance entre la linealidad y la jerarquización.

Aplicamos una clasificación de tipo lineal a fragmentos de información que requieren que la persona que los lee vaya avanzando poco a poco en el conocimiento de algo, como en un libro. Usualmente los pondremos en una misma página, usando FRAMES o una técnica similar si se estima apropiado.

Aplicamos una clasificación de tipo jerárquica a trozos de información que sean complementarios o que dependan uno de otro, como secciones y subsecciones. Usualmente los pondremos en diferentes páginas. Es importante aquí no centrarse en una única forma de clasificar los documentos. Una serie de descriptores tienen que ser definidos. Además, un mismo documento puede pertenecer a varios valores de un mismo descriptotor. Si nos encontramos en esta etapa discutiendo sobre si un elemento de información va en una u otra parte, es que estamos cometiendo un error: debe ir en todas las partes donde un usuario razonable esperaría encontrarlo.

Estructuración

En este punto se estructura la manera en que se unen las diferentes páginas, de acuerdo a la agregación de contenidos realizada en la etapa anterior.

Se provee de ayudas para la navegación, de enlaces que permitan la jerarquización que diseñamos y de enlaces entre elementos de una misma jerarquía si se desea.

También es importante proveer de índices para cada descriptor que haya sido diseñado. Desde este punto en adelante se puede trabajar en la implementación HTML propiamente tal.

Metáfora

Existen muchas páginas que esperamos sean accesadas desde diferentes partes de nuestro servicio (por ejemplo: un glosario o una ayuda).

Quizás en alguna parte del documento mencionamos a otra página y sería interesante que el usuario pudiera hacer clic en esa referencia para ir a la página que estamos referenciando.

A esta etapa le llamamos "metáfora" pues permite referirse a una misma entidad (en este caso, una página HTML) en diferentes contextos. Estas páginas deben ser diseñadas cuidadosamente puesto que serán importantes para los usuarios al permitirles "saltar" dentro del sitio desde zonas lógicamente distantes.

Diseño y estilo gráfico

Un estilo gráfico adecuado puede ser algo importantísimo a la hora de hacer que la persona que nos visita se sienta cómoda, y como una manera de alivianar el contenido y hacerlo más digerible. Un sitio por más contenido que tenga si no tiene un buen diseño grafico difícilmente lograra un lugar destacado entre otros sitios del mismo tipo.

En cuanto a la cantidad y tamaño de las imágenes, hay que adoptar un equilibrio. Hay sitios que se basan casi por completo en grandes y lentas imágenes GIF, otros que se ven bastante pobres pues son casi sólo texto, con lo que se desaprovechan los métodos multimediales . El esquema que se adoptará, (que se encuentra en algún lugar entre ambos extremos) varía de diseñador a diseñador y es un punto importante a considerar.

Otro punto importante en la etapa de definición de la parte gráfica, es intentar en lo posible mantener una cierta coherencia gráfica, y atreverse a innovar en cuanto a ella. Un color de fondo, un fondo o una distribución interesante de los elementos dentro de una página es algo que no se olvida con facilidad.

Ensamble final

En este punto concretamos el diseño, con los últimos enlaces que sean necesarios e incorporamos el estilo gráfico a las páginas, se ensambla el sitio con una portada que sea capaz de presentar en una sólo página física al menos lo más relevante del sitio, se instalan links hacia la página personal del autor y/o su dirección de correo electrónico.

Testeo

Finalmente, es necesario revisar la coherencia general del sitio, que no hayan links "rotos" que no conduzcan a ninguna parte; revisar la redacción y ortografía de las páginas, hacer los ajustes necesarios para separar las páginas que sean demasiado extensas en páginas más pequeñas.

Para esta etapa, lo mejor es tratar de buscar usuarios que vayan a utilizar el sitio en la práctica, y si eso no es posible, ponerse en el lugar de las personas que vean los documentos, y seguir los pasos que suponemos que ellos seguirán.

Caracteristicas Especiales para la Publicación Web

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 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, haciéndo 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.