Portafolio de diseño digital 4 tito villao o

49
Portafolio del Estudiante UNIVERSIDAD TECNOLÓGICA EQUINOCCIAL Extensión Santa Elena Carrera: Diseño Gráfico Publicitario Materia: Diseño Digital 4 Estudiante: Tito Villao Orellana 2012-2013

Transcript of Portafolio de diseño digital 4 tito villao o

Page 1: Portafolio de diseño digital 4 tito villao o

Portafolio del Estudiante

UNIVERSIDAD TECNOLÓGICA EQUINOCCIAL

Extensión Santa Elena

Carrera: Diseño Gráfico Publicitario

Materia: Diseño Digital 4

Estudiante: Tito Villao Orellana

2012-2013

Page 2: Portafolio de diseño digital 4 tito villao o

Contenido

1.- Clases Teóricas.

2.-Investigaciones.

3.-Resultado del Aprendizaje.

-Talleres en clase.

-Pruebas.

-Evaluaciones

Page 3: Portafolio de diseño digital 4 tito villao o

Clases Teóricas

Page 4: Portafolio de diseño digital 4 tito villao o

¿Qué es el internet?

El Internet es una red informática descentralizada, que para permitir la conexión entre computadoras opera a través de un protocolo de comunicaciones. Para referirnos a ella además se utiliza el término "web"  en inglés, refiriéndose a una "tela de araña" para representar esta red de conexiones.

En palabras sencillas, la Internet es un conjunto de computadoras conectadas entre si, compartiendo una determinada cantidad de contenidos; por este motivo es que no se puede responder a la pregunta de donde está la Internet físicamente - está en todas las partes donde exista un ordenador con conectividad a esta red.

Page 5: Portafolio de diseño digital 4 tito villao o
Page 6: Portafolio de diseño digital 4 tito villao o

¿Como funciona el internet?

El primer paso es lograr su interconexión física, para lo que se emplean sistemas muy diversos:Redes de área local, por lo general basadas en el estándar Ethernet. Son las más utilizadas en redes corporativas de empresas u organizaciones, con extensiones menores de 2 Km. Enlaces nacionales, con líneas de usos exclusivos o compartidos (de una compañía telefónica).Enlaces internacionales, proporcionados por compañía de comunicaciones con implantación internacional. Pueden utilizar cableado convencional, fibra óptica, satélites, enlaces por microondas, Además, muchos usuarios utilizan módems para conectarse desde sus casas, a través de llamadas telefónicas comunes, a proveedores de comunicaciones que dan, a su vez, acceso a Internet. El uso de líneas RDSI (Red Digital de Servicios Integrados) es cada vez más frecuente, como solución de futuro para conectar a usuarios particulares a las redes de información de alta velocidad.

Page 7: Portafolio de diseño digital 4 tito villao o

¿Qué es un dominio?Un dominio de Internet es un nombre de un servidor de Internet que facilita recordar de forma más sencilla la dirección IP de un servidor de Internet, por ejemplo internetworks.com.mx

Todos los servidores y páginas de Internet tienen una dirección numérica que se conoce como dirección IP (Protocolo de Internet), por ejemplo 216.29.152.110

Los dominios fueron creados para evitar el que tuviéramos que recordar las direcciones numéricas de las páginas y servidores web. De forma que cuando escribimos en internet el dominio internetworks.com.mx el servidor de DNS (Servidor de Nombres de Dominio) del proveedor de web hosting del dominio internetworks.com.mx nos proporciona la dirección IP 216.29.152.110 y nuestro navegador se va directamente a esa dirección numérica.

Page 8: Portafolio de diseño digital 4 tito villao o
Page 9: Portafolio de diseño digital 4 tito villao o

¿Qué es un hosting?

