Diseño de interfaces web

Contenidos

Apuntes completos

Apuntes y tareas «Diseño de interfaces web» a distancia

Apuntes de formación a distancia del módulo «Diseño de interfaces web» del CFGS DAW, elaborados y licenciados por el Ministerio de Educación, Cultura y Deporte.

Autor:

Enlace al material:

Contacto:

Licencia: Ministerio de Educación Cultura y Deporte

Apuntes «Diseño de Interfaces Web» – Ángel Berlanas

Apuntes y actividades del módulo «Diseño Interfaces Web» del CFGS «Desarrollo de Aplicaciones Web» del profesor Ángel Berlanas.

Autor: Ángel Berlanas

Enlace al material:

Contacto:

Licencia:

Canal Youtube Apuntes DIW y DI – Alfredo Profesor Ciclos

Canal de Youtube de «Alfredo Profesor Ciclos» con tutoriales aplicables a los módulos:

Desarrollo de Interfaces, del CFGS Desarrollo de Aplicaciones Multiplataforma.
Desarrollo de Interfaces Web, del CFGS Desarrollo de Aplicaciones Web.

Autor: Alfredo Profesor Ciclos

Enlace al material:

Contacto:

Licencia: CC BY

Disseny d’interfícies web – Català

Apuntes completos del módulo de Diseño de Interfaces Web del ciclo de Desarrollo de Aplicaciones Web del Institut Obert de Catalunya.

Nota: para leer en otro idioma distinto del catalán, se recomienda utilizar el traductor de Google integrado en la propia página.

Autor:

Enlace al material:

Contacto:

Licencia: CC BY-NC-SA

Apuntes completos relacionados

No hay ningún enlace. ¿Quieres añadir alguno? ¡Contacta con nosotros!

Cheat Sheets

CSS Properties Guide – Inglés

Lista con formato similar a angeda telefónica donde se guarda información de las distintas propiedades CSS.

Autor: Manz

Enlace al material:

Contacto:

Licencia:

Chuleta de CSS

Aquí puedes encontrar una hoja de referencia, a tamaño DIN A4 y en formato PDF lista para imprimir.

Esta cheatsheet es muy útil para aquellos que tenemos mala memoria o que queremos consultar de forma rápida la sintaxis de las propiedades CSS existentes.

Autor: J. Román (Manz)

Enlace al material:

Contacto:

Licencia:

Chuleta de HTML

Aquí puedes encontrar una hoja de referencia, a tamaño DIN A4 y en formato PDF lista para imprimir. Contiene la mayoría de características de HTML5 (e incluso algunas de HTML5.1), agrupadas por temáticas y diferenciando el nombre de la etiqueta, de sus atributos y otras propiedades.

Autor: J. Román (Manz)

Enlace al material:

Contacto:

Licencia:

Flexbox Cheat Sheet con frutas – Inglés

Cheat Sheet sobre el uso de Flexbox para maquetación de páginas web. La Cheat Sheet está ilustrada con frutas.

Autor: Joni Trythall

Enlace al material:

Contacto:

Licencia:

Aprende jugando

JS Robot

Juego para aprender JavaScript mientras vivimos aventuras con un robot.

Autor:

Enlace al material:

Contacto:

Licencia:

CSS Battle – Inglés

Web para aprender CSS jugando, intentando cumplir objetivos con el mínimo código.

Autor:

Enlace al material:

Contacto:

Licencia:

Can’t Unsee – Inglés

Juego donde debemos decidir que interfaz es mas amigable entre las mostradas. Incluye explicación tras cada elección.

Autor:

Enlace al material:

Contacto:

Licencia:

User Inyerface – Inglés

Web que contiene aposta un diseño muy poco usable. Usar la web consiste en rellenar formularios tediosos, contra-intuivos, contra reloj, etc… El fin didáctico de esta web es conocer «que no hacer» al diseñar una interfaz usable.

