TÉCNICO EN DISEÑO DE PÁGINAS WEB

Los profesionales del diseño web planifican, diseñan, implementan y mantienen los sitios webs de las organizaciones. Por un lado, realizan el diseño convencional. Y por otro lado, abarcan los diferentes aspectos del diseño grafico web, el diseño de interfaz y experiencia del usuario.

Con este programa de diseño web el alumno será capaz de encargarse de aspectos como la navegabilidad, la interactividad, la usabilidad, la arquitectura de la información; la interacción de medios y la optimización de motores de búsqueda.

Consigue tu Título de Diseño Web online

En el primer acercamiento al diseño web, los alumnos de este curso estudiarán HTML 5. Los contenidos primarios serán las etiquetas, los formularios, el elemento canvas y las bases de datos en el lado cliente.

¿Qué son los formularios y para qué sirven? Los formularios en HTML no son más que elementos añadidos en las webs para recoger datos añadidos por usuarios internautas. Los usos de los formularios dependen de la finalidad de cada uno, y la finalidad depende de la información que se solicita. La información recogida en la web puede ser de opinión, sugerencias, datos personales, pedidos, direcciones de envío y muchas más.

Los formularios son una parte importante en el diseño web y en el funcionamiento de toda la plataforma. Los mismos ponen en contacto a ambas partes; usuario y proveedor. Los formularios más conocidos son los de contacto, pero están además los de gestión de contenidos, clientes, envíos, etc. Estos crean un nexo en la plataforma y potencia la interactividad intrínseca de la navegación en internet.

Por otro lado está Canvas, que es un elemento de HTML 5 que permite renderizar de manera dinámica figuras 2D. Permite a su vez renderizar imágenes de mapa de bits. Canvas crea una región dibujable en el código HTML con atributos de altura y ancho,  y para conseguir estas renderizaciones, necesita JavaScript, que veremos más adelante.

Asimismo, los elementos canvas soportan recibir eventos de interacción e insertar vídeos, audios, gráficos interactivos y elegir en qué entorno queremos trabajar, ya sea 2D o 3D. Aunque es pertinente explicar que  no tiene habilidad de dibujo en sí mismo, sino que funciona como un contenedor. De esta manera que sea tan definitorio que se tenga un ID asignado, porque hay que manipularlo mediante JavaScript.

CSS3

CSS responde a cascading style sheets en ingles que sería hojas de estilo cascadas, como veremos en este curso de diseño web. Es un lenguaje que se usa para crear una presentación de un documento escrito en HTML o XML2. El objetivo es separar la estructura de un documento de su estilo o diseño. En otras palabras, CSS detalla cómo los elementos HTML se mostrarán en el papel o dispositivos electrónicos.

Los módulos actuales de CSS3 son: selectors, bax model, backgrouds and borders, text effects, image values and replaces content. Así como 2D/3D transformations, animations, multiple column layout y, finalmente, user interface.

Por su parte, las clases se usan para dar formato a la estructura de las páginas webs, no son funcionales por sí mismas, necesitan etiquetas HTML. De la misma manera que HTML estructura la página, CSS añade formatos.

En este programa de diseño web se conocerán los pasos para trabajar con CSS:

• Crear la clase y nombrarla con el nombre que luego se usará para aplicar a la etiqueta.
• Incluirla en el archivo HTML para su uso.
• Aplicar la clase dentro de la etiqueta a la que se quiere dar forma, como un atributo de esta.

Por su lado, las pseudoclases se utilizan en las ocasiones que las etiquetas o elementos HTML pueden tener características visibles diferentes según estado, posición y/o funcionamiento. Asimismo, los pseudoelementos son necesarios cuando queremos aplicar estilos a los subelementos que no se crearon como etiqueta HTML.

Estos selectores de pseudoclases y pseudoelementos son indispensables para trabajar de manera profesional los estilos basados en la interactividad y las formas dinámicas. Potenciando la relación de retroalimentación entre usuario y elementos y funcionalidad de una página web.

Javascript

JavaScript es un lenguaje de guiones que dinamiza una página presentando texto móvil en la barra de estado del navegador. Además se puede obtener fecha y hora en el ordenador, permite obtener información del navegador usado. Así como modificar el contenido de la página de manera dinámica, escalar imágenes dependiendo del tamaño de la pantalla. Y validar entradas realizadas por los usuarios.

Se le llama scripts porque son pequeños fragmentos de código para cada instrucción que se escriben en el fichero HTML. JavaScript, como veremos en este curso de diseño web, se ejecuta siempre del lado del cliente en su navegador.

Se puede usar con editores como DreamWeaver, Aptana, FrontPage y otros. El código JavaScript se puede adjuntar como un documento externo con extensión .js o se puede escribir junto al resto de código HTML de la página web.

En diseño web se estudiarán también las variables. Que es una ubicación temporal de memoria dónde el programador guarda cierto valor que le interesa tener. Se pude iniciar con un valor determinado que luego puede ir cambiando. Los tipos de datos de variables de JavaScript son: numéricas, ya sea un número entero o real. String, ya sea de cadenas de texto, caracteres entre comillas simples o dobles. Boolean, que es un valor lógico. Null cuando la variable no tiene valor. Objetos, cuando contienen propiedades y métodos.

Igualmente se estudiará en profundidad en este curso de diseño web el DOM o Document Object Model en inglés cuyo responsable es el W3C Wide Web Consortium. Veremos que es esencialmente una interfaz de programación de aplicaciones. Esta define la manera en que objetos y elementos se relaciones entre sí en el navegador y en el documento.

En este programa experto de diseño web se formará en JavaScritp orientado a objetos.

Framework y librerías

En este segmento se presentará brevemente qué es JQuery, Bootstrap, 960 Grid System y Angular JS. Por su lado,  JQuery es una librería de JavaScript, y ayuda a crear aplicaciones web dinámicas. Puede manipular el árbol DOM, modificar eventos, animaciones y crear documentos HTML interactivos.  Optimiza la cantidad de tareas que demandan muchas líneas de código JavaScripty los envuelve en una única línea.

Bootstrap es un framework de código abierto para el desarrollo web. Ofrece la posibilidad de crear maquetas y layouts. En este paquete se incluyen HTML, CSS, plantillas de diseño basadas en tipografía y formularios. Así como botones, cuadros, navegación, plugins de JavaScript opcionales y muchas más cosas.

Por su parte,  960 Grid System racionaliza el flujo de trabajo de entornos web al tiempo que proporciona medidas que se basan en un ancho de 960 píxeles. Está dirigido a maquetar proyectos web con columnas de ancho uniforme, pudiendo dividir la pantalla en 12 o 16 columnas. Las mismas se pueden combinar dependiendo del proyecto. Es una herramienta muy básica pero ahorra tiempo al ayudar a los usuarios a crear la estructura inicial de cualquier proyecto.

Para finalizar este curso de diseño web, Angular JS es también un framework. Está basado en el Modelo Vista y Controlado y enfocado a la gestión de aplicaciones de una sola página. Angular JS amplía el HTML tradicional a través del Two-Way Data Blinding permitiendo la sincronización automática de modelos y vistas. Además, Angular JS mejora la testeabilidad y el rendimiento en general, pero pone menos énfasis en la manipulación del DOM.