• Blog
  • Historia de la Web
    • Presentación
    • La Web
    • Los 25 años de la Web
    • ¿Cómo me ha cambiado la vida la Web?
    • Internet y la Web
    • Internet en el mundo
    • La familia de protocolos de Internet
    • Historia de Internet: su nacimiento
    • Historia de la Web: su nacimiento (parte 1)
    • Historia de la Web: su nacimiento (parte 2)
    • ¿Ya sabes quién inventó Internet y la Web?
    • Los primeros servidores web de España
    • Historia de los navegadores web (1)
    • Historia de los navegadores web (2)
  • Cómo funciona la Web
    • Evolución de la Web:
    • El hipertexto y la hipermedia
    • Las URLs
    • Las URLs amigables
    • Los nombres de dominio
    • Los nuevos nombres de dominio
    • El dominio .es
    • Las direcciones IP y el sistema de nombres de dominio
    • Sistema de gestión de contenidos
    • Creación de una página web con Blogger (1): estructura de un blog
    • Creación de una página web con Blogger (2): configuración básica
    • Creación de una página web con Blogger (3): edición básica de una entrada
    • Creación de una página web con Blogger (4): edición avanzada de una entrada
    • Creación de una página web con Blogger (5): diseño y gadgets
    • Presentación del proyecto
    • Arquitectura de la World Wide Web
    • Cómo nos conectamos a internet
    • Guía para principiantes para nombres de dominio
    • ¿Cómo funciona el DNS?
    • Los registros DNS
  • Cómo se escribe una p.web
    • Presentación
    • Cómo se escribe una página web
    • El desarrollo web
    • Prototipado: wireframes, mockups y prototipos
    • El lenguaje HTML
    • Historia de HTML
    • Sobre HTML5
    • HTML: conceptos básicos (parte 1)
    • HTML: conceptos básicos (parte 2)
    • HTML: conceptos básicos (parte 3)
    • HTML: conceptos básicos (parte 4)
    • HTML: listas (1)
    • HTML: listas (2)
    • HTML: enlaces
    • HTML: problemas con los editores
    • HTML: tres errores típicos
    • Presentación del proyecto
    • Prototipos visuales de alta fidelidad
  • Cómo se publica un sitio web
    • Presentación
    • Un sitio web tiene que estar en la Web
    • Los nombres de dominio
    • Cómo comprar un dominio de Internet
    • ¿Dónde compro mi nombre de dominio?
    • El secuestro de los nombres de dominio
    • El alojamiento (hosting)
    • Cómo publicar un sitio web: Alojamiento (hosting) (1/3)
    • Cómo publicar un sitio web: Alojamiento (hosting) (2/3)
  • Cómo se escribe una p.web correcta
Desarrollo Web: HTML y CSS


Debes ver el vídeo "Cómo publicar un sitio web: Alojamiento (hosting) (1/3)" en el que se explica qué se necesita para publicar un sitio web en Internet, las diferencias entre un servidor propio frente a un alojamiento (hosting) contratado, se explica qué es un alojamiento o hosting y se muestran los principales tipos de alojamiento:

  • Compartido.
  • Servidor virtual privado.
  • Servidor dedicado.
  • Housing.
  • En la nube.


Video: Cómo publicar unsitio web: Alojamiento (hosting) (1/3)

