Técnicas para documentar tus proyectos web
[ad_1] Una de las mejores cosas de crear sitios web es que eventualmente enfrentarás el mismo desafío más de una vez. Esto significa que sabrá exactamente qué hacer la próxima vez. Eso es si recuerdas dónde y cuándo has visto el problema antes. ¿Cuántas veces ha necesitado lograr algo y se dio cuenta de que había escrito un código que encajaba perfectamente? Entonces, ¿cuántas veces ese mismo fragmento ha sido casi imposible de encontrar? Este es un desafío común para los diseñadores web. Esta es la razón por la que escribir la documentación básica del proyecto puede ser beneficioso. Al implementar un sistema de este tipo, tendrá una manera fácil de encontrar ese fragmento que le ahorrará tiempo. Ya sea que esté trabajando en un nuevo proyecto o revisando proyectos anteriores, aquí hay algunos consejos para documentar lo que ha hecho. El kit de herramientas del diseñador web Descargas ilimitadas: plantillas HTML y Bootstrap, temas y complementos de WordPress, ¡y mucho más! Comenta tu código Este parece un poco obvio, pero no obstante es importante. Cuando escribimos código, tiene sentido agregar comentarios apropiados sobre lo que hace exactamente. La práctica común es escribir una breve historia sobre cada característica nueva para explicar su propósito y relevancia. Más allá de eso, agregar notas en otros lugares clave en estas funciones nos ayuda (y a otros que revisan nuestro código) a comprender mejor cómo encaja todo. Y esta práctica no está reservada para lenguajes complejos como PHP o JavaScript. También es perfecto para CSS. Enumerar estilos específicos y dónde se usan es excelente para encontrar exactamente lo que necesita. A menudo parece que la mitad de la batalla es simplemente recordar por qué cada línea está ahí y qué se supone que debe hacer. Los comentarios pueden eliminar gran parte de esta ambigüedad. Crear un registro para cada proyecto Dependiendo de tu personalidad, la mención de la palabra «diario» puede ser increíblemente aterrador o extrañamente reconfortante. De cualquier manera, hay un gran valor en la práctica. En este caso, estamos hablando de un documento que sirve como recurso de un proyecto futuro. Si el sitio web deja de funcionar o necesita una nueva función, este sería un lugar al que puede consultar para obtener más detalles sobre cómo se configuraron las cosas. Abra un documento de procesamiento de texto o continúe y cree un Wiki en su instalación local. Puede ser tan detallado (o no) como quieras. No hay reglas estrictas y rápidas aquí. Por ejemplo, nuestras técnicas de diseño y desarrollo tienden a evolucionar. El enfoque que tomó hace unos años puede no parecerse a lo que hace hoy. Por lo tanto, es importante poner varios elementos del proceso por escrito. Además, incluso cuando se utilizan sistemas y bibliotecas comunes, cada sitio web es una entidad separada. ¿No sabes por dónde empezar? Mire lo que hace que el sitio sea diferente de los demás. Tenga en cuenta las plantillas especiales que haya creado, los fragmentos de código específicos o los estilos. Si está configurando una configuración de un solo servidor, eso también es una gran cosa para documentar. Mantener una biblioteca de fragmentos de código No hay necesidad de reinventar la rueda cuando se trata de código. Gran parte de lo que escribimos es infinitamente reutilizable. Incluso si no coincide por completo con las necesidades de su nuevo proyecto, el fragmento correcto puede servir como un sólido punto de partida para una mayor personalización. Sin embargo, organizar fragmentos dispares de código puede ser un desafío. Simplemente puede copiar y pegar elementos útiles en un documento y recuperarlos según sea necesario. Pero para aquellos que escriben un gráfico de código, podría salirse de control con bastante rapidez. Un repositorio de GitHub podría ser una solución razonable. Esto le permitiría clasificar las cosas y establecer el control de versiones. Incluso puede sincronizar un repositorio con otro servicio para poder usarlo o acceder a él de diferentes maneras. Independientemente de cómo armes una biblioteca de fragmentos, querrás desarrollar algún tipo de sistema para etiquetar, categorizar o etiquetar cada fragmento. Por ejemplo, puede agregar cosas como el lenguaje de codificación utilizado, el objetivo, la aplicación relevante (como WordPress) o la biblioteca (React, Vue, Bootstrap). Esto hará que sea mucho más fácil encontrar lo que necesita. Una enciclopedia de tu trabajo. A los diseñadores web les encanta crear portafolios para mostrar su trabajo. Pero monitorear proyectos internamente también es una tarea encomiable. Puede ayudarlo a solucionar problemas y desarrollar sitios web existentes mientras brinda soluciones para los nuevos. Puede usar cualquiera o todas las técnicas anteriores para organizar las cosas. La mejor parte es que puedes personalizar las cosas como mejor te parezca. Ya sea que se trate de tomar notas voraces o de simples recordatorios, lo ayudará a comprender mejor el qué, dónde, cuándo y por qué de sus proyectos web. [ad_2]
Elementos interactivos que puedes crear con HTML y CSS
[ad_1] Durante muchos años, la interactividad en la web ha significado el uso de JavaScript. Ya sea Vanilla JS o una biblioteca como jQuery o React, el lenguaje ha sido la puerta de entrada para crear cosas con las que los usuarios pueden interactuar. Y aunque JavaScript sigue siendo muy útil en estos escenarios, ya no es un requisito. Se puede lograr mucho con una combinación de HTML y CSS en estos días. Cada estándar se ha ampliado para incluir características que alguna vez fueron exclusivas de otros idiomas. Este desarrollo trae varias ventajas. En primer lugar, reduce en gran medida la complejidad de construir estos elementos. No necesita cargar bibliotecas externas ni preocuparse por dominar la sintaxis de JavaScript. A su vez, esto también mejora el rendimiento y garantiza la compatibilidad del navegador. ¿Parece interesante? Hoy le mostraremos algunos elementos interactivos comunes que puede crear solo con HTML y CSS. El kit de herramientas del diseñador web Descargas ilimitadas: plantillas HTML y Bootstrap, temas y complementos de WordPress, ¡y mucho más! IU de acordeón Los acordeones se han construido durante mucho tiempo con la ayuda de JavaScript. La propia biblioteca jQuery UI comprender el objeto. Simplificó el proceso de creación y diseño, pero no es el código con mejor rendimiento. Especialmente considerando que HTML ahora tiene la details y summary etiquetas integradas. Con marcas y estilos básicos, es posible crear una interfaz de usuario atractiva y funcional. Es tambien compatible con todos los principales navegadores. Cabe mencionar que este método no ofrece la gama completa de efectos especiales. Como señala MDN: Desafortunadamente, por el momento no hay una forma integrada de animar la transición entre abierto y cerrado. Sin esa advertencia, realmente es una alternativa viable para cargar una biblioteca de JavaScript. A continuación se muestra un ejemplo básico de lo que se puede hacer con solo unas pocas líneas de HTML y CSS. Un acordeón HTML simple usando <details> por Eric Karkovak ver la pluma Un acordeón HTML simple usando por Eric Karkovak Menús de navegación avanzada Diseñar una navegación que funcione en todos los navegadores y dispositivos solía ser un desafío. Particularmente al crear menús de varios niveles o mega. Las funciones avanzadas a menudo requerían respaldos para que las cosas funcionaran en navegadores más antiguos. Y eso sin tener en cuenta las pantallas pequeñas. Es posible que sea necesario implementar un menú completamente separado para garantizar la facilidad de uso en dispositivos móviles. Afortunadamente, ha habido muchos avances en esta área. Combinando HTML nav etiqueta, listas desordenadas y CSS, podemos admitir la gama completa de dispositivos. No solo pueden verse tan bien como los menús de JavaScript del pasado, sino que también pueden funcionar de manera más eficiente. Megamenú receptivo y menú desplegable usando solo HTML y CSS por Muhammad Fadzrin Madu ver la pluma Megamenú receptivo y menú desplegable usando solo HTML y CSS por Muhammad Fadzrin Madu Juegos Los juegos en la web existen desde hace mucho tiempo, desde los días de (¡gulp!) Flash. E incluso después de que esta plataforma desapareciera, el proceso de construcción seguía siendo complejo. La creación de animaciones fluidas, el procesamiento de cálculos matemáticos y la entrada de datos por parte del usuario han requerido tradicionalmente secuencias de comandos avanzadas y uso de bibliotecas. Pero este ya no es necesariamente el caso. Ahora CSS se puede combinar con HTML canvas, SVG y otras bonificaciones para crear resultados sorprendentemente poderosos. Si bien no confundirá estos juegos CSS puros con los títulos de vanguardia que se juegan en su consola, no obstante son impresionantes. ¡Por lo menos, son una pérdida de tiempo convincente! Juego Ghost Bustin ‘CSS puro con variables CSS por Jhey ver la pluma Juego de fantasmas CSS puro con variables CSS 👻🕹#CodePenChallenge por Jhey Reproductores multimedia Al igual que los juegos, la multimedia en la web alguna vez fue el territorio de los complementos del navegador. Parte de esto se debió a los formatos patentados, ya que los proveedores competían para ganar participación de mercado para sus códecs. Los proveedores de contenido (y por lo tanto los diseñadores) se han visto obligados a elegir uno o más formatos para ponerlos a disposición de los usuarios. Y los usuarios tenían que tener instalado el software adecuado para reproducir los medios. Fue un desastre. Pero incluso cuando formatos como MP4 se convirtieron en estándares abiertos, la reproducción siguió siendo compleja. Sin embargo, el cambio a HTML5 ha puesto gran parte de la carga de funciones en los navegadores. los video y audio Elements utiliza un reproductor multimedia integrado con una variedad de funciones opcionales. Y aunque todavía se recomienda JavaScript para una interfaz de usuario más personalizada, ya no es una necesidad. Algunos estilos básicos se pueden hacer con CSS. Además, la compatibilidad del navegador con los elementos nativos es sólida. Estilo css de audio HTML5 por Dani Castaños ver la pluma Estilo css de audio HTML5 por Dani Castaños Construyendo lo básico y más allá Los avances en CSS y HTML han hecho maravillas para hacer avanzar la web. Ya no necesitamos recurrir a bibliotecas de código masivas o procesos demasiado complicados para ofrecer una interactividad básica. Estas grapas compatibles de forma nativa son más que capaces de hacer el trabajo. Esta es una buena noticia, ya que los diseñadores web deben tener en cuenta una cantidad cada vez mayor de dispositivos. Cosas como la navegación y los reproductores multimedia que simplemente funcionan sin necesidad de bibliotecas de terceros son cruciales para esta causa. Por supuesto, JavaScript y similares siempre están ahí para llevar las cosas al siguiente nivel. Pero ahora es posible construir las bases sin ellos. [ad_2]