Cómo comenzar el diseño web para los creativos, los que aprenden mirando y todos los demás

1. Qué trata de esta clase esta clase: Se ha dicho que la codificación es la nueva alfabetización. Si bien puede que no reemplace a todas las demás formas de alfabetización en cualquier momento pronto, es un maravilloso conjunto de habilidades de tener. Ya sea que busques actualizar tu conjunto de habilidades actual, tienes una idea que quieres dar vida, o simplemente estás interesado en aprender al respecto. Esta clase te va a dar lo básico que necesitas. Bienvenido al Diseño web para creativos, estudiantes visuales, y todos los demás. Soy Marc Nischan, y enseño objetos de texto para crear personas en el Colegio de Estudios Creativos de Detroit y aquí en cuota de habilidad. Cuando por primera vez me interesé por la web, fue hace más de 20 años. aquel entonces era cocinero de medio tiempo y rockero de tiempo completo y quería hacer un sitio web para mi banda. El afán de conseguir esas habilidades se ha convertido en una carrera y durante los últimos 20 años, me he ganado la vida haciendo diseño gráfico, construyendo sitios web, y diseñando para la web y el móvil. No siempre fue fácil para mí captar los conceptos sin embargo. Como aprendiz visual, tuve que encontrar mis propias formas de hacer que esa información tenga sentido. Pero ha sido una carrera gratificante. Disfruté el trabajo. Me ha dado mucha flexibilidad, y me gusta compartir lo que he aprendido con otros con la esperanza que pueda ayudarles a lograr también algunas de sus metas. En esta clase lo que vamos a aprender, son los cinco elementos de una página web básica. Vas a aprender diferentes herramientas y técnicas para ayudarte a empezar y escribir tu código, hablaremos de cómo piensa tu navegador sobre el código que estás escribiendo. Vamos a construir un layout con imágenes y enlaces y hablar de cómo podemos agregar estilo a eso para cambiar la apariencia de la misma. Eso va a ser divertido y al final habrás construido tu propia página web. Empecemos. 2. HERRAMIENTAS: Oigan a todos, bienvenidos al diseño web básico para los aprendices visuales creativos y todos los demás. Me alegra que decidieras tomar esta clase. Te voy a contar un poco sobre Internet. Estamos usando internet ahora, pero probablemente no sepas que al principio, en 1977, se llamaba Arpanet y era una red muy pequeña de computadoras que se creó para resolver el problema de cómo compartir datos a grandes distancias. Ha evolucionado bastante desde entonces. Originalmente era solo texto y los hipervínculos eran el único elemento interactivo real para estos sitios web. Se ha convertido en Internet que hoy conocemos, pero en esencia, sigue siendo muy similar. Hay datos almacenados en una computadora en algún lugar, un servidor, que está esencialmente en disco duro gigantesco, utilizado para servir datos. Después es transmitido a través de un montón de cables a tu computadora e interpretado por un cliente, que es tu navegador. Tu navegador lee los datos y también la información necesaria para organizar esos datos en una página. Esa información es lenguaje de marcado y está organizando el hipertexto, y ahí es donde obtiene su nombre, Lenguaje de marcado de hipertexto, y eso es HTML. Eso es con lo que estaremos trabajando para construir hoy nuestra página web básica. Para esta clase, no necesitarás un servidor. No obstante, si sí quieres obtener un nombre de dominio y hosting, te mostraré cómo publicar tu sitio web. Al final de esta clase, serás desarrollador web publicado. De lo contrario, aún puedes trabajar localmente en tu computadora y hacer tu proyecto bien en tu propio navegador. No necesitamos un servidor ni nada por el estilo. Vamos a estar trabajando en archivos de tu computadora. Esto es lo que se conoce como un entorno de desarrollo local. Para ello, vas a querer conseguirte algún software, un IDE, que es un Entorno de Desarrollo Integrado. Básicamente, esa es solo una palabra elegante para un editor de texto. Ahora de vuelta en los viejos, o viejos tiempos, tendría que escribir mis páginas web en Word y guardarlas como HTML de punto, abrirlas en un navegador y ver si se veían como pensaba que iban a parecer. Hoy es mucho más sofisticado. Pero hay muchas herramientas que te van a ser mucho más útiles que un doc de Word. Hay dos IDE de los que quiero que revisen. El primero es Adam.io, que es producido por GitHub. El segundo es brackets dot IO, producido por Adobe. Hay mucho apoyo para ellos. Un montón de plug-ins de terceros que son gratuitos que las personas manejen cosas como el resaltado de sintaxis en márgenes automáticos y casi cualquier cosa que puedas recoger. Ve a descargar uno de esos IDE. Voy a estar usando a Adam para nuestras demos. Cualquiera de los dos va a funcionar bien. Para empezar, necesitamos encontrar una base hogareña donde se vaya a vivir nuestro proyecto. Quizás deberías crear un archivo en tu escritorio llamarlo sitio web, llámalo como quieras y todos nuestros archivos van a vivir dentro de esta carpeta. Empezaremos por crear lo que es esencialmente el centro del sistema solar para tu sitio web, la página de índice. Por defecto, los navegadores buscan una página llamada Index cuando llegan a una carpeta. Adelante, abre tu IDE y crea index.html y guárdelo en tu carpeta que has creado para albergar este sitio web. Una vez que hagas eso, habrás dado el primer paso para crear nuestra página web. 3. Anatomía de una página web: Tenemos nuestro IDE, tenemos nuestra página de índice. Echémosle un vistazo en un navegador y veamos cómo se ve cuando el navegador lo renderiza. No parece nada. Ahí no hay nada. Veamos qué pasa cuando pegamos unas palabras ahí dentro y todas están corriendo juntas. Necesitamos algún lenguaje de marcado para estructurar estas palabras. La esencia del diseño de páginas web es que estás poniendo cajas dentro de cajas, dentro de cajas, y la etiqueta HTML no es más que una caja para sostener tus palabras, imágenes o videos. Hay decenas y decenas de etiquetas HTML, y todas tienen comportamientos específicos que tu navegador entiende. Echemos un vistazo al código detrás de la página de inicio de Wikipedia. Se puede ver que todo este contenido está contenido en varias etiquetas HTML. Algunas de esas etiquetas HTML están contenidas por aún más etiquetas HTML. La página web más primordial consiste en cinco de estos elementos. El DOCTYPE, la etiqueta HTML, la etiqueta de cabeza, la etiqueta de cuerpo, y la etiqueta de título. Vamos a empezar con esta colección de elementos HTML para que nos hagan rodar en la construcción de nuestra página web básica. Acude a tu IDE y en nuestra página index.html, vamos a escribir la etiqueta DOCTYPE. El DOCTYPE es la etiqueta que le dice a tu navegador qué conjunto de instrucciones usar cuando está renderizado tu página web. Estamos trabajando en HTML5 y tiene un DOCTYPE muy sencillo. Pero déjame mostrarte cómo es uno de los DOCTIPES para HTML4. Cuando escribieron HTML5, simplificaron enormemente la sintaxis y todo el mundo fue mucho más feliz como resultado. El DOCTYPE siempre comienza con una estallido. Ahora puedes reconocer a este personaje como el signo de exclamación, pero a menudo se lo conoce como un bang en la programación, por lo que son las características: corchetes angulares, el bang, la palabra DOCTYPE en todas las letras mayúsculas, y luego HTML. Y eso es todo. A continuación, tenemos la etiqueta HTML. Esta es la caja más grande. Todo va en esta caja y esta etiqueta tiene un abridor y un más cerca. Es exactamente lo mismo excepto la barra inclinada para la etiqueta de cierre que le permite a su navegador saber que esta etiqueta ha terminado y que la caja está completa. Dentro de la etiqueta HTML están la cabeza y el cuerpo. Ahora bien, me gusta pensar en estos como nuestras cabezas y nuestros cuerpos. El tag de la cabeza es donde va más de la meta-información. Esta es información que no necesariamente verás y me gustaría pensarla como los pensamientos de la página web. El cabezal y la carrocería juntos para formar el cuadro completo. Después está nuestra quinta etiqueta primordial, la etiqueta del título. Dentro de la etiqueta de título están las palabras que quieres que aparezcan arriba en la pequeña pestaña de tu navegador ahí. Encendido tu IDE. Vamos a escribir algún código en la próxima lección y echar un vistazo a nuestra página web primordial. Nos vemos ahí. 4. Let's a programar la codificación!: Esto es todo. El momento que todos han estado esperando. ¿ Estás listo para escribir algún código? Abre tu IDE y tira hacia arriba de la página de índice. Ahora voy a caminar por él, siéntete libre de teclear conmigo si quieres, pero dejaré una oportunidad después de que haya terminado de escribir para pausar y ponerme al día. Voy a escribir las cinco etiquetas y hablar un poco de ellas a medida que voy y la vamos a echar un vistazo en el navegador cuando hayamos terminado y ver nuestra primera página web primordial. Esta va a ser la base que construimos para que llegues al proyecto terminado para esta clase. Aquí vamos. Vamos a empezar con el tipo doc. Quiz pop. ¿Qué sigue? El tag HTML, la caja más grande. Nosotros HTML, y cerramos la etiqueta, y las dividimos para que podamos poner las cosas dentro de esta caja. Ahora esto va a introducir un concepto que espero que sigas, sangría. Es una gran manera de ver visualmente dónde están tus cajas. Porque después de que tienes decenas y decenas de ellas en la pantalla, puede llegar a ser realmente difícil averiguar dónde estás. HTML, lo dividimos, la siguiente etiqueta es la cabeza. Escribes eso ahí dentro y noto que lo he sangrado para indicar que está dentro de su contenedor padre, la etiqueta HTML. Ahora va a tener un hermano, la etiqueta del cuerpo. También está sangrada. Ahí vamos, y ahora nuestra etiqueta final, la etiqueta del título. El tag del título vive dentro de la cabeza. Una vez más, aquí sangro la etiqueta de título, meto el título de mi página ahí dentro, lo cierro, y presiono O, tenemos una página web primordial. Si abro esto en el navegador ahora mismo, no vas a ver nada excepto el título porque todavía no hay contenido en el cuerpo. Escribamos las palabras Hola Mundo dentro del cuerpo solo para que haya algo que ver. Este es un primer pase típico en un paso de proyecto a tomar. Haces lo que se llama el Hello World solo para demostrar que puedes poner la cosa en marcha. Adelante y pausar el video ahora mismo. Si no has estado escribiendo, consigue que tu código se vea como mi código, y lo echaremos un vistazo. Aquí has creado tu primera página Hello World, bienvenido al mundo del desarrollo web, y vamos a construir sobre esto para juntar el resto de nuestro proyecto. Enhorabuena. 5. "El DOM": De acuerdo, hasta ahora nos hemos estado moviendo a un ritmo bastante alcanzable. Voy a retomar un poco el ritmo mientras empezamos a trabajar en nuestro proyecto final. Esto es lo que va a ser nuestro proyecto final. Es una página web bastante sencilla. Tiene un par de enlaces y un par de imágenes. Ahora recuerda te dije que construir una página web se trata de poner cajas dentro de cajas. Tu único conjunto de cajas codificadas es un modelo, de lo que vas a ver en el navegador cuando eches un vistazo a tu página web. Ese modelo tiene nombre. Para el navegador, es el Document Object Model. Ahora recuerda eso, se acorta al DOM. Probablemente va a subir un poco más tarde. Lo que vamos a hacer ahora es construir el modelo para nuestro proyecto. Abre tu editor de texto y escribe conmigo. Si necesitas pausar el video y ponerte al día, vamos a poner la estructura básica para nuestro proyecto aquí mismo. Aquí vamos. He adjuntado un par de archivos de proyecto. Justo debajo del video, verás cuatro pestañas. Acude a tu proyecto y da click en FinalProject.txt. Agarra la primera pieza de prosa que ves ahí, cópiala, y luego la vamos a pegar en nuestro archivo de texto. Sobrescribamos nuestro hola mundo y empecemos a personalizar este layout. Podemos llamar a esto el sampler Whitman y estos son básicamente dos poemas de Walt Whitman que estamos usando como solo algún contenido para construir nuestra página web alrededor. Empecemos a construir algunas cajas aquí. Tenemos el cuerpo como la segunda caja más grande dentro este HTML y vamos a seguir subdividiendo eso hasta que consigamos nuestro contenido donde lo queremos. Empecemos con una etiqueta div. Esta es una nueva etiqueta, tal vez para ti, no lo sé. Es en este tutorial. Un div es sólo otra caja. Todos estos diferentes nombres de etiquetas son solo otras cajas, pero algunas de ellas tienen comportamientos específicos que podemos aprovechar. El div es solo una gran caja grande y luego vamos a poner una etiqueta de párrafo alrededor de nuestro texto. Todo está limpiamente sangrado. Aquí se puede ver el flujo de las cajas. Conforme entramos en una caja nueva, vamos en nuestra sangría y conforme salimos de la caja, conforme salimos. Te ayuda a ver dónde estás mientras estás codificando. Puedes estar pensando en cómo podría verse eso cuando realmente lo estás viendo en el navegador. Envolvamos una etiqueta H1 alrededor de nuestro título aquí. Eso es solo el encabezado uno y tu navegador sabe lo que significa esa etiqueta H1. Significa que tiene una fuente de cierto tamaño, tiene cierta cantidad de margen a su alrededor y se comporta de cierta manera. Específicamente, un encabezado intentará ir y llenar el espacio todo el camino a través de la caja en la que está mientras que un párrafo intentará envolver dentro de la caja en la que está. Veamos qué tenemos hasta ahora. Nosotros refrescamos esto, miramos eso. Tenemos un H1 y algunos textos. De acuerdo, sigue siendo bastante feo, así que pongamos algunas cosas más aquí. También pongamos un marcador de posición para nuestros enlaces. Estoy poniendo una pipa aquí, ese es el símbolo vertical. Está todo el camino en el lado derecho de tu teclado por encima de la barra inversa. un vistazo rápido a eso. Se puede ver cómo nuestras cajas se están apilando unas encima de otras, sigamos modificando eso para conseguir lo que queremos. 6. Estilos básicos y CSS: Damos por sentado que cuando experimentemos una página web, va a ser muy atractiva visualmente. Bueno, hubo un punto en el tiempo en el que ni siquiera había imágenes en Internet. Nuestra página web se ve así ahora mismo. Es solo texto plano, así que agreguemos una imagen para darle algún interés visual y luego empezaremos a colocar en estilos para plasmar completamente nuestro diseño. Aquí estamos. Descargué las dos imágenes que se adjuntan a la clase. Uno se llama Pioneros, otro se llama Walden. Van a ser las imágenes para nuestras dos páginas. Empecemos poniendo estos dentro. Las imágenes tienen su propia etiqueta especial, es la etiqueta de imagen, I-M-G. Hay un pequeño grupo de etiquetas que son así. No tienen apertura y cierre sus etiquetas de autocierre. Se auto cierran con una tira y un soporte. El tag de la imagen tiene algunos atributos que nos van a ayudar. El más importante para nosotros va a ser fuente. Vamos a decirle dónde se encuentra esta imagen. Decimos que la fuente es igual, tiene que estar entre comillas y vamos a poner pioneers.jpeg ahí. Guardémoslo y echemos un vistazo. Ahí está nuestra fotografía. Hay otras cosas que puedes poner aquí como título de la imagen o texto Alt que puede ser leído por un lector de pantalla. Voy a dejar aquí algunos textos Alt y credito pixels.com por darme esta foto gratis para usar. Pixeles es un sitio que cuenta con todo tipo de gran fotografía de stock libre. Notarás que ese texto no aparece en ninguna parte de nuestra página web. Ahora en sitios web más grandes que tienen montones y montones de imágenes, es bastante común tener imágenes en su propia carpeta. Ahora la imagen se ha ido y se ve este enlace roto y el texto alt se muestra como una alternativa a la foto faltante. Tenemos que tener cuidado con la información que damos aquí en nuestra fuente. Si escribo images/pioneros, ahora puede volver a encontrar la foto. Estas rutas de archivo van a ser importantes a medida que nos adentramos lecciones más complejas y tengo una segunda y tercera clase después de esto donde entraremos en temas más avanzados. Esta estructura básica de archivos es algo a lo que prestar atención. Estoy tratando de mantener todo en un solo archivo para esta primera clase solo para mantenerlo fácil sin embargo. Nos vamos a ir con; no hay foto especial. Vamos a sacar esto de nuevo aquí. Arreglar mi enlace y estamos de vuelta en el negocio. Lo siguiente que vamos a hacer es agregar algunos elementos realmente simples llamados reglas horizontales. Son sólo una línea que recorre todo el camino a través de la página. También son etiquetas de autocierre. hr, copiemos eso y pongamos otro abajo aquí abajo. Hagamos una más para que coincida con el diseño. Otra etiqueta de autocierre que puedes usar es la etiqueta de rotura, por lo que br con una inclinación y un soporte de ángulo. Echemos un vistazo a esto, refresquemos y tenemos nuestras dos líneas ahí abajo y hay una ruptura debajo de la palabra Walt Whitman. Se trata de un retorno extra que tiene la misma altura que una línea de texto. Algunas otras simples son cosas como la etiqueta fuerte. Si tomamos esto y miramos, crea un tipo de cara audaz. Antes había una etiqueta audaz, era sólo una B, pero ha quedado en desuso a favor de una etiqueta más descriptiva y la razón es que los lectores de pantalla y los lectores braille y cosas así usan. El concepto de negrita no existe en el habla pero el contexto de énfasis, ver por ejemplo, sí existe, por lo que utilizamos cursiva para el énfasis en el texto. Echemos un vistazo ahí. A ver conseguimos algunas cursivas. Pero para un lector de pantalla, podría leer eso con un poco de voz más fuerte o una voz más enfática. Estos son algunos de los estilos básicos que tenemos a nuestra disposición. Ahora nos vamos a poner un poco más sofisticados. Vamos a empezar a escribir código dentro de estas etiquetas. Vamos a darle atributos a estas cajas, va a afectar la forma en que se ven. Una de las cosas que realmente es aburrida de esta página ahora mismo es cómo está todo alineado a la izquierda. Pongámoslo dentro de una caja que tiene un ancho que es menor que nuestra pantalla y que está centrada. Cuando estás escribiendo estilos en línea. Estos son estilos en línea porque están dentro de estas etiquetas. Hay formas más sofisticadas de hacer esto en las que nos meteremos en el próximo curso pero por ahora esta es una forma rápida y fácil de familiarizarnos con los estilos. Empezamos con el atributo style, style es igual y lo ponemos entre comillas y digamos que el ancho va a ser de 800 píxeles. Px es la abreviatura de píxeles y echa un vistazo a esto. Aquí hay un colon, no un igual sino un colon. A esto se le llama par de valor clave. Esta es la clave y este es el valor y ese es un patrón muy común en la codificación para la web. Lo verás en lenguajes de programación y todo tipo de cosas. Centrémoslo ahora que es un cierto ancho fijo, tenemos una etiqueta de margen o estilo de margen que podemos usar. Si decimos margin auto, el navegador va a leer eso y va a poner la misma cantidad de margen a cada lado de esta caja. Esto lo va a centrar. Echemos un vistazo. Ya se ve mejor. ¿Qué tal eso? Cuando estás usando estilos, hay un efecto en cascada y eso lleva al nombre en cascada hojas de estilos. Básicamente dice que el último estilo que lee es el estilo que va a usar. Echemos un vistazo a un estilo que podemos aplicar al cuerpo: style = “color” y voy a usar un gris, 33333. Mira estoy terminando los estilos con el punto y coma, eso es realmente importante. El navegador no sabe dónde terminar si no ve uno de esos en la declaración de estilo. Esta clave de color se va a referir al color de la fuente. Acabo de hacerlo un poco más claro gris no tan negro. Aquí, hagamos algo realmente dramático. Escribamos rojo ahí dentro y veamos qué obtenemos, todo es rojo. Ahora, para demostrar de esa manera que los estilos en cascada, voy a bajar a nuestro h1 y decir style = “color: azul”. Observe que a pesar de que toda la página web era roja, cuando se encontró con un estilo que era más profundo dentro de las casillas que era diferente, difería a ese, así que ahí tenemos azul. ¿ Tenemos más cajas anidadas? No nosotros no. Pero podríamos ir y hacer eso por cada una de estas etiquetas. Voy a deshacerme de esto porque no estamos usando eso ahora mismo. Vamos a limpiar un par de cosas muy rápido y luego vamos a pasar a la siguiente sección que va a ser de tipo personalizado. Terminemos nuestras casitas aquí. Voy a copiar esta etiqueta de break y poner una al final de cada línea de este poema y lo que eso va a hacer es sacarla de ese comportamiento envolvente que hemos visto. Ahí se van, se lo apila, agradable y aseado. Voy a deshacerme de este texto rojo allá vamos. Ahora tenemos nuestras cajas seguidas, están apiladas. Aquí se puede ver al dom. Nuestras cajas apilándose una encima de la otra. Tenemos nuestra forma básica juntos. Pasemos a peinar algunos de este tipo y alejarnos de estos estilos de tipo predeterminados. 7. Agregar tipos de personalizado: Una de las cosas de mayor impacto que puedes hacer por tu página web es tener buen tipo de ojo. Hay tipografías predeterminadas que vienen con Mac y Windows, y podemos usar algunas de esas. También podemos usar tipos de letra de terceros. Te voy a guiar por las diferencias. Existen dos tipos básicos de fuentes. Eso es una subutición burda pero con el propósito de esta clase, hablemos de Serif y Sans Serif, o de Serif y Sans Serif, dependiendo de dónde vienes. A Serif es este pequeño pie, estas pequeñas cosas pegajosas de Audi sobre una fuente. Se supone que te ayuden a guiar el ojo a través de las letras. Entonces esto son veces, esta es la fuente predeterminada, pero también podría especificar algo diferente, como font-family, sans-serif, y ahí voy. Creo que este es Arial, creo que ese es el defecto. Hay un par de valores por defecto para un Serif y Sans Serif. Puedo hacer algo así como aprovechar las tipografías de navegador cruzado, que se renderizarán tanto en Mac como en PC. Aquí vamos. Aquí está la lista. Hay 1, 2, 3, 4, 5, 6 que puedes usar en cualquiera de las plataformas. Probemos Comic Sans. Porque tengo dos palabras juntas, necesito ponerlas entre comillas. De lo contrario, el navegador sólo va a leer la primera palabra y parar. No reconocerá todo el nombre de la fuente. Cuando estás anidando cotizaciones, tienes que usar una combinación de comillas dobles y comillas simples, y como ya he usado comillas dobles, voy a usar comillas simples aquí y poner Comic Sans MS ahí y una coma, y voy a dejar esta declaración de fuente Sans Serif. De lo que se trata es de su pila de fuentes, y va desde su fuente más deseada hasta su fuente menos deseada o predeterminada. El motivo es que en realidad no tienes 100 por ciento de certeza que la fuente que especificas va a estar en la máquina de un usuario. Las fuentes del sistema no bajan con su sitio web. Estás haciendo referencia a una fuente que vive en una computadora local. En tu computadora, se va a quedar genial, podrías especificar. Hombre, no lo sé. A ver. No sé si tengo langosta aquí. Pero puedo especificar alguna fuente que me guste, alguna fuente elegante, Gotham, y se renderizaría en mi máquina. Pero si la persona que descarga la página web tampoco tiene Gotham instalado, solo va a tener predeterminado el texto que especificaste a continuación. O si no especificaste nada, solo va a renderizar Times New Roman, que es como se ve hasta ahora la página web. Aquí tengo Comic Sans MS, y estoy diciendo que si eso no está disponible, usa cualquier tipo Sans Serif. Veamos qué obtenemos. Oh chico, ahí está. Cómic Sans. Creo que esto tiene la dudosa distinción de ser la fuente más odiada en Internet. Veamos por qué odias a Comic Sans, diseñado para hackers. Te dejaré leer sobre Comic Sans en tu tiempo libre. Lo importante aquí es que entiendas la pila de fuentes, porque vamos a usar una fuente de Google para realmente poner algún tipo bonito aquí, y vamos a especificar una pila de fuentes porque esta fuente va a estar viniendo de la CDN de Google o red de distribución de contenido. Si por alguna razón pierdes conectividad de red o, no sé, ya no se admite la fuente, tendrás una pila de fuentes respaldándote. Voy a spec Helvetica y luego una [inaudible]. Ahí vamos, Helvética, un poco más agradable que Arial, en mi opinión. Ahora vamos a echar un vistazo a las fuentes gratuitas de Google. Hay un montón de sitios de fuentes gratuitos por ahí. Google hace que sea tan fácil incrustar fuentes personalizadas. google.com/fuentes. Tienen cientos y cientos de fuentes. Puedes ordenar por Serif, Sans Serif, Display, Escritura a mano. Vamos a buscar una fuente que ya he elegido llamada Josefin Slab. Ahí está. Golpeo este botón “Plus”, aparece este pequeño diálogo, y a partir de este diálogo, puedo obtener instrucciones sobre cómo incrustar esta fuente. Es súper fácil. Copio este enlace en la cabeza, y no tenemos nada más ahí arriba en este momento, así que empezamos a llenar esto. Este es un ejemplo clásico de esa porción de pensamientos del sitio web, esa distribución cabeza-cuerpo o split, como quieras llamarlo. Esto es algo que en realidad no ves pero le está diciendo a tu navegador que descargue esto. No va a haber un enlace en tu página web que diga, Josefin Slab o lo que sea. Otra cosa que tienes que hacer ahora es agregarla a tus declaraciones. Voy a poner Josefin Slab, Helvetica, y luego San Serif. Echemos un vistazo a eso. Ahí vamos. Eso de fácil. Ahora, sí tenemos un poco de trabajo que hacer. Es pequeño. Vamos a entrar y marcarlo. Voy a mover esta declaración a nuestro div principal aquí. Tengo mi ancho, tengo margen auto, pongamos la familia de fuentes ahí. No necesito la palabra estilo igual porque ya estoy dentro de una etiqueta de estilo. Deshazte de estas cotizaciones extra, ahí. Para el cuerpo, voy a especificar un color, un poco gris más claro. Ahora para esto, voy a hacer nuestro tamaño de fuente predeterminado para toda la página, 18 píxeles. Ahí vamos, un poco más grande, es un poco más fácil de leer, y vamos a hacer un poco más aquí. Pongamos un poco de énfasis en el título de nuestra página. este momento acabo de conseguir estos dos posicionadores para nuestros enlaces, que se están acercando en la siguiente sección. Te voy a presentar la etiqueta span. La etiqueta Span se parece mucho a una etiqueta de párrafo. Está hecho para sostener texto. Estoy agregando esta caja para que podamos apuntar específicamente al texto que está dentro de ella. Hagamos una etiqueta de estilo. Voy a decir que el tamaño de fuente es de 27 píxeles, y tengo un poco de título. Parece que necesito darle un poco de espacio. Pongamos un espacio aquí, tal vez hasta un guión, ¿qué tal eso? Ahí vamos. Ahí puedes ver lo fácil que es hacer un diseño realmente bonito usando las fuentes gratuitas de Google. Ahora pasemos a la siguiente sección. Vamos a enlazar estas páginas, una de las cuales aún no hemos creado, y habremos completado nuestro proyecto. 8. Agregar enlaces: Bueno, lo has logrado hasta el final. Sólo tenemos una cosa más que hacer antes de que termine nuestro proyecto. Hasta el momento has escrito todo el código necesario para hacer una página web básica. Ahora vamos a agregar un par de enlaces y conectarlos, así que tenemos un sitio de dos páginas. Los enlaces pueden funcionar de diferentes maneras dependiendo de cómo lo necesites. Echemos un vistazo a la anatomía básica de un enlace. Utilizaron la etiqueta de ancla, que es sólo una a y tienen que ser cerradas. También necesitan un href. El href es básicamente la dirección del lugar al que quieres que vayan. Pueden acudir a enlaces que están en la misma página web. Pueden acudir a archivos que también están en tu mismo sitio web, o pueden enlazar a otros sitios web. Diga si pones ahí la URL de Google y actualizamos la página. Ahí vamos, se va a Google. También podemos hacer algo como si tuviéramos una página muy larga, déjame duplicar este párrafo un montón de veces y vamos a fingir que es una larga página de texto. Podemos darle una identificación a una de estas cosas. Llamémoslo capítulo uno y cambiemos nuestro href al capítulo uno con un hash delante de él y enlazará la página al capítulo uno. El modo en que lo vamos a utilizar es enlazar a otra página web. Empecemos por crear esa página. Puedes hacer clic derecho y hacer un duplicado y nombrarlo Walden. Ahora tenemos que cambiar sobre todo el código que es del primer poema al segundo poema. Voy a abrir ese archivo de texto que tiene los pros en él, copiarlo y luego simplemente reemplazar todo este texto por él. A través de la magia del video que sólo tardó un segundo. Escribamos un enlace que va a ir a nuestra página de Walden. Una cosa, no olvides el cambio de la foto. Vamos a cambiar la foto realmente rápido. Estamos en Walden, así que hagamos este enlace de vuelta a nuestra página de índice. Entonces vayamos a nuestra página de índice y hagamos que enlace con Walden. Voy a tener ese enlace punto a índice. Es sólo va a vincularse a sí mismo. En realidad no pasará nada cuando se haga clic en él. Esto irá a nuestra página walden.html. Cuando nos refresquemos, deberíamos tener dos enlaces que nos permitan ir y venir. Ahora nunca escribimos un enlace para éste, así que no va a aparecer. Volvamos atrás y agreguemos eso realmente rápido. Bueno se puede ver que está enganchado y está cambiando entre las dos páginas. Principalmente agrego este enlace solo por consistencia visual. Eso es mejor. No tenemos ese salto subyacente ahora. Ahí vas. Tienes un sitio web de dos páginas que funciona. Si compraste hosting y nombre de dominio, te mostraré cómo ponerlo y publicarlo en internet y por supuesto, puedes llevarte esto y hacer lo que quieras con él. Se puede sustituir una fuente de Google diferente, una imagen diferente. Se pueden poner más textos, menos texto. Puedes agregarle páginas adicionales. Voy a hacer un par de clases más sobre share de habilidad que voy a mostrarnos cómo hacer diseño avanzado de página y crear un sitio web completo. Algo que se parece un poco más a lo que estás acostumbrado a interactuar en la web. Pero por ahora, esto te pone a empezar. Enhorabuena, eres un desarrollador web básico. 9. Publicación y Wrapup: De acuerdo, vamos a ver si podemos poner esto en Internet para ti. Hay muchos y muchos proveedores de dominios y proveedores de hosting. Llevo mucho tiempo usando DreamHost, probablemente 15 años. Habían sido realmente confiables. Hay toneladas de otras, pero esa es la que voy a estar pasando en esta demo. Es realmente bastante simple. Todo lo que estás haciendo es tomar tus archivos y ponerlos en otra carpeta de Internet y los dominios lo apuntaron, y escribimos en un navegador, boom, aparece. Te guiaré a través de eso. Además, quiero que me dejen algunos comentarios y me hagan saber de la clase, si le faltaba algo, si les enseñaba todo lo que querían saber, si se podía pensar en alguna crítica constructiva. Siempre estoy abierto a escuchar eso porque quiero que estas clases sean las herramientas más útiles para ti que puedan ser. Está bien. Echemos un vistazo aquí para conseguir su sitio en vivo. Una vez más, felicitaciones. Espero ver en algunas clases futuras, voy a estar enseñando una sobre diseño CSS y luego otra sobre Diseño Responsivo. Entonces te veré ahí. Muchas gracias y ten una buena. Está bien. Estamos listos para poner esto en Internet. Hay una serie de clientes FTP gratuitos. FTP es File Transfer Protocol, y esa es la conexión que puedes usar para poner tus archivos en tu servidor. Un cliente que me gusta es FileZilla, es gratis. El otro es Cyberduck. Puedes buscar cualquiera de esos y descargarlos, abrirlos y se ven algo así. Aquí tienes Cyberduck, tiene un aspecto de tipo Mac OS muy limpio y básicamente, arrastras cosas desde tu ventana del Finder hacia él. El otro es FileZilla que es mucho más una visión jerárquica. Cualquiera que se ajuste al proyecto de ley mejor vista. Voy a usar Cyberducks. Es tan fácil de ver. He puesto una carpeta de prueba aquí al final de un dominio que manejo sólo por el bien de mostrarte esto. Todo lo que tenemos que hacer es agarrar los archivos de nuestra página web, arrastrarlos hasta el archivo que queremos utilizar. Ahora, si nunca lo has hecho antes, puede ser un poco confuso y puede que no lo hagas bien la primera vez. Normalmente hay un archivo HTTP público, o tal vez sea solo tu nombre de dominio. Pero habrá una serie de archivos ahí arriba dependiendo del servicio que utilices. Si utilizas DreamHost, es tu nombre de dominio, verías marcnischan.com. Puedes abrir eso y soltar los archivos ahí dentro, ve a marcnischan.com y sale justo arriba. Aquí vamos, arrastramos los archivos por ahí, los soltamos, y deberíamos poder ir ahora mismo a un navegador e inmediatamente verlos. Ahí están. Esto está en vivo en Internet ahora mismo. Esto fue así de fácil. En cualquier momento que hagas un cambio localmente, solo sobrescribes los archivos en el servidor y los actualizas. Eso es todo. Es así como publicas un sitio web. Lo último que debes hacer para completar el curso es subir una imagen como captura de pantalla de tu sitio terminado, o tal vez incluso publicar una URL si decidiste hospedarla.