El alojamiento web (en inglés: web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una analogía de "hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos etc. en internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones o páginas web.

Tipos de alojamiento:

  • Gratuito
  • Pago

Existen literalmente miles de proveedores en este ámbito, tanto gratuitos como de pago. Si bien los primeros pueden resultar muy interesantes a la hora de realizar prácticas o confeccionar y colgar páginas personales, por lo general resultan inapropiados para el ámbito profesional y corporativo, puesto que acostumbran a mostrar publicidad de terceros y a ofrecer servicios con mayores limitaciones.

Por un precio relativamente reducido, por lo general, los hospedajes de pago te proporcionarán mayor fiabilidad, mayor cantidad de espacio en disco, mayor ancho de banda y un abanico de servicios más amplio que variará de un proveedor a otro.

Podemos encontrar varios tipos de alojamiento de pago:

  • Compartido
  • Servidor virtual privado
  • Servidor dedicado
  • Housing
  • Alojamiento web en la nube (cloud hosting)

Alojamiento compartido: En este tipo de servicio se alojan clientes de varios sitios en un mismo servidor, gracias a la configuración del programa servidor web. Resulta una alternativa muy buena para pequeños y medianos clientes, es un servicio económico debido a la reducción de costos ya que al compartir un servidor con cientos miles o millones de personas o usuarios el costo se reduce drásticamente para cada uno, y tiene buen rendimiento.

Servidor virtual privado:  O  VPS (Virtual Private Server). Este tipo de servidores mantienen prácticamente todas las ventajas de los servidores dedicados. Al contratarlo  no estaremos alquilando un equipo informático completo. Los proveedores de hosting que ofrecen servidores virtuales privados utilizan técnicas de virtualización para compartimentar un mismo ordenador de tal modo que puedan utilizarlo un reducido número de clientes, que en ocasiones pueden ser únicamente dos o tres y por lo general no llegan a diez.

Cada uno de los clientes del servicio puede gestionar el servidor como si se tratara de un equipo real sin que las modificaciones que lleven a cabo en la configuración los demás usuarios repercutan en absoluto en el conjunto.
Llegado el caso, es posible incluso reiniciar el servidor remoto para llevar a cabo labores de mantenimiento sin que el momentáneo apagón afecte a los demás webmasters.

Servidor dedicado: Los proveedores de pago, por otra parte, ofrecen servicios más profesionales, entre los que se cuenta la posibilidad de contratar un servidor que únicamente se ocupará de hospedar y servir nuestra página web.

Housing o colocación: Este servicio es parecido alojamiento dedicado y consiste básicamente en vender o alquilar un espacio físico de un centro de datos para que el cliente coloque allí su propio servidor y la empresa proveedora se encarga solo de darle la electricidad y la conexión a Internet Este servicio suele ser utilizado por empresas grandes que necesitan seguridad y alta fiabilidad.

Alojamiento web en la nube (cloud hosting): Está basado en las tecnologías más innovadoras que permiten a un gran número de máquinas actuar como un sistema conectadas a un grupo de medios de almacenamiento, tiene ventajas considerables sobre las soluciones de web hosting tradicionales tal como el uso de recursos. La seguridad de un sitio web alojado en la "nube" (cloud) está garantizada por numerosos servidores en lugar de sólo uno. La tecnología de computación en la nube también elimina cualquier limitación física para el crecimiento en tiempo real y hace que la solución sea extremadamente flexible.

Sin embargo, hay algunos criterios que nos pueden ayudar a decidirnos por un plan de alojamiento.

Los principales criterios a tener en cuenta son:

  1. La calidad,  que la empresa cumpla lo que hemos contratado y que resuelva los problemas.
  2. El sistema operativo que emplea el servidor web.
  3. El espacio de almacenamiento que proporciona.
  4. Transferencia. Los límites mensuales para la transferencia de datos.
  5. Velocidad. La velocidad de transferencia máxima que podemos tener.
  6. Lenguajes de programación. Los lenguajes de programación web que permite emplear.
  7. Bases de datos. Si permite crear bases de datos y cuántas.
  8. Dominios/subdominios. Si admite múltiples dominios y subdominios.
  9. Otros, como el número de cuentas de correo que se pueden crear o si proporciona plantillas para crear el sitio web.
  10. Y por último, claro está, el precio.








¿Cómo se compra un dominio de Internet?, ¿está libre el dominio que yo quiero?, ¿qué son los agentes registradores?, ¿cuánto me va a costar un dominio?, ¿cómo lo renuevo?, ¿por qué hay dominios registrados pero sin usar? En este vídeo encontrarás las respuestas a estas y otras preguntas.

Antes de comprar un nombre de dominio tienes que decidir su tipo. ¿Genérico o territorial? Lo mejor es que compres ambos, el .com y el .es si estamos hablando de España. ¿Alguno más? Sí, deberías plantearte la posibilidad de comprar alguno más, ya que los nombres de dominio genéricos han aumentado considerablemente, tal como se puede ver en la página Registry Listing de ICANN:

  • .autos
  • .bike
  • .club
  • .computer
  • ...

En el artículo Registro de dominios de la Wikipedia se describe el siguiente procedimiento de registro de un dominio:
  • Elegir un dominio.
    • Verificar la disponibilidad del nombre de dominio deseado en algún registrador.
    • Ingresar los datos personales.
    • Elegir la cantidad de tiempo que el dominio permanecerá registrado.
    • Pagar el dominio, normalmente con tarjeta de crédito (o también por transferencia bancaria)
  • Una vez arrendado, el ahora registrante del dominio debe configurarlo con la URL a la cual redireccionar, IP del servidor al que encontrará mediante la DNS, servidor DNS usada por este.
  • El registrante del dominio debe esperar un tiempo para que el dominio sea reconocido en todos los servidores de Internet. Para los dominios .com y .net la demora es entre 4 y 8 horas, y para otros es generalmente entre 24 y 48 horas. En ese período:
    • El registrador contacta con ICANN y realiza el proceso de forma transparente para el registrante.
    • Se avisa al registrante que el dominio fue registrado.
  • El nuevo dominio funciona, y resuelve a la IP apropiada en el servidor DNS usado, pero no en el resto de servidores DNS del mundo. Poco a poco se va propagando el cambio al resto de servidores (propagación DNS). Como cada uno tiene distintos tiempos de actualización y parámetros de caché distintos, pasan varias horas hasta que todos los servidores DNS del mundo conocen cómo hacer la resolución del dominio.
  • La página ya es accesible mediante un nombre de dominio desde cualquier computadora.

Video: Cómo comprar un dominio de Internet



En el vídeo Prototipado: wireframes, mockups y prototipos se te ha explicado que existen diferentes tipos de prototipos, de baja y alta fidelidad.

En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).

