Introduccin

La carrera de Ingeniera Mecnica Elctrica impartida en la Facultada de Estudios Superiores Cuautitln tiene como bases el uso de las matemticas para la comprensin y aplicacin para las diferentes reas y materias que conforman la carrera. Dentro de la Carrera de Ingeniera Mecnica Elctrica, est el departamento de matemticas que es el encargado de desarrollar las mejores estrategias para la imparticin correcta y eficiente de las asignaturas del rea de matemticas. Ante la necesidad de contar con materia del apoyo para los alumnos en el rea de matemticas y tomando en cuenta que no todos viven cerca de la Facultada de Estudios Superiores Cuautitln. Por tan motivo se propuso la creacin de material didctico virtual para el apoyo en asesoras en el rea de matemticas, tomando como referencia para la creacin de tal material las pginas web para que as estn disponibles en cualquier hora y los alumnos puedan consultarlas desde sus hogares o cualquier lugar que cuente con una conexin a internet.

Objetivo general del programa

Genera material didctico virtual para facilitar y mejorar el aprendizaje de las matemticas.

Objetivo del Alumno

Mi objetivo fue tratar de crear una pgina web utilizando lenguaje HTML y que sea de calidad y fcil entendimiento, para poder difundir las matemticas de una manera prctica y de fcil acceso a la informacin.

Descripcin del programa

Una pgina web es un documento o informacin electrnica adaptada para la World Wide Web que generalmente forma parte de un sitio web. Su principal caracterstica son los hipervnculos de una pgina, siendo esto el fundamento de la WWW. Una pgina web est compuesta principalmente por informacin (slo texto o mdulos multimedia) as como por hiperenlaces; adems puede contener o asociar datos de estilo para especificar cmo debe visualizarse, y tambin aplicaciones embebidas para hacerla interactiva. Las pginas web son escritas en un lenguaje de marcado que provea la capacidad de manejar e insertar hiperenlaces, generalmente HTML. El contenido de la pgina puede ser predeterminado (pgina web esttica) o generado al momento de visualizarla o solicitarla a un servidor web (pgina web dinmica). Las pginas dinmicas que se generan al momento de la visualizacin se hacen a travs de lenguajes interpretados, generalmente JavaScript, y la aplicacin encargada de visualizar el contenido es la que debe generarlo. Las pginas dinmicas que se generan al ser solicitadas son creadas por una aplicacin en el servidor web que alberga las mismas.

Respecto a la estructura de las pginas web, algunos organismos, en especial el W3C, suelen establecer directivas con la intencin de normalizar el diseo, para as facilitar y simplificar la visualizacin e interpretacin del contenido.

Pgina web de la Facultad de Estudios Sup eriores Cuautitln

Caractersticas del lenguaje HTML

HTML es el lenguaje utilizado para la creacin de pginas Web. Ms concretamente, HTML significa HyperText Mark-Up Language , que viene a ser, en nuestro idioma, Lenguaje para el Formato de Documentos de Hipertexto . Es decir, los documentos HTML no son documentos de texto normal, sino documentos de hipertexto ya que en el propio documento aparecen enlaces a otros documentos. El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas de fine un organismo sin nimo de lucro llamado World Wide Web Consortium, ms conocido como W3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo. El propio W3C define el lenguaje HTML como "un lenguaje reconocido universalmente y que permite publicar informacin de forma global". Desde su creacin, el lenguaje HTML ha pasado de ser un lenguaje utilizado exclusivamente para crear documentos electrnicos a ser un lenguaje que se utiliza en muchas aplicaciones electrnicas como buscadores, tiendas online y banca electrnica. HTML es un lenguaje utilizado nicamente para dar estructura a una pgina web. El estilo de la propia pgina web vendr dado por un enlace a una hoja CSS (Hojas de Estilo en Cascada), de las que se hablar aparte. Es decir, que toda etiqueta que defina estilo y no estructura no se podr considerar perteneciente al lenguaje HTML. Algunos ejemplos seran: <b>, <i> (Negrita y Cursiva).

Todo documento HTML requiere expresar correctamente una serie de etiquetas, y todo elemento de este tipo de documento vendr dado por la siguiente estructura: <etiquetaInicial>Texto</etiquetaInicial> Aqu dejo una lista de algunas de las etiquetas que utilizaremos en HTML:

Ms informacin sobre estas etiquetas en la seccin "Elementos bsicos de HTML".

Estructura de un documento HTML

Aqu veremos la estructura de un documento HTML, e iremos viendo cual es la funcin de cada uno de los campos de los que consta el documento.