Autor:

Enlace al material:

Contacto:

Licencia:

Grid Garden – Inglés

Portal interactivo para practicar el posicionamiento con la opción display:grid mediante un juego. El código fuente está disponible en https://github.com/thomaspark/gridgarden/

Autor: @thomaspark thomaspark Thomas Park

Enlace al material:

Contacto:

Licencia:

CSS Dinner – Inglés

Juego donde aprenderás CSS organizando la mesa, con su comida, platos, etc…

El código fuente del juego está disponible en https://github.com/flukeout/css-diner/

Autor: Flukeout

Enlace al material:

Contacto:

Licencia:

Flexbox Defense – Inglés

Juego interactivo con explicaciones donde colocas a nuestras torres defensivas de forma estratégica escribiendo CSS.

Autor: Channing Allen

Enlace al material:

Contacto:

Licencia:

Flexbox Froggy – Inglés

Juego interactivo con explicaciones donde ayudas a Froggy y a sus amigos escribiendo CSS con la opción display:flex:, situando a nuestra rana en los lugares que nos indique.

Autor: Channing Allen

Enlace al material:

Contacto:

Licencia:

Hostings gratuitos

Hosting 000webhost – Inglés

Host gratuito que incluye PHP, MySQL y cPanel. Sin anuncios.

Autor:

Enlace al material:

Contacto:

Licencia:

LucusHost

Hosting gratuito soportando con PHP y MySQL, soportando instalar CMS como WordPress de forma directa.

Autor:

Enlace al material:

Contacto:

Licencia:

Github Pages

Hosting gratuito para hostear directamente desde una cuenta Github. Solo almacena páginas estáticas, no procesa mediante el servidor.

Autor:

Enlace al material:

Contacto:

Licencia:

Infinity Free – Inglés

Infinity Free incluye un hosting gratuito soportando PHP y MySQL, así como aplicaciones auto-instalables.

Autor:

Enlace al material:

Contacto:

Licencia:

Recursos DIW

Los apuntes de Majo (Javascript, CSS, Python, SQL, React y Git)

Web con apuntes en castellano muy bonitos de Javascript, CSS, Python, SQL, React y Git. En constante actualización.

Autor:

Enlace al material:

Contacto:

Licencia:

30 seconds of code

Web con colecciones de código (CSS, JavaScript, Python, incluso Git) listos para copiar y pegar.

Autor:

Enlace al material:

Contacto:

Licencia:

Adobe Color CC

Generador de paletas de colores de Adobe.

Autor:

Enlace al material:

Contacto:

Licencia:

Coolors – Inglés

Coolors es una web que te permite generar esquemas de colores compatibles.

Autor:

Enlace al material:

Contacto:

Licencia:

Page Flows

Web con múltiples patrones de diseño de interfaces para aplicaciones tanto web como para móviles.

Autor:

Enlace al material:

Contacto:

Licencia:

Mobbin – Inglés

Web con patrones de diseño de interfaces para web y móviles.

Autor:

Enlace al material:

Contacto:

Licencia:

Pttrns – Inglés

Web con patrones de diseño de interfaces para aplicaciones tanto web como para móviles.

Autor:

Enlace al material:

Contacto:

Licencia:

Clone Wars – Open source clones of popular sites – Inglés

Clone Wars es un sitio con clones de código libre de sitios populares.

Autor:

Enlace al material:

Contacto:

Licencia:

FreeCodeCamp: Responsive design – Inglés

Teoría y ejercicios online para utilizar HTML, CSS y lograr un diseño «responsive».

Autor:

Enlace al material:

Contacto:

Licencia:

100 plantillas HTML5 y CSS3 – Inglés

Sitio con 100 plantillas para web usando HTML5 y CSS3 tanto para principiantes como para expertos.

Autor:

Enlace al material:

Contacto:

Licencia:

Bloo: low fidelity wireframe kit – Inglés