Video: Prototipos visuales de alta fidelidad


El prototipo o diseño visual  es la evolución del mockups,  un documento más elaborado y detallado donde dará estilo a los elementos generales y particulares del diseño con elementos como el color, la composición,  la tipografía y una buena dosis de creatividad  para obtener un prototipo más ajustado a tu diseño final.

Así que en este prototipo  definirás las dimensiones en píxeles y los atributos estéticos de la mayoría  de los elementos visibles de tu web como pueden ser asignar el color de fondo y algunas zonas concretas de tu diseño y probar combinaciones, también delimitar y definir las áreas principales de la estructura general dónde irán colocadas las cajas contenedoras y los principales elementos de tu diseño. 

Definir y dimensionar las cajas de contenido así como el  espacio entre ellas, alineación y los elementos que contiene. También definir el espacio que ocuparán las imágenes, su forma y su alineación simulando el contenido cuando sea necesario.

Trabaja con las tipografías y su comportamiento te ayudará a elegir la mejor opción así como delimitar el espacio a las áreas de texto, el color, el tamaño de letra o aplicar efectos,

Definir atributos, dimensión y posición a menús de navegación, listas y enlaces. Diseñar, posicionar iconos, botones, logotipos y elementos decorativos dentro de tu diseño.


Te darás cuenta que a diferencia de los  mockups donde trabajaste con escala de grises y sin detallar medidas ni atributos,  en esta clase de prototipos los elementos como el color, la posición, la alineación y la composición son muy importantes.

Para empezar a diseñar tus prototipos visuales de la mejor manera puedes empezar usando cualquier soporte de edición imágenes como por ejemplo adobe Photoshop o Gimp que es una alternativa gratuita excelente.

También puedes usar un soporte de dibujo vectorial como adobe ilustrator o Inkscape que también es una alternativa gratuita.

Puedes elegir para su diseño el software que prefieras dependiendo de tus posibilidades y habilidades, te recomiendo sin embargo que busque uno que tenga como mínimo la capacidad de trabajar en capas  para poder asignar a cada objeto unas dimensiones y espacios propios, también que te permita medir utilizando reglas e inspectores y de esta manera trabajar tu documentó con dimensiones reales.

Además debería de permitirte editar imágenes para poder explorar de una forma adecuada todas las posibilidades el diseño.

Antes empezar a trabajar con tu diseño te voy a dar cinco consejos útiles para facilitarte el primer paso del proceso: 

1       Buscar inspiración antes empezar, esto forma parte de la investigación y además es muy importante para preparar un diseño conceptualizarlo y después marcar las pautas estilo de todos sus elementos. A continuación verás algunos enlaces donde podrás empezar a buscar inspiración, encontrar ideas o explorar tendencias:

  • http://www.webcreme.com
  • http://www.webdesign-inspiration.com
  • http://ffffound.com
  • http://designyoutrust.com
  • http://abduzeedo.com


Una idea puede venir de cualquier parte  y mi consejo es que te tomes tu tiempo para buscar la inspiración y encontrar así el carácter y el mensaje que quiere dar a tu diseño, te daré a continuación algunas pautas que te pueden servir:

  • Procura investigar en distintas corrientes creativas buscando así referencias diferentes a las habituales
  • Desarrolla tu idea y conceptualízala probando todas las opciones y eligiendo la más adecuada.
  • Toma siempre en cuenta la temática de tu web, las tendencias de mercado y tu público
  • Intenta beber de todas las fuentes posibles sin perjuicios y potenciar tu creatividad para conseguir los mejores resultados. 

2 Establece una paleta básica de colores para tu diseño,  es importante para dar consistencia y estilo al prototipo.

Te recomiendo usar una paleta básica de tres colores y después crear gamas y combinaciones a partir de ella buscando la armonía y la consistencia a tu diseño, a continuación verás algunos enlaces donde podrás encontrar más información sobre el color, su significado y sus propiedades.

Teoría del color
  • http://desarrolloweb.com/articulos/1444.php
  • http://www.kabytes.com/diseno/uso-de-los-coloees.en-diseno-web
  • http://www.abcdisegno.com/teoria-del-color/

Herramientas para crear paletas de colores

  • http://colorschemedesigner.com/csd-3.5/
  • http://www.colorhexa.com

Inspiración

  • http://www.colourlovers.com
  • https://es.pinterest.com/manekibeader/inspirational-colour-palettes/

También verás referencias con herramientas específicas para crear colores, combinaciones, gamas y paletas

