1. TECNOLOGICO DE ESTUDIOS SUPERIORES
IXTAPALUCA
Sistemas Operativos
Proyecto Final
GRAFICACION
ALUMNO: GONZALEZ PEREZ MARCO VINICIO

2. INTRODUCCION
Duerante el septimo semestre de la carrera de Ingenieria en Sistemas, en la materia de Graficacion,
desarrollamos habilidades y conocimientos referentes a la manipulacion de imagenes, enfocandonos
principalmente en canvas para desarrollo HTML.
Se tuvo la oportunidad de crear pequeños codigos para mostrar de que manera funciona canvas y como
implementarlo en un sitio.
El presente documento, es una recabacion de la informacion obtenida durante el semestre, que podra
ser usada para futuras referencias.

3. PLANTEAMIENTO DEL PROBLEMA
¿Que es la Graficación y como se relaciona con la carrera?
La graficacion se puede clasificar en la computacion segun su aplicacion en dos diferentes
conceptos.
El primero de ellos nos habla de estadisticas y numeros, pues se le conoce como graficacion,
a la representacion tabulada o contabilizada de informacion o resultados.
Mientras tanto el segundo, nos enfoca mas a la manipulacion de formas e imagenes,
mediante software especializado a diseño o publicidad, pues estos programas estan
diseñados para la optimizacion de graficos, a traves de formas vectoriales y acabados de
presentacion.
OBJETIVO
Como proyecto final para la materia de Graficacion, se debera entregar, dentro de una
pagina web, algunos de los codigos realizados durante el curso, con el fin de mostrar su
funcionamiento y desarrollo a quienes asi lo requieran, cumpliendo con una rubrica de
escalacion y evaluacion de entrega.
JUSTIFICACION
Es necesario demostrar los conocimientos adquiridos durante el curso, y asi mismo observar
de que manera se relacionan con las demas materias de la carrera, pues para este caso, va
muy tomada de la mano con las materias de “Programacion Web” y “Planeacion y
Modelado”.
Solo asi se lograra enseñar a las siguientes generaciones de la carrera, que ninguna materia
va sola, y todas tienen de un porque en el plan de estudios.

4. HTML
HTML5 es la quinta versión del lenguaje HTML, regulado por el World Wide Web Consortium
(3WC). Desde sus inicios en 1991, ha sufrido varias revisiones, pero ninguna lo
suficientemente profunda como para asegurar la convergencia en el desarrollo web.
HTML5 apunta más alto que nunca y, desde que en 2004 se constituyó el Web Hypertext
Application Technology Working Group para favorecer su desarrollo, sus integrantes y
colaboradores trabajan con las expectativas de ofrecernos una versión práctica y adaptada a
las necesidades reales de la Web del siglo XXI. Actualmente se halla en fase borrador, pero
ya podemos encontrar numerosos recursos y algunas páginas desarrolladas con este
estándar. ¿Es el momento de pensar en la migración? Cuando menos, es la hora de conocer
la próxima realidad.
En HTML5 hay una reorganizacion de espacio para los sitios web la cual en la siguiente
imagen se puede observar.

5. CSS
CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con
HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la
vez que permite a los diseñadores mantener un control mucho más preciso sobre la
apariencia de las páginas.
El objetivo inicial de CSS, separar el contenido de la forma, se cumplió ya con las primeras
especificaciones del lenguaje. Sin embargo, el objetivo de ofrecer un control total a los
diseñadores sobre los elementos de la página ha sido más difícil de cubrir. Las
especificaciones anteriores del lenguaje tenían muchas utilidades para aplicar estilos a las
webs, pero los desarrolladores aun continúan usando trucos diversos para conseguir efectos
tan comunes o tan deseados como los bordes redondeados o el sombreado de elementos en
la página.
CSS 1 ya significó un avance considerable a la hora de diseñar páginas web, aportando
mucho mayor control de los elementos de la página. Pero como todavía quedaron muchas
otras cosas que los diseñadores deseaban hacer, pero que CSS no permitía especificar,
éstos debían hacer uso de trucos para el diseño. Lo peor de esos trucos es que muchas
veces implica alterar el contenido de la página para incorporar nuevas etiquetas HTML que
permitan aplicar estilos de una manera más elaborada. Dada la necesidad de cambiar el
contenido, para alterar al diseño y hacer cosas que CSS no permitía, se estaba dando al
traste con alguno de los objetivos para los que CSS fue creado, que era el separar por
completo el contenido de la forma.
CSS 2 incorporó algunas novedades interesantes, que hoy ya utilizamos habitualmente, pero
CSS 3 todavía avanza un poco más en la dirección, de aportar más control sobre los
elementos de la página.
Así pues, la novedad más importante que aporta CSS 3, de cara a los desarrolladores de
webs, consiste en la incorporación de nuevos mecanismos para mantener un mayor control
sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a
trucos o hacks, que a menudo complicaban el código de las web.
JQUERY
jQuery es un framework de JavaScript que la mayoría de los desarrolladores
web(incluyéndome) utilizan. Pero ¿Por qué lo utilizan?. Es simple la respuesta, es mas fácil
codificar esto: " var iD = $('input[name=id]').val; " que esto "var iD =
document.getElementByName("id").value; ".
¿Cuál es mas fácil de programar y mas aun de comprender el código con facilidad?.
Obviamente seria jQuery por la facilidad de su sintaxis pero dirán que si jQuery sustituye a
JavaScript y la respuesta es no, jQuery facilita la codificación en JS la cual es muy
complicada y poco entendible. Un plus para jQuery es la manejo simple de DOM, como
eventos, efectos y funciones las cuales en JS es muy complicado, un ejemplo universal seria
el de AJAX(Asynchronous JavaScript and XML) una serie de funciones y comandos en JS
que en jQuery lo haces con una función y unos ciertos parámetros configurables.

6. CANVAS
HTML5 incorpora algunas novedades y una de las que podemos empezar a probar ya es el
Canvas. Canvas significa en español algo así como lienzo y es básicamente eso, un área
donde podemos dibujar como si fuera un lienzo.
El elemento canvas permite especificar un área de la página donde se puede, a través de
scripts, dibujar y renderizar imágenes, lo que amplía notablemente las posibilidades de las
páginas dinámicas y permite hacer cosas que hasta ahora estaban reservadas a los
desarrolladores en Flash, con la ventaja que para usar canvas no será necesario ningún
plugin en el navegador, lo que mejorará la disponibilidad de esta nueva aplicación.
En este artículo y los siguientes pretendemos dar una introducción a canvas, para los
lectores de DesarrolloWeb.com interesados en conocer de cerca esta nueva utilidad de
HTML 5. Al menos esperamos dar a conocer las posibilidades del canvas y ofrecer algunos
ejemplos que se puedan probar ya en los navegadores más modernos.

7. CONCLUSIONES
Es importante conocer, la relacion de la Graficacion en las diferentes materias cursadas, y
ver la forma de complementar una con otra.
Tambien es necesario conocer los ultimos avances en tecnologias, como lo fue conocer
HTML5 y el contexto Canvas, pues este ultimo vino a revolucionar la manera de insercion de
graficos en sitios web, haciendo mas ligeros y dinamicos los espacios de informacion.
BIBLIOGRAFIA
1.- http://www.desarrolloweb.com/articulos/introduccion-canvas-html5.html
2.- http://www.html5rocks.com/
3.- http://nicolasgallagher.com/pure-css-speech-bubbles/