La estructura es, ms o menos, esta: <html> <head> <title> </title> </head> <body> </body> </html> Etiqueta <html>: es bsica en un documento HTML, ya que denota que estamos escribiendo un documento de hipertexto con este lenguaje. Siempre debe ir al principio y al final de todo documento HTML. Etiqueta <head>: En esta parte del documento aparece implcita la etiqueta <title>, etiqueta que veremos a continuacin. Adems, aqu vendran dadas las etiquetas <meta> y <link>. Con la etiqueta <link> haremos un link a la hoja CSS en nuestra pgina HTML, de la siguiente manera: <link rel="stylesheet" type="text/css" href="enlacerelativodelahojacss"> Etiqueta <title>: Aqu escribiremos el nombre que queremos que aparezca en la ventana del navegador cuando dicho navegador est mostrando esta web, es decir, el nombre que aparecer en la barrita correspondiente a este navegador que aparece en la barra de tareas. A resumidas cuentas, el ttulo que mostrar el navegador.

Etiqueta <body>: Traducido al castellano, body significa cuerpo . En efecto, este apartado es el cuerpo de la pgina, ya que a partir de aqu aparecer, en un navegador, todo lo que escribamos en la pgina web. Aqu es donde introduciremos el texto, los prrafos, las listas <ul>, los enlaces externos o internos (es decir, a otra pgina o a la misma pgina, respectivamente), las tablas, los formularios

Elementos bsicos del lenguaje HTML

y y y y y y Encabezados Prrafos Listas Enlaces Imgenes Tablas

Encabezados Un encabezado podra definirse como un "ttulo" (si imaginamos una noticia de un peridico sera, por ejemplo, el titular). Todo texto que se describa dentro de un encabezado destacar ms que un texto cualquiera. Para definir encabezados se utilizan las etiquetas <h1>, <h2>, ..., <hn>, siendo "n" un nmero del 1 al 6. Es decir, los encabezados seran del siguiente modo: Encabezado de nivel 1 Encabezado de nivel 2 ... Encabezado de nivel 6

Prrafos
Para estructurar el texto, la forma ms rpida y til es hacerlo por prrafos. Un prrafo se define con la etiqueta <p>. Para hacer un texto bien estructurado en HTML conviene utilizar los prrafos antes que los llamados "saltos de lnea" (en los que se utiliza la etiqueta <br>). Aqu podeis ver un ejemplo de texto estructurado por prrafos:
<p>Lo que sea</p> <p>Lo que sea 2</p> ... <p>Lo que sea n</p>

Listas
Una lista es, en HTML, un elemento muy til para definir, por ejemplo, el men de navegacin de una pgina. Se podra definir como una serie de elementos puestos cada uno en una lnea seguida del anterior elemento. Se suelen combinar con enlaces (hipervnculos) para crear mens. Un ejemplo de lista sera el siguiente:
<h3>Tipos de encabezado</h3> <ul> <li>Encabezado <h1> de nivel 1</li> <li>Encabezado <h2> de nivel 2</li> <li>Encabezado <h3> de nivel 3</li> <li>Encabezado <h4> de nivel 4</li> <li>Encabezado <h5> de nivel 5</li> <li>Encabezado <h6> de nivel 6</li> </ul>

Enlaces
Los enlaces en HTML, ya sean internos (es decir, a un contenido de la propia pgina) o externos (a otra pgina), siempre se realizan con la etiqueta <a>. Pero cabe resaltar que cada tipo de enlace se realiza de una forma diferente.

ENLACES INTERNOS Para los enlaces internos hay que definir una serie de elementos y linkearlos a la zona del texto de la propia pgina a la que queremos que nos lleve. Estos elementos deben llevar la etiqueta <a> (con su correspondiente etiqueta final </a>), y se definen de la siguiente manera:
<a href="#datos">Datos personales</a>

Es decir, aparecer el texto Datos personales y este texto ser un hipervnculo a otro texto de la misma pgina. Si pensamos que ese texto es un encabezado de nivel 1 que tiene como texto, tambin, Datos personales , el enlace vendra dado de la siguiente manera:
<h1><a name= datos >Datos personales</a></h1>

Es decir, definimos:
<a href= #nombre ></a>

para crear un hipervnculo a un sitio de la misma pgina y, en la zona, a la que queremos que nos lleve de e sta misma pgina, definimos el elemento:
<a name= nombre ></a>.

IMGENES Para incluir una imagen en una pgina web tenemos que utilizar el elemento img y el atributo src, este atributo especifica la localizacin del recurso de imagen. Adems, se suele requerir el atributo alt, que sirve para definir un ttulo alternativo para que el navegador presente este texo alternativo si la imagen no puede mostrarse.
<imgsrc="dirreccin de la imagen" alt="Nombre alternativo de la imagen">