3 Para tu diseño vas a necesitar también una serie de elementos que serán tu principal material de trabajo: imágenes y elementos gráficos, tipografías para el contenido, también  iconos  que puedes crear tú mismo. y además tendrá el material proporcionado por tu cliente. Todos estos elementos al igual que establecer una gama de color son tus herramientas creativas para dar forma y concepto a tu diseño.

Para obtener los recursos necesarios en tu diseño puedes comprarlos a los proveedores que mejor se ajusten a tu presupuesto, otra opción es buscarlos en bancos de imágenes con licencias más amplias o de uso gratuito o puede generarlos tú mismo ya sea con una cámara fotográfica o creándolos con la ayuda de un software, también contará  con el material gráfico de tu cliente.

Es importante que tengas en cuenta cuando diseñes las imposiciones creativas como puede ser la imagen corporativa de tu cliente.

Los siguientes enlaces listan algunas webs donde encontrar recursos gráficos de todo tipo y con distintas licencias de uso, la mayoría son gratuitos y que te serán de utilidad para componer tus diseños.

  • http://www.vectorvalley.com
  • http://all-silhouettes.com
  • http://www.bestfreewebresources.com
  • http://www.bittbox.com
  • http://psd.fanextra.com
  • http://webdesignledger.com
  • http://designbeep.com

4 Al igual que el color o los elementos gráficos, la tipografía o tipo de letra aportará carácter e identidad a tu diseño, mi cuarto consejo es que definas las tipografías cuidadosamente.

Cuándo escojas un tipo de letra toma en cuenta siempre la legibilidad y su capacidad de adaptación, así como su significado y la relación que tiene con tu Id, escoger un tipo de letra con carácter enriquecerá tu diseño.

En los siguientes enlaces encontrarás información más detallada sobre el uso de la tipografía y sus características así como referencias para encontrar tipos de letra para tus diseños.

Artículos tipografía en diseño web


  • http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/
  • http://www.creativebloq.com/web-design/choose-web-fonts-1233034
  • http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

Tendencias e inspiración tipografía

  • http://www.creativebloq.com/typography/biggest-type-design-trends-2012-812539
  • http://webdesignledger.com/21-inspiring-examples-of-typography-in-web-design

Recursos tipografía

  • https://www.google.com/fonts/
  • http://www.fontsquirrel.com
  • http://www.dafont.com/es/
  • http://www.fontfabric.com
  • https://www.theleagueofmoveabletype.com

5 Mi último consejo es que recopiles y organices adecuadamente todo tu material de trabajo para empezar a diseñar, este material de trabajo puede ser por ejemplo: 

  • Los mockups, los cuales te servirán de base para iniciar tu diseño.
  • También tendrás la información de tu cliente que tendrás organizada y clasificada.
  • Contarás también con los recursos y material gráfico recopilados previamente.
  • Tendrás también elementos específicos de imagen como pueden ser los logos.

Para empezar a diseñar el aspecto visual de tu web es mucho más fácil si tienes parte del camino recorrido con éxito,  si has trabajado el mockup, tienes una idea conceptualizada y tienes los recursos necesarios para desarrollar esa idea puedes empezar a diseñar libremente con tu software de edición preferida.

Te doy 5 consejos para trabajar con tus diseños:

1 Te aconsejo que trabajes tus documentos utilizando capas, en un diseño es muy importante la organización ya que se trabaja con muchos objetos y áreas distintas, para poder trabajar cada elemento de tu diseño adecuadamente debes organizarlo en capas que te permitirán editarlos o sustituirlos con facilidad. Trabajar en capas te facilitará el trabajo de organización dentro de tu diseño permitiendo darle a cada elemento un espacio y dimensiones propias y te facilitará la futura exportación al entorno html, además te permitirá probar varias opciones de una misma idea.

Al trabajar en tu documento te recomiendo que le asignes una capa a cada elemento de tu diseño dándole así un espacio propio.

También te recomiendo que agrupes en carpetas los diferentes objetos comunes a una misma zona para poder facilitar futuros cambios. Recuerda guardar siempre una copia de tu documento maestro para futuras ediciones. 

1    Mi segunda  recomendación es que trabajes en tu documento diseñando de general a particular esto te facilitará el proceso creativo y de edición, con ayuda de las capas podrás trabajar por niveles de jerarquía comenzando así con elementos generales como el fondo y a continuación definiendo y delimitando las áreas de la estructura del prototipo, en estas áreas trabajarás las cajas principales donde se mostrará el contenido de tu web, ya sean, imágenes o texto. Podrá seguir trabajando los elementos que estén dentro de las cajas contenedoras y de esta manera, y trabajando el diseño dentro de las áreas y cajas que ya has definido le aportaras una apariencia más ordenada a todo tu diseño.

2  En tercer lugar te recomiendo que vigiles el abuso de ciertos recursos y herramientas estos abusos pueden ser por ejemplo:

  • No vigilar el espacio entre elementos.
  • Utilizar demasiados colores en tu diseño.
  • Abusar del uso de la tipografía.
  • También debes intentar no utilizar una decoración excesiva.
  • No abusar de efectos complejos que no aporten nada a tu diseño.
  • Y evitar colocar demasiados elementos en un mismo espacio. 