El alojamiento web (en inglés web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía Web. Es una analogía de hospedaje o alojamiento en hoteles o habitaciones donde uno ocupa un lugar específico, en este caso la analogía alojamiento web o alojamiento de páginas web, se refiere al lugar que ocupa una página web, sitio web, sistema, correo electrónico, archivos etc. en Internet o más específicamente en un servidor que por lo general hospeda varias aplicaciones o páginas web.

Page 10: Portafolio de diseño digital 4 tito villao o

¿Qué es un URL?

URL son las siglas en inglés de uniform resource locator (en español localizador uniforme de recursos), que sirve para nombrar recursos en Internet. Este nombre tiene un formato estándar y tiene como propósito asignar una dirección única a cada uno de los recursos disponibles en Internet, com por ejemplo textos, imágenes, vídeos, etc.

Page 11: Portafolio de diseño digital 4 tito villao o

¿Qué es el intranet?

La Intranet, que quiere decir red interna, lleva un par de décadas siendo utilizada ampliamente en las empresas. Principalmente, ya que las tecnologías existentes, décadas atrás, no lo permitían. Lo central de la Intranet, es la utilización de esta, en el ambiente de los negocios y también, a veces, en el académico.

Ya que la Intranet, provee de un especio común, para el desarrollo de estrategias, información, memorandos, entre otras aplicabilidades, las cuales son utilizadas por toda la empresa u establecimiento educativo.

Page 12: Portafolio de diseño digital 4 tito villao o

¿Que es http?

El término http quiere decir "Hypertext Transfer Protocol", en español "Protocolo de Transferencia de Hipertexto". Para los que no tienen experiencia en términos computacionales, esto puede parecer complicado, pero en realidad no lo es si examinamos este asunto por partes. Un protocolo es un conjunto de reglas a seguir, o lenguaje en común, y en este caso es conjunto de reglas a seguir son para publicar páginas web o HTML. El hipertexto se refiere a texto común con algunos atributos propios de las páginas en Internet, como lo son los enlaces. Por lo tanto http es un conjunto de reglas acordadas para transferir texto con atributos propios de la Internet. Bastante sencillo.

Page 13: Portafolio de diseño digital 4 tito villao o
Page 14: Portafolio de diseño digital 4 tito villao o

¿Qué es html?HTML es el acrónimo de HyperText Markup Language (Lenguaje de Marcado de Hipertexto) y es el lenguaje que se utiliza para crear las páginas web. Este lenguaje indica a los navegadores cómo deben mostrar el contenido de una página web.

El lenguaje html contiene dos partes:

el contenido, que es el texto que se verá en la pantalla de un ordenador,

y las etiquetas y atributos que estructuran el texto de la página web en encabezados, párrafos, listas, enlaces, etc. y normalmente no se muestra en pantalla.

Las etiquetas, que son un conjunto de caracteres que rodean partes del documento, están formadas por el símbolo

Page 15: Portafolio de diseño digital 4 tito villao o

¿Qué son las etiquetas html?

Una etiqueta o marca HTML es un código que se incluye en los archivos creados con el lenguaje HTML para estructurar, añadir significado o formato al contenido a una página web.

Page 16: Portafolio de diseño digital 4 tito villao o

Planificación de un sitio web

Concepto / idea / contenido

Hosting / dominio

Distribución del contenido – top down

Boceto de diagramación > Interfaz de usuario

Dimensiones del sitio *(800x600 / 1024x768 etc.)

Colectar contenido > redacción de texto > imágenes > audio > video > tomar fotos y retocar > diseñar iconos > seleccionar tipografías *(de sistema)

Software donde se va a producir *(flash dreamweaver, html5)

Publico al que va dirigido > Edad, sexo, como se comporta el usuario *(en que aparatos laptop, desktop, tablet, smartphone, etc)

Page 17: Portafolio de diseño digital 4 tito villao o

COMO CREAR UN ARCHIVO HTML DESDE UN EDITOR DE

TEXTO?En sistemas operativos como Windows para realizar una página web usando html sólo necesitamos hacer lo siguiente:Abrir un nuevo documento utilizando el bloc de notas que viene ya instalado con el sistema.

Luego escribir la estructura básica y añadir formato y atributos mediante las etiquetas a la información.

Guardar como index.html

Abrir el archivo en un navegador web.

Page 18: Portafolio de diseño digital 4 tito villao o

ESTRUCTURA BÁSICA HTML

Page 19: Portafolio de diseño digital 4 tito villao o

Interfaz de Fireworks

Page 20: Portafolio de diseño digital 4 tito villao o

Interfaz de Dreamweaver

Page 21: Portafolio de diseño digital 4 tito villao o
Page 22: Portafolio de diseño digital 4 tito villao o
Page 23: Portafolio de diseño digital 4 tito villao o

Investigaciones

Page 24: Portafolio de diseño digital 4 tito villao o

Extensiones de archivos de imagen

usadas en sitios webFormatoJPEG o JPG

Joint Photographic Experts Group (Grupo Conjunto de Expertos en Fotografía)

El formato JPEG es usado ampliamente para fotografías e imágenes de gran tamaño y variedad de color en la web y por las cámaras digitales. Es un formato comprimido con pérdida de calidad, aunque esta se puede ajustar.

Page 25: Portafolio de diseño digital 4 tito villao o

Formato PNG (Gráficos de Red Portátiles)

Es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de contraste y otros importantes datos.

Formato Tiff (Tagged Image File Format)

TIFF se utiliza masivamente en gráficos de imprenta. Se pueden emplear algoritmos con pérdida o sin pérdida, bien muchos programas sólo son compatibles con un pequeño subconjunto de las opciones disponibles y mayor mente utilizados en escáner.

Page 26: Portafolio de diseño digital 4 tito villao o

Extensiones de archivos de archivos vectoriales usadas en sitios web

Formato PDF

Identifica archivos cuyo contenido está en formato PDF. Este formato debe su nombre al acrónimo del inglés Portable Document Format y permite transferir documentos como folletos, trípticos y en general, aquellos que contengan diseño gráfico y utilicen fuentes tipográficas especiales, con la seguridad de que se verán en la forma adecuada, sin importar el tipo de equipo que se utilice. Este formato fue creado por Adobe Systems, Inc, pero existen otros programas no propietarios que generan este tipo de archivos.

Page 27: Portafolio de diseño digital 4 tito villao o

Formato EPS (Encapsulated

PostScript)Archivo vectorial. Este formato es usado por las imágenes que realizamos con programas como Illustrator o Freehand. Contiene información vectorial y se usa para impresión. No puede por tanto visualizarse en los equipos que no cuenten con un software específico para ello (aunque algunos archivos EPS cuentan con un pequeño TIFF de 8 bits para previsualizar su contenido).

Page 28: Portafolio de diseño digital 4 tito villao o

 SVG (Scalable Vector

Graphics)Archivo vectorial. SVG es el único formato vectorial capaz de ser interpretado por los navegadores web. Ha sido creado para ello, y poco a poco se está implementando su uso en internet (cuenta con el apoyo del W3C). Navegadores como Firefox, Chrome u Opera, en sus versiones actuales, son capaces de mostrarlo (Internet Explorer precisa de un plug-in para ello). Es por tanto la actual apuesta del diseño web por la ilustración vectorial.

Page 29: Portafolio de diseño digital 4 tito villao o

Software de Programación Web

Amaya

Amaya es un editor de páginas web cargado de funciones, todas ellas útiles, pero tan fáciles que seguro que sabrás usar desde el primer momento para crear tus propios sitios en Internet.

La principal ventaja de Amaya es que muestra el resultado de la página en vivo y puedes hacer los cambios sobre ella, bien sea añadiendo elementos como imágenes o texto, o bien modificando el código HMTL o el CSS adjunto.

Page 30: Portafolio de diseño digital 4 tito villao o

JavaScript Collector

JavaScript Collector pone a tu disposición un compendio de scripts en Java listos para integrar en tu código fuente y lucir con orgullo en tu página web.

Incluye más de 200 scripts organizados en diversas categorías, que van desde efectos especiales de texto hasta juegos online, pasando por menús desplegables, gestión de cookies, contadores, calculadoras y mucho más.

Pero la cosa no acaba aquí. Esta lista puede aumentarse hasta el infinito, creando nuevas categorías y añadiendo en ellas nuevos scripts, en Java o en cualquier otro lenguaje de programación.

Page 31: Portafolio de diseño digital 4 tito villao o

Eclipse SDK

Eclipse es una potente y completa plataforma de programación, desarrollo y compilación de elementos tan variados como sitios web, programas en C++ o aplicaciones Java.

Eclipse es un entorno de desarrollo integrado (IDE) en el que encontrarás todas las herramientas y funciones necesarias para tu trabajo, recogidas además en una atractiva interfaz que lo hace fácil y agradable de usar.

Page 32: Portafolio de diseño digital 4 tito villao o

Software de Diseño Web

WebSite X5

Si necesitas publicar cualquier contenido en Internet pero no tienes conocimientos de programación, WebSite X5 te ayudará en esta tarea desde el primer clic. Su asistente costa de cinco pasos para diseñar y llenar de contenido tu página web.

WebSite X5 te permite escoger entre 1.500 plantillas clasificadas por temas y visualizarlas antes de añadir su contenido. También es posible personalizar el color y los elementos de la cabecera y el pie de página.

Page 33: Portafolio de diseño digital 4 tito villao o

WebEasy

Siempre se agradece que surjan herramientas para la creación de páginas web al alcance de cualquier usuario.

En este caso, WebEasy te propone un sinfín de posibilidades, desde la creación de una sencilla web personal hasta el establecimiento de un sitio web comercial con toda la profesionalidad que requiere un proyecto de tal envergadura.

Page 34: Portafolio de diseño digital 4 tito villao o

Historia de FacebookOriginalmente era un sitio para estudiantes de la Universidad de Harvard, pero actualmente está abierto a cualquier persona que tenga una cuenta de correo electrónico. Los usuarios pueden participar en una o más redes sociales, en relación con su situación académica, su lugar de trabajo o región geográfica.

El creador de Facebook es Mark Zuckerberg, estudiante de la Universidad de Harvard. La compañía tiene sus oficinas centrales en Palo Alto, California.

La idea de crear una comunidad basada en la Web en que la gente compartiera sus gustos y sentimientos no es nueva, pues David Bohnett, creador de Geocities, la había incubado a fines de los años 1980. Facebook compite por abrirse espacio entre empresas de éxito como Google y MySpace, por lo que se enfrenta a grandes desafíos para lograr crecer y desarrollarse. Una de las estrategias de Zuckerberg ha sido abrir la plataforma Facebook a otros desarrolladores.

La fortaleza de la red social Facebook radica en los 900 millones de usuarios que ha alcanzado,7 basada en conexiones de gente real.

Entre los años 2007 y 2008 se puso en marcha Facebook en español traducido por usuarios de manera no remunerada, extendiéndose a los países de Latinoamérica. Casi cualquier persona con conocimientos informáticos básicos puede tener acceso a todo este mundo de comunidades virtuales.

Page 35: Portafolio de diseño digital 4 tito villao o

La mayoría ve una extensión “.php” y creen que toda la plataforma ha sido desarrollada en este lenguaje pero no es así, cuando crearon Facebook llegaron a la conclusión de que PHP no es precisamente el lenguaje más rápido que existe, ya que se trata de un lenguaje interpretado y si a eso le agregan que hay tareas que no se pueden llevar a cabo en PHP,  la conclusión a la que llegaron los programadores de Facebook fue que quizá no haya sido una buena elección elegir PHP para su desarrollo, lo que les ha llevado a intentar migrar el núcleo de Facebook a Python en varias ocasiones, pero ninguna llegó a tener el resultado que esperaban.

Actualmente la plataforma de Facebook incluye:

Sistema operativo LinuxMemcacheApache CassandraApache HiveApache ThriftScribeLenguajes: PHP, Java, C++, Erlang, .NET, PEARLHipHop para PHPTornado Web ServerMysqlProtocolo XMPP

Page 36: Portafolio de diseño digital 4 tito villao o

Historia de YoutubeYouTube usa un reproductor en línea basado en Adobe Flash para servir su contenido (aunque también puede ser un reproductor basado en el estándar HTML5, que YouTube incorporó poco después de que la W3C lo presentara y que es soportado por los navegadores web más importantes). Es muy popular gracias a la posibilidad de alojar vídeos personales de manera sencilla. Aloja una variedad de clips de películas, programas de televisión y vídeos musicales. A pesar de las reglas de YouTube contra subir vídeos con derechos de autor, este material existe en abundancia, así como contenidos amateur como videoblogs. Los enlaces a vídeos de YouTube pueden ser también insertados en blogs y sitios electrónicos personales usando API o incrustando cierto código HTML.

Page 37: Portafolio de diseño digital 4 tito villao o

Historia de InstagramInstagram es una aplicación gratuita para compartir fotos con la que los usuarios pueden aplicar efectos fotográficos como filtros, marcos y colores retro y vintage y compartir las fotografías en diferentes redes sociales como Facebook, Twitter, Tumblr y Flickr. Una característica distintiva de la aplicación es que da una forma cuadrada y redondeada en las puntas a las fotografías en honor a la Kodak Instamatic y las cámaras Polaroid.

La aplicación fue diseñada para iPhone y a su vez está disponible para sus hermanos iPad y iPod con el sistema iOS 3.0.2 o superior pudiéndose descargar desde el App Store y desde su página web.

A principios de abril de 2012, se publicó una versión para Android y está disponible para descargar desde Google Play.

Próximamente estará disponible para dispositivos BlackBerry, Motorola, Windows Phone y Huawei.

Page 38: Portafolio de diseño digital 4 tito villao o

Historia de BloggerBlogger es un servicio creado por Pyra Labs, y adquirido por Google en el año 2003, que permite crear y publicar una bitácora en línea. Para publicar contenidos, el usuario no tiene que escribir ningún código o instalar programas de servidor o de scripting.Los blogs alojados en Blogger generalmente están alojados en los servidores de Google dentro del dominio blogspot.com. Hasta el 30

de abril de 2010, Blogger permitió publicar bitácoras a través de FTP.

Lanzado en agosto de 1999, es una de las primeras herramientas de publicación de bitácora en línea y es acreditado por haber ayudado a popularizar el uso de formularios.Más específicamente, en vez de escribir a mano el código HTML y frecuentemente subir las nuevas publicaciones, el usuario puede publicar a su bitácora en línea, que se actualiza dinámicamente, llenando un formulario en el sitio web de Blogger. Esto puede ser realizado por cualquier navegador web actualizado y los resultados se reflejan inmediatamente

Page 39: Portafolio de diseño digital 4 tito villao o

Tendencias de web 2.0/3.0

Web 2.0: La que a fines de los '90 cambió el rol de los usuarios, que empezaron a co-crear socialmente contenido y valor. Los símbolos: YouTube, Facebook, Linkedln, deli.cio.us, Wikipedia.

Una plataforma cooperativa en la que el poder colectivo y los efectos de red (la cola larga o "long tail") abrían la posibilidad de generar un valor extraordinario. Hora de modificar los modelos de negocios para aprovechar las ventajas de "escalar" cada contribución individual, y de prepararse para convivir en el Gran Hermano virtual.

Page 40: Portafolio de diseño digital 4 tito villao o

La Web 3.0 es un término que no termina de tener un significado ya que varios expertos han intentado dar definiciones que no concuerdan o encajan la una con la otra pero que, en definitiva, va unida a veces con la Web Semántica.

En lo que a su aspecto semántico se refiere, la Web 3.0 es una extensián del World Wide Web en el que se puede expresar no sólo lenguaje natural, también se puede utilizar un lenguaje que se puede entender, interpretar utilizar por agentes software, permitiendo de este modo encontrar, compartir e integrar la información más fácilmente.

Page 41: Portafolio de diseño digital 4 tito villao o

Resultadodel

Aprendizaje

Page 42: Portafolio de diseño digital 4 tito villao o

Talleres en clase

Page 43: Portafolio de diseño digital 4 tito villao o

Pagina web con etiquetas html

Page 44: Portafolio de diseño digital 4 tito villao o
Page 45: Portafolio de diseño digital 4 tito villao o

Deberes

Page 46: Portafolio de diseño digital 4 tito villao o

Pagina web con etiquetas html

Page 47: Portafolio de diseño digital 4 tito villao o
Page 48: Portafolio de diseño digital 4 tito villao o

Pagina Web en Fireworks

Page 49: Portafolio de diseño digital 4 tito villao o