Curso Diseño Web

Desde esta página agruparemos parte de los artículos publicados en el blog para que la lectura pueda ayudar a los recien llegados al mucho del diseño web.

1. Introducción

  1. Primero pasos para crear una página web: yo pregunto, ¿porque quiero tener una web?, ¿por donde empizo?, ….
  2. Diseño web: usuarios, contenidos y experiencias:piensa en los visitantes de tu web cuando estás trabajando en ella, ¿que buscan en tu web? ¿volverán?, …
  3. Accesibilidad en la web: creamos web para todos, hay gente que puede tener problemas de vista, ellos tambien quieren ver nuestra web.

2. Empezar a escribir HTML

  1. Introducción al leguaje HTML: crearemos laprimera página, un sencillo ejemplo para explicar que es HTML.
  2. Elementos y etiquetas HTML: conocer el funcionamiento del HMTL es muy importante, no se trata de memorizar todas las etiquetas, sino de conocer como funcionan y la importancia que pueden llegar a tener.
  3. Formatos básicos para textos: párrafos y encabezados.
  4. Color, tamaño y tipo de letra: modificamos el color, tamaño y tipo de fuente que necesitemos, pero siempre teniendo en cuenta que no todas las combianciones son buenas.
  5. Ejemplo: veremos un ejemplo de lo aprendido hasta aquí.
  6. Los colores en HTML: conocer como funcionan los colores en HTML es muy importante para saber hasta donde podemos llegar con los diseños.
  7. Los colores en la web: un poquito mas de información sobre los colores, psicología del color.
  8. Listas en HTML: podmeos crear listas ordenadas, listas desordenadas, …, anidar listas en html.
  9. ¿Que son los enlaces o links en una página web?.
  10. El arte de enlazar.
  11. Los encabezados en HTML: volvemos para ver la importancia que tienen los encabezados y cuales son los motivos que nos llevarán a utilizarlos.
  12. Tablas en HMTL: actualmente se utilizan menos que hace unos años, pero siguen siendo muy útiles en algunos casos.
  13. Ejemplos con tablas
  14. Definición de un documento HTML, DTD: DOCTYPE
  15. ¿Qué es Unicode UTF-8?
  16. Comprueba que has aprendido completando el test

3. Hojas de estilo, CSS

  1. ¿Que es CSS?.
  2. Fundamento básico de CSS.
  3. Cómo incluir hojas de estilo en una página web.
  4. Optimizar hojas de estilo
  5. Resetear hojas de estilo
  6. Chuleta CSS: descarga los ficheros en pdf de las chuletas más interesantes de CSS.
  7. Errores más comunes al utilizar CSS.
  8. Limpiar floats
  9. Bordes con CSS
  10. Ejemplos con div: para prácticar
  11. Centrar un div Horizontalmente con Dreamweaver: video tutorial
  12. Centrar vertical y horizontalmente un div con Dreamweaver.
  13. Efecto cebrado en tablas y listas
  14. Textos con sombras, contornos…
  15. Notas Adhesivas con CSS3
  16. Como crear un limón con CSS
  17. Crear formas geométricas con CSS. Primera Parte
  18. Menús con CSS y listas: vertical, horizontal
  19. Framework 960 Grid System
  20. Framework 978 Grid System: utilizado en este blog
  21. Degradados lineales con CSS. Gradiente Lineales con CSS3
  22. Comprueba tus conocimientos de CSS y Dreamweaver
  23. Comprueba tus conocimientos de CSS

4. Diseño web

  1. Ayudas para el diseñador web: veremos que herramientas son útiles para el diseño de nuestra web.
  2. Navegadores web: cuando creamos una web, tenemos que crear para práticamente todos los navegadores, instala los principales navegadores en tu ordenador y visualiza la web con cada uno de ellos. Tienes que conseguir que tu web sea compatible con todos los navegadores.
  3. Consejos para crear un sitio web creible
  4. Profundidad de color: desde un pixel al color verdadero.
  5. Landing-page: que son las Landing-page
  6. Ejemplos de landing-page: ejemplo 1, ejemplo 2

5. Ejemplos prácticos

  1. Enviar un email con php: enviaremos un email desde un formalario
  2. Creando una web paso a paso con CSS: primera parte
  3. Creando una web paso a paso con CSS: segunda parte
  4. Creando una web paso a paso con CSS: tercera parte
  5. Creando una web paso a paso con CSS: cuarta parte
  6. Creando una web paso a paso con CSS: quinta y última parte
  7. Ejemplo, www.tucartadigital.com
  8. Tablero de ajedrez en HTML con tablas
  9. Notas Adhesivas con CSS3
  10. Cómo crear un limón con CSS
  11. Landing-page: Tu Carta Digital, versión 1versión 2
  12. Landing-page: Promoción tienda ONO
  13. Curriculum Vitae
  14. Diseño al estilo Pinterest con CSS
  15. Ejemplo web con CMS WP: www.ledneonflex.es

6. Promoción y Posicionamiento web, SEO, SEM, Redes Sociales, …

Aquí realmente no es necesario seguir el orden que indico, puedes leer como quieras, se trata de artículos independientes pero muy recomendable leer todos ellos.

  1. Landing page
  2. Herramientos SEO hechas por Google
  3. Guía SEO de Google para principiantes
  4. Herramientas del webmaster
  5. Google Analytics
  6. Bing: … porque hay vida más allá de google
  7. Robotx.txt: cuando no quiereo que indexen

7. WordPress

El mundo del blog nos invade, todos sabemos que es un blog y los utlizamos a diario cuando navegamos. Vermemos como instalar y configurar WordPress, uno de los CMS de blog más utilizados.

  1. Introducción a WordPress
  2. XAMPP: instalación
  3. Configuración XAMPP
  4. Instalación local de WordPress: veremos como instalar wordpress en tu ordenador. En este punto ya hemos instalado un servidor web con todo los necesario, XAMPP
  5. Vinculación de WordPress y Dreamweaver CS5
  6. La famosa instalación en 5 minutos. Instalación de WordPress en tu servidor, en tu hosting
  7. Tipos de usuarios en Wordpres, Rol usuarios en WordPress: suscriptor, colaborador, autor, editor, administrador.
  8. Personalizando la administración de WordPress: Pantalla de Login
  9. Personalizando la administración de WordPress: Escritorio

8. Comprobar conocimientos

  1. Examen Html
  2. Examen CSS
  3. Examen CSS/Dreamweaver