4 Optimiza tu tiempo adecuadamente cuando diseñes centrándote en las tareas prioritarias y dedicándoles el tiempo necesario a cada una de ellas.

  • Para optimizar el tiempo y tu flujo de trabajo puede seguir algunas pautas:
  • Definir las prioridades de tu diseño estableciendo los plazos según las necesidades del proyecto.
  • No pierdas tiempo diseñando elementos  irrelevantes o innecesarios
  • Elige un diseño que se adapta a tus posibilidades y a tus habilidades con las herramientas de diseño.
  • Ten siempre en cuenta la visión de conjunto y la coherencia en tu diseño
  • Y pensar siempre en las necesidades de tus clientes.

5 Mantén la organización en todo el proceso de diseño, te recomiendo que prepares una carpeta organizada con todos los documentos del diseño con el que estás trabajando, así como el material gráfico que vayas a utilizar para diseñar.

Es importante que tu trabajo tenga una carpeta apropiada donde guardes todos tus prototipos ordenadas, intenta mantener original y copias de tu documento maestro y registrar los cambios relevantes en tus diseños en un documento. Trabaja siempre con las versiones editables de tus documentos y reserva una carpeta para documentos finales listos para exportar a tu web. 






En el siguiente vídeo se muestran tres errores (confusiones o malas prácticas) que hasta gente que lleva muchos años creando páginas web comete de vez en cuando:

  1. Saltos de línea.
  2. Espacios en blanco.
  3. Referencias de caracteres (caracteres especiales).

Video: HTML; tres errores típicos

Después de ver este vídeo esperamos que tú no cometas estos errores.

Saltos de línea

En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) separando cualquier elemento o texto, todos estos son convertidos a un único espacio blanco y el resto se omiten en la representación del documento.

Generalmente el código se separa para que su lectura sea más fácil. Una página web se puede escribir en una sola línea o separando el código y se visualizara igual en ambas formas.

Para insertar un salto de línea se usa la etiqueta <br></br> pero al se una etiqueta vacía nunca se verá escrita así. La forma correcta es:

html 4……. <br>
xhtml ….…<br/>

En html 5 se puede usar cualquiera de las dos pero es aconsejable la segunda por compatibilidad con xhtml y xml.

Y ¿Cuándo se debe insertar un salto de línea en un texto?

Si se consulta la certificación oficial del lenguaje html 5 y buscamos la etiqueta <br/> veremos la siguiente advertencia: 

“El elemento <br/> se debe usar únicamente para insertar saltos de línea que son parte del contenido”, como en un poema o una dirección. Los párrafos independientes se escribirán como párrafos independientes, es decir con la etiqueta <p></p>

<html>
<head>
<title>Ejemplo de saltos de linea</title>
</head>
<body>
<p>Este primer párrafo está bien escrito.</p>

<p>Este segundo párrafo sí que contiene saltos <br/>
de <br/>
línea <br/>
y     otro     tipo     de     espaciado y está MAL escrito</p>
</body>
</html>

Espacios en blanco

En el ejemplo anterior vemos la línea  - y     otro     tipo     de     espaciado y está MAL escrito</p> - esos espacios en blanco se visualizarán como un solo espacio, entonces:

¿Cómo se introducen varios espacios en blanco entre dos palabras?

En html existe una referencia de carácter  “&nbsp;”

Las referencias caracteres es un mecanismo que ofrece html para introducir caracteres que de otra forma no se podrían incluir, todas estas referencias empiezan con el carácter “&”  y termina con “;” o sea:  “&nombre;”

Todos  los detalles al completo están en el video.


En el siguiente vídeo se muestran algunos problemas que se pueden tener en Microsoft Windows con el editor Bloc de Notas y en Apple Macintosh con el editor TextEdit.


Video: problemas con los editores

Actividad
Un editor de páginas web es un programa de ordenador, un software, diseñado para facilitar la creación y edición de páginas web basadas en HTML, CSS, JavaScript y otras tecnologías que se emplean en el desarrollo web.

El artículo Editor de páginas web de la Wikipedia clasifica este tipo de aplicaciones en tres tipos (la clasificación no es muy acertada, pero más vale algo que nada):

  • Editor de texto sin formato.
  • Editor de texto con ventanas.
  • Editor WYSIWYG.

En este curso no te recomendamos un editor de páginas web concreto. Tú debes buscar varios editores, los debes probar y debes decidir con cuál te encuentras más cómodo. Publica en el foro del curso los resultados de tu búsqueda:

  • La lista de editores de páginas web que has evaluado.
  • Las ventajas y desventajas de cada uno.
  • El editor de páginas web que has seleccionado.
  • Las razones que te han llevado a tomar esa decisión.


Se pueden distinguir tres tipos de editores HTML:

