Ficha 0001

Diseño Web
Docente: Ing. Joselito Edin Santa Cruz Díaz
Alumno: ________________________________Turno: _________

El Objetivo es que el alumno tenga los conocimientos teóricos para la

aplicación en el diseño de páginas web

1. ¿Qué es diseño?
El diseño es una actividad creativa orientada a soluciones, que trabaja en
intervenciones concretas. Itera sobre representaciones parciales para
construir, refinar y evaluar la manera en que la intervención cambiará el
mundo. Convoca múltiples actores y saberes para imaginar y desencadenar
el cambio.
2. ¿Qué es Web?
La web es una forma abreviada de "World Wide Web", algo así como la "Red
Mundial de Telarañas" si se traduce literalmente en español, y es la red
encargada de mostrarnos la parte visual de internet. Utiliza un lenguaje de
marcación de texto llamado HTML
3. ¿Qué es Diseño Web?
Actividad que consiste en la planificación, diseño e implementación de sitios
y páginas Web. No es simplemente una aplicación del diseño convencional
sobre Internet. ya que requiere tener en cuenta cuestiones tales como
navegabilidad, interactividad, usabilidad, arquitectura de la información y la
interacción de medios como el audio, texto, imagen y video. Se lo considera
dentro del diseño multimedia.

4. Diseño web y desarrollo web

DIFERENCIA ENTRE EL DISEÑO WEB Y DESARROLLO WEB

1
 Diseño Web
Diseño de páginas web determina la
apariencia. Que cubre el diseño, la
navegación y los colores de un sitio web
(También puede incluir el diseño gráfico
y logo), está más preocupado por la
estética y la experiencia del usuario de
las funciones. Un diseñador de páginas
web crea sitios fáciles de usar y
adecuados para su propósito.
Habilidad de un Diseñador Web
Un buen diseñador web tendrá las
habilidades de diseño gráfico y una
buena comprensión de la
comercialización. Él o ella saben cómo
llamar la atención de los visitantes y
animarles a explorar un sitio web.
Herramientas para el Diseño Web
Para lograr un buen trabajo, no tan solo
hace falta de mucho conocimiento,
práctica y un buen toque, sino que
también se necesitan distintas
plataformas en donde basar nuestras
habilidades, combinándolo con buenos
recursos (imágenes prediseñadas,
fondos, texturas, tipos de fuentes de
letra, degradados, etcétera). Los
diseñadores Web utilizan el software
como Photoshop, Flash y Fireworks.
También tendrán un buen conocimiento
de la tipografía, teoría del color y la
accesibilidad web.
Herramientas de Superposición
La mayoría de los diseñadores y desarrolladores están familiarizados con HTML
y CSS.
Desarrollo Web
En contraste, el desarrollo web ofrece
las funciones y características. Se trata
de la programación de servicios de
fondo y no el rostro de un sitio web.
Funciones previstas en el desarrollo
web incluyen el registro, los sistemas de
gestión de contenidos, comercio
electrónico y las aplicaciones de base
de datos, además de permitir a los
visitantes interactuar en un sitio web.
Habilidad de un Desarrollador Web
Un desarrollador web de buena
voluntad tiene excelentes habilidades
de programación y es capaz de utilizar
una amplia gama de herramientas de
programación. Él o ella serán capaces
de ofrecer soluciones para dar un sitio
web de las funciones requeridas.
Habrá cierta superposición de
competencias entre los diseñadores y
desarrolladores web. No es habitual
que una persona sea un excelente
diseñador y a su vez desarrollador.
Herramientas para el Desarrollo
Web
Los desarrolladores web se utilizan una
serie de herramientas de programación
como ASP, JavaScript, XML y SQL.
Estas son sólo algunas de las
herramientas más conocidas. Hay
muchas otras herramientas y se están
desarrollando nuevas todo el tiempo.
Por ejemplo, las aplicaciones móviles
han creado una enorme demanda de
los desarrolladores con los
conocimientos pertinentes.
2
5. Que es más importante para un buen diseño web o desarrollo Web
La investigación ha demostrado que los visitantes juzgan una web en tan sólo
unos segundos. Por lo tanto, se requiere hacer el diseño de páginas web
atractivo y fácil de usar y un buen desarrollo se requiere crear buenas
funciones de enlaces de interés. Lo ideal sería que los diseñadores y
desarrolladores trabajaran juntos para retener a los visitantes y fomentar las
visitas de retorno.
En conclusión, tanto el diseño como el desarrollo web son esenciales para
producir un sitio efectivo deben estar integrados para así ofrecer la mejor
creación de páginas en circulación.
6. Fases del Diseño Web
El diseño Web, es un proceso elaborado que está formado por varias fases.
Cuanto más grande es el proyecto, más fases puede tener. A continuación, se
mencionan algunas de las fases básicas del diseño Web, con las que cuentan
todos los proyectos.
 Análisis y definición del diseño Web
En esta fase del diseño se estudia la imagen que debe tener la página
Web, de acuerdo al objetivo que desea cumplir. Es la fase en la que
se genera una primera visión del diseño que presentarán las páginas
Web del sitio.
 Creación de la página Web
