Logro conseguido: Hypertexter
Felicidades: ¡Ha realizado un gran sitio web con HTML! Lo que comenzó como una o dos frases escritas en el bloc de notas se convirtió en un sitio web mcon muchas secciones y páginas. En el proceso ha aprendido todo tipo de cosas:
- Crear páginas HTML
- Estructurar contenido con encabezados y secciones
- Enlazar a otras páginas web
- Dar formato al texto
- Citar texto con un bloque de citas
- Mostrar datos utilizando tablas
- Ocultar contenido detrás de un sumario sobre el que poder hacer clic
- Crear contenido secundario utilizando apartes
- Poner en marcha un servidor local de pruebas
- Insertar imágenes
- Insertar vídeos
- Utilizar componentes creados por terceros
- Crear un sitio web disponible para todo el mundo en internet
- …y muchos otros temas.
Espero que se sienta facultado para crear sus propios sitios web personalizados. Pero incluso si no crea sitios web desde cero, la familiaridad con HTML puede ser útil. Muchos sistemas de gestión de contenido le permiten poner HTML personalizado en una página. Incluso saber cómo usar la etiqueta <a>
para crear enlaces tiene su propio pequeño superpoder.
Bueno, ¿y ahora?
Capítulos extra
Hemos completado el contenido principal que quería tratar en HTML para personas. Dicho esto, tengo algunos temas que me gustaría tratar como un apéndice al libro principal.
- Personalizando Simple.css. Incluso sin necesidad de aprender mucho sobre CSS, puede cambiar la apariencia de su sitio web modificando algunas variables.
- Lo básico de CSS. Esta sección le enseña cómo realizar páginas web con una gran apariencia y diseño desde cero utilizando CSS.
- Reutilizar HTML con PHP. Echaremos un vistazo sobre cómo reutilizar partes de HTML, como por ejemplo el menú de navegación, utilizando lenguaje PHP. Esta es una introducción muy ligera sobre programación a la hora de aplicarlo en sitios web dinámicos.
Recursos de este libro
He ido dejando aquí y allá durante el libro una buena colección de enlaces interesantes de demostraciones y de documentación interesantes. Como utilidad, aquí hago una lista con los principales.
- La página de demostración de Blake. Esta es la versión del autor Blake del sitio web que este libro web te ha ido enseñando cómo hacerla. Si has seguido todas las lecciones y has realizado tu propia página web, el autor estará encantado de que se lo hagas saber.
- La página de demostración de Victorhck. Siguiendo los pasos del autor, yo también he creado mi página de demostración en Neocities. Si has seguido todas las lecciones que he traducido y has realizado tu propia página web, también a mí me gustará saberlo.
- Código fuente de la página de la página de demostración de Blake. Este es el repositorio del código del sitio web de demostración. Aquí, puedes navegar por el código y descargarlo si lo deseas.
- Código fuente de la página de la página de demostración de Victorhck. Este es el repositorio del código del sitio web de demostración que he realizado yo. Aquí, puedes navegar por el código y descargarlo si lo deseas.
- La versión con PHP del sitio web de Blake. Esta es otra versión del código fuente donde el autor ha convertido el sitio utilizando PHP tal como se ha descrito en el capítulo extra, Reutilizar HTML con PHP.
- Demostración de planetas del sistema solar. Esta web es una demostración de la página web que hemos realizado en el capítulo extra, Lo básico de CSS.
- El código fuente de la página planetas del sistema solar. Este es el repositorio del código de la página.
Recursos y documentación útiles
- MDN. Si necesita detalles sobre una etiqueta HTML en particular, alguna propiedad CSS u otra información técnica específica, este es el mejor lugar para obtenerla. MDN es más o menos el manual oficial del usuario para la realización de un sitio web.
- Neocities y Neocities FAQs. He escogido utilizar este servicio de alojamiento web en el libro porque es gratuito y tiene un espíritu similar (creación de sitios web centrada en las personas). Las preguntas frecuentes (FAQ) tienen mucha buena información e información sobre el servicio si desea más información al respecto.
- Tutoriales de Neocities: Una lista de tutoriales y recursos publicados por Neocities. Eche un vistazo a su gran curso de HTML.
- Simple.css. Este es el entorno CSS que hemos utilizamos en todo el libro. El sitio tiene documentación sobre cómo usar Simple.CSS y una demostración de varios elementos HTML.
- Tipografía práctica de Butterick. Un excelente libro sobre tipografía y diseño. Si tiene poco tiempo, eche un vistazo a su Tipografía en diez minutos.
- EntityCode. Una referencia de entidades HTML que puede utilizar para reproducir caracteres especiales y símbolos.
- Verificador de contraste de color. Una buena herramienta para asegurarse de que su texto y colores de fondo tengan suficiente contraste para ser legible.
Lugares donde hospedar una página web estática
Además de Neocities, existen otras buenas alternativas donde hospedar sus páginas web HTML.
- Yay.boo: Un nombre gracioso, publicación de sitios web realmente fácil. Arrastre y suelte una carpeta, elija un nombre y su sitio web está en línea. El nivel gratuito pone un enlace yay.boo en la esquina de su sitio.
- Glitch: Esta es una buena opción si quieres realizar toda la tarea de programación directamente desde el navegador. Construye primero tu página y después publícala.
- Netlify: Más sofisticado, pero tiene una opción de arrastrar y soltar una carpeta para publicar y le da más funcionalidades centradas en el desarrollo.
Editores de código alternativos
Utilizo Visual Studio Code como mi editor de texto de código y lo he utilizado a lo largo de este libro. Y por una buena razón, es gratuito y masivamente popular. Pero no es el único editor de código que existe.
Utilizo Mac, así que no estoy muy familiarizado con los editores de texto para otros sistemas operativos, pero existen algunos a los que debería echar un vistazo y evaluarlos por usted mismo. Algunos son gratuitos, otros son de pago y otros tienen ambas opciones.
- Sublime Text: Multiplataforma con un periodo de prueba sin límite (que de vez en cuando le recordará que debe pagar). Sublime Text fue el estándar en el desarrollo web hasta que VS Code le arrebató el trono. Sigue siendo muy bueno. Muy rápido y ligero. El sistema de complementos y extensiones es más difícil de utilizar, pero puede que no necesite ninguna para realizar tareas básicas de HTML/CSS, ya que tiene un buen soporte para ambos, tal como viene de serie.
- WebStorm: Uno de muchos IDEs (iniciales de integrated development environments o entornos de desarrollo integrado) de pago, de JetBrains. Es multiplataforma y tiene un buen montón de funcionalidades. Es de pago, pero tiene un periodo de prueba de 30 días de manera gratuita. A la gente le encanta. No lo he utilizado mucho, así que no puedo opinar mucho al respecto, salvo que tiene muy buena reputación.
- Zed: Multiplataforma (Mac and Linux, y pronto también para Windows) es gratuito. Parece una mezcla entre VS Code y Sublime Text y tiene mucha fama a la hora de escribir este libro.
- Nova: Solo disponible para Mac y de pago (pero con un periodo de prueba gratuito). Es una secuela de Coda, un gran editor de desarrollo web para Mac del mismo desarrollador (Panic). Las aplicaciones de Panic son siempre fantásticas, así que dale a Nova un vistazo si utiliza Mac.
- NotePad++: Un editor gratuito y de código abierto para Windows. No puedo decir mucho sobre él más que lleva mucho tiempo en el mercado.
- BBEdit: Uno de los programas de Mac más antiguos que todavía están en activo. BBedit es de pago, pero ofrece un modo de prueba y un modo gratis para siempre que lo limita a un subconjunto de características en particular.
- Glitch: Sí, es el mismo que el publicado en la lista anterior de host para webs. Glitch es una buena opción si quiere trabajar "en la nube". Ofrece una interfaz basada en la web para realizar sitios web, incluyendo crear archivos y editar código. Todo se realiza en el navegador, lo que es una buena opción si no quiere estar descargando e instalando cosas en su equipo.
- Y muchos, muchos más. Hay demasiados para enumerar aquí, pero si ninguno de estos se adapta a sus gustos, consulte su motor de búsqueda favorito y prepárese para el diluvio de resultados.
Permítame ahora que como traductor de este libro web tome la palabra. Yo (Victorhck) soy un defensor del software libre, por lo que pongo más énfasis en que el software que utilizo esté publicado bajo una licencia libre, que me de libertad y no tanto en el precio que tiene el software que utilizo.
Soy usuario de un sistema GNU/Linux y nunca he utilizado Mac. A continuación le voy a dar mis opciones de software libre respecto a editores de texto. Las dos primeras son las que utilizo de manera diaria, por ejemplo para escribir y traducir este libro.
- Kate: Un editor de texto muy sencillo, pero potente creado por la comunidad de KDE. Tiene un montón de funcionalidades y opciones. Es multiplataforma, software libre y además gratuito. Es el editor que he utilizado a la hora de crear este libro web junto con el siguiente editor.
- Vim: Un editor de texto multiplataforma, software libre y gratuito, que lleva ya muchos años en el mundo del software. Muy utilizado por las personas que desarrollan software. Tiene una curva de aprendizaje pronunciada, pero una vez que se aprende lo básico es muy potente. Puede aprender Vim de la manera más inteligente con esta guía de inicialización.
- Emacs: Junto con Vim otro de los editores clásicos con grandes amantes y detractores, pero sin duda una opción muy potente, aunque también con una curva de aprendizaje. Software libre, multiplataforma y gratuito.