·        Editores en modo texto: son editores de texto plano, a los que se le añade un conjunto de menús, barras de botones, etc., a través de los cuales es posible seleccionar las diferentes etiquetas HTML. En algunos casos, ofrecen cuadros de diálogo a través de los cuales se pueden alterar los diferentes atributos de cada etiqueta. Como se edita directamente el código HTML, se tiene un control total sobre el mismo, sin embargo su principal inconveniente es que el código generado no es demasiado legible, y el proceso de edición es más lento.

·        Editores gráficos o "WYISWYG" ("What You See Is What You Get", "lo que ves es lo que obtienes"). Son los más intuitivos, pero se pierde algo de control sobre el código HTML que producen ya que sólo se pueden hacer aquellas cosas que el editor ‘sabe’ hacer, de forma que realmente "lo que ves no es lo que obtienes".

·        Editores mixtos: son una mezcla de los anteriores. Realzan la presentación del código generado, y disponen de algún sistema para mostrar, de forma diferenciada, las etiquetas HTML introducidas, y modificar sus parámetros.

Entre los editores planos tenemos:

Notepad de Windows: El bloc de notas es la herramienta prehistórica de este sistema operativo, no ha evolucionado, sigue siendo el mismo bloc de hace 20 años, solo lo veo pasable para pequeños códigos. No se HTML pero si he modificado códigos siguiendo consejos desde alguna web y buscar una línea en el bloc de notas a veces se me hace complicado. La única ventaja que yo le veo es que viene en todos los Windows.

Notepad++: Es un  editor muchísimo más completo que el anterior. Esta herramienta es  gratuita y puede recibir más funciones mediante plugins.

Sublime Text: Es el más completo de las alternativas y va más allá en cuanto a lo que se refiera a editores de textos. Con Sublime Text podemos hacer prácticamente cualquier cosa que se nos ocurra en relación a la edición de textos planos. Se puede configurar distintos controles para tener un mayor control con el teclado. Su principal desventaja es que es una aplicación de pago, cuyo precio es bastante elevado, pero se puede probarlo mediante su aplicación de prueba que es gratuita.

Entre los editores gráficos tenemos:

KompoZer: Destaca por su sencillez. Diseñado con código libre, dispone de traducción al español y se pueden abrir diferentes pestañas para editar varios documentos a la vez y completa ayuda incorporada en el programa.

Amaya: Amaya es un editor web, es decir, una herramienta utilizada para crear y actualizar los documentos directamente en la web. Este programa lo promueve el Consorcio World Wide Web y existen versiones para Windows, Mac Os X y GNU/Linux. Gracias a Amaya podrás generar fácilmente páginas en HTML y XHTML pudiendo introducir también hojas de estilo CSS, expresiones MathML, gráficos SVG. etc. Incluye también una aplicación de anotaciones basada en RDF, XLink, and XPointer. Una vez creada la página web podrás subirla a tu FTP sin tener que usar otra aplicación y comprobar si está bien insertada ya que el programa incluye la función de navegador web. Amaya ofrece también algunas facilidades como la posibilidad de imprimir partes diferenciadas de una web.

Entre los editores mixtos tenemos:

Dreamweaver: Un poco desobediente. Lo poquito que sé lo aprendí con Dreamweaver 8, es de pago y cuenta con muchísimas opciones, es un todo en uno, está en español y lo mejor es que por cada rincón de la web hay un tutorial en español, una página con trucos, otra con ejemplos prácticos. Es un soffware como cualquiera de Adobe, hay que estudiar para manejarlo, pero vale la pena, Ahora salió la versión CC que se mete con tecnología Responsive . Dreamweaver seguirá siendo mi elegido.

HotDog Professional: Toda la potencia de los últimos avances en HTML se te presentan en un formato claro y fácil de entender. Podrás crear páginas Web sin saber nada de código, aunque el código siempre está disponible para que puedas aprender. Incluye una gran cantidad de características, como: barras flotantes, soporte de ficheros con nombres largos, hojas de estilos, constructor dinámico de diálogos y botones, soporte masivo de plug-ins, conversión de imágenes en el acto, capacidad de crear animaciones Gif89a, interfaz super rápido basado en "arrastrar y soltar", asistentes para funciones HTML avanzadas, documentos inteligentes (con posibles soluciones a los errores), y la potencia de los plug-ins Supertoolz. Es un editor de pago.
La Web se basa en dos conceptos que han sido explicados en el primer módulo de este curso: el hipertexto y la hipermedia.

El hipertexto permite crear, agregar, enlazar y compartir información con una estructura no secuencial que proviene de diversas fuentes por medio de enlaces. Los enlaces también se conocen como hipervínculos, vínculos o ligas (en Sudamérica). Y en inglés se emplean los términos hyperlink y link.

