Es una buena practica de #UX si tienes una pagina donde la tarea comienza en un input.
Por ejemplo Google enfoca el campo de búsqueda al cargar.
Agrega el atributo "download" para forzar a el navegador a descargar el archivo del <a>.
Por ejemplo algunos navegadores abren PDF pero quizás necesitas forzar que el usuario lo descargue
Para mostrar fecha y hora debes usar la etiqueta <time> ya que esta es la manera semántica de mostrar este tipo de dato.
Los links también sirven también para enviar correo, llamar por teléfono o enviar un Whatsapp, usarlos de esta manera mejora mucho el #UX de tu pagina.
Un acordeon es un componente de #UI que le permite al usuario mostrar y ocultar contenido cuando lo necesite, es muy usado por ejemplo en "preguntas frecuentes".
Tipicamente usamos #JavaScript pero se puede hacer solo con #HTML.
¿Como hace un conteo inverso? puedes usar el atribulo "reversed" en la etiqueta <ol>
El elemento input es mucho más que solo un campo de texto, puedes tener un selector de colores fácil, rápido y accesible.
Cargar imágenes con “lazy load”.
Lazy load es una estrategia para cargar elementos cuando se vayan a usar lo que mejora el performance, en el caso de las imágenes usas el atributo loading.
Las imágenes van a cargar cuando el usuario haga scroll hacia ellas.
Indicarle al navegador el lenguaje de tu documento es importante para SEO, accesibilidad etc.
Para ponerlo a todo el documento se agrega a la etiqueta html al inicio de la página con el atributo "lang".
📔 ¿Quieres 90 tips más? descarga mi libro gratis: fmontes.com/99
📸 Sígueme en instagram.com/fmontes donde publico videos sobre como moverse en la industria tech, encontrar trabajos y tips para programadores junior.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
🙃 ¿Te quedas pegado cuando intentas hacer un proyecto de #programación?
😉 Te explico un método para salir de esa pega y evitar la frustración.
🧵 THREAD
🧠 Cuando no puedes arrancar es porque estás viendo la aplicación como una sola tarea gigante y tu cerebro está tratando de resolverla, pero en realidad lo que debes hacer es resolver muchas tareas pequeñas.
Fundamentals of Graphic Design: Aprenderás los principios fundamentales del diseño gráfico: creación de imágenes, tipografía, composición, color y forma. Principios que puedes aplicar al diseño web.
Front-End Web UI Frameworks and Tools: Bootstrap 4: Aprenderás sobre grids y diseño responsivo, componentes CSS y JavaScript de #Bootstrap, además sobre los preprocesadores #CSS, #Less y #Sass.
#CSSGrids es lo mejor para hacer layouts modernos te explico lo básico en pocos tweets.
Hagamos este layout básico.
🧵 [1/13]
El primer paso es crear el #HTML. Es solo un padre con tres hijos. Nada fuera de lo común.
[2/13]
En el #CSS lo primero que hacemos es agregar width y height al 100% al <body> y <html> para que nuestro layout ocupe toda la página. Y bordes a los elementos hijos.