Programacin de Interfaces Grficas

Clase No 1 - Introduccin
Corporacin de Estudios Tecnolgicos del Norte del Valle
Ingeniera en Sistemas
Docente: Jhon James Cano Snchez
Especialista en Webmaster
ENCUESTA DE INTRODUCCIN

Realizar Encuesta
 Horario de Clase

Viernes 6:30 p.m a 8:00 p.m

 Recomendaciones

Puntualidad en asistencia a clase

En caso de no asistencia, diligenciar el formato de excusa y presentarlo en la oficina de
Atencin al Usuario.
Celular en timbre bajo o vibracin.
Cumplimiento con entrega de actividades y/o ejercicios.
 Conocimientos Previos

No se requieren conocimientos especficos previos de alto grado de complejidad, se debe

conocer HTML bsico y lo ms importante es la disposicin para el aprendizaje y los
conocimientos bsicos adquiridos a lo largo de la carrera.
 Objetivos

1. Conocer y manejar lenguajes de modelado grfico en entorno web.

2. Desarrollar y programar mdulos de software que cumplan con los estndares
internacionales de calidad.
3. Conocer, disear y utilizar los tipos y estructuras de datos para la resolucin de un
problema.
4. Aplicar las metodologas para el desarrollo de sistemas de informacin.
 JUSTIFICACIN
La programacin de interfaces grficas de usuario es uno de los primeros temas que deben ser memorizados
o por lo menos comprendidos para saber cual es el rumbo que se tomar a la hora de realizar el diseo. Para
disear un programa se necesita tener un conocimiento bsico, intermedio o avanzado (dependiendo de la
complejidad del proyecto) en programacin, sin embargo cuando se realizan interfaces grficas tambin se
debe tener un conocimiento amplio de qu herramientas se pueden utilizar o vincular con la programacin
para obtener el resultado deseado.

Este curso permitir al estudiante obtener conocimientos en cuanto al diseo y elaboracin de Wireframes,
estructuras de diseo y modelado de aplicaciones grficas utilizando HTML, CSS y JAVASCRIPT (jQuery),
permitiendo as la incursin en diferentes reas del conocimiento, procesamiento y despliegue de datos, hasta
el desarrollo de sistemas de control e instrumentacin.
 ACUERDO PEDAGGICO

CORTE 1 (35%) CORTE 2 (35%) CORTE 3 (30%)

Talleres y/o Trabajos (10%) Talleres y/o Trabajos (10%)

Proyecto Final (30%)
Proyecto Corte (15%) Proyecto Corte (15%)

Parcial (10%) Parcial (10%)

 PRESENTACIN DE TRABAJOS

Los trabajos deben ser subidos en el enlace correspondiente en la plataforma

AVACO de la institucin, no se reciben trabajos enviados al correo.
Las fechas de entrega deben ser las estipuladas, slo en caso de incapacidad o
fuerza mayor se determinar una nueva fecha.
Los trabajos deben ser realizados con normas APA cumpliendo los lineamientos
de la institucin.
Todo trabajo debe contener las fuentes bibliogrficas, de lo contrario no ser
tenido en cuenta.
 Herramientas

Editores de Cdigo
Sublime Text
Dreamweaver
Atom
Web Storm
Notepad ++
Bloc de Notas
 Html & Html5

Comentarios, identacin, etiquetas, atributos, rbol de html5, estructura de carpetas.

Etiquetas bsicas (h1, p, img, a, ul, li, ol, div, table)
Etiquetas html5 (section, header, footer, article, aside, nav, audio, video)
Formularios (form, input, textarea, select, option, button)
Identificadores y clases (id (#), class(.))
 Css & Css3
Invocar Css en html (style, link)
Css bsico (background, border, margin, padding, color, font, text-decoration,
uppercase, lowercase, display, float, width, height)
Css3 (border-radius, text-shadow, box-shadow, flexbox, font-face, animation,
transition)
Responsive Design (mobile, tablet, desktop)
Identificadores y clases (# - .)
Pseudo selectores (nth-child, hover, active, first, last)
Fuentes de Google
Fuentes iconogrficas (Glyphicons, font-awesome)
Frameworks Css (Bootstrap, materialize, foundation)
 JAVASCRIPT

Formas de integrar Javascript (Script Src, Script)

Javascript bsico (alert, console, document.write, funciones)
jQuery (Funciones bsicas, ajax, json)
Plugin (datatables, sweet-alert, alertify, animate.css, loaders.css)
 Metodologa
Teora
Presentacin
Lecturas
Bsquedas
Manuales
Prctica
Vdeo Tutoriales
Proyecto
Trabajos
Foro
Evaluacin
 Comunicacin

Correo Electrnico
jjcano@cotecnova.edu.co
Oficina de Direccin de Unidad
 Proyectos
Proyecto 1 => Interfaz grfica bsica con Html5 & Css3, documentada con
Wireframes.

Proyecto 2 => Backend Bootstrap usando login y formularios, documentada con

Wireframes e Historias de Usuario

Proyecto 3 => Backend y Frontend asncrono (php, jQuery) responsive (xs, sm,
md, lg) usando html5, css3 & Bootstrap o Material Design, ventanas modales y
complementos (plugins) validacin de campos de formulario y tipos de datos,
Wireframes e Historias de Usuario.
Sustentacin de entregable, cdigo y funcionalidades.
ENTREMOS EN MATERIA
 Tipos de Interfaces Grficas

OUI : Interfaz Orgnica de Usuario: es una interfaz de usuario con una pantalla no
plana, es decir elementos que son maleables o manipulables de forma fsica.
NUI: Interfaz Natural de Usuario: es una interfaz que por inercia el usuario puede
utilizar, ejemplo: Pantallas de Celulares.
CLI: Interfaz de Lnea de Comandos: Se utiliza en consolas cliente-servidor. Ejemplo:
consola de comandos de Windows.
GUI: Interfaz grfica de Usuario: utiliza un conjunto de imgenes y objetos grficos
para representar la informacin y acciones disponibles en la interfaz. Ejemplo:
Formularios Web.
Navegador web & URLS
Cmo funciona el Navegador?
HTML
CSS
JAVASCRIPT
BACKEND
LENGUAJES BACKEND
 Tipos de Rejillas
Dispositivos muy Dispositivos Dispositivos Dispositivos
pequeos Telfonos pequeos medianos grandes
(<768px) Tabletas Ordenadores Ordenadores
(768px) (992px) (1200px)

Comportamiento Las columnas se Si se estrecha el navegador, las columnas se muestran

muestran siempre verticalmente. A medida que aumenta su anchura, la rejilla
horizontalmente. muestra su aspecto horizontal normal.
Anchura mxima del Ninguna (auto) 728px 940px 1170px
contenedor
Prefijo de las clases Xs Sm Md Lg
CSS
 FRAMEWORK

Conjunto estandarizado de conceptos, prcticas y criterios para enfocar un tipo de

problemtica particular que sirve como referencia para enfrentar y resolver nuevos
problemas de ndole similar.
BASES DE DATOS