En el siguiente vídeo se explica qué es el hipertexto, los tipos de enlaces que se pueden crear (intradocumental, extradocumental) en las páginas web, el concepto de URL (Uniform Resource Locator) que ya debes conocer y se proporcionan algunos consejos para crear enlaces correctos.

Video: HTML: enlaces

Los enlaces son el elemento principal que confiere a la Web su carácter de hipertexto.

El hipertexto se puede definir como un documento digital que se puede leer de forma no secuencial y que está compuesto de nodos o secciones, de enlaces o hipervínculos y de anclajes.

Los nodos son las partes del hipertexto que contienen información accesible para el usuario.

Por otro lado, los enlaces son las uniones o vínculos que se establecen entre nodos y facilitan la lectura secuencial o no secuencial por los nodos del documento. Por último, los anclajes son los puntos de activación de los enlaces.

La Web está formada por los millones de nodos, los documentos o páginas web, interconectados por millones de enlaces.

En las páginas web se pueden crear dos tipos de enlaces, los enlaces intradocumentales y los enlaces extradocumentales.

Un hiperenlace puede hacer referencia a un punto determinado de la página que lo contiene, a otra página HTML o a un punto determinado de otra página HTML. En los dos últimos casos, la página destino puede residir en el mismo servidor que la página que contiene el hiperenlace o en un servidor distinto.

La etiqueta que se utiliza en HTML para definir un hiperenlace es <a>…</a>. Todo aquello que aparezca en el código HTML entre la etiqueta de inicio y la etiqueta de cierre aparecerá en la página web como un enlace (será el objeto sensible que al ser pulsado producirá el salto al destino del enlace). Normalmente, suele utilizarse texto o imágenes como contenido de un enlace.

Un enlace intradocumental es un enlace a un punto en el mismo documento en el que se define el enlace. Por un lado, con la etiqueta se define el enlace y se emplea el atributo href para indicar el destino del enlace.

Por otro lado, tradicionalmente se empleaba la etiqueta <a> pero con el atributo name para definir el destino del enlace. Sin embargo, en la actualidad se emplea el atributo id que se puede definir en cualquier etiqueta de HTML, como por ejemplo en una etiqueta de encabezado o en un párrafo de texto. 

Por supuesto que en una página web se pueden definir varios enlaces a un mismo destino, pero no se pueden crear varios destinos con el mismo nombre. El nombre debe ser único. Muy importante: el nombre del destino en el enlace va precedido del símbolo #, mientras que en el destino no se pone.

Enlace Intradocumental
·        Enlace a un punto en el mismo documento

--Enlace:      <a href="#nombre"> …</a>
--Destibo:    <a name="nombre"> …</a>
                    <h1 id="nombre"> …</h1>
                    <p id="nombre"> …</p>

Un enlace extradocumental es un enlace a otro documento, normalmente a otra página web. En el atributo href se tiene que indicar la URL de acceso al otro documento.

Enlace extradocumental
·        Enlace a otro documento

--  <a href="http://es.wikipedia.org/wiki/HTML"> …</a>

URL es el acrónimo de Uniform Resource Locator, Localizador uniforme de recurso, y es la forma estandarizada de hacer referencia a un documento, a un recurso, en la Web.

<servicio>://<usuario>:<contraseña>@<host>:<puerto>/<ruta>/<recurso>

Una URL se compone de: El servicio o protocolo que se está empleando,  de las credenciales, nombre de usuario y contraseña, con las que se realiza la conexión al servicio, el host o servidor al que se accede, el puerto al que se realiza la conexión, la ruta de acceso al recurso, y finalmente, el nombre del recurso, que suele ser una página web, pero que podría ser cualquier tipo de documento.

Aquí tenemos tres ejemplos de URL, una del servicio web, otra del servicio de FTP y la última del servicio de correo.

URL

Web: http://idesweb.es/temario
FTP: ftp://ftp.ua.es/pub/software/listado.txt
Email: mailto:sergio.lujan@ua.es

Si quieres aprender más cosas sobre URL, te aconsejo que consultes el documento original deTim Berners-Lee del año 1994 en el que se especificaba la sintaxis y la semántica de URL.

Por último, también existe el enlace extradocumental a un punto en otro documento. En este tipo de enlace se combinan los dos enlaces anteriores.

Enlace extradocumental
•        Enlace a un pinto en otro documento

--Enlace:      <a href="pagina.html#nombre"> …</a>
                            --Destibo:    <a name="nombre"> …</a>
<h1 id="nombre"> …</h1>
                                                 <p id="nombre"> …</p>

Por un lado tenemos el enlace, en el que se tiene que indicar tanto la URL del documento como el nombre del punto en el otro documento.

Por otro lado, en el destino del enlace se debe definir el punto al que se hace referencia mediante un nombre, ya sea con el atributo name, el método antiguo, o mediante el atributo id.