Tablas
Las tablas en HTML son elementos muy tiles para hacer distribuciones de datos o, por ejemplo, para la creacin de formularios. La etiqueta en HTML para la creacin de una tabla es <table>. Una vez establecida la etiqueta <table>, hay que pensar en el nmero de filas (rows) y de columnas (columns) que tendr nuestra tabla. La tabla se har por filas. Para abrir una nueva fila en una tabla, hay que utilizar la etiqueta <tr>. Una vez abierta una fila, se definirn dentro de ella todas las columnas que pertenecern a esa fila. Las columnas se definen con la etiqueta <td>. Por ejemplo, si queremos crear una tabla con 2 filas y 3 columnas, habra que realizarla de la siguiente manera:
<table> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table>

Tambin se pueden hacer, en HTML, uniones de varias columnas o de varias filas en una tabla, por ejemplo, para destacar algn elemento de la tabla. Para estas operaciones se utilizan: rowspan: Indica el nmero de filas que ocupar una celda (por defecto o cupa una sola fila). colspan: Indica el nmero de columnas que ocupar una celda (por defecto ocupa una sola fila). Para unificar varias filas se utiliza el siguiente elemento: <tdrowspan= n ></td> siendo n el nmero de filas que queremos unir. Para unificar varias columnas se utiliza este elemento: <tdcolspan= m ></td> siendo m el nmero de columnas que se desea unificar.

Ahora procedemos a ocupar el programa Microsoft Word que nos permite crear pginas web en HTML de forma fcil de la manera cmo hacemos un documento en Word. Esto permite tener una idea ms visual de cmo va a quedar la pgina web. El proceso de creacin de la pgina web en Word se describe a continuacin. 1) Crea una carpeta con su nombre en el escritorio de Windows a. b. c. d. Botn derecho del mouse Selecciona la opcin "nuevo" Selecciona la opcin "carpeta" Ponle nombre a la carpeta

2) Abre un archivo nuevo con Word 3) Graba el archivo como HTML en la carpeta creada en el primer paso a. b. c. d. Men Archivo Selecciona la opcin "Guardar como HTML..." Selecciona tu carpeta Ponle el nombre al archivo

4) Selecciona un fondo para la pgina

a. Men Formato - Opcin Fondo... b. Clic en Efectos de Relleno... c. Selecciona el tipo de fondo de tu agrado.

5) Elige una fuente, tamao y color de letr a adecuada para el fondo seleccionado 6) Escribe un ttulo para t pgina. 7) Haz un diseo bsico de t pgina en un borrador: Normalmente todas las pginas web tiene una pgina principal con mens y un conjunto de otras pginas que estarn "vnculadas" con este men. HIPERVNCULOS Los hipervnculos son texto o grfico donde se puede hacer clic para saltar a un archivo, a una parte determinada de un archivo, a una pgina HTML en World Wide Web, o hacer un enlace para enviar un correo electrnico.
y

HIPERVNCULO CON UNA PARTE DE UN ARCHIVO

Debes realizar los siguientes pasos: 1) Haz clic en el lugar o posicin donde deseas poner un marcador 2) Inserta un Marcador en el lugar en que deseas que vaya la pgina al hacer clic... a) En el Men Insertar hace clic en la opcin Marcador... b) Escribe el nombre del marcador o selecciona el nombre de uno en la ventana:

c) Haz clic en el botn agregar de la ventana anterior 3) Selecciona el texto que quieres que aparezca con vnculo 4) Establece el Hipervnculo entre el texto seleccionado y el marcador correspondiente: a) Men Insertar, opcin Hipervnculo b) Haz Clic en el botn Examinar que est en el lado derecho de la opcin Ubicacin dentro del archivo (opcional).

c) Selecciona el marcador correspondiente definido con anterioridad y haz clic en el botn Aceptar.

d) Haz nuevamente clic en el botn Aceptar.

y

HIPERVNCULO CON OTRO ARCHIVO

En este caso es necesario que realices los siguientes pasos:

1) Asegrate que el otro archivo ya existe, de lo contrario , lo primero ser crear un nuevo archivo con formato HTML y grabarlo en tu carpeta. 2) Selecciona el texto que deseas vincular con otra pgina. 3) Elige la opcin Hipervnculo del men Insertar. 4) Haz clic en el botn Examinar que est al lado derecho de la opcin "Vincular al archivo o direccin URL".

5) Busca en tu carpeta el archivo con el cual deseas hacer el hipervnculo.

6) Haz clic en el botn Aceptar, en la pantalla anterior y luego nuevamente en Aceptar en la pantalla que te aparecer despus.

