HTML y CSS - Entornos de desarrollo y HTML PDF

HTML y CSS Entornos de desarrollo y HTML Queda rigurosamente prohibida, sin la autorización escrita de los derechos de autor (copyright), bajo las sanciones establecidas en las leyes, la reproducción total o parcial de esta obra por cualquier medio o procedimiento, comprendidos la reprografía y el...

HTML y CSS Entornos de desarrollo y HTML Queda rigurosamente prohibida, sin la autorización escrita de los derechos de autor (copyright), bajo las sanciones establecidas en las leyes, la reproducción total o parcial de esta obra por cualquier medio o procedimiento, comprendidos la reprografía y el tratamiento informático, y la distribución de ejemplares de ella mediante alquiler o préstamo públicos. Diríjase a CEDRO (Centro Español de Derechos Reprográficos, www.cedro.org) si necesita fotocopiar o escanear algún fragmento de esta obra. INICIATIVA Y COORDINACIÓN DEUSTO FORMACIÓN COLABORADORES Realización: Oneclick Diseño y Software, S.L Elaboración de contenidos: Andrés Vega Moreno Formador especializado en la Creación y programación de páginas web. Ingeniero Técnico informático, Diseñador Gráfico y experto en creación de páginas web, es el coordinador de la formación tecnológica de la plantilla de la Asociación Triángulo. Iván Cerezo Vivas Maestro, formador experto en entornos de desarrollo, C# y Unity 3D de los que imparte cursos en Aula Arcade. Supervisión técnica y pedagógica: Grufium Educación y Excelencia, S. L. Coordinación editorial: Grufium Educación y Excelencia, S. L. © Grufium Educación y Excelencia, S. L. Barcelona (España), 2021 Primera edición, segunda reimpresión: julio 2021 ISBN: 978-84-9128-958-6 (Obra completa) ISBN: 978-84-9128-960-9 (HTML y CSS: Entornos de desarrollo y HTML) Depósito Legal: B 14000-2018 Impreso por: SERVINFORM Avenida de los Premios Nobel, 37 Polígono Casablanca 28850 Torrejón de Ardoz (Madrid) Printed in Spain Impreso en España Esquema de contenido Introducción 1. Entorno de desarrollo 1.1. Introducción 1.2. Editores de código 1.3. Clientes FTP 1.3.1. Introducción 1.3.2. Clientes FTP más utilizados 1.3.3. Instalación y configuración de FileZilla 1.4. Herramientas de análisis (navegadores) 1.4.1. Firefox para desarrolladores 1.4.2. Chrome para desarrolladores 1.4.3. Introducción al análisis SEO y optimización 1.5. IDEs completos 1.5.1. BlueGriffon 1.5.1.1. Configuración y uso 1.5.2. Alternativas a BlueGriffon 1.5.2.1. Aptana 1.5.2.2. Dreamweaver 1.5.2.3. Descarga e instalación de Dreamweaver 2. HTML 2.1. Introducción 2.2. Estructura general 2.3. Estructura de body 2.4. Otras API y etiquetas Resumen Introducción ! Este módulo se divide en dos grandes bloques, cada uno con un objetivo Recuerda fundamental: en el primer bloque se introducirán conceptos muy impor- Un plugin es un módulo tantes en el desarrollo de aplicaciones como son los IDEs, se repasarán de software, programa los principales editores de código utilizados por programadores profe- o librería que se añade a sionales de páginas web y otro tipo de aplicaciones y también se apren- una aplicación principal derá a instalar y utilizar clientes FTP para subir nuestra web a internet. para dotarle de una Se realizarán todos los pasos necesarios para descargar y configurar funcionalidad extra de la algunos de los IDEs más utilizados en cuanto a creación web se refiere y cual carece originalmente. se finalizará el bloque introduciendo algunas herramientas de análisis que En este caso, antes ofrecen los mejores navegadores de internet y que serán muy útiles para de existir el estándar seguir aprendiendo mientras se ojea el código fuente que hay detrás de HTML5, todo el contenido páginas web que visitemos a menudo y que nos parezcan atractivas. multimedia (vídeo o audio) debía reproducirse En un segundo bloque se profundizará en la parte del desarrollo web por programas que no que se centra en dotar de estructura lógica y organizativa a una página eran contenido HTML web. Para ello, se estudiará a fondo el lenguaje de etiquetado HTML que en sí, sino que eran es, junto con CSS y JavaScript, uno de los tres pilares que conforman el creados y proporcionados estándar de desarrollo web denominado HTML5. Siguiendo la estructu- por empresas y cuyo ra lógica de cualquier página web, se definirá cada etiqueta del lenguaje control, actualizaciones y y se pondrán en práctica. También se introducirán algunos de los nuevos rendimiento dependían de componentes que HTML5 integra de forma nativa y sin necesidad de las mismas. Para introducir plugins o software de terceros. un clip multimedia en una web era necesario embeber alguna de las versiones disponibles de estos reproductores externos, más o menos pesados, con los problemas de seguridad y rendimiento que ello conllevaba. El más conocido de ellos quizás sea Macromedia Flash, el cual se adquirió por Adobe años después. Figura1. HTML5 está formado por las últi- mas versiones de las tecnologías HTML, JavaScript y CSS. Introduccion 5  1. Entorno de desarrollo 1.1. Introducción Diseñar y desarrollar cualquier aplicación, sea del tipo que sea, re- querirá de su creador una serie de conocimientos relacionados con las tecnologías utilizadas; estas tecnologías no son solamente los len- guajes de programación utilizados en dicha aplicación, como pueden ser JavaScript o SQL, o lenguajes de etiquetas, estructura o estilo como HTML o CSS, respectivamente, sino que el término va mucho más allá. ! Cuando se habla de tecnologías en el desarrollo web también nos esta- mos refiriendo a las herramientas que se utilizan para almacenar dichas Recuerda aplicaciones de forma local o remota, a las que se utilizan para transferir Cuando se habla de archivos de un lugar a otro y, cómo no, al propio software utilizado para escribir el código crear dichas aplicaciones. de una web, en realidad no se Para crear cualquier página web se necesita, al menos, un programa trata de un único en el cual escribir el código de la misma, que son los llamados editores fichero de código de código. Una vez escrito el código, habrá que copiarlo en el lugar escrito, además, en correspondiente al que accederán los visitantes de nuestra página web. el mismo lenguaje Si se trata de un servidor local, esta operación consistirá en copiar y pegar de programación, el o los archivos de la web al directorio del equipo configurado para tal sino que se trata fin, pero si por el contrario se trata de un servidor remoto (cualquier de un conjunto de modalidad del mismo) se tendrán dos opciones: la primera es utilizar la archivos escritos aplicación web que haga las veces de gestor de archivos que el provee- en varios lenguajes dor de alojamiento habrá facilitado y, la otra, altamente recomendable, de programación es utilizar un gestor FTP a través del cual se podrán sincronizar de forma compilados o completa y segura ciertas carpetas locales con las carpetas deseadas en interpretados y el servidor que el proveedor nos tenga asignado. otros de etiquetado o definitorios del Esto sería lo básico para empezar a crear. Sin embargo, hoy día existe un estilo visual, cada software que ofrece varias funcionalidades como las recién introducidas uno de ellos con un y a menudo muchas más, por lo que en un solo programa se puede tener propósito concreto al alcance todo lo necesario para desarrollar una web de principio a fin. y generalmente A estos programas tan completos se les suele llamar «entornos de trabajo ordenados por o desarrollo» (Integrated Development Environment) y combinan lo me- funcionalidad y jor de cada tecnología para que el desarrollador pueda concentrarse en estructurados en la creación de cada una de las partes de una página web. El concepto carpetas. de IDE se puede extrapolar al desarrollo de cualquier aplicación en el 6 HTML y CSS ámbito del software. A grandes rasgos, se puede simplificar y definir un IDE como un conjunto de herramientas y funcionalidades agrupa- das en una misma aplicación cuyo objetivo es simplificar la creación de otras aplicaciones. 1.2. Editores de código Para introducir el concepto de editor de código hay que partir de la base de que el lector conoce lo que son los editores de texto. Todo el mundo ha escrito alguna vez un documento de texto para un trabajo, un infor- me, un correo electrónico, un mensaje en un chat o incluso un mensaje de texto en el teléfono móvil, ya sea un SMS o a través de las populares aplicaciones de mensajería instantánea como Telegram o WhatsApp. Es posible no haber caído en la cuenta de que, en realidad, en todas estas situaciones se han estado utilizando interfaces muy diferentes de un editor de texto. Por lo tanto, un editor de texto es cualquier aplicación que se utilice para escribir un texto que represente lo que se quiere decir y comunicar a un receptor que recibirá y leerá lo escrito. Pensando en los ejemplos de editores de texto recién expuestos, es posible notar cómo algunos son muy sencillos (un editor de SMS), en el que lo único que podemos introducir son caracteres o iconos muy bási- cos, y otros de ellos son muy sofisticados, con posibilidad de introducir imágenes animadas, emoticonos muy diversos (iconos que expresan emociones y estados de ánimo), adjuntar archivos, gráficos e incluso contenido multimedia. Figura 2. Ejemplos de diferentes editores de texto. Lo sencillo o complejo que sean estos editores de texto depende prin- cipalmente de su diseño, pero también de su funcionalidad: no es lo mismo un editor de texto pensado para enviar mensajes a redes sociales Entorno de desarrollo 7  o correos electrónicos que uno destinado a escribir informes estadísti- cos. Pues bien, los editores de código son, al fin y al cabo, editores de texto complejos cuya funcionalidad está centrada en crear código infor- mático. Aunque algunos de ellos están especializados en un lenguaje de programación concreto, la mayoría de ellos aceptan, entienden y tabulan códigos de muy diferente índole. Cabe decir en este punto que para la mayoría de lenguajes de programa- ción y también para HTML no son necesarios estos editores de código, sino que se puede crear un código con un editor de texto plano (es decir, que no introduzca caracteres ni símbolos especiales de estilo, párrafo, etc.). Sin em- bargo, y como se verá enseguida, utilizar editores de código facilita mucho la creación, organización y evita cometer errores, sobre todo ahora que estamos dando los primeros pasos como creadores de páginas web. Figura 3. Comparativa de textos con y sin formato ni caracteres especiales. Como se ve en la Figura 3, si se abre un archivo de texto en formato docx que solo contenga la frase «Hola Mundo» con un editor de texto enri- quecido como Word, se visualizará correctamente. Sin embargo, si se abre el mismo archivo con un editor de códigos básico/plano, se obser- varán multitud de símbolos extraños porque el archivo no es texto plano. 8 HTML y CSS En este sentido, el editor más básico que se puede encontrar es el bloc de notas presente en cualquier sistema operativo (Notepad en Win- dows, Textedit o OneNote en MAC, editor de textos, gedit en Linux). ! Estas aplicaciones no permiten dar formato al texto escrito y tampoco introducen caracteres que puedan distorsionar el código, solo los ca- Recuerda racteres de cualquier idioma y poco más que los símbolos básicos de Una interfaz espacio, retorno de carro o tabulación. en términos de software (no en el Cualquier desarrollador profesional suele utilizar uno o dos editores di- sentido estricto de ferentes, dejando el bloc de notas para usos puntuales. Escribir en un la programación) editor de código tiene una serie de ventajas, de las cuales se destacarán: es el conjunto de elementos como Facilidad de detección de errores. Y a veces sugerencias de corrección. menús, botones, cajas en las que Entorno más agradable, cómodo para la vista y la lectura, interfaces introducir textos, configurables preparadas para reducir la fatiga visual en jornadas de iconos y emoticonos trabajo largas. que muestra cualquier programa o aplicación Posibilidad de autodetección o elección del lenguaje de programación para llevar a cabo la utilizado y resaltado/tabulación de las palabras clave de dicho lenguaje. interacción con la aplicación. Pulsando Integración con entornos de trabajo y desarrollo externos. y utilizando estos elementos se envían Herramientas avanzadas de búsqueda y reemplazo de textos, patrones órdenes al programa y cadenas de caracteres. que interpretará y transformará en Se pueden destacar tres editores de texto que son ampliamente utilizados acciones. Por ejemplo, entre la comunidad de desarrolladores: Notepad++, SublimeText y gedit. un botón con un stick verde o las palabras Notepad++ se trata de un editor de textos de propósito general solo dis- «De acuerdo» u «OK» ponible para sistemas Windows de Microsoft. Se trata de un software de suele ser utilizado código fuente libre y publicado bajo licencia pública general de GNU (GNU/ en las interfaces para GPL). Ofrece un buscador muy completo y herramientas para cambios que el usuario acepte masivos en el texto, una gran variedad de soporte de lenguajes de progra- cierta información. La mación y codificación, la grabación de macros para automatizar partes de clave de una buena los procesos y la posibilidad de enriquecimiento mediante la adición de interfaz de usuario plugins externos. Se trata de la opción más recomendable ya que cuenta es que sea intuitiva con un soporte muy activo y con actualizaciones y mejoras constantes. y que el usuario deba memorizar lo menos posible lo que significa cada elemento. Entorno de desarrollo 9  Figura 4. Información de Notepad++ y su licencia GPL. La segunda opción podría ser utilizar el editor de texto gedit, el cual dispone de versiones para los tres sistemas operativos mayoritarios y cuya licencia es GPL. Se trata de una aplicación con menos opciones de configuración y herramientas que Notepad++, pero disponible para cualquier sistema operativo. Además, es una perfecta puerta de entrada a los editores de código, ya que puede ser que el anterior (Notepad++) sea algo abrumador como primer editor de código. Gedit, sin embargo, presenta una interfaz sencilla, limpia y funcional y, aunque lanza actua- lizaciones con menos frecuencia, es muy estable. Figura 5. Información general sobre gedit. 10 HTML y CSS  ! El último editor destacado es SublimeText, que se encuentra disponible para sistemas Linux, macOS y Windows a través de la web cuyo enlace encontrarás en el anexo situado al final del módulo. Sin embargo, y aunque se distribuya de forma gratuita, no se trata de un software Recuerda libre, puesto que su código fuente no está disponible para realizar Que un programa modificaciones o ampliaciones. En Windows, concretamente, existe sea software libre una versión portable por lo que no es necesario realizar el proceso de significa, además instalación habitual en dicho sistema, sino que simplemente hay que de que se puede ejecutar un archivo que se encuentra disponible para su descarga en copiar y distribuir la página oficial. Tras un periodo de prueba gratuito, es obligatorio sin problemas de registrar y comprar una licencia con un coste de 80 dólares al momento derechos o piratería, de redactar este texto. que su código fuente está disponible para Tras analizar estas tres alternativas de editores de texto especializados que cualquier persona en código, se procederá a instalar uno de ellos para guiar al lector en el pueda consultarlo, proceso de instalación, que es muy similar en cualquiera de los casos. mejorarlo, compilarlo tras dichas mejoras Por ser el más universal y el que mejor se ajusta a nuestras necesidades y distribuir el código actuales, hemos optado por utilizar gedit. Para su instalación se accede fuente modificado a su página web cuya dirección podrás encontrar en el anexo de direc- y el programa ciones al final del módulo, donde se pueden ver (en inglés) las caracte- manteniendo rísticas principales del software y donde se cuenta que se trata del editor siempre las mismas de texto utilizado en GNOME, uno de los entornos de escritorio más condiciones de la distribuidos en los sistemas operativos GNU/Linux. licencia de software libre, en este caso GPL. Figura 6. Página web de descarga de gedit. Entorno de desarrollo 11  Si se avanza en la página hasta la sección de descargas (Downloads), se puede decidir entre descargar los ficheros.tar, que son necesarios para la instalación en sistemas Linux (el cual puede obtenerse nativamente bus- cando en los repositorios propios que ofrece este sistema operativo), o los instaladores para Windows y macOS, además de una lista de plugins com- patibles para aumentar la funcionalidad en los que no se entrará por no ser el objetivo de este módulo. Figura 7. Descargas de las versiones de gedit para Linux, Windows y macOS. 12 HTML y CSS En el caso de Windows se hace clic en «Windows 64-bit binaries» o «Windows 32-bit binaries» según se tenga un sistema operativo de 32 o 64 bits, siendo esta última opción la más común. Figura 8. Comprobación del tipo de sistema operativo instalado. Figura 9. Descarga de gedit para Windows de 64 bits. Comenzará entonces la descarga de un fichero ejecutable con extensión.msi (es muy probable que lance una pregunta de seguridad sobre dicho archivo, dependiendo del navegador utilizado y de las opciones de segu- ridad del mismo). Al finalizar la descarga se ejecuta el fichero, aceptando las nuevas peticiones de seguridad, y se comienza con la instalación pulsando «Next» en la siguiente ventana que se muestra. Se aceptan los términos de la licencia y se vuelve a pulsar «Next». Figura 10. Pregunta de seguridad al instalar un nuevo software. Entorno de desarrollo 13  Figura 11. Aceptación de los términos de la licencia. La siguiente pantalla preguntará por la carpeta destino en la que instalar ! gedit. Se puede dejar la ubicación por defecto o cambiarla por el direc- torio deseado. Tras hacerlo, mostrará una última pantalla en la que se pulsará «Install», tras lo cual puede mostrarse un tercer aviso de seguri- Recuerda dad que habrá que aceptar. Al finalizar la instalación se pulsa «Finish» y Se puede ver la ya se podrá ejecutar el programa desde el icono creado en el escritorio versión de un o, en su defecto, desde el menú «Programas» o pulsando la tecla «Win- sistema operativo dows» y escribiendo «gedit» en el buscador. Windows pulsando la tecla Windows y escribiendo «información de PC» o entrando en las propiedades del sistema haciendo clic derecho sobre el icono de «Este equipo» en el explorador de archivos. Figura 12. Lanzando gedit desde el buscador de Windows. 14 HTML y CSS Una vez lanzado gedit, nos prepara un documento nuevo, en blanco y sin título para comenzar a escribir. Se puede comprobar la sencilla inter- faz que presenta, cuya explicación se dividirá en dos partes: por un lado está la barra inferior, con información sobre el texto actual, y por otro la barra superior, en la que se pueden encontrar, en ese orden, los siguientes elementos: Figura 13. Barra de herramientas superior de gedit. Menú Abrir: para abrir cualquier archivo reciente o para abrir documentos que se encuentren en cualquier ubicación de nuestro equipo. Figura14. Abrir otros documentos ubicados en el equipo. El siguiente icono sirve para crear un nuevo documento que se abre en una pestaña junto al anterior, pudiéndose guardar ambos pulsando en el botón «Guardar» que se muestra a la derecha del título. Figura 15. Crear un nuevo archivo en gedit. Entorno de desarrollo 15  El siguiente icono es el del menú general y el más importante del pro- grama. A través de ese icono se podrán cambiar muchas opciones del mismo, algunas de ellas muy útiles. Lo primero que hay que hacer es cambiar algunas de las preferencias. Figura 16. Cambiando las preferencias de gedit. Resulta especialmente útil seleccionar las opciones elegidas , las cuales están desmarcadas por defecto. Como se puede comprobar, existen más grupos de opciones a la derecha de «Ver», en los cuales podremos cam- biar otros ajustes según nuestras preferencias. Por ejemplo, para reducir la fatiga visual se puede cambiar el «Esquema de color» dentro de la sección «Tipografías y colores». Una última recomendación al respecto es echar un vistazo a los atajos de teclado, los cuales ayudarán a trabajar más rápidamente. 16 HTML y CSS  Figura 17. Principales atajos de teclado de gedit. En la parte inferior de la ventana en la que se está trabajando se puede ver otra barra con cierta información útil, como el tipo de documento que se está escribiendo (texto plano por defecto) o la posición del cursor actual ! (Ln, Col); esto será especialmente útil para localizar errores a la hora de escribir código. Es muy importante cambiar el tipo de documento indican- Recuerda do en nuestro caso que vamos a crear un documento en HTML, ya que Todas las opciones ello provocará que resalten automáticamente las palabras claves reserva- explicadas sobre das en dicho lenguaje y nos ayudará con la tabulación. gedit son fácilmente extrapolables a cualquier editor de código, incluso a los que se encuentran integrados dentro de un IDE. Solo habrá que entrar en las preferencias del mismo para adaptar el editor a la forma de trabajar de cada usuario. Figura 18. Elección del lenguaje de progra- mación en gedit. Entorno de desarrollo 17  1.3. Clientes FTP 1.3.1. Introducción El objetivo de una página web es subirla a internet. Para ello existe la opción de usar la aplicación web que nos brinde nuestro proveedor de alojamiento gratuito o de pago, a la cual se accede a través de la cuen- ta de administración que se haya creado al contratar el alojamiento o mediante el panel de control del hosting en el que está instalado el dominio. Esta opción puede ser útil para pequeños cambios o solucio- nes urgentes, pero no es lo más recomendable en términos generales, y mucho menos en las primeras subidas o cuando se están haciendo muchos cambios o probando nuevas funcionalidades de la web. Para + este tipo de situaciones lo más aconsejable es utilizar clientes FTP, que permitirán tener una carpeta local (en nuestro equipo) y una remota (en el servidor de alojamiento o hosting) sincronizadas, de forma que Saber más cualquier cambio realizado en nuestros ficheros locales podrá subirse al Joomla es un CMS o, remoto con tan solo pulsar un botón. Además, permite subir y descargar lo que es lo mismo, grandes cantidades de ficheros con protección frente a fallas de inter- un sistema de net, reintentando automáticamente la subida o descarga de aquellos gestión de contenido que se hayan visto afectado por estos errores. que permite crear páginas web Cabe destacar que quizás, hoy día, con velocidades de internet cada vez dinámicas instalando más rápidas y con las mejoras de aplicaciones web basadas en la nube y descomprimiendo o gestores de archivos de los navegadores, los clientes FTP tienen algo una serie de archivos menos de importancia que la que tenían hace unos años ya que van sur- preconfigurados giendo iniciativas como eXtplorer, que se trata de un gestor de archivos en un servidor de basadas en Joomla. Pero en entornos profesionales se siguen utilizando alojamiento que del mismo modo que hace años por las comodidades citadas. Otras, en permita trabajar cambio, parece ser que han dejado de tener soporte, como es el caso de con archivos PHP, FireFTP, una extensión para el navegador Mozilla Firefox que permitía JavaScript y bases disponer de un cliente FTP en el mismo navegador, pero que ha dejado de datos MySQL. de ser compatible con la nueva línea de este popular navegador (Firefox Tras instalar estos Quantum). archivos, se crea una página web estándar a modo de plantilla 1.3.2. Clientes FTP más utilizados: FileZilla, WinSCP y Cyberduck que se debe empezar a personalizar y Existen más de una decena de clientes FTP bastante conocidos y otros retocar hasta crear los cuantos no tan extendidos, pero igualmente útiles. La mayoría de ellos menús, contenidos y tienen características similares e independientemente de si son de pago estética deseada. o gratuitos, de código abierto o no, cualquiera de ellos cumple con su 18 HTML y CSS función correctamente. Como es imposible estudiarlos todos, aquí se ha optado por listar los que se consideran más útiles, destacar tres de ellos y realizar el proceso de instalación completo de uno. + Los clientes FTP más conocidos son FileZilla, Cyberduck, CuteFTP, Saber más WinSCP, FireFTP o SmartFTP. De esta serie, los más extendidos en cuanto Pese a que hay a uso son los tres primeros, que se encuentran disponibles en español personas que piensan para la mayoría de sistemas operativos, son bastante robustos y seguros que es un producto de porque admiten el protocolo secure FTP (SFTP) y, pese a ser gratuitos, la fundación Mozilla, ofrecen toda la funcionalidad necesaria para nuestro propósito. no es así, siendo FireFTP el software lanzado y mantenido FileZilla hasta hace poco por dicha fundación para Se trata del cliente FTP por excelencia y ofrece también el software para su navegador Firefox. la transferencia de archivos del lado del servidor, es decir, existe FileZilla Server y FileZilla Client. Es software libre y de código abierto, distribuido bajo licencia GNU/GPL y utiliza los protocolos FTP, SFTP y FTPS (FTP sobre SSL). Originalmente se encontraba disponible únicamente para sistemas Windows, pero en la actualidad es posible su uso en macOS X, Linux o FreeBSD. Una de las características más destacables de este cliente es que, pese a tener muchas opciones y ser bastante complejo, fue pionero en la forma de distribuir las ventanas y, sobre todo, la disposición de la interfaz: con un solo golpe de vista puedes acceder a mucha información sobre el estado del servidor, del cliente y del estado de las transferencias sin ne- cesidad de utilizar menús o diferentes ventanas para cada acción. Además, incluye un modo de conexión rápida que evita configurar todas las ca- racterísticas del servidor al que se desee conectarse. Figura 19. Ventana principal del cliente FileZilla FTP. Entorno de desarrollo 19  WinSCP Aunque este cliente recibe su nombre por el protocolo SCP (Simple Communication Protocol), en realidad se trata de un cliente completo para sistemas operativos Windows que soporta, además, SFTP bajo SSH (protocolo de comunicación que permite a un cliente controlar comple- tamente a un servidor desde una ubicación remota a través de comandos introducidos en una consola). Se distribuye bajo licencia GPL. Aunque solo esté disponible para Windows, es uno de los más utilizados ya que su primera versión fue lanzada en el año 2000, un año antes que la primera versión de FileZilla. Figura 20. Ventana principal del cliente WinSCP. WinSCP incorpora una interesante consola de comandos muy útil para un uso avanzado del cliente y ofrece dos interfaces gráficas diferentes, algo más reducidas que la de FileZilla pero, a la vez, más amigables. Cyberduck El más reciente de los clientes FTP que veremos es Cyberduck, que también está distribuido bajo licencia GPL y de forma gratuita para macOS y Windows 7 en adelante, en el que se podrá realizar una donación para eliminar el banner de donaciones del programa y registrarlo a nuestro nombre. 20 HTML y CSS No solo es un cliente FTP seguro, sino que también puede ser usado como gestor/sincronizador de almacenamiento en la nube usando los servicios de Google Drive, Dropbox, Microsoft OneDrive, WebDAV o Amazon S3, entre otros. Ofrece también software de lado del servidor y servicios de criptografía en el lado del cliente, concretamente encripta- ción de archivos, nombres de archivos y carpetas y la posibilidad de compartir archivos individualmente con enlaces seguros. Figura 21. Ventana principal del cliente Cyberduck. 1.3.3. Instalación y configuración de FileZilla Para instalar FileZilla hay que dirigirse a la web de descarga del proyecto, cuyo enlace encontrarás al final del módulo, en el anexo, donde se po- drá elegir entre la versión de Windows, MacOS o Linux. A continuación se pulsará en Download FileZilla Client, aceptando la pregunta de segu- ridad del navegador en caso de que la muestre. Figura 22. Página de descarga del cliente FileZilla. Entorno de desarrollo 21  Una vez descargado, se procederá a la instalación aceptando tanto la pregunta de seguridad como los términos de la licencia GNU/GPL pul- sando en «I Agree». Figura 23. Aceptación de los términos de una licencia GNU/GPL. Dependiendo del sistema operativo y de si en el mismo existe un único usuario o varios, el instalador lanzará una pregunta para decidir si se quiere que FileZilla esté disponible únicamente para el usuario actual o para todos. Se elige la opción que mejor se ajuste a nuestras necesida- des y se pulsa «Next». En la siguiente pantalla mostrará los componen- tes a instalar, entre ellos las traducciones a otros idiomas y la posibilidad de crear un acceso directo en el escritorio. Figura 24. Selección de componentes a instalar con FileZilla. 22 HTML y CSS Se continúa con el proceso de instalación seleccionando el directorio en el que se copiarán los archivos del programa y si se quiere crear un menú en el «Menú de inicio» de Windows. Se pulsa en «Install». Al concluir estos pasos el asistente pide reiniciar el equipo para finalizar la instala- ción, punto en el que podemos decidir reiniciar ahora o más adelante. Figura 25. Finalización de la instalación y reinicio requerido. Tras la finalización del instalador, se podrá lanzar FileZilla mediante cualquiera de las opciones disponibles según se haya decidido crear o no los iconos, menús o directamente escribiendo el FileZilla en el buscador del sistema operativo como vimos al instalar el editor de código. Una vez dentro, mostrará una pantalla de bienvenida que se puede cerrar pulsando en «Aceptar». Así aparecerá ante nosotros la interfaz completa del programa, la cual se puede dividir en varias secciones que se explicarán a continuación. Entorno de desarrollo 23  Figura 26. Visión general de la interfaz de FileZilla. 1. Menús y botones rápidos Figura 27. Menús y botones rápidos de FileZilla. A través de los menús Archivo, Edición, Ver, etc. se podrán realizar todas las acciones posibles que ofrece este programa. Sin embargo, una de las ventajas que ofrece este cliente es que prácticamente todo lo que se necesita está disponible mediante uno de los botones rápidos situados bajo el menú. Pero sí es cierto que si queremos conectarnos a más de un servidor FTP habrá que usar, al menos, el gestor de sitios, en el cual se puede configurar el sitio FTP con el que queremos conectarnos. Para ello, se pulsa en «Archivo» y a continuación en «Gestor de sitios…». Figura 28 a. Gestor de sitios de FileZilla. 24 HTML y CSS  Figura 28 b. Gestor de sitios de FileZilla. ! Una vez dentro del gestor de sitios se pueden configurar todos aque- llos servidores FTP a los que queramos conectarnos. Para configurar Recuerda uno hay que pulsar en «Nuevo sitio» y a continuación se debe cam- Cuando se especifica biar el nombre del sitio que se está configurando y proporcionar la FTP.nombredelservidor. información del usuario FTP que se haya creado en el panel de con- com se está diciendo trol del servidor web o el principal que nos haya otorgado nuestro explícitamente que proveedor a la hora de contratar el servicio de alojamiento. Los datos se quiere hacer una necesarios serán: conexión FTP, la cual tiene asignado por Nombre del servidor a conectar: que, por lo general, comienza por FTP defecto el puerto 21 (caso en el cual no es necesario especificar el puerto 21). del servidor. Pasa algo similar cuando Modo de acceso normal: Requiere un nombre de usuario y contrase- se escribe www. ña como mecanismo de seguridad. El modo de acceso puede configu- nombredelservidor.com, rarse como anónimo en caso de conectarnos a servidores FTP que no en el que está requieran autenticación y que contengan archivos disponibles para implícito que cualquier usuario anónimo que desee descargarlos y/o modificarlos. queremos Es un modo útil para ciertas necesidades, pero nada recomendable conectarnos a un por temas de seguridad. servidor web cuyo puerto, por defecto, Usuario y contraseña: otorgadas por el proveedor o creadas en el panel es el 80. de control del hosting (alojamiento). Entorno de desarrollo 25  Una vez configurados los sitios FTP, podremos conectarnos a ellos desde el primer icono o botón rápido del menú. Después de esto nos conectaremos al sitio configurado siempre que se hayan proporcionado los datos correctos en el gestor de sitios, se tenga conexión a internet (no necesaria si nos estamos conectando a un servi- dor FTP local) y el servidor se encuentre disponible. Se puede ver el progreso y el estado de la conexión en «Registro de estados». Figura 29. Registro de una conexión FTP establecida con éxito. Un aspecto importante a tener en cuenta es que si se visiona correcta- mente la página web en el servidor local pero al subirla al servidor remo- to los caracteres latinos o acentos no están bien representados y mues- tra símbolos extraños es porque no se ha especificado el juego de caracteres en nuestros archivos (cosa que se verá en el apartado HTML de este mismo módulo) o porque durante el proceso de la subida el servidor ha identificado incorrectamente dicho juego de caracteres (charset). Para solucionar este problema se debe forzar un charset con- creto (ya sea UTF-8 u otro) en las opciones del sitio, en el gestor de sitios. Figura 30. Forzar juego de caracteres (charset) en las opciones de una conexión FTP. 26 HTML y CSS Es posible que si el certificado del servidor FTP no está firmado o es des- conocido, aparezca una ventana anunciando este hecho. Como en este caso es nuestro propio servidor y estamos seguros de que es un sitio de confianza, aceptamos la petición de seguridad y marcamos el stick de «Confiar siempre en este servidor». Figura 31. Advertencia de seguridad al conectar a un servidor no seguro o con certificado caducado. Los siguientes iconos de la barra de menús muestran diferentes opciones de visualización para aumentar o simplificar lo que nos muestra FileZilla, como por ejemplo la visión doble o simple de carpetas y archivos tanto en local como en remoto (mostrando los árboles de directorios), mostrar u ocultar el área de mensajes en la que se registran los estados y eventos y hacer lo mismo con la cola de transferencias. Se puede activar y desactivar cada sección según nuestra elección. Se recomienda ocultar los árboles de directorios para simplificar la visión y dejar todo el espacio para el explorador de archivos. Existen más opciones relacionadas a través del menú «Ver». Figura 32. Opciones de activación y desacti- vación de secciones en FileZilla. El siguiente grupo que se encuentra es el de Transferencia y conexiones. Con estos botones rápidos, y en ese orden, se podrá actualizar la lista de archivos y carpetas, iniciar o detener la cola de transferencia, cancelar todas las operaciones en curso y desconectar o reconectar al último servidor usado. Es posible disponer de más opciones relacionadas en los menús «Transferencia» y «Servidor». Figura 33. Opciones de transferencia y conexión en FileZilla. Entorno de desarrollo 27  El último bloque de botones rápidos es especialmente útil cuando se necesita buscar o comparar archivos locales con sus versiones en el remoto. Figura 34. Opciones de comparación y búsqueda de archivos locales y remotos. Al pulsar en el primer icono de este grupo se podrá filtrar por tipos de archivo, crear conjuntos de filtros y, sobre todo, crear filtros personalizados, todo en la ventana emergente que aparece al pulsar en el primer botón rápido de este bloque. Figura 35. Opciones de filtrado del explora- dor de FileZilla. Al pulsar en el segundo botón (lupa) se podrán comparar directorios, lo cual coloreará directorios y archivos en el explorador con el siguiente código de colores: AMARILLO: cuando un archivo o directorio existe solo en un lado (ya sea local o remoto). VERDE: cuando el archivo es más reciente que su equivalente del otro lado (ya sea local o remoto). ROJO: cuando el archivo local y el remoto tienen diferente tamaño, lo que es un claro indicio de que hay cambios considerables entre uno y otro. 28 HTML y CSS  Figura 36. Código de colores del compara- dor de directorios. El tercer botón permite activar y desactivar la navegación sincronizada, lo cual provoca que al cambiar de directorio en cualquiera de las dos vistas del explorador, automáticamente se navegue al mismo directorio en la otra. Así se podrá acelerar la comparación de directorios navegando por ellos, más aún si se combina con los filtros o se activan los códigos de colores. Por último, FileZilla ofrece un potente buscador de archivos tanto local como remoto a través del último botón de este bloque (prismáticos) con el que se puede afinar todo lo necesario definiendo reglas y patrones en la ventana de búsqueda. Figura 37. Buscador de archivos de FileZilla. 2. Conexión rápida Cuando se trate de conexiones puntuales a sitios FTP o de prueba, o si únicamente nos conectaremos a un servidor FTP, FileZilla ofrece una for- ma rápida de efectuar esta conexión introduciendo los parámetros se- gún muestra la imagen. Figura 38. Barra de conexión rápida en FileZilla. 3. Registro de estados y eventos En esta sección se muestran todos los mensajes, estados y eventos que se producen durante un intento de conexión, cierre de la misma o una Entorno de desarrollo 29  transferencia. Las respuestas del servidor se marcan en verde y los erro- res en rojo. Mensajes en los que siempre se incluye un código (421 o 110 en el ejemplo) para facilitar la comprensión o búsqueda de dicho error y poder localizar qué puede estar pasando. Figura 39. Mensajes de registro de estados y eventos en FileZilla. 4. Explorador de archivos (local y remoto) En esta sección de la interfaz de FileZilla se muestran todos los archivos locales y remotos, con o sin árbol de directorios, según se haya configu- rado la vista. Figura 40. Vista local y remota de los directorios en FileZilla. 5. Cola de transferencias La cola de transferencias muestra la lista de archivos que se están sincro- nizando (subiendo o descargando) entre el directorio local y el remoto, una barra de progreso de cada transferencia, la prioridad o el estado de dicha transferencia. Además, también muestra un total de transferencias fallidas y satisfactorias en la orden de sincronización actual. Si se pulsa en las correspondientes pestañas se podrán ver los archivos que fallaron y reintentar su sincronización nuevamente. 30 HTML y CSS  Figura 41. Cola de transferencias en FileZilla. 6. Configuración y estado de la cola de transferencias Por último, al pie de la ventana de FileZilla se podrá ver algo más de in- formación sobre la conexión, como por ejemplo si la información que se está enviando o recibiendo está siendo cifrada para su protección a tra- vés de la red, si se están transfiriendo ficheros codificados en ASCII, en binario o es el programa quien configura esto. También se pueden con- figurar límites de velocidad, lo cual es especialmente útil para no saturar la red y que otros usuarios o nosotros mismos podamos seguir navegan- do o trabajando en internet sin que se vea mermada la experiencia a causa del ancho de banda utilizado por FileZilla. Cosa que también es útil si se dispone de un servidor gratuito cuyo ancho de banda no es suficientemente amplio para sincronizar grandes cantidades de archivos y servir páginas web al mismo tiempo. Y, finalmente, se encuentra el estado de la cola de transferencias, donde se indica qué cantidad de bytes están siendo transferidos y qué cantidad de bytes están siendo subidos y descargados. Figura 42. Estado y configuración rápida de la cola de transferencias. 1.4. Herramientas de análisis (navegadores) En este apartado se verán algunas de las herramientas que pueden ser útiles a la hora de desarrollar páginas web. Para ello, nos basaremos en dos de los navegadores más utilizados actualmente y disponibles para cualquier sistema operativo: Mozilla Firefox y Google Chrome. 1.4.1. Mozilla Firefox para desarrolladores El popular navegador de la fundación Mozilla ofrece dos opciones para desarrolladores web. La primera es un navegador específico orientado para desarrolladores que puede ser descargado desde la web cuyo en- lace encontrarás en el anexo situado al final del módulo, y que incluye Entorno de desarrollo 31  todo lo necesario para un análisis avanzado de cualquier web. Sin em- bargo, y mucho más ajustado al propósito actual, cualquier versión ac- tual de Firefox incorpora de base un panel de análisis web (herramientas que antes del 2017 estaban incluidas en el plugin de desarrollo llamado FireBug, el cual ha dejado de tener soporte). Para comprobar si nuestra versión incluye esta utilidad solo hay que pulsar las teclas CONTROL+ SHIFT + K para sistemas Windows y Linux o COMANDO + SHIFT + K en macOS mientras se visita cualquier página web. También se puede acceder a la consola mediante el menú «Opciones» -> «Desarrollador web». Figura 43. Acceso por menú a la consola web. Con cualquiera de estas dos opciones se abrirá la consola web, una ventana al pie de la página como la que muestra la siguiente figura. 32 HTML y CSS  Figura 44. Visión general de la consola web de Firefox. En la consola web se registran solicitudes de red, ficheros con código JavaScript cargados en la página actual, CSS, HTML, errores, advertencias de seguridad y todo tipo de mensajes mientras se está navegando. Por tanto, una vez abierta se podrá ver todo el tráfico que ha entrado y salido del navegador mientras se está navegando. Existe otra utilidad, llamada la consola del navegador, que ofrece la misma funcionalidad que la consola web, pero no se limita a la ventana actual, sino a la actividad de todo el navegador. Esta funcionalidad está disponible en cualquier versión Quantum y en la versión de desarrollador de Firefox que mencionamos en la introducción de este capítulo. A continuación se exponen las principales herramientas disponibles en la consola web. INSPECTOR ( ): Es la herramienta principal de la consola web. En ella se puede ver una copia completa del código HTML que provoca que una web se vea tal y como se visualiza. Tiene una estructura en cascada y colap- sable (que puede expandirse o comprimirse por bloques) para facili- tar la lectura. Así se podrán ir abriendo y cerrando bloques y ver, sombreados en azul en la vista principal de la web, qué partes de la misma se están seleccionando. Entorno de desarrollo 33  En el inspector, además, se pueden ver una serie de atributos y reglas de estilo (CSS) en una ventana situada a la derecha del código. Esto es útil ya que permite ver las principales reglas CSS, animaciones y tipografías que se están usando en un determinado bloque o etiqueta HTML sin necesidad de acudir a la herramienta «Editor de estilos». Del mismo modo en que se pueden modificar las etiquetas HTML y atributos de las mismas, también se pueden modificar las reglas CSS si se hace doble clic en una de ellas. + Saber más Cambiar el contenido en una vista local del código HTML a través de la consola web no significa que se esté cambiando el contenido de la web en el servidor: solo se estará cambiando en nuestra copia descargada y almacenada en memoria. Si se pulsa F5 para actualizar la web o se abandona y se entra de nuevo en la misma, todo seguirá tal y como estaba en el servidor original. Estos cambios son SELECTOR ( ): interesantes para hacer pruebas, testear Tras pulsar el selector (pasa a color azul) se podrá ver información sobre cosas y entender el elemento en el que se tenga sobrepuesto el puntero del ratón. Si se cómo está hecha la selecciona, lo señalará en el código de la ventana principal de la consola página web que se (inspector) y se podrán ver todas las etiquetas HTML que contiene dicho está visitando. elemento, así como los elementos en los que está contenido o con qué 34 HTML y CSS otros elementos comparte importancia en cuanto a estructura. Además, si se hace doble clic en el código, se podrá cambiar parte de dicho con- tenido en caliente y visualizar los cambios inmediatamente. Figura 45. Herramienta «Selector» de la consola web de Firefox. CONSOLA ( ): Se trata de una consola de comandos al uso, parecida a la consola o línea de comandos que se puede encontrar en los sistemas operati- vos, solo que orientada a la web. Esta consola acepta una serie de comandos JavaScript que se autocompletan al comenzar a escribirlos y se pueden consultar al escribir «?» o «help» en la misma consola, lo cual nos remite a la documentación oficial de Firefox al respecto (dirección disponible en el anexo situado al final del módulo). Por ejemplo, se podrá buscar y ver la información de un elemento HTML al que se le haya asignado un id llamado «title» combinando las órdenes «inspect» y el selector $( ). inspect($(“#title”)), o se podrá limpiar lo que muestra la consola ejecutando la orden clear( ). DEPURADOR ( ): Se trata de una herramienta para detectar y corregir errores de JavaScript en tiempo real. Gracias al depurador se pueden ver todos los ficheros.js (JavaScript) presentes en una web. Todos los ficheros.js que se vayan abriendo se organizarán en pestañas y se podrá pasar de una a otra. Entorno de desarrollo 35  Lamentablemente, hoy día la mayoría de código JavaScript en internet se encuentra comprimido y ofuscado, es decir, está preparado para que pese lo menos posible (archivo más pequeño y, por ello, más rápido de transmitir) y también para que su comprensión (y, por tanto, copia) por parte de terceros sea difícil o imposible. Esto provoca que, en la mayoría de los casos, cuando se busca un código JavaScript lo único que se lea sean funciones nombradas con una letra a las que se les pasan paráme- tros, que también son una o dos letras, y además en una única línea, sin tabulaciones o estructura humanamente amigable. En cualquier caso, el depurador sigue siendo muy útil a la hora de depu- rar y ver el comportamiento de scripts no ofuscados y, por supuesto, de los nuestros propios. EDITOR DE ESTILOS ( ): El editor de estilos funciona de manera similar al depurador, con un árbol resumiendo todas las reglas y los ficheros de estilo (.css) que rigen la pági- na a través de los cuales se puede ir navegando, estudiando o cambiando reglas en tiempo real para comprobar el efecto de los cambios realizados. Los apartados «Rendimiento», «Memoria», «Red» o «Almacenamiento» ex- ceden los objetivos de este tema, por lo que no se verán con detalle. Solo es importante destacar que pulsando en «Red» se podrán ver en tiempo real 36 HTML y CSS los ficheros, recursos, audio y vídeo que se están cargando en la web cuando se está navegando en ella, y las carpetas locales en las que se están almacenando dichos archivos. 1.4.2. Google Chrome para desarrolladores El navegador de Google también incluye una potente herramienta de análisis web denominada Google DevTools, la cual puede lanzarse pul- sando las teclas CONTROL+SHIFT+K en Windows, o COMANDO+SHIFT+K en macOs. Es prácticamente igual a la herramienta ofrecida por Firefox, por lo que, entendiendo una, se entenderá la otra. Entorno de desarrollo 37  Lo más destacable de las DevTools es que quizás la sección de rendi- miento (Performance) está más optimizada que la ofrecida por Firefox y resulta muy útil pulsar en el botón de grabar, entrar en la web a analizar y observar el gráfico resultante tras detener la grabación del rendi- miento. En este gráfico se podrá elegir un tramo de la carga y analizar en qué tarea o tareas se están consumiendo más recursos con el fin de optimizar la web. 1.4.3. Introducción al análisis SEO y optimización Este apartado pretende ser un sencillo índice de algunas herramientas que pueden resultar útiles a la hora de construir webs para optimi- zarlas de cara a los buscadores. Es una simple introducción, ya que el análisis SEO requiere ser estudiado con profundidad y no es el objetivo de este módulo. Entendemos por SEO todo lo que esté relacionado con mejorar el posi- cionamiento en los buscadores (Search Engine Optimization). Este po- sicionamiento está basado en complejos algoritmos de pagerank gené- ricos y otros poco conocidos de Google como son Panda, Penguin o Hummingbird. Dichos algoritmos penalizan o premian diferentes páginas web según su contenido, lo que provoca que estén mejor o peor posicio- nadas. Se podría escribir un libro dedicado a hablar de estos algoritmos, el pagerank y el SEO, pero en líneas generales, es muy importante tener en cuenta, a la hora de crear páginas web, al menos las siguientes consideraciones, recomendadas por el propio Google: 38 HTML y CSS A. Crea títulos de página únicos y precisos La etiqueta indica a los usuarios y a los motores de búsqueda el tema de una página específica. Esta etiqueta debe colocarse en el elemento de un documento HTML. Cada página de un sitio web debería tener un título único. B. Crea y muestra títulos y fragmentos eficaces en los resultados de búsqueda Si un documento aparece en una página de resultados de búsqueda es posible que el contenido de la etiqueta del título se muestre en la prime- ra línea del resultado pertinente. C. Describe con precisión el contenido de la página Elige un título que resulte natural y comunique de forma eficaz el tema del contenido de la página. D. Utiliza la metaetiqueta «description» La metaetiqueta de descripción de una página ofrece a Google y otros motores de búsqueda un resumen del contenido de la página. El título de una página puede estar formado por unas cuantas palabras o una frase, mientras que una metaetiqueta de descripción puede contener una o dos frases, o incluso un párrafo breve. En Google Search Console se puede encontrar el práctico informe «Mejoras» de HTML, que indica qué metaeti- quetas de descripción no se ajustan a los criterios de longitud o se repiten demasiadas veces (también ofrece la misma información de las etiquetas ). Al igual que la etiqueta , la metaetiqueta de descripción debe colocarse dentro del elemento de un documento HTML. E. Resume de forma precisa el contenido de la página Describe e informa a los usuarios del contenido de tu sitio web de un modo que capte su interés si la metaetiqueta de descripción aparece como fragmento en un resultado de búsqueda. Si bien no hay requisitos de longitud concretos para el texto de una metaetiqueta de descripción, es recomendable comprobar que tenga la longitud adecuada para mostrarse por completo en la búsqueda (ten en cuenta que el tamaño de los fragmentos varía en función de cómo y dónde se realice la búsqueda). También conviene asegurarse de que contenga toda la información necesaria para que los usuarios determinen si la página es útil y relevante. F. Utiliza etiquetas de encabezado para destacar el texto importante como si fuera un esquema Entorno de desarrollo 39  Dado que el tamaño del texto contenido en etiquetas de encabezado + suele ser mayor que el texto normal de una página, estas etiquetas dan una pista visual a los usuarios: les indican que ese texto es importante y pueden ayudarles a comprender qué tipo de contenido hay debajo del encabezado. Al utilizar varios tamaños de encabezado en orden, se Saber más crea una estructura jerárquica de contenido, lo que permite a los usua- Este contenido rios navegar por un documento con mayor facilidad. está extraído de las recomendaciones G. Crea una página de navegación sencilla para los usuarios oficiales de Google y es solo un resumen Una página de navegación es una página sencilla de un sitio web que de todas ellas, las muestra la estructura del sitio web y que normalmente consiste en una cuales se pueden lista jerárquica de las páginas que se incluyen en este. Es posible que los consultar en la visitantes consulten esta página si no pueden encontrar algunas páginas dirección web que del sitio web. Aunque los motores de búsqueda también la visitan, lo se encuentra en el que les permite rastrear eficazmente las páginas de un sitio web, esta anexo de enlaces al página suele estar dirigida a los visitantes. final del módulo. H. Las URL sencillas transmiten información sobre el contenido y se muestran en los resultados de búsqueda Al crear categorías y nombres de archivo descriptivos para los documen- tos de tu sitio web, no solo organizas mejor el sitio web, sino que esto te permite generar URL más sencillas para los que quieran enlazar a tus páginas. Es posible que las URL extremadamente largas y crípticas que contengan pocas palabras reconocibles intimiden a los visitantes. I. Comprueba que el texto de los enlaces sea adecuado El texto de un enlace es su parte visible y proporciona a los usuarios y a Google información sobre la página enlazada. Los enlaces de una pá- gina pueden ser internos (dirigen a otras páginas del mismo sitio web) o externos (dirigen al contenido de otros sitios web). En ambos casos, cuanto mejor sea el texto del enlace, más fácilmente podrán los usua- rios navegar por el sitio web y más fácil le resultará a Google saber de qué trata la página enlazada. J. Utiliza el atributo «alt» en tus imágenes Proporciona a las imágenes un nombre de archivo descriptivo y una descripción mediante el atributo «alt». Este atributo permite especificar texto alternativo para que se muestre si la imagen no se renderiza por algún motivo. Más allá de estas recomendaciones, existen páginas web que ayudan a analizar y optimizar nuestras páginas. Entre ellas, se pueden destacar las siguientes: 40 HTML y CSS UpCity SEO Card Se trata de una página web (enlace disponible en el anexo al final del módulo) en la que se pueden introducir nuestros datos (para crear una cuenta requerida) y la página web a analizar, tras lo que se obtendrá la SEO Report Card, un informe útil del estado general de dos aspectos importantes, el Ranking de nuestra web, donde además podemos intro- ducir otra web de la competencia para comparar ambas páginas, y el estado del Link Building, entre otro tipo de información útil. El Link Building es una técnica SEO que consiste en conseguir que otras páginas web apunten a nuestro sitio y que nuestro sitio apunte tanto a ellas como a otras. Esto genera una red de enlaces que provoca que el conjunto mejore en sus posiciones. El hecho de conseguir que páginas web importantes (con buenas posiciones en el pagerank) apunten a al- gún contenido de nuestra web puede hacer escalar notablemente el pa- gerank de nuestro sitio. Las técnicas más habituales relacionadas con el Link Building pasan por crear enlaces a nuestra web en comentarios o artículos en blogs externos y viceversa, las firmas de los perfiles en foros e incluso la compra de enlaces. Hay que tener especial cuidado en el uso de estas técnicas ya que nuestro sitio podría ser penalizado si los enla- ces no son naturales ni aportan valor. Entorno de desarrollo 41  SEO tool de found.co Found.co es una empresa con varios premios en materia de SEO y bue- nas prácticas en diseño y desarrollo web que ofrece una herramienta de análisis gratuita a través de la cual se puede obtener un resumen com- plementario al ofrecido por el visto en el apartado anterior. En su web, en el enlace que encontrarás en el anexo, al final del módulo, se puede introducir el nombre de nuestro dominio, en el que debe existir, lógicamente, una web funcional, y nos realizará un análisis de enlaces, mapa del sitio, tiempo de carga, imágenes, palabras clave, encabezados y otros metadatos como descripciones y etiquetas. Dicho informe se podrá descargar en formato PDF para consultarlo las veces que se necesite. Test de velocidad de nuestra web Otra herramienta interesante que se puede utilizar es un test de veloci- dad de nuestro sitio web a través de Google Page Speed (encontrarás el enlace en el anexo situado al final del módulo). Tras introducir la URL del sitio, se muestra un informe con la puntuación de velocidad otorgada, los problemas que pueden estar provocando que el resultado no sea el óptimo y, sobre todo, una serie de recomendaciones para solucionarlos pulsando en «Show how to fix». Tanto la información ofrecida como los resultados están en inglés. 42 HTML y CSS Herramientas para webmasters de Google La última herramienta que se verá en este apartado introductorio al SEO es, en realidad, un conjunto de ellas aglutinadas bajo el paraguas de «Herramientas para webmasters de Google», encontrarás su dirección en el anexo de enlaces situado al final del módulo. Se trata de una suite obligatoria para cualquier webmaster. Para empezar a utilizarla es obli- gatorio disponer de una cuenta de Google (@gmail.com) y verificar la propiedad del dominio para el que se van a usar dichas herramientas. Es, junto con Google Analytics, algo en lo que se recomienda profundi- zar una vez se hayan adquirido los conocimientos básicos de desarrollo web. En la misma web se ofrece una amplia variedad de artículos de ayuda para desarrolladores bastante interesantes. Entorno de desarrollo 43  1.5. IDEs completos + Con los contenidos vistos hasta ahora ya se tienen instaladas las herra- mientas para comenzar a desarrollar nuestras primeras páginas web de forma bastante cómoda, con un editor de código que ayude a estructurar Saber más el código y que irá señalando problemas de cierre de etiquetas, palabras El acrónimo WYSIWYG clave mal escritas, etc. Además, también se dispone de un cliente FTP con viene del inglés What el que se pueden subir todos nuestros archivos al servidor web. De You See Is What You hecho, muchos desarrolladores web prefieren utilizar el software Get (lo que ves es lo libre que se acaba de ver frente a software privativo como el ofrecido que obtienes), y se por Adobe. llaman así porque, además de poder Sin embargo, también se puede disponer de otras herramientas aún codificar en ellos, más completas y que todo desarrollador debe conocer ya que, al fin y se pueden ir viendo al cabo, son referentes en su ámbito. Además, estos IDEs ofrecen otras en tiempo real los facilidades: la principal es que ofrecen una vista en directo de lo que cambios que está se está programando. Es decir, con un editor de código hay que escri- provocando el nuevo bir gran parte de la página web, guardar ese archivo con la extensión código introducido..html y abrir el mismo con un navegador para ver el resultado. Después Además, este software hay que volver a cerrarlo en el navegador y abrirlo nuevamente con el suele incluir una vista editor para seguir trabajando con él. Esto es fácilmente asumible si se tipo diseñador que tiene un perfil de programador o se tiene más experiencia en el desa- funciona a la inversa, rrollo, pero para un segundo perfil, más diseñador que programador, es decir, que en ella se quizás sea más práctico contar con este tipo de editores, también pueden ir arrastrando llamados editores WYSIWYG. y alterando los elementos de la web de forma 1.5.1. BlueGriffon visual y el programa genera el código automáticamente Este entorno de desarrollo de Disruptive innovations es en su mayor parte para que refleje los software libre, aunque con opciones de compra de versiones privativas cambios realizados y de pago con mayor funcionalidad. De estas, aquí recomendamos la visualmente. Aparte versión libre (que además es gratuita) y cubre todas las necesidades en de las ventajas nuestros primeros desarrollos, o la versión básica (cuya licencia asciende también tiene sus a un pago único de 75 €), la cual ofrece ayudas y mejoras en cuanto inconvenientes ya al diseño de página web para móviles. No es recomendable la versión que, por ejemplo, EPUB, ya que excede las necesidades para los propósitos de desarrollo suele ser código de webs. No obstante, cabe destacar que con la versión libre no se menos optimizado podrá disponer de la documentación oficial ni existirá la posibilidad de y, por tanto, genera ejecutar el programa en pantalla completa, ya que ambas opciones se ficheros más grandes encuentran bloqueadas en esta versión, por lo que habrá que adquirir en tamaño. al menos la licencia básica para optar a ello. 44 HTML y CSS Para obtener la aplicación de escritorio tendremos que acceder a la web de BlueGriffon cuyo enlace encontrarás en el anexo final situado al final del módulo, donde encontraremos el apartado de descargas. Bastará con pulsar en “download” y elegir nuestro sistema operativo Para ampliar este para obtener el instalador del mismo. Al ejecutarlo tendremos que tema, puedes ver elegir el idioma y la ubicación en la que se instalará el IDE. Una vez el videotutorial instalado, se nos permitirá ejecutarlo directamente. BlueGriffon que encontrarás en el campus online. Figura 46. Pantalla de inicio de BlueGriffon. 1.5.1.1. Configuración y uso Para comprobar su utilidad será necesario que creemos un nuevo archivo bien mediante la opción “Nuevo“ del menú Archivo o utilizando el atajo de teclado Ctrl + T. Una vez abierto, veremos que en la parte inferior de la pantalla se nos permite elegir entre cuatro opciones distintas: Print Preview, que nos muestra la versión final de nuestra web. Código fuente, que nos enseña el código de la misma. Diseño, que nos permite trabajar exclusivamente centrados en el diseño de la página. Dual View, que nos enseña a la vez el código y el diseño del sitio. Mientras tengamos presente la vista de diseño, podremos ver la ruta del objeto que tenemos seleccionado aún más abajo en la ventana. Además, podremos aumentar, disminuir o, simplemente, consultar el zoom de la ventana con la que estamos trabajando. Entorno de desarrollo 45  Figura 47. Barra inferior. Sobre el panel de edición, podemos encontrar tantas pestañas como archivos estemos editando a la vez. Además, encontramos la opción de añadir uno nuevo con el botón “+” situado a la derecha. Figura 48. Barra de pestañas con botón para añadir una nueva. Si utilizamos este botón para añadir un nuevo documento, se abrirá una nueva ventana en la que podemos indicar distintas configuraciones del archivo nuevo, como el idioma, o solo copiar las del documento que tenemos abierto. Figura 49. Ventana de creación de documento. Por otra parte, si nos situamos en la vista de diseño, podremos hacer uso del menú Insertar o de las opciones que se encuentran en la parte superior de la ventana para añadir nuevos elementos a la web como tablas, imágenes o formularios. Figura 50. Opciones de inserción de elementos. También desde esta vista, encontramos nuevas opciones entre los elementos de inserción y la barra de pestañas con las que podemos acceder a distintas características del elemento seleccionado: su tipo, su ID, su clase, el tipo de fuente que utiliza o su rol. 46 HTML y CSS  Figura 51. Características del elemento. Además de los paneles por defecto, podemos utilizar algunos como el explorador DOM, donde veremos la estructura completa de nuestra página web. Figura 52. Panel de exploración del modelo de objetos del documento (DOM). ! Por último, destacamos el panel de propiedades de estilo, en el que podemos encontrar todas las opciones referentes al apartado de diseño de nuestra web: colores, fuentes, bordes, sombras… En la parte superior del mismo se nos permite elegir los elementos a los que aplicar la Recuerda configuración que elijamos con el resto de opciones. Aunque el editor da la opción, nunca es recomendable definir los estilos en el archivo.html, sino en un archivo de estilo.css aparte. Figura 53. Panel de configuración de propiedades de diseño gráfico. Entorno de desarrollo 47  1.5.2. Alternativas a BlueGriffon Si BlueGriffon no es un programa de nuestro agrado, no nos gusta la experiencia o sencillamente queremos probar otras opciones, es posi- ble encontrar alternativas de software libre, como Aptana, y de pago, como Dreamweaver. 1.5.2.1. Aptana Se trata de un entorno de desarrollo completo (IDE) de código abier- to para HTML, CSS, JavaScript, PHP, Ruby, Rails o Python. Se encuentra disponible para Mac OS, Windows y Linux en versiones de 32 y 64 bits. Puede ser descargado desde el enlace web que encontrarás en el anexo situado al final del módulo. 1.5.2.2. Dreamweaver Adobe Dreamweaver, pese a tener un coste de licencia bastante elevado, se ha convertido en el editor WYSIWYG más extendido del mercado y numerosas empresas lo utilizan como herramienta de trabajo. Sin em- bargo, es una herramienta que lleva muchas ediciones lanzadas y fue también una de las primeras en aunar un editor de código, un visor de 48 HTML y CSS diseño visual, un servidor FTP incorporado y soporte para prácticamente todos los lenguajes de programación web existentes. Ya era un referente incluso antes de que Adobe comprase la suite completa a Macromedia, empresa desarrolladora de las primeras versiones de este editor. Actualmente existen dos versiones muy utilizadas, la versión CS6 y la CC. Aunque CS6 es más continuista con la línea anterior de Dreamweaver, ofreciendo un periodo de prueba gratuito de 30 días y dando la posibili- dad de que una vez comprado el software, este fuese licenciado de por vida para el comprador, Adobe está apostando muy fuerte por un nuevo modelo de financiación mediante suscripción mensual llamado Adobe Creative Cloud (CC). En la actualidad no ofrece sus suites anteriores, sino que prácticamente fuerza al usuario a mudarse a la versión por suscripción. En cualquier caso, se puede optar a varios descuentos en determinadas condiciones y utilizar la versión de prueba (de tan solo 7 días con CC) para el objetivo de formación. 1.5.2.3. Descarga e instalación de Dreamweaver Para descargar DreamWeaver hay que entrar en la web de Adobe en el enlace que se encuentra en el anexo final del módulo, y hacer clic en «Empezar con la versión de prueba gratuita». Esto descargará un insta- lador que, al ejecutarlo, ofrecerá usar una id de Adobe Creative Cloud o la posibilidad de crear una gratuitamente. Es un proceso muy sencillo en el que se puede decidir utilizar nuestra cuenta de Google o de Facebook, o introducir un correo electrónico y una clave bastante segura, pues si no el asistente no permite continuar con el proceso de instalación. Entorno de desarrollo 49  + En el caso de que exista una versión más nueva de alguno de los productos de Creative Cloud, habrá que instalarla para poder continuar. Saber más Llamamos algoritmo a un conjunto de operaciones secuenciales y cálculos matemáticos que operan de la siguiente manera: ante una serie de datos de entrada, buscan solución o respuesta a un problema o cuestión planteada, y ofrecen la solución como Una vez se accede con el id y la contraseña recién creadas, se pulsa en salida. En el lenguaje «Apps» y a continuación se busca en la lista de aplicaciones «Drea- informático al mweaver CC», clicando en el botón «Probar» situado a su derecha. Co- algoritmo puede menzará entonces la descarga del programa. llamársele función o método. 50 HTML y CSS 2. HTML VIDEO: Para ampliar Tal y como se vio en la Figura 1, HTML5 está conformada por tres piezas este tema, puedes ver fundamentales que, aunque independientes entre sí y desarrolladas a el videotutorial HTML diferentes velocidades, en conjunto se han conformado como este nuevo que encontrarás en el estándar, el cual ha supuesto un gran salto de calidad en cuanto a tec- campus online. nologías web se refiere, pudiéndose incluso desarrollar videojuegos bajo el paraguas de HTML5. Por una parte está HTML en sí, que se encarga de dotar de estructura lógica y semántica a la página web; CSS3, encargado del estilo y la estética, mediante reglas, identificadores, clases etc. y, por último, JavaScript dota de toda la funcionalidad al tra- + tarse de un lenguaje interpretado y orientado a objetos, lo que permite utilizar funcionalidades y la complejidad y potencia de dicho paradigma. Saber más En realidad, Mosaic fue el segundo 2.1. Introducción navegador, precedido por violaWWW. Sin HTML son las siglas de Hypertext Markup Language (lenguaje de marcado embargo, sí fue el de hipertexto). Se trata de un lenguaje porque contiene una serie de primero en estar símbolos únicos y reservados (llamados etiquetas o marcas) además disponible para varios de unas reglas para la creación, combinación y estructuración lógica sistemas operativos de las mismas, como sucede en cualquier lenguaje. Se refiere al (Unix, Windows hipertexto porque está fundamentalmente basado en texto que puede y Macintosh) y enlazar, a través de hipervínculos, a otros textos, no limitándose al en adquirir una contenido textual. distribución suficiente en la pequeña Para leer documentos de hipertexto se necesitan los conocidos nave- comunidad de gadores de internet, quienes contienen los intérpretes necesarios para usuarios en los inicios transformar tanto el código HTML como el resto en una estructura visual, de la World Wide en principio, sin variaciones entre un navegador y otro diferente. Lo más Web. Mosaic dejó de interesante del hipertexto es que permite crear una red de referencias tener continuidad tanto de textos como multimedia que enriquecen cualquier documen- y su heredero es to, ampliando la información contenida en el mismo, referenciándola o Netscape Navigator, contrastándola a través de enlaces (o vínculos). creado por Netscape Communications, Aunque se basó en conceptos anteriores a esta fecha, se puede decir empresa fundada que el primer germen en funcionamiento de HTML se dio en 1967 con el por los creadores de sistema HES (Hypertext Editing System) de Andy Van Dam. Otro hito im- Mosaic. portante se produjo en 1993 con el lanzamiento de Mosaic*, el primer navegador gráfico para el protocolo de navegación web (www) en 1993. HTML 51  2.2. Estructura general + Los elementos básicos de HTML son las etiquetas, que constan de una Saber más palabra clave encerrada entre los símbolos < y >. La mayoría de etiquetas HTML no es en HTML van pareadas, es decir, necesitan tener una etiqueta de apertura case-sensitive, es y una de cierre, la cual es igual que la de apertura, con la salvedad de que decir, no es sensible incluye una barra diagonal (/) delante de la palabra clave. Por ejemplo, a mayúsculas y es la etiqueta de apertura de la sección dedicada a la cabecera y minúsculas, por es la de cierre. Se dice que la mayoría son pareadas porque exis- lo que la etiqueta ten alguna de ellas que no lo son, como por ejemplo la etiqueta , es la que no necesita una etiqueta de cierre tipo. En este tipo de misma que casos, y aunque a partir de HTML5 ya no sea obligatorio, es recomenda- o incluso. ble anteponer la barra en el símbolo de cierre ya que esto asegurará la Sin embargo, y por compatibilidad con versiones HTML anteriores y navegadores. Ejemplo: buenas prácticas, se. Más adelante se verán en detalle estas recomienda utilizar etiquetas; por ahora, solo se necesita saber que las etiquetas no parea- minúsculas en todas das deberán tener por recomendación una barra en el cierre de la misma. las etiquetas de marcado. A continuación se definirán las primeras etiquetas importantes y se ex- plicarán en detalle las etiquetas introducidas en el párrafo anterior. A partir de este punto, es recomendable crear un nuevo documento.html en el editor de código o IDE favorito o incluso en un archivo de texto plano (bloc de notas) y comenzar a escribir la estructura que vamos a ir construyendo, ya que esto permitirá afianzar mejor las etiquetas aquí explicadas. En este caso se utilizará Dreamweaver para copiar los listados de código. Es una etiqueta especial y única que sirve para declarar el tipo de docu- mento que se está escribiendo. Fíjate en el símbolo de exclamación, que solo forma parte de esta etiqueta y de ninguna otra y que además no es pareada ni tiene símbolo de cierre. El doctype se ha simplificado muchísimo en HTML5, por lo que si al inicio de una web encontramos esta etiqueta en este formato