Para finalizar este tema, te ofrezco tres consejos que debes de tener en cuenta a la hora de crear un enlace.

  1. Lleva mucho cuidado con los nombres de los ficheros, con las mayúsculas y minúsculas, yo te aconsejo que lo escribas todo en minúsculas.                               
  2. Leva también mucho cuidado con los caracteres extraños, utiliza sólo las letras del alfabeto inglés, los números y algún carácter más como el guion o el guion bajo. Y nada de espacios en blanco en el nombre de los ficheros o en el nombre de los directorios.                                                                                                           
  3. Lleva mucho cuidado con las rutas que escribas en los enlaces: que no sean rutas físicas a documentos que se encuentran en tu ordenador, ya que al publicar tus páginas en un servidor web, los enlaces no funcionarán.

Entradas antiguas Inicio

Visita mi fotoblog : "Iniciandome en la fotografía"

Visita mi fotoblog : "Iniciandome en la fotografía"
Visita mi fotoblog : "Iniciandome en la fotografía"

Buscar en este blog

Datos personales

juan carlos
Ver todo mi perfil

Etiquetas

&nbsp; <br/> 25 años acceso ADSL alojamiento alta fidelidad Amaya anidadas Apache aplicación web aprender Architecture WWW Arqueología digital arquitecto ASCII atributos Backend baja fidelidad Blogger bloguear blueprint body brainstorming browser Browser Wars cabecera cable CERN CMS código comenarios Compartido configuración Contacto contenido cuerpo dd dedicado Desarrollo DHCP Digital Revolution Dirección Diseñador diseño dl DNS DOCSIS dominio dominio .es dominios Dreamweaver edición editor editores elementos em enlaces entradas espacios estructura etiqueta etiquetas extradocumental fibra FTP FTTH gadgets Garrett Global Internet Report Google gramática gTLDs h1 h2 h3 h4 h5 h6 HdtTML head hipermedia hipertexto hipervínculos Historia de Internet Historia de la Web homenaje HotDog Professional Housing HTML HTML5 HTTP ICANN ID Information M Proposal Internet Internet Explorer intradocumental IP IP Privada IP Pública IPv4 IPv6 JavaScript KompoZer lanzamiento layout LDAP li lineas links listas Microsoft MINETUR mixto mockups Modulo 0 Mosaic Multimedia Mundaneum navegadores Netscape NeXTcube Notepad Notepad++ Objetivos ol Olé p Pareto Paul Otlet penetración Pep Vallés permisos planificación plano POP Presentación Propósito prototipar prototipos proyecto Recommendation Red.es Redes de acceso Redes Hibridas reversed saltos secuestro-dominios servidores SGML sketching SMTP SSH start strong Sublime Text Tim Berners-Lee title Título type ul URI URL URL Amigable URL estructura URL semántica velocidad video Vídeo vínculos Vinton Cerf W3C W3Schools Web WHATWG Wireframes WorldWideWeb WWW WYSIWYG XHTML XML

Entradas populares

  • [A+] Prototipos visuales de alta fidelidad
    En el vídeo Prototipado: wireframes, mockups y prototipos se te ha explicado que existen diferentes tipos de prototipos, de baja y alta...
  • Cómo nos conectamos a Internet
    El siguiente vídeo de la Comisión Nacional de los Mercados y la Competencia explica las principales formas que existen de conectarse a Inte...
  • Proyecto
    Objetivos Aprender a prototipar un sitio web. Conocer el esqueleto básico de una página web. Ser capaz de crear encabezados, ...
  • ¿Cómo funciona el DNS?
    ¿Cómo funciona el DNS? El siguiente vídeo es un vídeo oficial de red.es, "una entidad pública que trabaja para que la socied...
  • Presentación
    Los objetivos de este módulo son: Conocer los diferentes nombres de dominio que existen. Ser capaz de comprar un nombre de domini...
  • Cómo funciona la Web: Arquitectura de la World Wide Web
    Architecture of the World Wide Web   Volume One es una recomendación del W3C del año 2004 en la que se describe la arquitectura de la We...
  • Historia de la Web: su nacimiento (parte 2)
    Primer navegador web y editor de HTML en modo gráfico. Su nombre,  WorldWideWeb . Su creador,  Tim Berners-Lee , que entre otras cosas e...
  • Un sitio web tiene que estar en la Web
    Tu sitio web va creciendo poco a poco. Por ahora, tu sitio web está alojado en tu ordenador, sólo lo puedes usar tú. ¿Qué hay que hac...
  • Historia de Internet: su nacimiento
    Laboratorio recreado donde nació Internet, cuenta con una réplica de la computadora Sigma 7, a la izquierda, un teletipo, centro, si...
  • Historia de la Web: su nacimiento (parte 1)
    Primer-Navegador-Web-sin-interfaz En este primer vídeo sobre la historia de la Web se muestran algunos antecedentes, como Vannevar Bu...

Advertisement

Con la tecnología de Blogger.
Copyright Carlos Hernández©2014 Desarrollo Web: HTML y CSS.
jc62hp@gmail.com