HIPERVNCULO CON UNA PGINA WEB

1) Selecciona el texto con el cual deseas hacer el hipervnculo. 2) Elige la opcin Hipervnculo del men Insertar. 3) Debajo de la opcin "Vincular al archivo o direccin URL", escribe la direccin de la pgina Web con la cual deseas hacer el vnculo. Por ejemplo: http://www.chile.cl

4) Haz clic en el botn Aceptar, de la pantalla anterior

HIPERVNCULO CON UN E-MAIL

Los pasos para crear el enlace con un correo son los siguientes: 1) Escriba su direccin en su pgina web principal o bien ponga una imagen que represente al correo. 2) Seleccione el nombre de su direccin de correo o la imagen que representa al correo. 3) Seleccione la opcin Hipervnculo del men Insertar. 4) Debajo de "Vincular al archivo o d ireccin URL", escribe la direccin de tu correo, despus de la palabra "mailto:". Por ejemplo: mailto:egamonal@entelchile.net

5) Haz clic en aceptar. Ahora para subir la pgina web a un servidor seguimos los siguientes pasos, como nota aclaratoria tomamos a geocites que forma parte de los servicios que ofrece yahoo para subir pginas de internet ya que es un servicio que es eficiente y gratuito adems de confiable.

y y y

Primero debe crear su correo Yahoo.com Ingresando a la pgina web de servidor gratuito de Geocities. http://es.geocities.yahoo.com/

Despus de haberse registrado en yahoo ya podemos tener la opcin de subir una pgina web

Seleccionamos el tema referente a la pagina web

La pgina nos manda la confirmacin donde se muestra la direccin url de nuestra pagina

  
v s s

      
s c v sc B sc s e se es s e e

  
s

              
se v e s e ev se v s s c see es e s e c es

Re s

se

c v s es e e c

Procedemos a seleccionar los archivos

Una vez finalizada la carga de todos los archivos de la pgina se guardan los cambios y ya se puede acceder a la misma. Creada la web iremos aadiendo en nuestra web las prcticas de la asignatura, para ello la pgina inicial es la misma. Modificaremos p gina en Word, la convertiremos en formato HTML y la volveremos a colgar en la red. Y la actualizacin ser fcil porque no hay que modificar los vnculos.

Al concluir el desarrollo de este material pudimos observar que, tiene mucha funcionalidad ya que es un material disponible prcticamente en cualquier momento y lugar, haciendo ms fcil la compresin de las matemticas ya que contiene material de calidad y de fcil comprensin. Los alumnos se vern beneficiados al contar con este material ya que podrn hacer consultas en cualquier momento sobre los temas que se les impartan referentes a las materias relacionadas directamente al rea de matemticas. Este proyecto me ayudo a reafirmar mis conocimientos matemticos y a darles otro enfoque ya que se tuvieron que buscar tcticas que me permitieran expresarlas de la manera ms practica posible, pero siendo concretas y fciles de entender. Adems de aprender cmo se desarrolla y hospeda una pgina web, esto me puede servir para mi vida profesional ms adelante.

Conclusin Personal
Este proyecto me parece excelente ya que la mayora de los estudiantes de ingeniera siempre tenemos problemas al principio con las matemticas, al desarrollar esta pgina web tenemos a la mano material para comprender ms fcil mente los temas que se nos hayan dificultado. Adems la ventaja de consultarla desde nuestro hogar es excelente as los que viven lejos de la Facultad De Estudios Superiores Cuautitln pueden tener el acceso a la informacin sin necesidad de estar presente en laFacultad De Estudios Superiores Cuautitln.

ApaxcoEdo.Mex. a 02-Agosto-2011

_________________________________________________________ NOMBRE Y FIRMA DEL RESPONSABLE Vo. Bo. SERVICIO SOCIAL DEL PROGRAMA

____________________________ NOMBRE Y FIRMA DEL PRESTADOR

NOMBRE: ALCALA ARRIETA JAVIER

CARRERA: INGENIERIA MECANICA ELECTRICA

CUENTA: 40603718-7 CORREO ELECTRONICO: alter_ime@hotmail.com

DEPENDENCIA: FACULTAD DE ESTUDIOS SUPERIORES CUAUTITLAN

NOMBRE DEL PROGRAMA: CREACION DE MATERIAL DIDACTICO VIRTUAL PARA APOYO EN ASESORIAS EN EL AREA DE MATEMATICAS

RESPONSABLE: ING. MARCO TORRES OLVERA

FECHA DE INICIO Y TERMINO DE SERVICIO SOCIAL: 02-FEBRERO-2011 AL 02-AGOSTO-2011