Creación de prototipos para web III: diseño con HTML y CSS | Erica Heinz | Skillshare
Menú
Buscar

Velocidad de reproducción


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Creación de prototipos para web III: diseño con HTML y CSS

teacher avatar Erica Heinz, Designer/Developer

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Avance

      1:09

    • 2.

      Prototipos RWD, CSS y HTML

      2:23

    • 3.

      Evalua la situación

      7:20

    • 4.

      Guárdalo

      7:12

    • 5.

      Los huesos

      9:10

    • 6.

      Flexibilidad

      13:37

    • 7.

      Las tripas

      6:35

    • 8.

      La piel

      8:14

    • 9.

      Pruebas

      8:48

    • 10.

      Documentación

      6:15

    • 11.

      ¿Qué sigue?

      0:37

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

1452

Estudiantes

--

Proyecto

Acerca de esta clase

Crea un sitio en vivo utilizando tus prototipos en papel y la estrategia de diseño de las clases anteriores. Cada paso está diseñado para ayudarte a trabajar de forma rápida, eficiente y con cualquier tamaño de sitio. Configura un repositorio, codifica en HTML, aplica estilos en CSS, y crea una documentación clara que puedes compartir con clientes, colegas y compañeros de estudios.

Realiza sitios web en vivo en apenas unas horas. La clase de 70 minutos de Erica Heinz sobre desarrollo web simple explica cómo transformar de forma eficiente y sencilla los esquemas de pagina y maquetas visuales en un sitio responsivo. Ya sea que quieras hacer una demostración de tu idea para una startup como si quieres crear un portafolio en línea, es fácil construir tu propio sitio. En 9 breves lecciones, explora github y los editores visuales fáciles, aprende herramientas modernas como Hammer y Bourbon, y aprovecha una plantilla de inicio exclusiva de Skillshare sobre HTML/Sass. Con tantos recursos e instrucciones claras, terminarás con un sitio que puedas lanzar de inmediato.

¿Quieres más? Consulta las otras clases de esta serie: Diseño web I: planificación con prototipos rápidos y Diseño web II: elementos visuales para UX y branding.

 

 

Conoce a tu profesor(a)

Teacher Profile Image

Erica Heinz

Designer/Developer

Profesor(a)

Erica Heinz is a Brooklyn-based designer, developer, and creative consultant. With over a decade of experience in web design and development, she's worked with both large corporations and lean start-ups. She manages projects from strategy and IA all the way through to development and support.