Después de aprobar el boceto del diseño Web en la fase anterior, se
procede a la implementación de este diseño como página Web, con
sus cabeceras, menús, animaciones e imágenes.
 Programación de la navegabilidad
Una vez creadas y estructuradas las páginas Web, se procede a
programar su navegabilidad y su funcionalidad, para una correcta
presentación de las páginas Web, tal y como se define en el diseño
Web original.
Estos tres actos, se van haciendo uno tras otro, y a veces
continuamente. Algunos teóricos del diseño no ven una jerarquización
tan clara, ya que estos actos aparecen una y otra vez en el proceso de
diseño.

3
7. Tipos de Diseño Web
Diseño Web Fijo

Este tipo de diseño, llamado fixed web design en inglés es uno de los más
ocupados en Internet. Permanece inalterable sea cual sea el dispositivo desde
el cual se vea el sitio web, es decir, es indiferente al tamaño de la pantalla.
Cualesquiera sean las características de la pantalla o navegador siempre se
visualiza el mismo tamaño preestablecido por el diseñador web en pixeles.

Diseño Web Responsive

Este tipo de diseño web también es conocido como sensible, el cual varía en
función del tipo de dispositivo desde el cual se visualiza o del ancho del
navegador web por el cual se accede. De esta manera, se puede apreciar un
sitio en un Smartphone, otro en una Tablet y otro en un computador de
escritorio.

Así, se asegura de que el contenido presente en el sitio se muestre sin

problemas, ajustándose a la pantalla, es decir, la información se muestra de
todas formas y se le puede sacar mucho más provecho. Este es el tipo de
diseño que ha tenido más auge en la actualidad, gracias a la proliferación de
dispositivos móviles para navegar por Internet.

Además, cabe recordar que uno de los últimos cambios en el algoritmo de

Google, han dispuesto que se penalizará a los sitios que no posean un diseño
Responsive, afectando su ubicación en los motores de búsqueda.

Diseño Web Fluido

Este tipo de pantalla ocupa todo el ancho de las pantallas, independiente del
tamaño de ésta. Es un tipo de diseño menos utilizado, ya que requiere de un
trabajo más minucioso, por parte de quien realiza esta página.

Si no se realiza como es debido, el resultado puede ser catastrófico, sin

embargo, pero de lo contrario, para pantallas normales, puede arrojar un
resultado bastante atractivo.

4
 Diseño Web Elástico

Este es un tipo de diseño web muy similar al fluido, sólo que, en este caso, el
contenido también crece junto al ancho del diseño para rellenar la pantalla. Es
un tipo de diseño que no es muy utilizado.

El resultado de un diseño elástico puede resultar más o menos agradable en

tamaños de pantalla más o menos pequeños, pero una vez que se usan
pantallas muy grandes, el contenido se vuelve exageradamente irracional, por
lo que salvo en algunas circunstancias, no tiene razón de ser.

8. ¿Qué es Html?
HyperText Markup Language (HTML) es el lenguaje utilizado para describir y
definir el contenido de una Página Web en un formato bien estructurado.
9. ¿Qué es CSS?
Cascading Style Sheets (CSS) u Hojas de estilo en cascada se utiliza para
describir el aspecto o presentación del contenido en una Página Web
10. ¿Qué es HTTP?
Hypertext Transfer Protocol (HTTP) o Protocolo de Transferencia de
Hipertexto (HTTP) es un protocolo de la capa de aplicación para la
transmisión de documentos hipermedia, como HTML.
11. ¿Qué es JavaScript?
JavaScript es el lenguaje de programación que se ejecuta en el navegador y
que se utiliza para crear sitios Web interactivos y aplicaciones avanzadas
para que sean ejecutadas de modo seguro en el navegador.
12. ¿Qué es Web APIs?
Web Application Programming Interfaces (Web APIs) Son utilizadas para
desarrollar una gran variedad de tareas , como manipular el DOM , reproducir
audio o video , o generar gráficos 3D.

 Referencia de las interfaces Web API . Lista de todos los tipos de

objetos que puedes utilizar mientras desarrollas la Web.
 La página de Web API .Lista de toda la comunicación, acceso
hardware y otras APIs que puedes utilizar en las Aplicaciones Web.

5
  La Referencia de Eventos enumera todos los eventos que puede
utilizar para realizar un seguimiento y reaccionar a las cosas
interesantes que han tenido lugar en su Página Web o Aplicación.

13. ¿Qué es WebGL?

WebGL es una API JavaScript que te permite dibujar gráficos3D o 2D
utilizando elementos HTML5 <canvas> .
14. ¿Qué es SVG?
Scalable Vector Graphics o Gráficos vectoriales escalables, te permite
describir las imágenes como conjuntos de vectores (líneas) y formas con el
fin de permitir ajustarse a escala sin problemas independientemente del
tamaño en el que están trazadas.
15. ¿Qué es MathML?
Mathematical Markup Language o Lenguaje de Marcado Matemático, te
permite mostrar complicadas ecuaciones y sintaxis matemáticas.

Actividad

 Realizar un mapa conceptual del tema

 Realizar una conclusión propia sobre el diseño web y el desarrollo web