Conoce Páginas web (TIC I-2024-25-Tema1)

Conoce 1. Páginas web Lo que habitualmente llamamos web o página web es en realidad un sitio web (website), es decir, un conjunto de documentos (páginas web) enlazados entre sí, a La página inicial a la los cuales se accede a través de una dirección común. Los documentos que const...

Conoce 1. Páginas web Lo que habitualmente llamamos web o página web es en realidad un sitio web (website), es decir, un conjunto de documentos (páginas web) enlazados entre sí, a La página inicial a la los cuales se accede a través de una dirección común. Los documentos que constitu- que accedemos cuando yen un sitio web son archivos y carpetas que contienen texto, fotografías, botones, ponemos la dirección iconos, animaciones, hipervínculos, multimedia, gráficos, tablas, etc., y que se han en el navegador es la creado para ser vistos por usuarios con ordenadores y navegadores de distintas ca- página principal del racterísticas. sitio web (home page). Para acceder a las páginas web usamos un navegador (Mozilla Firefox, Microsoft Edge, Google Chrome, etc.), que se encarga de comunicar el ordenador con los servi- dores que albergan las páginas web, descargar las páginas y mostrarlas. En una página web, la organización de la información es hiper- textual, lo que signi- fica que haciendo clic sobre una palabra se amplía la información acerca de ella, acce- diendo a otra página relacionada. De esa forma se enlazan los El lenguaje básico que se usa para crear los documentos que conforman el sitio web documentos que com- es el HTML (hypertext markup language, lenguaje de marcas hipertextuales). La últi- ponen el sitio web y, ma versión de este lenguaje es HTML5. por lo tanto, la infor- mación. ¿Cómo se crea una página web? Una página web se puede crear directamente escribiendo en HTML en cualquier editor de textos y guardándolo con la extensión adecuada (.html o.htm), pero no se suele hacer así más que con fines educativos. En la práctica real se utilizan editores de páginas web, que permiten diseñar webs de una forma más sencilla e intuitiva. A grandes rasgos existen editores de dos tipos: Editores WYSIWYG (what you see is what you get). Son aquellos que nos permiten confeccionar una web como si estuviéramos escribiendo un documento con un procesador de texto y generan automáticamente el código fuente en HTML. Editores de este tipo son: Adobe Dreamweaver (anteriormente, Macromedia Dreamweaver), BlueGriffon (software libre), KompoZer (software libre y multiplataforma) y NVU (también software libre y multiplataforma). Estos dos últimos son muy similares y los utilizaremos en esta unidad. Editores que trabajan directamente con HTML. Requieren un conocimiento avanzado del lenguaje HTML. Editores de este tipo son: Komodo Edit (software libre), Sublime Text y Arachnophilia (gratuito).  Conoce La elección de la forma de trabajar dependerá de los gustos y conocimientos del usuario, aun- que cuando se profundiza en el diseño de páginas web conviene conocer ambas maneras de construir webs. La siguiente tabla recoge las ventajas e inconvenientes de trabajar directamente con HTML (bien con editores web o con editores de texto) y con un editor WYSIWYG. Diferencias entre los modos de elaborar páginas web Escribiendo en HTML Con un editor WYSIWYG El código queda más limpio. El código no es tan limpio. Es más fácil reutilizar código. No se maneja el código (es la máquina El código se maneja con más precisión. la que lo maneja). Es necesario manejar HTML. El aprendizaje es sencillo. El aprendizaje es más difícil. Hacer una página es relativamente rápido. Hacer una página lleva más tiempo. „„ Clasificación Las páginas web se clasifican en estáticas y dinámicas: Estáticas. Son aquellas que no cambian, que muestran siempre el mismo contenido cada vez que las cargamos. Se realizan en lenguaje HTML. Dinámicas. Son páginas que el servidor interpreta en cada caso, de forma que, sin hacer cambios en el código, devolverán diferentes resultados en función de la actuación del usuario. Por ejemplo, un buscador es una página dinámica que devuelve un resultado u otro según cuál sea la petición del usuario. Se realizan combinando HTML con lenguajes dinámicos como ASP.NET (Active Server Pages), Java, PHP o JavaScript. Este último es el que usaremos en la presente unidad. Páginas estáticas Páginas dinámicas El usuario no puede modificar los contenidos ni el diseño, ni El usuario puede modificar el diseño, y los contenidos son di- realizar peticiones. námicos, es decir, responden en función de las peticiones del usuario. HTML HTML + lenguajes dinámicos: ASP.NET Java PHP JavaScript  Conoce „„ Funcionamiento Los sitios web son creados por programadores y diseñadores. Una vez creados, las personas encargadas de mantenerlos se llaman administradores (o webmas- ters, en inglés). El proceso de trabajo habitual de un administrador es crear en su ordenador el con- junto de archivos que conforman la web (llamado sitio local). El administrador ma- nipula estos archivos y también dispone de un espacio donde guardar la página en un sitio accesible a todos los usuarios de Internet (llamado sitio remoto). Ese sitio está en un ordenador especial que se llama servidor, y tanto el espacio como el proceso se denominan alojamiento. Los servidores son ordenadores que alojan las páginas web y las ponen a disposi- ción de toda la red. El proceso de alojamiento de un sitio web y su funcionamiento es el siguiente:  Conoce 2. Criterios de diseño „„ Prediseño y planificación El primer paso para diseñar una web es la fase que podemos llamar prediseño. De- bemos analizar qué objetivos queremos conseguir con nuestra web y posteriormen- te construirla según la planificación marcada para que se cumplan esos objetivos. A grandes rasgos, debemos preguntarnos: Prediseño de una web 1. Objetivo. ¿Qué se pretende conseguir con la web? 2. Público. ¿A quién se dirige? 3. Contenidos. ¿Qué contenidos se quieren mostrar? 4. Directrices. ¿Qué especificaciones se usarán en cuanto a forma, organización y estructura? 5. Tecnología. ¿Con qué medios técnicos se cuenta para realizarla? 6. Tiempo. ¿De cuánto tiempo se dispone? 7. Presupuesto. ¿De cuánto dinero se dispone? En esta etapa debemos escribir nuestros objetivos, recopilar y organizar contenidos, escribir las directrices de organización y diseño y establecer un código de colores para los distintos elementos. „„ Estructura de una web La consistencia en el diseño es fundamental para la calidad de nuestra web. Pensan- do en nuestros futuros visitantes debemos: Crear una jerarquía visual clara en cada página. Utilizar las convenciones (lo que se usa de forma mayoritaria en las páginas web). Dividir las páginas en áreas claramente definidas. Facilitar el acceso a los enlaces. Los contenidos de una Omitir contenidos innecesarios, es decir, simplificar. página web pueden ser: Una web tipo tendrá, a grandes rasgos, los siguientes elementos: Texto Imágenes 1. Encabezamiento Gráficos 2. Marca o logotipo Animaciones 3. Menú de navegación Tablas 4. Titular Botones 5. Contenidos Iconos 6. Pie de página Hipervínculos Todos los elementos del mismo tipo deben ser similares. Multimedia  Conoce La disposición de los elementos en una web tipo es la siguiente: ¿Qué es la usabili- dad de una web? La palabra usabilidad se usa en este ámbito para indicar la facili- dad en el uso de un sitio web. Viene del término inglés usabi- lity. Cuando un visitante llega a una página web, no debería hacerse preguntas como “¿dón- de estoy?”, “¿por dónde empiezo?”, “¿qué es esto?”, “¿dónde está lo que busco?”... „„ Elementos de diseño A la hora de diseñar una web hay que atender a cuestiones tan elementales como el contraste del texto con el fondo, el tamaño de los caracteres o la elección de los colores. Todo esto, evidentemente, depende de los gustos del diseñador, de forma que lo que a uno le parece maravilloso a otro le puede parecer de mal gusto o vulgar. En todo caso, hay que tener en cuenta que en el diseño de páginas web, como en cualquier ámbito, hay modas y tendencias que siguen todos los sitios profesionales. En general, se debe usar el sentido común y ponerse siempre del lado del usuario. Página web de Google en el año 2009 Página web de Google en el año 2021 En la evolución de la página inicial de Google se observa una simplificación visual en conjunto. En el logo se usan colores más planos y puros, una tipografía sencilla y más geométrica y que muestra una pérdida de volumen. El resultado es un logo más estilizado, limpio y moderno, sin perder la esencia de Google, que lo considera “simple, amigable y cercano”. Esta sencilla página se ha ido actualizando continuamente y sigue la tendencia actual en el diseño, como es esperable de cualquier página web de referencia.  Conoce En la fase de diseño entran en juego dos conceptos diferenciados: la maquetación Hojas de estilo y la interfaz. Las hojas de estilo o CSS La maquetación se encarga de organizar espacios y contenidos escritos, (cascading style sheets) son visuales y audiovisuales. Abarca los aspectos semánticos y formales de una ficheros donde se almacenan aplicación digital. el conjunto de estilos que La interfaz es el conjunto de comandos y métodos que facilitan la interac- posteriormente se usarán en ción entre el usuario y el sistema (el sitio web). Debe tenerse en cuenta el el documento. Con ello se dispositivo de salida: ordenador, teléfono móvil, tableta digital... consigue que el formato de todo el sitio web sea homo- En cuanto a los elementos de maquetación, podemos distinguir entre elementos géneo y se facilitan las modi- gráficos y tipográficos, elementos de imagen y elementos funcionales: ficaciones posteriores. 1. Elementos gráficos y tipográficos. Son, por ejemplo, la tipografía, el pun- La mejor forma de trabajar, to, la línea, la forma y el color. Ninguna maquetación digital puede pasar sin una vez que vamos a realizar ellos. distintas páginas web y que- 2. Elementos de imagen. Las fotografías, ilustraciones, símbolos e iconos remos mantener el diseño, es atraen las miradas en cualquier maquetación. crear una nueva hoja de esti- 3. Elementos funcionales. Convierten una maquetación digital en la interfaz lo, que tendrá extensión.css de un medio digital. Son los elementos que pueden seleccionarse entre las y que podremos reutilizar en herramientas del editor o bien diseñarse. Por ejemplo los botones, los hiper- otras páginas. vínculos. Una recomendación en cuanto a la tipografía: no utilizar letra con serifa para la web. La tipografía con serifa facilita la lectura en un texto impreso, pero la dificulta en una pantalla de ordenador. Los párrafos de la figura, están escritos en Arial (sin serifa) y Times New Roman (con serifa), ambas del mismo tamaño de fuente (mismo nú- mero de puntos). Puedes comprobar cuál de ellos es más cómodo de leer, y después probar el mismo ejercicio en la pantalla del ordenador. La serifa es el adorno que hay, en algunos tipos de letra, en los extremos de las líneas de los distintos caracteres. En la figura se representa la letra a sin serifa (a la izquierda) y con serifa (a la derecha).  Conoce Caso práctico. Análisis del diseño del sitio web de Google Google es una web optimizada para realizar búsquedas, en la que priman la sencillez, la funcionalidad y la velocidad. Vamos a analizar la página principal y las páginas interiores, atendiendo a distintos aspectos: prediseño, elementos gráficos y tipográficos, elementos de imagen y elementos funcionales. „„ Análisis del prediseño Objetivo Prima la sencillez. Básicamente se trata de una caja de texto (donde se introducen las palabras 1 ¿Qué se pretende de la búsqueda) y un botón para comenzar el proceso de búsqueda. Está diseñada con fondo conseguir con la web? blanco y únicamente destaca el colorido diseño de su logotipo, que es la imagen de marca del buscador. Público La sencillez de su diseño permite que todo tipo de público utilice este buscador. La variedad de 2 ¿A quién se dirige? público que lo visita es una de las características que sustentan su modelo de negocio basado en la publicidad. Contenidos El contenido básico, una vez hecha la búsqueda, está formado por los resultados, que son frases 3 ¿Qué contenidos descriptivas y enlaces a las páginas encontradas. Los contenidos se ordenan en función de un se quieren mostrar? algoritmo propio de Google y cambian con cada criterio de búsqueda establecido. Directrices Tiene una estructura lineal de páginas (página siguiente, página anterior). En cuanto a la 4 ¿Cuáles se usarán organización, tiene una cabecera en la cual destaca el logo y que contiene enlaces a otras en cuanto a forma, aplicaciones de Google. Los contenidos ocupan la parte principal de la página. No dispone de organización un menú de navegación. y estructura? „„ Análisis de elementos gráficos y tipográficos Tipo de letra Google utiliza, en sus páginas interiores, una letra estándar, sin serifa, de tamaño normal. 5 Básicamente, se utilizan el color negro para los textos, el azul para los enlaces descriptivos y el verde para las direcciones URL. El subrayado sirve para los enlaces y no se emplea la cursiva. Para facilitar la lectura, en la página de resultados se resaltan con negrita las palabras buscadas. „„ Análisis de elementos de imagen Uso de colores El uso de colores es muy reducido. Se utiliza el blanco para el fondo de todas las páginas, y 6 colores básicos para mostrar el texto (negro para el texto, azul y verde para los enlaces y rojo para destacados). Uso de ilustraciones, En las páginas de Google hay un claro predominio del texto (descripción y enlaces). Práctica- 7 imágenes e iconos mente se renuncia al uso de imágenes, salvo en el logotipo y en los enlaces de paginación. „„ Análisis de elementos funcionales Dispone de buscador Google permite realizar búsquedas de diversos tipos. Las habituales búsquedas de texto se 8 complementan con un buscador de imágenes y un buscador de vídeos, entre otros. Cambio de tamaño Google no dispone de una opción específica de cambio de tamaño de texto o de alto contraste 9 de letra o alto contraste (más allá de su propio diseño de fondo blanco con los textos en color oscuro). Personalización de Google permite una personalización muy avanzada de contenidos a través de su herramienta 10 contenidos, cambio iGoogle. Desde ella puedes hacer cosas como personalizar noticias, recibir información del de idioma tiempo o habilitar un acceso a Gmail. También permite el uso de varios idiomas.  Conoce „„ Estándares de accesibilidad de la información Según la legislación española, las páginas web de organismos públicos deben sa- Para hacer el contenido web tisfacer los estándares de publicación referidos a navegabilidad y accesibilidad accesible, se han desarrolla- para personas con discapacidades. Existe un compromiso para que los sitios web do las denominadas pautas cumplan unas normas que les permitan ser visitados y utilizados por el mayor nú- de accesibilidad al conte- mero posible de personas. Se trata de minimizar el efecto de las limitaciones físicas y nido en la Web (WCAG), técnicas de los posibles visitantes. cuya función principal es guiar el diseño de páginas Estos criterios, llamados criterios de accesibilidad, están recogidos por el World web hacia un diseño accesi- Wide Web Consortium (W3C). La WAI (web accessibility initiative) es una rama del W3C ble, para reducir las barreras que establece niveles de conformidad o accesibilidad (A, AA y AAA) para las a la información. webs en función del grado de cumplimiento de dichos criterios, desde los más bási- cos hasta los más exigentes. La mayoría de los sitios web que visitamos tienen asignado el nivel AA, y muy pocos tienen el AAA. Incluir el icono en una web no es una certificación externa sino un compromiso de cumplir el nivel de accesibilidad. La adopción de criterios de accesibilidad a la hora de diseñar una web implica nume- rosos beneficios, como aumentar el número de visitantes, reducir el tiempo de carga de la página o disminuir el número de errores. Para principiantes, intentar cumplir las normas básicas de accesibilidad es un objetivo a medio plazo; comprender los consejos de la W3C (y más aún cumplirlos) requiere un alto nivel de especialización. Texto alternativo en una imagen Estándares de publicación Los estándares de publicación más básicos son: Utilizar hojas de estilo. Asegurarse de que la página se ve bien en distintos navegadores. Usar las etiquetas de texto alternativo para describir la función de los elementos visuales. Facilitar la trascripción de los ficheros de sonido y la descripción de los vídeos. Organizar las páginas usando encabezados, listas y una estructura consistente. Realizar tablas de manera que se puedan leer línea a línea. Revisar y validar el código HTML. Puedes completar esta información en el sitio web de la W3C, en concreto en esta dirección: www.w3c.es/Divulgacion/GuiasBreves  Conoce 3. Herramientas de publicación: gestores de contenidos Las herramientas de publicación son herramientas relativamente fáciles de usar que permiten al usuario crear sus propios contenidos y publicarlos en Internet sin la necesidad de contar con conocimientos técnicos de diseño o programación. De acuerdo con las características de los contenidos que se vayan a tratar, se pueden utilizar distintas herramientas, como vimos en la unidad anterior. En esta unidad nos centraremos en los gestores de contenidos. Un gestor de contenidos es una herramienta de publicación que permite generar contenidos web y editarlos y actualizarlos online sin necesidad de contar con conoci- mientos técnicos de diseño o programación. En inglés se conoce como CMS (content management system). Los gestores de contenidos se basan en plantillas ya definidas que el usuario pue- de adaptar y personalizar según sus gustos, lo cual abarata los costes de creación de las páginas web y ahorra tiempo en su elaboración. Además, el uso de plantillas proporciona un diseño común y una apariencia homogénea a todos los contenidos Sites publicados, con lo cual el resultado es una web coherente. El usuario puede acceder a ellos mediante un navegador. Con un gestor de contenidos podemos crear blogs y wikis: Una wiki es un sitio web de construcción colectiva sobre un tema específico. Facilita la discusión sobre temas diversos y puede ser editada por cualquier usuario desde la Web (añadiendo, modificando o eliminando contenidos). La más conocida mundialmente es Wikipedia. Los blogs, que son como diarios en Internet, constituyen otra herramienta de expresión y comunicación. En ellos se publican de manera instantánea entra- das (también llamadas artículos o posts) que se organizan cronológicamente empezando por la más reciente. Los lectores pueden publicar comentarios en cada una de las entradas. Algunos gestores de contenidos WordPress Aunque permite elaborar cualquier tipo de sitios web, se utiliza principalmente para la creación de blogs. Está desarrollado en lenguaje PHP. Por su facilidad de uso, es el CMS más utilizado actualmente. Joomla También desarrollado en lenguaje PHP, es menos eficiente que WordPress para la crea- ción de blogs pero resulta muy atractivo para el diseño de revistas digitales. Drupal Está desarrollado en lenguaje PHP por una comunidad de desarrolladores. Es una opción muy recomendable si nuestra página web va a recibir muchas visitas, porque admite más que WordPress. Está orientado a comunidades y permite definir varios perfiles de usuarios con permisos y accesos diferentes. Es muy seguro.  Conoce 4. El lenguaje HTML El uso de gestores de contenido facilita la creación de páginas web para un usuario poco experto. Sin embargo, los diseñadores de páginas web se centran en la creación de páginas a partir del lenguaje en que están escritas: el lenguaje HTML (hypertext markup language, lenguaje de marcas hipertextuales). La función de los navegadores que utilizamos habitualmente (Chrome, Firefox, Edge, etc.) es interpretar ese lenguaje y transformarlo en la página web que se nos muestra. El HTML es el lenguaje usado para la construcción de páginas web. Por convención, los archivos de formato HTML usan la extensión.htm o.html. Una página web se puede crear directamente escribiendo en este código en cual- Mi primera página web quier editor de textos y guardándolo con la extensión adecuada (.htm o.html), pero no se suele hacer así más que con fines educativos. En la práctica, se utilizan editores de páginas web, que permiten diseñar webs de una forma más sencilla e intuitiva. Estoy escribiendo código Las características básicas del lenguaje HTML son las siguientes: 1. El lenguaje HTML se escribe en forma de etiquetas entre corchetes angulares (). Pueden ser de apertura (por ejemplo: ) o de cierre (por ejem- plo: ); ésta se distingue de la primera por la barra (/). Estructura básica de una página 2. El código HTML siempre empieza con la etiqueta de apertura y siem- web en HTML pre acaba con la etiqueta de cierre. 3. Un sencillo documento creado en HTML tiene el aspecto de la figura. En un apertura del código documento HTML se distinguen dos partes principales: apertura de la cabecera ƒ El encabezado, comprendido entre las etiquetas y , apertura del nombre que constituye una instrucción de cabecera del documento, como el título. del documento Mi primera página web ƒ El cuerpo, comprendido entre las etiquetas y , que cierre del nombre constituye el contenido de la página. del documento 4. Las etiquetas se completan con atributos, que son parámetros que definen cierre de la cabecera las propiedades o el comportamiento de la etiqueta; están siempre en la eti- apertura del cuerpo queta de apertura y su valor va siempre entre comillas. En el siguiente ejemplo, del documento color es un atributo de la etiqueta : Estoy escribiendo código cierre del cuerpo del documento cierre del código 5. Un elemento de HTML está compueto de dos etiquetas (la de apertura y la Función de las etiquetas princi- de cierre). pales A continuación se recogen tres ejemplos de elementos y se muestra cómo será su visualización una vez interpretados por un navegador: Elemento En el navegador se verá así: Texto en negrita Texto en negrita Texto en cursiva Texto en cursiva Texto subrayado Texto subrayado  Conoce En la siguiente tabla se muestran algunas de las etiquetas del lenguaje HTML: Etiquetas y atributos del lenguaje HTML Etiqueta Atributo Función y Apertura y cierre del código y Cabecera del documento y Establece el nombre del documento, dentro de y Cuerpo del documento ,... y ,... Encabezado de primer orden, segundo orden..., dentro de y Inserta una tabla align (center, right, left) Alinea la tabla (al centro, a la derecha o a la izquierda) bgcolor Establece el color de fondo de la tabla border Establece un borde para la tabla cellpadding Separación entre el borde de la tabla y el contenido cellspacing Separación entre las celdas width Establece el ancho de la tabla height Establece el alto de la tabla y Fila de una tabla class Especifica una clase del fichero de estilos CSS similares a los de tabla y Columna de una tabla similares a los de tabla y fila Salto de línea y class Capa, con o sin clase del fichero de estilos CSS de la capa y Párrafo alineado align (left, center, right, Alinea el párrafo (a la izquierda, al centro, a la derecha justify) o justificado) y Lista y Fuente y formato de la fuente face, size, color Nombre, tamaño (de 1 a 7), color  Conoce „„ HTML5 El lenguaje HTML5 es la quinta versión del lenguaje de etiquetas HTML. Su desa- rrollo está regulado por el Consorcio W3C. Su primera versión definitiva se lanzó en octubre del 2014. Se trata de un lenguaje diseñado para incorporar etiquetas específicas de funcionali- dades multimedia (imagen, audio y vídeo). Con su lanzamiento ha comenzado el declive del que hasta ahora era el rey del con- tenido multimedia, el lenguaje Flash. Este declive se ha acentuado por la negativa de algunos de los principales fabricantes a que funcione Flash en sus dispositivos, apostando claramente por el HTML5. Una vez desarrollado el estándar, la implementación del lenguaje por parte de los diferentes navegadores está siendo paulatina, dado que muchos de ellos crearon su propia versión de HTML5 (no regida por el W3C y que, por lo tanto, no funciona exac- tamente igual). Por eso es necesario recurrir a tablas de compatibilidad para ver qué etiquetas funcionan en cada uno de ellos. A continuación tienes un ejemplo de tabla de com- patibilidad de HTML5 para los distintos navegadores: Puedes comprobar la compatibilidad de tu navegador (a la vez que te haces idea de la cantidad de funcionalidades disponibles en HTML5) visitando la siguiente página: html5test.com. Puedes comprobar la compatibilidad de tu navegador (a la vez que te haces idea de la cantidad de funcionalidades disponibles en HTML5) visitando la siguiente página: html5test.com Por otro lado, a través del enlace indicado a continuación podrás encontrar algunos ejemplos de páginas desarrolladas con HTML5: html5demos.com  Conoce 5. El lenguaje JavaScript JavaScript y HTML son los lenguajes más antiguos para el desarrollo de páginas web. Sin embargo, por sus características, sigue teniendo plena vigencia. JavaScript es un lenguaje dinámico que se ejecuta en local en el ordenador, es de- cir, es el propio navegador (Microsoft Edge, Google Chrome, Mozilla Firefox, Opera...) el que se encarga de la ejecución de las instrucciones de este lenguaje. La diferencia con HTML es que, con éste, el navegador presenta la información, mientras que con JavaScript podemos interactuar con la página, es decir, el navegador interpreta y ejecuta el código. Este hecho lo convierte en el lenguaje ideal para, por ejemplo, validar datos en for- mularios, como paso previo al envío al servidor para su almacenamiento. Es lo que ocurre, por ejemplo, cuando en un formulario te aparece un mensaje que indica que falta un campo por rellenar, o que has puesto un valor de texto en un campo numé- rico, etc. Esas validaciones normalmente están hechas con JavaScript en el propio navegador. Además, en los últimos años, JavaScript ha evolucionado a versiones como AJAX (acrónimo de asynchronous JavaScript and XML) o JSON (acrónimo de JavaScript ob- ject notation), que permiten interaccionar con el servidor desde local en el navegador (como por ejemplo con una base de datos). Estos usos de JavaScript podemos verlos en formularios en los que se te pide que introduzcas un nombre de usuario y, al salir de ese campo, se te indica si dicho nombre de usuario ya lo tiene asignado otra per- sona. El aspecto del código de JavaScript es el siguiente: En la web www.javascript.com puedes seguir unos sencillos pasos para iniciarte en este lenguaje. 103  Conoce 6. Editores de páginas web Los editores de páginas web son aplicaciones que permiten crear páginas web. Ya hemos visto al principio de la unidad que los editores WYSIWYG (what you see is what you get) nos permiten confeccionar una web como si estuviéramos escribiendo un documento con un procesador de texto y generan automáticamente el código fuente en HTML. Los editores NVU (esta palabra se pronuncia como N-view, de new view) y Kompo- Zer son editores avanzados, libres y multiplataforma. NVU ya no lo mantiene su au- tor desde su última versión, la 1.0. Desde ese momento comenzó el desarrollo de KompoZer, que se define como el desarrollo alternativo no oficial de NVU. KompoZer mejora las prestaciones de NVU. El entorno de trabajo de ambos es muy similar, así que para empezar a usar un editor de páginas web nos vale cualquiera de ellos. En las prácticas de la unidad nos referi- remos a KompoZer porque es más sencillo de obtener (en especial, la extensión para poner el menú en español), pero se puede usar también NVU. Ni KompoZer ni NVU soportan HTML5. El entorno de trabajo de estos editores es el siguiente: barra de redacción barra de formato área de trabajo ventana de administración de sitios solapas de modo de edición Otros editores de este tipo son Adobe Dreamweaver (anteriormente, Macromedia Dreamweaver) y BlueGriffon (software libre, soporta HTML5). 104  Conoce 7. Alojamiento de sitios web y transferencia de ficheros „„ Alojamiento de sitios web El último paso para que la página web que hemos creado pueda ser vista por otros usuarios es situarla en un servidor de Internet. Desde ese momento debemos mante- ner el sitio web y actualizar sus contenidos en la medida en que sea necesario. Generalmente, las empresas que ofrecen servicios de Internet incluyen espacios para sus clientes. Algunos son gratuitos, como 007sites.com, webs.com o awardspace.com; en tal caso, suelen mostrar banners de publicidad en la página que alojemos. Otros servicios de alojamiento web no incluyen publicidad pero tienen condiciones limita- das o bien esperan que los usuarios acaben contratando planes de pago con mayores posibilidades. En estos sitios nos debemos conformar con la URL que nos asignen para nuestra pági- na, pero también tenemos la posibilidad de comprar un dominio con el nombre que queramos, algo usual para la mayoría de las empresas e incluso muchos particulares. Desde el inicio de Internet, los nombres de dominio han generado toda una in- dustria a su alrededor. Los dominios más codiciados son aquellos que contengan palabras como juegos, viajes, vuelos, etc. Algunos de ellos fueron comprados por par- ticulares con visión de negocio en Internet y posteriormente se vendieron por miles e incluso millones de dólares. Para que en el alojamiento se identifique la página principal, el archivo que la En España, el organismo constituye debe llamarse de una forma especial que deberemos comprobar en el que se encarga de gestio- alojamiento (normalmente será index.html). nar el registro de nom- bres de dominio en In- ternet bajo el código del „„ Transferencia de ficheros país es Red.es, a través Los programas de transferencia de ficheros (FTP) son los encargados de comu- de agentes registradores nicar nuestro ordenador con el servidor que nos brinda alojamiento, de forma que ese como 1&1 Internet, Ar- conjunto de archivos que componen nuestro sitio web y que manipulamos en nuestro sys o Piensa Solutions, ordenador local puedan sustituir, cuando sea necesario, a los que aloja el servidor. entre otros. En el tema usaremos FileZilla, programa de transferencia de ficheros libre y multi- plataforma. El navegador Firefox también sirve como programa de transferencia de ficheros si se le añade un complemento que se llama FireFTP, y algunos editores, como NVU o KompoZer, permiten publicar directamente las páginas web. Todos los programas de FTP funcionan de un modo similar. Tienen una barra de di- recciones en la que se debe introducir la dirección del servidor con el que se quiere conectar, el nombre de usuario y la contraseña cuando sea necesario. También con- tiene dos paneles: el de la izquierda, con el árbol de archivos del ordenador local, y el la derecha (vacío en la figura), en el que una vez conectados aparecerán las carpetas en nuestro sitio web remoto. barra de direcciones 105