Bloo es una herramienta de prototipado libre y gratuita.

Autor: vijay verma

Enlace al material:

Contacto:

Licencia:

Kits UI gratuitos – Inglés

Kits UI gratuitos

Autor:

Enlace al material:

Contacto:

Licencia:

unDraw – Ilustraciones open source – Inglés

Ilustraciones open source en múltiples formatos. Incluye buscador interno.

Autor:

Enlace al material:

Contacto:

Licencia:

Illustrations.co – Ilustraciones de uso gratuito – Inglés

Ilustraciones de uso gratuito en formato svg, png, eps, ai y figma.

Autor:

Enlace al material:

Contacto:

Licencia:

Herramienta ExcaliDraw – Inglés

Herramienta online para crear fácilmente Moockups. Su código fuente está disponible en https://github.com/excalidraw/excalidraw

Autor:

Enlace al material:

Contacto:

Licencia:

Dev Tools Challenger (Firefox Developer Edition) – Inglés

Web que te enseña de forma interactiva a utilizar las herramientas de desarrollador de «Firefox Developer Edition».

Autor:

Enlace al material:

Contacto:

Licencia:

No Design Development – Inglés

Colección de utilidades para desarroladores que tienen poco (o ningún) talento diseñando 🙂

Autor:

Enlace al material:

Contacto:

Licencia:

CSS Reference – Inglés

Guía visual donde se hace referencia a todas las propiedades de CSS, siempre acompañadas por ejemplos didácticos.

Autor:

Enlace al material:

Contacto:

Licencia:

The Art of the Error Message – Inglés

Artículo con multitud de ejemplos que nos explica como nuestras aplicaciones deben (y como no deben) comunicar mensajes de error a los usuarios.

Autor: Marina Posniak

Enlace al material:

Contacto:

Licencia:

Material Design y Framework Materialize – Inglés

Material design es un sistema de diseño que incluye componentes, iconos, etc… pensado para facilitar y mejorar el diseño de sitios web y aplicaciones. Incluye tutoriales para su uso.

Generalmente es usado en aplicaciones Web con el framework Materialize https://materializecss.com

Autor:

Enlace al material:

Contacto:

Licencia:

Ejemplo CSS interactico: Ticket a Hogwarts – Inglés

Ejemplo CSS interactivo y modificable para la realización de un Ticket a Hogwarts.

Autor: Olivia NG

Enlace al material:

Contacto:

Licencia:

Awesome Desing Tools – Inglés

Lista que incluye una gran variedad de herramienta útiles para el diseño de todo tipo de software. Agrupa distintos grupos de herramientas, desde accesibilidad, diseño de sonidos, mockups, realización de interfaces gráficas de usuario, etc…

Autor: Lisa Dziuba

Enlace al material:

Contacto:

Licencia:

CreativeCommons Search – Inglés

Buscador web que nos permite buscar imágenes Creative Commons que podemos utilizar en nuestros apuntes, proyectos, trabajos, etc…

Autor:

Enlace al material:

Contacto:

Licencia:

MadeWithVueJS – Inglés

Web que recopila proyectos (gran parte de ellos libres) realizados utilizando la biblioteca VueJS.

Autor:

Enlace al material:

Contacto:

Licencia:

Curso de Vue 2 JS de 0 a 100

Curso en video sobre distintos elementos de Vue 2 JS, desde el hola mundo hasta al uso de componentes pasando por uso de rutas, VueX, etc…

Autor: Programador Novato

Enlace al material:

Contacto:

Licencia:

CSS Generators, tools and Snipets – Inglés

Página de «Best Agencies» que incluye generadores de CSS, herramientas y Snipets.

Autor:

Enlace al material:

Contacto:

Licencia:

Magic of CSS – Inglés

Tutorial sobre uso de CSS por Adam Schwartz.

Autor:

Enlace al material:

Contacto:

Licencia: