Fundamentos de Diseño Web

Tecnología en Desarrollo de Software

Resumen

El diseño de una aplicación, página web, desarrollo a medida e incluso interfaz depende no sólo de una paleta de color o el seguimiento de guías de diseño orientado al usuario, implican factores y competencias de tipo tecnológico que si bien no son de total área de dominio del desarrollador si debe formar parte de los conocimientos básicos que le permitan interactuar con sus pares en un proyecto de tipo web (front end, back end, diseñadores web, diseñadores gráficos, arquitectos de información, diseñadores de interacción).

Más allá del software específico, es importante reconocer los conceptos básicos que dominan la parte visual de la web, en este caso los mapas de bits, los vectores, el uso de tipografía, todo enmarcado en un lenguaje de etiquetado como CSS o el uso de frameworks que aceleren el proceso de implementación de la solución.

Procesos claros como la optimización gráfica, “responsive web design”, “mobiles first”, balanceo de carga (peso) de una página web son temas que si bien no son responsabilidad del desarrollador sí que debe tener en cuenta en un equipo de trabajo o en la solución que deba llevar hacia la web.

Uno de los escenarios en los cuales se verá beneficiado el estudiante de la UTB es en el ámbito de la producción, por ende, será una competencia clave a desarrollar para que el estudiante pueda ingresar al mundo laboral y a equipos existentes.

Específicamente este módulo pretende que el estudiante aplique los conceptos y las teorías de las herramientas gráficas de diseño vectorial y mapas de bits orientados hacia productos en la web. Así como aplicar conceptos básicos sobre diseño con lenguajes etiquetados usando estándares de mercado.

Intenciones educativas

Este curso se enfrenta a la adquisición de conocimientos y competencias básicas que permitan al estudiante desarrollarse personal y profesionalmente en el manejo de temas básicos en torno al ambiente web.

Habilidades

• Dominio y uso de las herramientas necesarias para la optimización de imágenes de mapas de bits, de igual manera para los vectores.
• Uso de recursos compartidos, vinculación externa de hojas de estilos, CDN entre otros.
• Resolución de problemas vinculados al diseño e implementación de documentos etiquetados, reducción de costos en licenciamiento, ubiquidad de la información entre otros.
• Dinámico con espíritu innovador, deseoso de adquirir nuevos conocimientos a través de su emprendimiento e iniciativa personal.
• Actitud interpretativa, reflexiva, crítica y argumentativa.

Valores

• Trabajo en equipo.
• Disciplina, responsabilidad y compromiso para asumir su rol de estudiante
• Responsabilidad en el cumplimiento de las metas establecidas.
• Honestidad con la información relacionada con los proyectos en los cuales participa.
• Respetuoso a las normas y estándares establecidos.

Competencias

Las competencias de los estudiantes deben estar estrechamente relacionadas con las habilidades y destrezas para la resolución de situaciones problema, de acuerdo con lo propuesto por la Universidad Tecnológica de Bolívar. Por lo tanto, las competencias que se pretende que desarrollen los estudiantes en este módulo, son las siguientes:

• Aplicar los conceptos y las teorías de las herramientas de edición digital para manipular gráficos vectoriales, haciendo uso adecuado de los recursos generales ofrecidos por los diversos softwares de edición vectorial.
• Aplicar los conceptos y las teorías de las herramientas de edición digital para manipular gráficos de mapas de bits.
• Aplicar conceptos generales de uso de hojas de estilo para documentos etiquetados
• Uso de frameworks orientados al manejo de estilos
• Aplicar conceptos y teorías para la optimización de la carga (peso) de una página o ambiente web.

Temática

• Presentación módulo y resumen
• Conceptos base de diseño
  • Resolución y puntos por pulgada
  • Mapas de bits vs vectores
  • El color
    • Canales
    • RGB
    • CMYK
    • Otros espacios de color
  • Canal Alpha
  • Capas
  • Alineación y distribución
• Diseño de mapas de bits
  • Selecciones
    • Por colores
    • Por área
    • Por trayectos
    • Por canales
  • Correcciones y filtros
    • Corrección básica de imagen
    • Recortes
    • Clonación
    • Máscaras
    • Perspectiva
• Diseño Vectorial
  • Selecciones
    • Directa
    • Por área
    • Por grupos
  • Primitivas
  • Creación de objetos estándar
    • Unión
    • Resta
    • Interesectar
    • Combinar
    • Descombinar
• Diseño web
  • CSS3
    • Elementos en bloque y en línea
    • Medidas
    • Vinculación de css
      • En línea
      • En documento
      • Vinculación local
      • Vinculación externa
    • Reset css
    • Imágenes
    • Fondos
      • Colores
      • Imágenes de fondo
      • Degradados
      • Múltiples fondos
      • Opacidad
    • Modelo de caja
    • Alineación y distribución
      • Márgenes
      • Padding
    • Posicionamiento
      • Flotante
      • Absoluto
      • Relativo
      • Fijo
      • Clear
    • Selección
      • Genérica
      • Directa etiqueta
      • Directa por id
      • Pseudoelementos
      • Pseudoclases enlaces
      • Pseudoclases globales
      • Selectores avanzados
      • Selectores adyacentes
      • Selectores hermanos
      • Selectores hijos
    • Medios impresos
    • Media queries
    • Herencia y colisión
  • Formatos para la web
  • Optimización web
  • Manejo de archivos web
  • Tipografía web
  • Uso de medios externos y CDN
  • Responsive Web Design
    • Flexbox
    • Bootstrap y otros
• Fuentes y tipografía
• Pruebas y pilotos
• Optimización de código
• Bibliografía

Autor: Edison Monsalve

Editores:

Elfar Didier Morantes

Alexis Toro

Colaboradores:

Tu nombre puede estar aquí

Versión

2.2

Aclaraciones:

• A lo largo del libro se usará un tono cordial y no técnico alto, pues la idea no es reemplazar los libros específicos, de igual manera se usará el género masculino en la mayoría de los casos - sin ánimo de ofensa.
• Este material es complementario a las teleclases de la Universidad Tecnológica de Bolívar, por ende, códigos, ejemplos y atención al estudiante se realizará directamente por la plataforma virtual Moodle UTB Cota, aunque es posible compartir libremente su uso estará enfocado a la necesidades del programa de Tecnología en Desarrollo de Software de la misma universidad.
• Se sugiere su consulta en compañía de material en plataforma, teleclases y demás recursos propios del programa.