Ver perfil completo

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Avance: Yo soy Erika Heins. Soy diseñador web, desarrollador web. Llevo más de 10 años trabajando en el campo y EEUU. Esta clase se trata de desarrollo web simple. Así que realmente cada CSS conocido para los diseñadores. Estarás tomando las maquetas de un sitio web que ya has diseñado y las estarás convirtiendo en un sitio web receptivo. Creo que esta clase puede servir tanto a diseñadores web iniciales que quieran aprender a llevar sus diseños en código o tal vez tener que dar un paso atrás y planearlos un poco más claramente antes de que salten directamente a su proceso visual. Esta clase es buena para estudiantes que comienzan que quieren entender el diseño receptivo y todo el proceso de planeación al desarrollo o diseñadores experimentados que quieran adaptar su proceso. Poder hacer sitios web y mantener sitios web para entender cómo funcionan, cómo hacerlos más poderosos o el hecho de que sea solo una de las habilidades más valiosas. 2. Prototipos RWD, CSS y HTML: Bienvenido a Simple Web Development. En esta clase, tomaremos los maquetas de nuestro sitio web responsive y los convertiremos en HTML y CSS reales. Los métodos que utilizaremos son apropiados para crear prototipos o para iniciar un nuevo sitio web. Esta clase optimiza el proceso de desarrollo front-end para los diseñadores. Ya sea que tu diseñador aprenda a codificar queriendo explicaciones visuales o una híbrida actual y queriendo mejorar tu flujo de trabajo o adaptarlo a la web receptiva, esta clase te dará un buen proceso y un conjunto completo de recursos. Porque construir sitios nos hace mejores diseñadores. Como dijo Steve Jobs, “El diseño no es sólo lo que parece y se siente. El diseño es como funciona”. Cuando construyes cosas, ves diseños en su medio real de HTML y CSS. Revelas necesidades adicionales del sistema, puedes visualizar y probar la interactividad, y lo más importante, puedes agregar gifs. Se puede considerar este proyecto un prototipo o un sitio. El primero es típicamente tirado. Es sólo una maqueta clicable hecha lo más rápido posible para ver cómo se ven las cosas. Te centrarías más en la velocidad y la presentación. Un sitio adecuado tiene todas las etiquetas alt, retroceso, y optimización para servidor de producción. Te centrarías en sistemas sólidos, escalables y mantenibles. Estaremos pasando por un proceso que es útil para ambos. Debido a que el diseño web receptivo ha cambiado todo nuestro trabajo, a menudo necesitamos hacer las cosas más rápidas y en trozos más pequeños. Hablaremos a través de las filosofías actuales en la industria y de los pros y contras de las diferentes técnicas. Mi proceso es evaluar la situación, luego organizar mis materiales, personalizarlos según sea necesario, probar todo a fondo, y luego documentar lo más posible. El kit que uso para prototipar o producción es Coda para escribir código, Sass para extensión CSS, Hammer para plantillas y compilación, Bourbon para mixins y cuadrículas, y SourceTree para git commits. Entonces, ve a conseguir la configuración de tu herramienta. Descarga las pruebas gratuitas de Coda o cualquier otro editor de texto que quieras usar. Hammer o algún otro compilador de Sass, y SourceTree o algún otro cliente de GitHub si quieres usar uno. También, descargue los recursos para esta clase. Hay algunos archivos fuente y referencias. Ya deberías tener Sitemaps y maquetas. Si no, quieres tomar las dos primeras clases de esta serie. 3. Evalua la situación: El primer paso es evaluar la situación. El estado del campo y el estado de nuestro proyecto. Tenemos que estar siempre aprendiendo, este campo está cambiando constantemente. Entonces, si no has hecho algo en seis meses, necesitas investigar porque probablemente ya haya una mejor manera de hacerlo. Este es un campo para las personas que aman aprender y que aman las cosas nuevas. Pero proteja su propio proceso. Las herramientas vendrán y se irán, así que no interrumpas lo que está funcionando bien para ti ya lo estás. Nuevas herramientas son disruptivas. Ojalá, de una buena manera donde estés limpiando tu proceso, pero podría ser de mala manera si te distrae y te espera. Entonces, confirmar los requisitos del proyecto. ¿ Cuál es el verdadero propósito de este sitio? ¿ Cuál es su vida útil? ¿Cuánto tiempo necesitas que esté arriba? ¿ Tienes algún tiempo o presupuestos financieros que necesites para golpear? ¿ Qué dispositivos quieres que se muestre mientras está encendido? ¿ Qué navegadores tienes que apoyar? ¿ Y qué tipo de pantallas quieres apoyar? Alta definición, pantallas retina. Pasa y pregunta qué recursos necesitas. ¿ Qué nivel de pulido necesitas en el código. Podrías usar una aplicación de codificación basada en GUI si solo quieres algo rápidamente y no de verdad. El código generado suele ser bastante verboso. Si no necesitas todas las características de HTML y CSS solo las populares que proporciona la aplicación, podría ser divertido simplemente arrastrar y soltar elementos por la página. Además si no estás planeando seguir codificando y solo estás construyendo o solo estás haciendo un sitio para el corto plazo. Dreamweaver es el viejo estándar, Adobe también tiene un proyecto más nuevo llamado Edge y hay advenedizos como Web Flow y Guacamaw. Los beneficios de esta bonita interfaz, que puedes obtener rápidamente diseños básicos y que puedes revisar páginas visualmente. Pero de nuevo, estás limitado al conjunto de características particular de la aplicación, el código generalmente todavía necesita retoques y realmente no lo usas en producción y muchos de ellos siguen con buggy. Entonces, ¿por qué querríamos hacer codificación HTML y CSS recta? Debido a que obtenemos acceso a todas las capacidades de HTML, no nos limitamos a las características de cualquier aplicación de prototipado que estamos eligiendo. Podemos ver los elementos reales, la topografía y la velocidad de la página. Podemos determinar puntos de ruptura en dispositivos reales y todos nuestros archivos fuente no son propietarios lo que significa que podemos transferir este código a cualquier otra aplicación que queramos utilizar. Puedes pulir tu prototipo en producción lo que te ahorra tiempo y puedes construir un sitio en cuestión de horas o días si eres rápido. Pero es complicado ir al teclado como tu principal herramienta de diseño si vienes de un fondo de diseño. Entonces, la app que usas hace una gran diferencia. Sublime Text es realmente popular, es realmente personalizable y tiene una vista de navegador genial en el lado derecho para tu código. Utilizo coda el cual te permite tener clips de código que puedes arrastrar y soltar en tus páginas. También ha llamado código de plegado y coloración y una vista previa de ventana dividida o puedes usar la app dietética coda iPad para vivir generar una vista previa en cada vez que guardes. Puedes abrir una ventana de terminal justo en la misma aplicación y también hay muchos manuales de referencia para ayudarte a buscar cosas mientras codificas. Pero no vamos a codificar HTML y CSS perfectamente rectos, hay algunas herramientas y métodos clave para ahorrar mucho tiempo. Plug-ins y extensiones pueden darnos características adicionales que queremos y necesitamos. Por ejemplo, Emmnet es taquigrafía CSS, puedes escribir algunos caracteres y hacerlos expandir en HTML completo o CSS. Entonces Sass ai un procesador CSS que nos da variables, mix-ins, bibliotecas, si entonces afirmaciones y todo tipo de cosas que tendría un lenguaje de programación inteligente. Me encanta Hammer. Me parece que es la forma más rápida de hacer sitios estáticos. Necesitas un compilador si vas a usar Sass y Hammer hace eso por nosotros y también incluye la biblioteca Bourbon de mix-ins por defecto y lo mejor de todo, te permite hacer incluir algunas variables que compilaron un HTML regular. Entonces, de nuevo, los beneficios de las cosas de codificación manual son que puedes usar HTML y CSS prácticamente en cualquier lugar, renderiza los diseños y el medio real, obtienes las capacidades completas del navegador y es de código abierto o no propietario. El único es que, sí hay una curva de aprendizaje, sí hay que invertir algo de tiempo En codificar todo esto y hay que probarlo en el navegador. Entonces, los frameworks pueden ser un medio feliz. Si eres un desarrollador experto, tal vez estés pensando en Node.js porque estás haciendo aplicaciones pero si estás en ese nivel probablemente no necesites esta clase. Framer Node.js es otro que está enfocado en la creación de prototipos y la animación. El siguiente nivel abajo podríamos decir es Bootstrap. Es muy popular para las apps en producción, te da todo tipo de elementos en interactividad. Para mí había algunos rompetrato porque está incorporado Lass y Sass. Aunque hay un puerto si quieres usar Sass y hay mucho estilo predeterminado, así que para mí era demasiado cosas para sobrescribir. Te da botones, te da formas, te da encabezados y textiles predeterminados, así que tienes que entrar y escribir todo el CSS para sobrescribir estos estilos si quieres que tu sitio luzca único, lo cual lleva un poco de tiempo razón por la cual ves muchos sitios usando Bootstrap que todos tienen el mismo aspecto. Fundación es otro marco que es similar a Bootstrap. Prefiero un poco mejor su estructura. Te da muchas plantillas por defecto. Entonces, no tendrías que codificar este tipo de diseños desde cero y así es bueno pero es voluminoso, hay un montón de marcado extra cuando estás haciendo este tipo de diseños de columnas y obtienes nombres de clase por todas partes de tus marcas. Entonces, encuentro que puedes conseguir las mismas cosas con menos trabajo. Compass es otro popular, es una enorme biblioteca de mix-ins CSS. Es bastante grande y puede agregar algo de peso a tus páginas, así que me inclino en Bourbon que es mucho más simple que Compass es el mismo tipo de idea de una biblioteca de mix-ins CSS, así que no tienes que escribirlas y mantenerlas todas usted mismo y me parece que es la documentación para ser mucho más fácil de leer. También puedes usar Bourbon Neat para ir con Bourbon y es una simple cuadrícula semántica responsive y hablaremos más de eso más adelante. Por lo tanto, todos estos frameworks significan que has derivado menos desde cero que obtienes funcionalidad adicional que tal vez no puedas hacerte y ojalá estén bien probados. El inconveniente es que puedes tener una falta de control, tienes que seguir los estándares de los frameworks que estás usando. Existe una curva de aprendizaje de aprender la sintaxis y capacidades particulares de cada marco y es conocimiento especializado, no es tan aplicable a otras herramientas si decides cambiar marcos más adelante. Entonces, si estás tratando de mantenerte al día con cosas como estas, preguntándote cómo escuchas sobre estas nuevas herramientas, decide cuáles son las mejores. News.layervault.com es bastante bueno y por supuesto Twitter. Hice una lista de personas recomendadas en el campo Diseño y Tecnología, para que puedas obtener mucha información de personas que realmente se están manteniendo al día y tratando de estar en la cima de su juego sobre estas cosas. Entonces, decide cuánto quieres aprender para este proyecto. Desnuda algunas de estas apps, escatima la documentación, mira algunos tutoriales y luego ponte configurada. Estaré usando Hammer y Sass, Bourbon y Bourbon Neat, así que te sugiero esos si quieres seguir adelante, pero claro si quieres aprender Bootstrap o Foundation o cualquier otra cosa que hayas oído hablar podrías configurar eso para tu proyecto también. 4. Guárdalo: Nuestra siguiente lección es sobre Control de versiones. Esta es una habilidades valiosas y esenciales. Entonces, aunque creas que no lo necesitas en este proyecto, sigamos adelante y aprendamos una manera sencilla de hacerlo. Si estás trabajando en el mundo digital, es súper importante guardar tu trabajo en múltiples lugares. El control de versiones copia de seguridad de tus archivos, así como de todas sus versiones anteriores. Todos estamos familiarizados con el concepto. En el nivel uno, solo estás usando nombres de archivo, -v1, -v2, -FINAL-FINAL-FINAL-FINAL. Nivel dos, te mueves a un sistema de Control de Versiones. Hay apps como LayerVault para Photoshop, y GitHub es la grande para el código. Mi papá es programador y siempre dice que hasta que uses un sistema de control de versiones, eres un desarrollador aficionado y no un profesional. Pero aún así, GitHub da un poco de miedo. Por lo tanto, navega por la pestaña Explorar para tener una idea de todas las cosas que podrías hacer. Puedes hacer una copia de seguridad de tus archivos, por lo que siempre tienes dos copias. Se pueden deshacer tareas fácilmente porque guarda cada versión menor. Se pueden probar ideas alternas porque permite bifurcaciones y ramas. Puedes colaborar con otras personas en las mismas páginas porque GitHub maneja los conflictos de fusión. Puedes compartir tu trabajo porque el código abierto nos mueve a todos hacia adelante. También puedes usar un repositorio privado si quieres. Entonces, lee todos los tutoriales. Esa es siempre la mejor manera de aprender una nueva herramienta. Pero hice todo esto, y todavía estoy confundido y asustado por GitHub hasta que encontré algunas herramientas visuales. Entonces, hay un GitHub para Mac, pero prefiero uno llamado SourceTree. También es gratis y tiene todos los comandos justo frente a ti. Entonces, solo estoy usando los principales, como commit, pull, y push. Se puede ver que hay este botón. Entonces, no tengo que recordar la sintaxis particular. Terminal es solo que no hay deshacer, no hay codificación de color para mostrar cuando has escrito el error. Entonces, siempre fue un poco demasiado estresante para mí. Pero una vez que empecé a usar SourceTree, tenía total confianza en usar Git. Entonces, ¿cómo se empieza? En primer lugar, necesitas obtener su cuenta. Entonces, ve a github.com y crea una cuenta. Después en tu perfil o desde la página de inicio, quieres crear un nuevo repositorio. Entonces, voy a llamar a mi demo. Yo lo voy a hacer público para que todos puedan verlo, y también voy a marcar la casilla que dice inicializar este repositorio con un README. Entonces, eso vamos a seguir adelante y usar el repositorio porque es una cosa requerida tener un archivo README ahí dentro. Entonces, te ves obligado a escribir una intro explicando a otras personas cuál es este conjunto de archivos. Entonces, ahora ves mi repositorio. Está bajo mi nombre de usuario. Energy7/Demo es donde lo puedes encontrar. Se puede ver que este archivo README solo tiene el título y no he agregado ningún contenido. Haré eso al final del proyecto. Entonces, si vas al lado derecho de la pantalla, quieres copiar esta URL clon donde dice SSH. Entonces quieres entrar a SourceTree. Entonces, ve a tu panel Marcadores. Presionas Apple B si no puedes verla, y haces clic en el botón Plus para agregar un repositorio. Vas a clonar un repositorio. Porque ya lo has creado en GitHub, no necesitas recrearlo, pero solo vas a clonar una copia a tu computadora. Entonces, la ruta de origen es que copiaste de GitHub, y luego escoges una carpeta. Guardo todos mis repositorios en mi carpeta de usuario en una subcarpeta llamada Sitios. Voy a llamar a mi carpeta de repositorio lo mismo que está en GitHub, que es demo, y luego se verá así. Verás que esta es la ventana SourceTree. Entonces, no hay archivos que hayamos agregado localmente todavía. Entonces, todo está en blanco, pero se pueden ver todos los botones en la parte superior. Entonces a la izquierda, se puede ver que apenas estamos conectados a la rama maestra, que es como nuestro repositorio principal. Hay todo tipo de otras cosas en las que puedes sumergirte si estás trabajando en un entorno profesional. Entonces ahora, voy a ir a Hammer, y proporcioné algunos archivos fuente. He proporcionado una plantilla Hammer para esta clase. Entonces, se llama Demo Template. Entonces, en mi misma carpeta de repositorio, voy a crear un sitio de demostración usando esta Plantilla de Demo. Al hacer clic en Guardar, Hammer va a compilar todos estos archivos. Están todos prácticamente vacíos hasta ahora, pero Hammer se sienta ahí y observa, y cada vez que guardas, se compila de nuevo. Entonces si vuelvo a SourceTree, veo que todos estos archivos creados por Hammer, que son parte de la plantilla están ahora en mi árbol de trabajo, lo que significa como en mi disco duro local. Entonces, voy a arrastrarlos y soltarlos. Voy a seleccionarlos todos y arrastrarlos y soltarlos hasta la mitad superior de la pantalla para escenificarlos, lo que significa que estos son los que estoy listo para compartir. Después voy a hacer clic en el botón Comprometir, el primer botón de la izquierda, y voy a escribir un mensaje describiendo lo que hice aquí. Entonces, aquí, acabo de crear los archivos del sitio a partir de mi Demo Hammer Template. Voy a marcar la casilla de abajo, eso dice empujar los commits inmediatamente al origen. Entonces, comprometerse es igual que un save, pero es solo localmente. No le está haciendo nada al repositorio en GitHub. Entonces, tienes que empujar los archivos si quieres que salgan a GitHub. Entonces, una vez que hago eso, ahora ves que tengo mi carpeta de sitio de demostración arriba en el repositorio público también. Entonces, lo has hecho. Has empujado al GitHub. Entonces, si alguna vez estás en una entrevista de trabajo, y te preguntan, puedes usar Git, puedes decir que sí ahora. SourceTree también es agradable porque se puede ver en medio de la pantalla, por encima del botón Pull, hay una pequeña insignia que te dice que había un poco rojo cinco. Entonces, eso te dice si alguien más está trabajando en el proyecto contigo, han hecho algunos cambios en el repositorio, y quieres jalarlos, quieres descargar esos cambios que estás trabajando con los archivos más actualizados. Entonces, siempre busca eso y tira antes de empezar a trabajar en cualquier caso. Entonces, la sintaxis básica para Git es que pull es como descargar, que estás fusionando cambios en tus archivos. Comprometer es como guardar. Es como un marcador de milla al que puedes volver más tarde. Push es como subir donde estás fusionando tus commits de nuevo en el repositorio. Revert es como deshacer, donde necesitas volver a un commit anterior, lo que te hace muy contento cuando tienes montones de commits para elegir. Tenedor es si encuentras un repositorio que quieres usar como tu base, si quieres mantener un enlace, por lo que si me gusta, digamos, actualizan su encabezado, puedes fusionar la rama upstream y también puedes usar ese encabezado actualizado. Entonces, se ve algo así. Aquí una buena ilustración de Jessica Lord. Hay un proyecto original que es una jirafa, y podrías tenerla, y luego puedes cambiarla como quieras, y tal vez añades una cabeza de tigre, y luego lo volverías a subir si tienes derechos de acceso hasta el repositorio original. Entonces, ahora eso es parte del repositorio principal, esta jirafa cabeza de tigre. Entonces, alguien más puede bifurcar ese nuevo código y agregar algunas plumas, y luego pueden empujarlo de nuevo al repositorio y fusionar esos cambios también. Entonces, ustedes chicos incluso podrían colaborar entre sí en este proyecto en esta clase. Podría usar el mismo repositorio y compartir archivos. Entonces, adelante y crea tu repositorio. Descarga SourceTree si no lo tienes, y Hammer también. Crea una cuenta de GitHub. Crea un repositorio y luego consigue la configuración de tu repositorio en SourceTree. 5. Los huesos: Ahora, estamos listos para empezar a construir páginas. Nuestra lectura de antecedentes es de nuevo por A Book Apart. Si eres diseñador web, solo tienes que seguir adelante y comprar todos sus libros. El mejor panorama general de cada tema, y son lo suficientemente cortos para leer en un viaje en avión. Entonces, ¿cómo vamos a conseguir de estos maquetas planas en código? Por suerte, nuestro bonito diseñador se ha burlado de todo tipo de puntos de ruptura, así que no estamos tomando decisiones de diseño nosotros mismos, y tenemos un sitemap para mostrarnos qué páginas son múltiplos y aproximadamente cuántas hay en total. Entonces, ahora todo se trata de reconocimiento de patrones, y Hammer nos ayuda con eso. Las plantillas predeterminadas vienen con una carpeta incluye. Verás cabecera, pie de página, y nav aquí. Utilizas includes en cualquier sitio grande, por lo que no tienes que pegar el encabezado cinco veces en cinco páginas, pero requieren un lenguaje dinámico del lado del servidor como PHP o Ruby. Hammer compila estos incluye a HTML normal, que verás en la carpeta Build. Después, la carpeta Activos, verás que la subcarpeta CSS tiene un estilo.scss. Se trata de un archivo SaaS, que también se compila a CSS regular en la carpeta Build. Si bien estamos aquí, mira la plantilla que proporcioné. En los activos CSS, hay varias subcarpetas. Hablaremos de esos más tarde. Todo se trata de diseñar módulos, no páginas. De nuevo, no querríamos codificar un encabezado cinco veces por cinco páginas, y así que quieres pensar de la misma manera en llamadas y otras características. Entonces, haz una lista de tus plantillas, no necesariamente tus páginas. Simplemente puedes hacer esto en un archivo de texto, y quieres describirlos en el punto de ruptura más grande porque los diseños móviles son generalmente de una sola columna. Entonces, si describiste tus plantillas móviles, prácticamente todas serían la misma, pero piensa en dónde tienes diseños complejos de tres o dos columnas. Ahora, es cuestión de semántica. Semántica sólo significa asignar elementos basados en lo que son, no en cómo se ven. ¿ Esta pieza de texto es un párrafo o una lista? Entonces, HTML es el alfabeto del diseño web. Quieres aprender todas estas letras, que puedas deletrear más palabras. No necesariamente usarás todos estos. Pero otra vez, cuanto más sepas, más puedes, hacer y eso es otra cosa que me gusta de Coda, es que viene con libros en varios idiomas. Entonces, dentro de la misma app, solo puedes buscar las cosas. Entonces, si quería usar una etiqueta de sitio, puedo ir al libro y buscar los atributos apropiados y para qué se utiliza. Por lo tanto, también puedes empezar a usar la taquigrafía para trabajar un poco más rápido. Markdown, una taquigrafía para HTML. Te ayuda a enfocarte en la semántica de tu contenido en lugar del look. Entonces, hay que decir que esto es un H1 esto es un H2, etcétera. Puedes escribir Markdown en una aplicación como Stackedit para ver la vista previa HTML renderizada lado a lado, y luego podrías descargar HTML para tener tu contenido en todo marcado y listo para pegarlo en tus plantillas. Emmet es otro tipo de taquigrafía para HTML y CSS. Viene como un plug-in para tu editor de código. Escribes código usando la sintaxis Emmet, que se parece a esta línea en la parte superior, y luego presionas “Control E” para expandirlo, y obtienes el HTML o CSS completo como en la parte inferior. Nuevamente, una cosa es aprender, pero cuando me dirijo a una fase en la que estaré codificando por varios días, vuelvo y lo aprendo de nuevo. Realmente se siente como magia. La otra cosa que es súper útil es hacer Clips. Cuando has codificado una lista desordenada por 100 vez, empiezas a preguntarte ¿es realmente necesario esto? No, no lo es. Podrás construir tu propia biblioteca personal de código. Aquí, codificador, hay una pestaña a la derecha para todos tus clips. Se pueden ver mis clips HTML5, mis clips Hammer, etcétera. Puedes hacer carpetas de clips para cualquier marco que utilices, y luego simplemente arrastrarlos y soltarlos en tu archivo para reutilizar tu código. Hay un sitio de código Eclipse que tiene muchas muestras, tanto simples como complejas para muchos sistemas y frameworks, y Pears. Es P-E-A-R-S. Se trata de un sitio que tiene muchos patrones simples HTML y CSS. Busca también los patrones de respuesta en el sitio Brad Frost llamado This Is Responsive. Ha sido súper generoso y ha creado toneladas de patrones útiles como navegación receptiva e imágenes. Su último esfuerzo se llama Pattern Lab, y tiene el mismo enfoque modular del que he hablado. En lugar de las letras del alfabeto, habla de átomos. Entonces, esto podría ser, tienes un color o una fuente. Ese es un átomo de tu página web. Los combinarías en una molécula. Podrían hacer un titular, y se combinarían varias moléculas en un organismo, que podría ser un encabezado o una barra lateral. Después, estos organismos se combinan para formar plantilla, que podría ser tu plantilla de columna única, tu plantilla de cuadrícula, y luego utilizarías estas plantillas para hacer páginas individuales como tu página de bienvenida o tu página de perfil. Entonces, echa un vistazo a ese sistema, y es posible que quieras explorarlo si estás interesado en continuar en el desarrollo web, pero asegúrate de hacer una copia de seguridad de tus clips. Lo más triste que ha pasado fue, tuve un accidente informático, y todos mis clips se perdieron, y fueron tantos años de trabajo, todos compilados, y no fue respaldado en ningún lado, así que lecciones aprendidas. Entonces, mientras estás escribiendo tu HTML, vas a empezar a agregar nombres de clase, que es a donde vas a adjuntar tu CSS. Entonces, hay todo tipo de enfoques de cómo se nombra a sus clases, pero aquí está mi enfoque básico. Tu contenedor quiere tener una clase corta, simple nombre de contenedor corto es genial. Entonces, puedes tener clases infantiles tras guión. Entonces, esta sección que he llamado intro, y luego mis subsecciones son intro-heroe e intro-blurb, que de nuevo son semánticas, y que se refieren como lo que es, no como se ve. Entonces, no es la fila superior. Porque en un diseño receptivo, esa fila superior podría moverse hacia la izquierda, pero es la fila de intro, o como sea que quieras llamarla. Las metodologías populares, estas son personas que pasan mucho tiempo tratando de pensar para grandes sistemas, cómo necesitas nombrar tus clases. Una fue OOCSS, que es CSS orientado a objetos por Nicole Sullivan, y esa fue una especie de uno los primeros estilos abstractos en módulos. Entonces, escribirías una especie de ver estilos de logotipos que combinas en diferentes elementos poniendo todo un montón de nombres de clase en el marcado, pero Sass hace esto ahora. Nuevamente, no es tan agradable tener todas las clases en el marcado. Otro popular es BEM, que es Block Element Modifier, que solo significa que usas a.class para lo principal. Después, para un niño, usas dos guiones bajos, y luego para una subclase, usas dos guiones. Entonces, eso es bastante reconocible cuando ves a alguien que está usando BEM. Entonces, SMACSS es otra que me gusta, que significa Arquitectura Modular Escalable, y que dice que quieres dividir tu CSS en cinco secciones básicas. Uno es como tus elementos base. Dos son todos los estilos que hacen tu diseño. Tres son todos los módulos. Entonces, llamadas o piezas reutilizables de las que hemos hablado. Cuatro son los estados. Entonces, está seleccionado o es un error, y cinco son los temas, lo que significa si para los sitios grandes a menudo se tiene un tema secciones usando el mismo código que otras secciones. Entonces, usaremos un similar. Utilizo un desglose similar para organizar mis carpetas de parciales, pero no soy estricto en seguir a Sass a este último. Grandes lecciones que he aprendido cuando estaba escogiendo los nombres de mis clases, uno, es no usar ID porque son muy específicos, y van a sobrescribir la mayoría de los demás CSS. Entonces, si necesitas ajustar algún CSS existente, tienes que usar una tonelada de especificidad o una declaración importante, lo cual es un problema. Entonces, quieres hacer una clase igual a perfil de usuario, y no un ID es igual al perfil de usuario. Entonces también, cuando estás escribiendo tu marcado, quieres reducir las dependencias. Entonces, eso solo significa que no quieres un cambio en tu CSS para romper tu JavaScript y viceversa. Por lo tanto, es genial usar nombres de clase que se asignan a cada uno. Entonces, para los ganchos de JavaScript, uso ID, o atributos de datos, o nombres de clase que comienzan con.js-, y luego todas las demás clases son solo para estilizar. Entonces, de esa manera, sé que puedo hacer tantos cambios en mi CSS como quiera, y no voy a romper el JavaScript. Entonces, esa es una especie de lección avanzada, pero seguiré adelante y te lo diré. Está bien. Entonces, vas a empezar a codificar tus páginas de demostración, y va a ser realmente tentador entrar y empezar a peinarlas, pero concéntrate en meter todos los elementos en la página. Entonces, escribiendo tu marcado, averiguando cómo se debe codificar el contenido, y en qué orden debe ir en la página. lo tanto, es útil mirar tus wireframes móviles para averiguar en qué orden necesitan los elementos HTML para entrar, y luego entraremos en un estilo responsive en breve, y descubriremos cómo conseguirlos uno al lado del otro en los diseños más grandes. Entonces, inicia tus páginas HTML marcando tus contenedores que podrían ser secciones, artículos, divs, u otra cosa. Agregarás tus textos, tus encabezados, tus párrafos, tus listas, y marcarás tus medios. Entonces, imágenes, videos, audio, cualquier otra cosa que estén en tus diseños, y sigan comprometiéndose y presionando a Github mientras vas solo por la práctica, o si estás colaborando con otras personas. 6. Flexibilidad: Mi siguiente paso es hacer que estas plantillas respondan, para que todos puedan ver cómo el contenido volverá a fluir en diferentes dispositivos. Para ello, vamos a necesitar a Sass para que podamos usar la grilla Bourbon Neat. Nuevamente, A Book Apart nos dará una gran visión general. Vemos características como la anidación; para mantener tu código organizado, las clases dependientes se pueden almacenar dentro de sus clases padre. Variables para evitar encontrar y reemplazar, puedes escribir un archivo de configuración para cada sitio que actúe como tema, puedas tener los colores y tamaños únicos para ese sitio todo en un solo lugar, y luego simplemente usar esa variable que comienza con el signo de dólar en todas partes de tu página en tu CSS. También Mixins para manejar lógica compleja, o para evitar escribir largos caídas CSS como prefijos de proveedor. Por ejemplo, solo podemos pasar un valor de 10 píxeles por lo que este mixin de radio de borde de una línea, y generará las cuatro líneas de CSS y nuestro archivo final. No tenemos que escribir todos nuestros propios mixins, podemos usar bibliotecas para las cosas comunes, lo que se actualiza cuando lo hacen los navegadores. Los archivos Sass se pueden dividir en parciales, por lo que no tienes que desplazarte hacia arriba y hacia abajo un archivo CSS de 3000 líneas buscando algo. Después los compilas, lenguaje de extensión CSS de Sass, por lo que necesitamos un compilador para convertirlo en CSS real. Este es otro triunfo para Hammer. Puedes compilar Sass con JavaScript en el servidor, pero eso es un poco más lento para tus visitantes. Puedes usar una app llamada Codekit la cual es realmente genial, pero Hammer nuevamente nos ayuda a usar número de herramientas posible que compilará nuestro Sass para nosotros. Entonces, aquí hay un archivo de configuración de ejemplo que básicamente es, un tema para nuestro sitio. Eso aquí hay una paleta de colores de muestra, y podemos establecer nuestras variables para nuestra cuadrícula como el número de columnas y todo tipo de cosas. Entonces, mira en la muestra la plantilla demo y ve cómo se ve un archivo config. Se desea mantener sus archivos organizados. Entonces, la gente hace esto de diferentes maneras pero, mis carpetas para prototipar son un archivo base, discúlpame, una carpeta base donde verás tu archivo normalize y también este archivo config que mencioné con todas tus variables de tema. Entonces tengo una carpeta de todos mis mixins que son, podrían ser las bibliotecas, la cuadrícula y cualquiera de mis mixins personalizados que estoy escribiendo yo mismo. Entonces tengo una carpeta de todos mis parciales esta es con mucho las carpetas más grandes, y a veces se divide en múltiplo podría ser tu encabezado, tu pie de página, también incluyo mis estados aquí así que está roto, discúlpame, es un error, está encendido está fuera de ese tipo de cosas, y luego está la carpeta de plugins para que cosas como fitbits o plugins jquery, que podrían eliminarse más tarde, es bueno tener ese CSS dividido, así que no vuelvas a tener que enrutar a través de la longitud de tu archivo CSS para cada estilo en particular pero todo está en un solo lugar.Entonces, entonces solo importas todos estos diferentes parciales, usando tu estile.scss así es como uno tiende a lucir. Entonces, primero importo mi base, configuro así es este reset normalizado y luego mi config en mis variables, luego importo todas estas bibliotecas y mixins que voy a usar un todos mis diferentes parciales. Entonces estoy importando mis diferentes parciales, y el orden en el que los importas es importante. Entonces, las cosas que vas a importar más adelante no están disponibles para los parciales que se importan antes. Entonces, quieres hacer todos tus elementos base como tu tipografía necesita venir primero, y luego puedes usar esos estilos tipográficos en digamos tus botones, o tus menús que se llaman más adelante. Entonces mi último es todos estos plugins otra vez, estos complementos que podrían quitarse más tarde. Para actualizaciones sobre Sass y CSS y todas estas cosas siguen a Chris Coyier CSS-tricks es su sitio, y realmente está a la vanguardia en todas estas cosas. Sobre el diseño web Responsive y los requisitos ahí. Nuestra lectura de antecedentes aquí es del señor Ethan Marcotte quien es un gran amigo a seguir en Twitter también. Viene de este requisito de o este hecho que no podemos diseñar para los tamaños establecidos ya son proporciones. Ya no podemos diseñar solo para los usuarios de Apple. Cuando los smartphones salían por un tiempo somos como oh! Entonces, ahora solo necesitamos, estilos de iPhone y luego estilos de iPad y luego de escritorio y ahora hay todo tipo de personas con todo tipo de tabletas y smartphones, así que tenemos que ser un poco más creativos. Entonces, una cosa que ayuda es algunas personas armen lo que se llama el enfoque Ricitos de Oro. Que es solo la forma independiente del dispositivo de mirar el diseño web Responsive. Entonces, piensas en diseños pequeños, medianos y grandes o diseños de una sola columna, dos columnas, múltiples columnas, ese es un buen comienzo. Entonces si quieres ponerte más granular, piénsalo como diseño de contenido. Donde, estás tratando de hacer estos puntos de ruptura, estás tratando de hacer estos diseños basados en los detalles de tus contenidos. Entonces, un sitio con muchos artículos de texto es realmente diferente a un sitio con muchos videos, por lo que quieres separar puntos de ruptura, no basados en iPad sino en cuando tu video ya no tiene mayor resolución, o lo que sea. Entonces, se te ocurre estos puntos de ruptura iniciando pequeño. Empiezas con tus diseños móviles, tu código móvil, y luego agrandas la ventana hasta que empiezas a ver que se ve mal, y luego añades un punto de ruptura y luego repites. Entonces, ¿a qué te refieres mal? Entonces, este artículo sobre diseño de contenido fuera, esa es una referencia realmente buena por parte de los chicos que hicieron Gridset. Habla de que obtienes estos patrones como sietes donde la leyenda asociada está colgando de la imagen y en realidad no lo es, luciendo bien junto a ella ya. Derivas con las cosas del espacio en blanco, se ve que las imágenes en la columna izquierda están haciendo un bloque vertical fuerte pero, en realidad deberían estar más asociadas con el contenido a la derecha de ellas. Después pellizca donde tus márgenes o tus canalones empiezan a descomponerse, que veas que muchos de los titulares e imágenes no está claro qué se asocia con qué. Entonces, ahí es donde empiezas a decir, “Oh, tiene que haber un punto de ruptura” o “Oh, este diseño realmente no está mostrando mi contenido”. Otra cosa a mirar, es la longitud de la línea. Si tu texto se está extendiendo por toda la página, 45 a 75 caracteres se considera óptimo, 90 caracteres sigue bien, para una lectura rápida pero, cuando se hace realmente largo un punto de ruptura mejoraría el legibilidad. Entonces también si tienes un diseño de columna única y seguías estirando esto más ancho y más ancho, obviamente que los espacios subutilizados, y podrías una vez que tengas suficiente espacio, flotar esos elementos de navegación uno al lado del otro y obtener más contenido en la pantalla para el visitante. Entonces, ahí es cuando se agregan puntos de ruptura. Entonces, ves el diseño algo como esto, con rejillas. No siempre tienes que usar cuadrículas en el diseño web pero, cuando se trata de desarrollo y especialmente de desarrollo receptivo, hacen las cosas mucho más fáciles, por ti justo entonces haces estos contenedores y estas plantillas responsive en lugar de hacerte saber 100 diferentes elementos individuales en la página responsive. Entonces, la forma en que agrega puntos de ruptura es a través de consultas de medios CSS. Se ven así, solo suele estar ahí en la parte inferior de un archivo CSS y, solo empieza con @media y luego pones tu parámetro podría ser min-width o max-width, hablaré de la diferencia, y entonces solo dices cuando llegue a 768 y superior sabes que quiero cambiar ese bloque para que sea más estrecho. Entonces por defecto, un bloque sería 100 por ciento de ancho así que entonces dirías en este punto quiero bajar a 75, en este punto quiero ponerme por debajo de 50 o, sin embargo, de lo contrario estás planeando tus diseños. Pero también podemos hacer consultas de medios como, o puntos de ruptura como Sass mixin. También podemos hacer puntos de ruptura como mixin de Sass. Entonces eso se ve así, es un poco abrumador arriba, pero realmente útil cuando lo estás implementando en todo el archivo. Entonces, establecemos una función llamada punto de ruptura y pasamos una variable llamada punto, y luego se puede ver más adelante abajo hay otro marcador de posición que es contenido. Entonces, a lo largo de nuestro CSS en nuestra clase de ejemplo de intro dash hero aquí, diríamos incluir este mixin de break-point y lo pasaríamos la variable de medium, y entonces nuestro contenido es que ancho equivale a 75. Por lo que al configurar este mixin multilínea al principio, solo podemos tener mixins muy claros y simples más adelante. Entonces, uno sin embargo es que hay alguna discusión sobre, si está bien poner consultas de medios dentro de clases como esta. Hace que el CSS compilado sea mucho más largo pero en mi experiencia es mucho más fácil mantener y es mejor porque el estilo de respuestas no se olvida. Especialmente para sitios con plugins, es cuando eliminas ese plugin más tarde muchas veces hay CSS heredado salpicado por todo el archivo y si lo tienes todo dentro de la misma clase estás seguro de que estás manteniendo las cosas limpias. Entonces, sigue de nuevo a Ethan Macrcotte en Twitter, está escrito sobre esto y veremos cuáles son las últimas prácticas. Está bien. Entonces, ahora que tenemos todo listo, podemos usar nuestra grilla que es Bourbon Neat. En el sitio Bourbon Neat puedes ver algunos ejemplos, así que aquí tienes un diseño de muestra. Entonces, ves que nuestro contenedor div solo necesita este mixin de una línea de include exterior-container. Entonces si quisiéramos hacer dos columnas debajo de eso, simplemente agregaríamos esta línea de incluir span-column y seis de 12 columnas, es una cuadrícula de 12 columnas. En cada una de esas dos clases y simplemente flotarían justo al lado de la otra, y se puede poner cualquier número, por lo que de una a 12 ahí dentro. Entonces solo necesitas ponerte la última de la columna de la derecha que te gustaría poner include omega solo para despejar el margen en ese último div. Entonces, eso se ve así, en tu CSS. Nuevamente el contenedor tiene que incluir de exterior-container y para mí, voy a quitar todas las canaletas en mi cuadrícula así que voy a usar este incluir fila igual tabla. Entonces mi imagen de héroe a la izquierda, voy a decir que va a ser de ancho completo en el móvil, y va a ser de ancho completo en tablet. Pero una vez que me guste el punto de ruptura de escritorio que llamo grande, voy a decir que solo usemos ocho de esas 12 columnas hagámoslo dos tercios del ancho de la página. De esa manera, voy a encajar mi blurb a la derecha, para que eso consiga la inclusión de span-column de cuatro, así que es un tercio de la fila. Entonces también le doy el intro-blurb este incluyen de omega así, ya que es la última sección de esa fila. Entonces, acude a los docs Bourbon Neat para ver los detalles. De nuevo, es una cosa más para aprender pero en mi experiencia es super, es la forma más sencilla de hacer cuadrículas, es semántica, mantiene todas tus clases de grid en tu CSS, en lugar de tenerlas dispersas por todo tu marcado, como algunos frameworks y hace que la respuesta sea fácil refluir los diseños. Podrías haberte dado cuenta antes de que hice min-width en lugar de max-width en mis consultas de medios, y esto viene de un enfoque Mobile-first. Luke Wroblewski ha contribuido tanto a esta idea, y es realmente útil porque un enfoque Mobile-first, crea menos CSS en ellos porque, estás usando el diseño más simple como tu base. Entonces, no necesitas flotadores en un diseño móvil si estás alrededor un solo diseño y así solo los estás agregando si los necesitas en diseños más grandes, por lo que al final crea menos CSS. Obliga a las discusiones de optimización porque estás tratando con teléfonos, y estás pensando en la carga de páginas y los tamaños de activos. Estás usando este enfoque de realce progresivo, que comenzamos con el entorno más simple posible, y luego agregamos cosas para dispositivos cada vez más capaces, frente a esta vieja escuela, metodología más antigua de degradación agraciada. También reconoce la realidad de que cada vez más personas están en los teléfonos. Los usuarios globales tienden a más allá de los teléfonos así que si seguimos pensando en nuestros sitios como sitios de escritorio donde estábamos un poco equivocados. Nuevamente, el diseño de una columna que va Mobile primero te obliga a resolver tu jerarquía de información, colocando las cosas en un orden lineal. Entonces, con todo eso, hagamos nuestro estilo Responsive. Entonces, ve a tus plantillas, hazlas receptivas agregando estas consultas de medios. No te preocupes por la tipografía o los colores aún, es realmente tentador seguir adelante y hacer lo fácil de rellenar fondos, y rellenar tipos de fuentes, pero trata de hacer esta cosa complicada para que puedas conseguir que tu prototipo vuelva a fluir. Nuevamente te he dado una plantilla de ejemplo para archivos Sass, por lo que debería ir un poco más suavemente. Por lo tanto, consigue configurar tu estilo Respuestas. 7. Las tripas: Está bien. Ahora, vamos a meter todas las piezas de contenido en nuestros diseños. Las herramientas que necesitarás dependerán en gran medida de tu diseño, pero te daré una visión general de los principales jugadores. El primero es la tipografía. Solías tener que rebanar todos los titulares de fantasía como una imagen, pero ahora un montón de empresas han descubierto las complejidades técnicas y de licencias de las fuentes en la web. Entonces, ojalá, tus maquetas fueron diseñadas con fuentes que tienen disponibles versiones de fuentes web. Typekit fue uno de los primeros y mejores. El kit es fácil de configurar y te dice cuánto añadirá cada fuente al tamaño del archivo. Te dan todo el CSS de muestra, y puedes cambiar de opinión y cambiar de fuente más tarde si quieres. Google también es súper simple, y te da una buena sensación del peso de la página con su poco dial rápido. Al igual que Typekit, solo tienes una línea de JavaScript que pegas en tu encabezado, y luego tienes el CSS de muestra que usas a lo largo de tus archivos Sass o CSS. Font Ardilla es otro sitio realmente útil. Puede generar todo el código que necesite para hospedar los archivos de fuentes usted mismo, y es bueno para encontrar o cargar y convertir tipos de letra de código abierto. De igual manera los iconos se han vuelto mucho más fáciles. Si estás usando un conjunto de iconos que compraste o descargaste en línea, normalmente lo cortarías como imágenes, o ahora puedes convertirlo en fuentes de iconos. Puedes cambiar el tamaño, el color y otras propiedades CSS cuando quieras. He estado diseñando con Symbolset, que tiene muchas familias de iconos geniales, y hace esta cosa mágica donde escribes la palabra, como amor, y la convierte en el ícono, un corazón. Esto es cierto tanto para maquetas como para código, por lo que es rápido y semántico. Cuando compres la fuente, vendrá con el CSS de muestra que necesitas. Un iComoon es realmente divertido si quieres crear tu propia fuente de icono. Trabajé en un sitio llamado Riffle, donde hice una fuente personalizada para nuestros 20 iconos. También puedes encontrar y usar iconos de código abierto allí, y puedes descargarlos, y modificarlos, para luego recrear si quieres, de nuevo, armar tu propia fuente de icono. También hay un formato vectorial que funciona en la web, SVG. Por lo tanto, puedes hacer gráficos vectoriales e ilustrador de esbozo y utilizarlos en la web. Esto es ideal para pantallas HD y para tamaño de archivo. Entonces, solo tienes que seguir el tutorial y trucos de CSS si quieres hacer eso. En cuanto a los videos, los videos responsivos son en realidad bastante simples. Por lo general, no estás alojando el archivo de video en tu propio servidor usando Vimeo o YouTube, para que no estés lidiando con todos los problemas de ancho de banda, pero aún necesitas averiguar cómo hacerlo sensible. Pero, de nuevo, es bastante simple porque realmente solo hay una opción principal. Es este plugin impresionante llamado Fitvids. Entonces, solo descargas el archivo, agregas el archivo JavaScript a tu carpeta de activos, y luego lo llamas desde tus páginas HTML y lo aplicas a tu maqueta de video. Las imágenes son probablemente la parte más lenta de la exportación de activos. A lo mejor el diseñador está proporcionando rebanadas o tal vez el desarrollador quiere que los archivos fuente solo tomen esas decisiones por su cuenta. Pero, quien sea que lo esté haciendo, claro, quieres que las imágenes sean lo más pequeñas posible, manteniendo al mismo tiempo la mejor calidad posible. Por lo tanto, la paleta Guardar para Web en Photoshop es el lugar predeterminado para hacerlo. Aquí se puede ver la vista de cuatro arriba, donde se ve el original en la parte superior izquierda y se puede juzgar si se puede pasar con este JPEG en la parte inferior izquierda, que es menos de una décima parte del tamaño, o necesitamos el color completo calidad del PNG en la parte superior derecha, que es sólo la mitad del tamaño. Entonces, tú tomas estas decisiones aquí y puedes modificarlas como quieras. No me preocupo por las imágenes de retina para crear prototipos, pero si estás haciendo un sitio de verdad, querrás revisarlo. Eso también lo harías aquí. Se exportaría JPEG al doble de tamaño para la pantalla HD, y se puede pasar con una calidad como 40 por ciento en eso. Pero, de nuevo, fíjate en ello. Yo, típicamente, estoy haciendo prototipos para sitios más pequeños y no sitios listos para retina. Si estás optimizando para la carga de página, también debes considerar CSS Sprites. Aquí tienes un ejemplo del archivo de resultados de búsqueda de Google. Cada gráfico de la página forma parte de esta imagen. Entonces, el navegador del usuario solo tiene que hacer una llamada telefónica al servidor y no 30, lo cual es un gran ahorro en tiempo de carga de páginas. Hay herramientas para ayudarte a crear y mantener estos sprites porque es una especie de dolor. Si estás trabajando en Sketch, puedes exportar los PNG simplemente arrastrando y soltando cualquier archivo, cualquier capa en Finder, y exportará esa capa como un sector PNG. O bien, puedes hacer clic en la capa, y si ves en la parte inferior derecha, había un botón que dice Hacer Exportable y luego se le ocurre estas opciones que puedes establecer ajustes de exportación particulares. Entonces, Sketch es realmente genial una vez que estás haciendo la transición a la construcción del sitio. Entonces, de nuevo, en Photoshop harías Guardar para Web o también podrías probar esta app llamada Slicy, que generará de forma automática rodajas de todas tus capas. Sketch es genial debido a la “arrastrar y soltar” y también a la configuración particular, y usa y guarda todas estas imágenes en tu carpeta de imágenes de barra diagonal de activos. Si estás haciendo imágenes receptivas, necesitas pensar en dos partes; están escalando la imagen y luego la están sirviendo. El escalado es solo establecer el ancho y los porcentajes de la imagen. Entonces, eso es bastante sencillo. Pero si estás siendo amable con tus usuarios móviles, que no necesitan esa imagen de héroe de alta resolución, también les servirás una versión más pequeña de cada imagen. Es como Fitvids en eso, hay una forma real de hacerlo en este punto, aunque la tecnología está cambiando mientras hablamos. Entonces, esto se llama Picturefill, y es otro combo HTML, CSS, JavaScript, donde solo tienes que seguir las instrucciones y pegar el código apropiado en tus páginas. Pero éste en realidad se convertirá en parte del lenguaje HTML en el futuro, por lo que estás aprendiendo de antemano. De lo contrario, solo vas a exportar tus imágenes para tamaños de escritorio y usar porcentajes para reducirlas y hacer que todos tus usuarios móviles estén muy tristes cuando obtengan sus facturas de ancho de banda. Entonces, adelante y haz eso. Prepara tus activos, selecciona tu servicio webfont y agrega ese script al encabezado de tu página para que puedas empezar a usar el CSS en la siguiente lección. Harás lo mismo con cualquier fuente de icono que quieras usar, y luego exportarás todo el resto de tus imágenes a tamaño de escritorio. Usa SVG donde puedas e intenta optimizar todo lo demás como JPEG o PNG si los necesitas. 8. La piel: De acuerdo, ahora, finalmente vamos a dejarnos entrar realmente en el estilo de nuestras páginas. Entonces, nuestra lectura de antecedentes para esto sería el libro CSS3 de A Book Apart. Nuevamente, queremos pensar en los módulos y cómo esto podría aplicarse al estilo. Entonces, queremos recordar que los sitios web están hechos de sistemas. Por lo que no sólo lo tienes un millón de piezas de texto diferentes. Tienes un H1, o un H2, o un H3. Entonces, quieres codificar esos primero y luego hacer la menor cantidad de variaciones posible. Entonces, no todos estos millones de estilos individuales sino sistemas modulares de estilos. Entonces, en cada uno de tus parciales, así por ejemplo, tu menú parcial, quieres pasar de lo general a lo específico. Entonces, primero haces tus estilos base para todo ese elemento o la clase predeterminada para ese elemento, luego haces tus estilos modulares. Entonces, esas son las piezas reutilizables que tendrás en diferentes páginas y plantillas, y luego, te meterás en las plantillas específicas de página si tienes algo que sea un diseño personalizado. Entonces, siempre estar pensando en cómo puedes hacer de algo un estilo modular en lugar de un estilo único. Entonces, Empezando. Tienes un sitio web que podría verse algo así. Es sensible pero tal vez las rejillas aún no son del todo perfectas y no tienes ninguna de la configuración de estilo. Pero el código se ve mejor. Si lo tienes organizado, sangrado, puedes ver que tenemos nuestros nombres de clase semánticos ahí. Está todo listo para ser estilizado. Entonces, esta parte irá realmente rápido si configuramos correctamente nuestro marcado y capacidad de respuesta. Entonces, solo vas a seleccionar cada uno de estos elementos para que la fila de promoción o el retiro de promoción div, y luego pasar y aplicar las propiedades que necesite. Al igual que el html, es un gran vocabulario que puedes construir. Estas son todas las letras que puedes usar, y solo usarás las principales para empezar, fondo, borde, color. Pero hay algunas novedosas como flexbox que se están acercando que te harán la vida mucho más fácil, así que por eso es divertido seguir aprendiendo estos. Nuevamente, Coda tiene libros incorporados. Entonces, si no estás seguro de cómo funciona el bloque de visualización o la pantalla en línea, o mostrar inline-block, puedes simplemente buscarlo ahí mismo, o por supuesto, siempre debes estar buscando en Google. Puedes usar sitios como puedo usar para saber cuáles son los retrocesos del navegador y qué tan nueva es esa propiedad. Entonces también puedes usar varios tipos de selectores para ser más específicos. Por lo tanto, probablemente has visto un foco de colon o un punto flotando para indicar un enlace que se ha seleccionado o enlace que se está flotando. Pero hay todo tipo de otros pseudo-selectores donde se puede hacer nth child para agarrar cada tercer elemento de una lista, o último hijo si se quiere ocultar el borde inferior en algo, en una lista de artículos. Entonces, de nuevo, sigan aprendiendo estos. Ellos pueden hacer tu vida mucho más fácil. También hay algunas herramientas nuevas para ayudar a convertir tus archivos fuente a código. Si estás usando Photoshop, está Project Parfait, algo nuevo de Adobe, donde subes el PSD y te dará el CSS para cada elemento. Entonces en Sketch, puedes seleccionar cualquier elemento y copiar el CSS, click derecho sobre él y obtendrás un panel Copiar CSS, y luego eso te dará algo como esto. Ves a la derecha, me dicen la familia de fuentes, el tamaño de la fuente, el color, y lo hicieron en RGBA porque es semitransparente, y luego la altura de la línea. Entonces, te da lo básico y luego puedes construir a partir de ahí. Algo que hay que saber de CSS es que, todavía hay algunas discrepancias en muchos de los navegadores. Por lo general, tendrías que poner diferentes prefijos en propiedades como border-radius como para Mozilla, o para Opera, o para todos los demás navegadores principales. Eso se ve algo así. Para WebKit, aquí está la versión de la propiedad de animación de la propiedad background. Entonces, sí parece bastante tedioso. Entonces, ¿realmente tenemos que hacer todo esto? Por suerte, no y ese es otro beneficio del Bourbon. Entonces, cuando uses estos mixins, de nuevo, solo puedes usar un mixin de una línea y pasar la variable para tu border-radius y luego la biblioteca generará todos los prefijos de proveedor en tu CSS según sea necesario, y la mejor parte es que, cuando los navegadores cambian su código o cuando ya no necesitas hacer prefijos de proveedor, el mixin se actualiza, por lo que no tienes que hacer un seguimiento de qué prefijos de proveedor aún se necesitan o no. Se puede confiar en la biblioteca para que se encargue de eso. Nuevamente, CSS-tricks te dará algunas otras opciones. Yo uso Bourbon. Yo uso una biblioteca. Pero hay algunas herramientas como Grunt o Autoprefixer si estás construyendo aplicaciones más complejas que puedes usar. Entonces sí, sigue aprendiendo CSS. Hay muchos recursos en línea. Ahí está todas estas consultas de medios son parte de estas reglas de aplicación, cara de fuente cuando estás haciendo fuentes web, eso es parte de estas reglas de aplicación, así que ¿por qué no aprender el resto de esas, y luego pseudo elementos son donde puedes hacer un muchas cosas geniales donde puedes realmente en tu CSS poner contenido en tu html. Entonces, si alguna vez quieres agregar un icono frente a un enlace, puedes hacer un pseudo antes elemento y luego darle estilo con tu fuente web y agregar un icono. De nuevo, eso es CSS, se puede colorear y dimensionar, todo sin cambiar tu marcado. Entonces, la Mozilla Developer Network cuenta con un gran manual de referencia CSS, por lo que puedes comprobar eso. Después de eso, podemos pensar en más efectos. Cuando vas a entrar en animación y transiciones y otro tipo de efectos a lo largo del tiempo, quieres recordar tus pautas de marca. Entonces, si las cosas simplemente están apareciendo o deslizándose, debería ser consistente con la personalidad inicial que planteaste para tu marca e idealmente, tu diseñador también estaría guiando este estilo. A pesar de que, a menudo se olvida. Entonces, utilizo jQuery en su mayoría. Esta es la biblioteca de animación más popular. Ha sido por siempre y así que si hay casi todo lo que quiero, generalmente puedo encontrar en jQuery solo un simple desvanecimiento de entrada y salida para las capas flotantes. A veces algunos deslizan hacia abajo o deslizan hacia arriba. Si ves un sitio de una sola página y está haciendo un scroll para efecto donde hay un nav superior y haces clic y se desplaza a mitad de la página, eso generalmente se hace con jQuery. Entonces, aquí es donde solo puedes ir y buscar aquí en el campo para encontrar el efecto en particular que necesites. También hay, para algunos de los hechos comunes, hay tutoriales o bibliotecas que se han armado. Por lo que la tendencia de Parallax que iba dando vueltas con estos sitios de una sola página, donde la capa frontal y la capa posterior se desplazarían a diferentes velocidades y crearían este efecto de videojuego, que se llama Parallax. Ahí hay demos basados en el original Nike Better World, el primer sitio que hizo eso. Entonces, puedes buscar bibliotecas y sistemas de archivos para ayudarte a hacer ese tipo de cosas, o cosas como este diseño en cuadrículas que se usa en Pinterest y otros sitios. Eso fue desarrollado por David DeSandro. Originalmente fue el plug-in de Albañilería y ahora tiene pareja, ahí está Isotopo y Packery. Entonces, puedes mirar esas bibliotecas JavaScript y eso te dará la capacidad de hacer diseños complejos. Este es uno donde al igual que el Bourbon necesita, hace una rejilla fácil pero con Albañilería o Isotopo o Packery. Packery te permite arrastrar y soltar esos elementos en otras secciones. isótopo te permite filtrarlos para que puedas hacer clic y ver el reflujo de la cuadrícula en función de tus criterios de ordenamiento. Entonces, simplemente te da una interactividad más compleja. Entonces, esa podría ser otra clase entera en sí misma. Entonces, empieza a investigar algo de eso si te interesa. Entonces, desde aquí, solo entra y empieza a peinar tus páginas. Un inicio con las propiedades CSS para sus contenedores, y su texto, y sus activos principales, y agregar algunas respuestas estilo para cada punto de ruptura como se muestra en sus maquetas. Recuerda pasar de lo general a lo específico. Entonces, intenta hacer clases universales tanto como puedas, y luego clases modulares, y luego último recurso son las clases individuales. Entonces, diviértete. 9. Pruebas: De acuerdo, estamos en el homestretch en esto y ahora a la parte favorita de todos que está probando. Es realmente importante volver a rodear los requisitos de tu proyecto y recordar lo que aceptaste en qué dispositivos tienen que ser compatibles, qué navegadores tienen que ser compatibles porque es realmente diferente entre plataformas y entre dispositivos. Al igual que construir, las pruebas nos hacen mejores diseñadores porque entendemos que no todo el mundo está en un iPhone y entendemos lo diferentes que son todas las diferentes proporciones e interfaces y nos hace mejores diseñadores. Entonces, Jacob Nielsen habla de usabilidad y cómo a medida que sigas iterando cada vez que pruebes probablemente arreglarás algo o cambiarás un poco la interfaz y eso es una iteración. Entonces, mientras haces esto vas a encontrar todo tipo de bichos y cosas donde la gente no está viendo cosas o no está funcionando como se esperaba o no funciona en ese dispositivo en particular y así te vas a deshacer de tanta interacción bugs que solo existe porque los sitios web son un medio complejo y eventualmente hasta llegarás a un lugar donde comienzas reconceptualizar la interfaz que te das cuenta de que el modelo mental del usuario tal vez es totalmente diferente y tú puede reconstruirlo de una manera diferente y agilizar las cosas. Entonces, es algo va a ser un proceso continuo de construcción y pruebas y construcción y pruebas. Entonces, si intentas probar diferentes dispositivos, idealmente estás probando en dispositivos reales pero no todos tenemos un millón de teléfonos. Es posible que tengas uno o dos teléfonos viejos o podrás pedir prestado algunos a amigos pero las empresas más grandes mantendrán un laboratorio de dispositivos completo en la casa. Porque hay muchos emuladores pero no renderizan el código exactamente de la misma manera. Entonces, si realmente estás haciendo una codificación adecuada, querrás tener acceso a un laboratorio de dispositivos. Entonces, lo primero es que solo puedes empezar a pensar en los diferentes anchos. Entonces, podríamos parar en 320 porque ahí es donde están los iPhones pero algunos dispositivos son aún más estrechos, así que podemos mirar esos y aquí hay una cosa simple que Matt Kersley construyó sobre ello solo los tiene a todos en la misma ventana, así que no tienes que ir a diferentes dispositivos pero al menos puedes ver algunos puntos de ruptura para tu diseño todo uno al lado del otro y empezar a hacer algunos planes ahí. También puedes usar Edge Inspect si quieres ser un nivel más serio. Esto te permite configurar un perfil en todo el que funcione a través de cualquier tipo de dispositivo que vincules a él. Entonces, puedes usar tus herramientas de depuración en cualquiera de esas plataformas y es un poco de configuración pero es una herramienta realmente útil si estás tratando lidiar con el universo de dispositivos que están ahí fuera. Entonces por supuesto navegadores. La pila del navegador es mi herramienta principal donde puedes iniciar sesión en una máquina virtual. Por lo tanto, puedes iniciar sesión en Internet Explorer, versiones anteriores e incluso Firefox se ve diferente en todas las plataformas. Entonces realmente necesitas hacer muchas pruebas y de nuevo esto realmente depende de si estás prototipando y lo seriamente que estás prototipos o si estás preparando un sitio para un lanzamiento, es muy diferente cuánto trabajo tienes que hacer aquí. Entonces, esta herramienta te permite navegar en realidad en una máquina virtual lo cual es útil si no tienes acceso a los sistemas reales. Pero para mí la principal prueba que estoy haciendo también es con los usuarios. Nuevamente, todos tenemos este Malkovich Bias donde es realmente difícil, todos imaginamos que la gente usa Internet exactamente de la misma manera que nosotros. Hablé mucho sobre las pruebas de usuarios en la primera clase de esta serie. Pero por ahora solo diremos que en este punto del proceso usertesting.com es la herramienta más útil que puedes enviar, publicas una serie de tareas y luego puedes elegir entre su grupo de probadores y puedes especificar la edad, habilidades, una plataforma en la que están, como $40 por prueba, bien vale la pena y luego puedes reproducir el video de la prueba a como 150 por ciento, como 1.5 velocidades para que puedas verlas más rápido sí toma un rato si eres haciendo una tonelada de pruebas normalmente quieres probar como tres, cinco personas en cada iteración pero puedes acelerar la reproducción. Se ve algo así lo pasas y en la parte superior derecha de la página ves este usuario la primera mitad que les hemos dado y podemos escribir comentarios, podemos estampar el tiempo las notas a la derecha para que regresemos ya que estamos revisando las pruebas. Entonces, esta es absolutamente una herramienta invaluable cuando estás haciendo cuando estás en el grueso del desarrollo y cuando trabajé en Desarrollo ágil haríamos pruebas de usuario cada sprint. Entonces, construiríamos algo y luego enviaríamos a algunas personas a través de él, que nos permitiera probar a través de múltiples plataformas y ver cómo se veía realmente y cómo los usuarios realmente estaban entendiendo las cosas. Eso haríamos cada sprint individual. Entonces, la forma en que preparas las pruebas de usuario es con escenario. Entonces, de nuevo pasé por esto en detalle en la clase de planeación en esta serie pero básicamente solo identificas las historias de usuarios más importantes como un usuario que regresa está tratando de contactar con soporte y luego las frases como escenarios para la prueba. Entonces, esto ayuda a la persona que está haciendo la prueba a ponerse en esa mentalidad. Entonces dirías, encontraste un error en tu cuenta y necesitas contactar con atención al cliente y luego a partir de ahí podrías hacer particular, hay todo tipo de pruebas sobre qué ves primero en esta página o a dónde irías a ver cómo están interpretando tus diseños y tu sitio. El último tipo de prueba en la que realmente enfocarse es la carga de página. Si estás en esto y optimizando la velocidad y otra vez para los prototipos no siempre es una variable pero para los sitios de producción es una variable enorme. Entonces, ver a Paul Irish hizo una gran charla explicando la carga de páginas y cómo funciona y realmente te hace entender cómo funciona Internet en realidad. Que las cosas que afectan lo rápido que se carga tu página en orden de importancia son el número uno esta cosa llamada índice de velocidad que es lo rápido que carga las cosas por encima del pliegue. Realmente quieres optimizar, puedes hacer como técnicas locas para inline tu CSS por solo las cosas por encima del pliegue como técnicas realmente avanzadas si realmente te estás poniendo serio con eso. El segundo es que quieres reducir el número de solicitudes totales, como hablamos con imágenes, cada archivo que estás vinculando es como una llamada telefónica al servidor. Entonces, por eso harías un sprite CSS porque es una llamada telefónica en lugar de 50. Entonces, reduciendo el número de solicitudes que estás haciendo y luego se trata de tu tamaño de transferencia de imagen. Entonces, por supuesto que la optimización de imagen es enorme, quieres cortar tus jpegs, cortar tus fotos tanto como puedas mientras mantengas la calidad y eso es aproximadamente el tamaño total de transferencia. Entonces todas las demás cosas tu JavaScript, tu CSS, suman, son mucho más pequeñas que las imágenes pero sí suman y luego el número de solicitud de imagen. Entonces de nuevo, CSS sprites este tipo de cosas. Entonces, esto es otra vez, para realmente si te vas pro en tu sitio, para crear prototipos esto solo es divertido saberlo porque te ayuda a entender Internet pero quizá no estés gastando demasiado tiempo en él para un proceso rápido. Entonces, las principales herramientas para esto son que vayas ySlow, es lo mejor y es que solo puedes hacer conseguir como una extensión de Chrome o un marcador en ella y solo tienes que hacer clic en el botón y analizará tu sitio y luego por supuesto las herramientas de Chrome Dev, sumergirse en eso y se pueden ver líneas de tiempo de cuándo se carga cada elemento de la página y luego también hay un sitio llamado prueba de página web que pasará y hará un análisis por ti. Entonces, YSlow solo se ve así y es divertido hacerlo solo porque de nuevo te da una sensación de cómo funciona Internet que me está dando un error este es un análisis de twitter.com y está diciendo que hasta Twitter se pone una F. Supuestamente, no están usando una red de entrega de contenido o no están usando cabecera caduca. Entonces te da un sentido otra vez, un vocabulario para el lenguaje técnico de Internet, lo cual es bastante interesante. Entonces, pasa y esboza tus pruebas, vuelve a los requisitos de tu proyecto y haz un plan para qué dispositivos necesitas probar y cómo vas a conseguir un control de esos dispositivos o dispositivos virtuales, qué navegadores vas a probar y de nuevo, cómo vas a hacer eso, qué pruebas de usuario quieres hacer. ¿ Se trata de un cierto flujo que quieres hacer? Se trata de ver cómo funcionan estas pantallas en diferentes plataformas? Nuevamente, ejecuta algunas pruebas de velocidad solo por diversión y si estás trabajando en optimizar tu sitio, regresa y trabaja en hacer que tus activos sean más pequeños y concisos. 10. Documentación: Está bien. Estamos en el paso final en nuestro proceso de desarrollo Web que es la documentación, y sí para los demás, pero definitivamente para ti mismo. Esto es esencial. Lo número uno son los comentarios. Te agradecerás tanto cuando vayas a editar tu sitio dentro de un mes y tu código está bien comentado y es fácil averiguar qué clases se aplicaron a qué secciones y a qué páginas. El gran test sin embargo es que alguien más puede leer y usar tu código. Es muy raro que un sitio sea trabajado por una sola persona. Entonces, casi siempre viene alguien más tarde. Especialmente si se trata de un sitio cliente y necesitan poder entender cómo funciona el sitio. Comentar tu código es otra cosa que separa a los desarrolladores profesionales de los aficionados. No tienes que preocuparte por agregar demasiado volumen a tus archivos y en Sass especialmente, puedes hacer los comentarios de una sola línea que son solo líneas que comienzan con dos barras inclinadas y esas quedarán despojadas del CSS compilado. Entonces, cuando abras el archivo Sass, estarán ahí para ayudarte, pero el CSS no se incrementará de tamaño en absoluto. Y luego también hay regulares que están entre las barras inclinadas con el AsteraX y esos son comentarios multilínea. Esos se conservarán, así que si quisieras tener algo importante sobre tus fuentes, o sobre tus secciones, para seguir apareciendo en el CSS, eso está bien, pero de nuevo los usuarios realmente también. Realmente no agrega mucho y el tamaño del archivo, e incluso puedes establecer tu minifier para despojar todo el espacio en blanco y despojar también todos los comentarios. Entonces, no tienes que preocuparte por agregar demasiados comentarios solo escribe todas tus notas ahí como locas. Entonces definitivamente quieres entrar y llenar tu archivo Léame. Entonces, puedes ver aquí he vuelto atrás y te he dicho qué carpetas hay en esta demo, repositorio y en mi cuenta de GitHub, hay una plantilla, hay una predeterminada y luego estoy trabajando en ese sitio de demostración. Entonces, vuelve atrás y llena eso. Entonces, es fácil de entender de nuevo para ti y para los demás, y el siguiente nivel es hacer una guía de estilo. Entonces, esto te servirá bien a medida que crece el sitio. Si planeas que esto se haga más grande entonces quizás quieras considerar una guía de estilo, y es necesario porque no estamos diseñando un elemento estático. Poster, es como si todo estuviera encerrado mandas un depresor está hecho, y un libro tienes que ser un poco más sistemático, quieres asegurarte de que los títulos de cada capítulo sean del mismo tamaño y posición y lo que sea, pero el tamaño son infinitamente más complejo. Entonces, no podemos prescribir, no podemos hacer especificaciones para cada página. Cambian, son receptivos, son flexibles. Entonces, una guía de estilo es realmente la mejor manera de preservar el aspecto de tu sitio porque facilita a los desarrolladores y diseñadores continuar con el trabajo que ya se ha hecho. Alist Apart como siempre tiene grandes artículos sobre esto. Acaban de tener una sobre la creación de guías de estilo de Susan Robertson, quien es una gran desarrolladora front-end. Ella armó toda una lista de ejemplos guías de estilo. Se puede ver cómo estos tienden a funcionar y cómo tienden a ser útiles para desarrolladores web y diseñadores web. [ inaudible] como siempre, es una gran referencia para el branding y este tipo de cosas y así aquí te dejamos un ejemplo de cómo se ve una buena guía de estilo para un Sitio Web. Entonces, a la izquierda ves toda nuestra navegación. Hemos abordado todos nuestros elementos principales. El grid, la tipografía, si tenemos foros, tablas de navegación, donde incluso tienen cosas personalizadas que llaman listones o el especial de Freddy, iconos de Freddie y aquí un ejemplo de sus mensajes de retroalimentación. Entonces, como diseñador si estás diseñando un nuevo pagado por el sitio y necesitas hacer estallar un mensaje de error, no deberías estar diseñando uno nuevo. Deberías estar usando las cosas que ya están ahí. Entonces, cuando tenemos una guía de estilo, solo puedo ir a navegar por esto, puedo ver cómo se va a ver, poder marcarlo en mis comps de diseño, y luego incluso hay código y es descripción de cómo usar su clases particulares. Todo en esa misma página. Entonces esto es genial y muy servicial. Yelp tiene otro enorme donde han pasado algún tiempo mostrándote todos los encabezados, la tipografía principal, todos los diferentes botones y las clases que utilizarías para generar ese botón. Entonces otra vez, alguien no va a codificar otro pequeño botón naranja desde cero, pero saben que ya existe uno. Aquí hay una que hice para riffle donde apenas se trataba, aquí están nuestras principales variables de color que estamos usando y luego pasé por todos los, incluso los patrones de JavaScript y algunos de los patrones de QA que estábamos usando, fue realmente útil para tener eso todo codificado. Se ponen bastante enormes como se puede ver a la izquierda, así es como terminó esa guía de estilo. Si solo estás haciendo un pequeño prototipo, no necesitas hacer esto, pero si estás haciendo algún tipo de sitio, si tu sitio va a tener algo de longevidad entonces seguir adelante y hacer esto te hará la vida más fácil a largo plazo. El elemento básico es que estás cubriendo todos los elementos base del HTML y luego cualquier llamada especial y cualquier módulo especial que sea replicable para futuros diseños y para tus marcas, personalidad online. Nuevamente, el laboratorio de patrones de Brad Frosts, sitio es un ejemplo genial. Un recurso genial que podrías usar como ejemplo para esto para crear tu propia guía de estilo. Entonces, ve y limpia, comenta tu código, y luego puedes descargar. He incluido una página de mi estilo de la plantilla martillada de pin de Simon Cox, eso es realmente útil, tiene todos estos elementos HTML. Por lo tanto, podrías simplemente pasar y asegurarte de que se ve como lo esperas también y asegurarte de que todos esos elementos base estén peinados y luego agregar más elementos y crear más guías de estilo si lo deseas y luego asegúrate de llenar fuera el Readme.Markdown para tu repositorio y puedes editar markdown en stack edit o archivos como iA Writer en tu escritorio y luego simplemente volver a subirlo usando el árbol de fuentes. Entonces, eso es todo. Ya lo hemos hecho. Has construido todo un Sitio Web, conoces un buen proceso y ojalá, sigas haciéndolo tuyo y encontraras las piezas que funcionen mejor para ti y siempre seguirás aprendiendo. Entonces, si tienes algo más que te gustaría aprender o cualquier pregunta sobre todo esto, son muchas cosas. Siéntete libre de tuitearme y hazme saber qué piensas o qué te gustaría saber más. Sí me encantó, me encanta hablar más. Muchísimas gracias. 11. ¿Qué sigue?: manera.