CBT No. 2 LIC.

CARLOS PICHARDO, TECÁMAC

Actualización de página web de la Universidad Politécnica de
Tecámac

MEMORIA DE TRABAJO PROFESIONAL

PARA OBTENER EL TITULO DE:

TÉCNICO EN INFORMÁTICA

PRESENTA:

Alumna. Brisa García García

ASESORA: PROFRA. MARTHA FLORES MORA

SAN PEDRO POZOHUACÁN, TECÁMAC, MÉXICO, JUNIO DE 2017

Actualización de página web de la Universidad Politécnica de Tecámac

ÍNDICE

1

Actualización de página web de la Universidad Politécnica de Tecámac INTRODUCCIÓN 2 .

Es un documento electrónico que pertenece a la WWW comúnmente está desarrollado en el lenguaje HTML. organizado y con atracción al personal que lo manipule o visualice. Manejar páginas web beneficia tanto a la institución como a su personal porque es eficaz. Ayuda a facilitar los servicios de empresas o instituciones ya sea para divulgar los bienes que ofrece o de lo contrario simplificar los procesos que hacen dentro de la misma. Objetivo del tema Actualizar página web de la Universidad Politécnica de Tecámac Objetivos Específicos Implementar una plantilla de diseño en la página web para una mejor presentación Organizar la información para que la pagina sea más versátil y dinámica 3 . los cuales ayudan a que se establezca un diseño predeterminado. Estas páginas se pueden desarrollar y diseñar con las características que poda el cliente para que sea estético. Comúnmente se utilizan estilos CSS. la información sea organizada y llamativo para el usuario. En la Universidad Politécnica de Tecámac se actualizará la página web agregándole estilo CSS porque no presenta una platilla de diseño estable y esto por consecuencia hace que al usuario se le complique el uso de la página web. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Justificación Una página web sirve para promocionar productos. Utilizar el estilo CSS es fácil de desarrollar y comprender. de mayor rendimiento y se puede informar de manera fácil a los usuarios. informar a clientes u organizar los recursos de una empresa.

ya que todos los procesos los hacia una persona y no había una organización. P. Prolongación 5 de mayo No. para actualizar cada página web y así cuenten con la plantilla de diseño que se solicita. Desafortunadamente estas páginas web no presentan una plantilla de diseño y hace más compleja la interfaz del usuario-pc. 55740 se realiza el desarrollo de diversas páginas web las cuales simplifican distintos procesos administrativos ya que se utiliza demasiada información. Estas páginas web se hicieron con el fin de beneficiar a los alumnos y el personal de la misma ya que anteriormente había pérdida de información. 10 Tecámac de Felipe Villanueva Centro. El beneficio de implementar el estilo CSS en la página web de la institución será de gran ayuda para todos los servicios administrativos ya que no complicará ningún proceso. Estado de México C. Tecámac. Por ello se diseñaron estilos CSS (Cascading Style Sheets) en el software C# los cuales son un lenguaje de diseño gráfico para establecer el diseño visual de las páginas web. 4 . Actualización de página web de la Universidad Politécnica de Tecámac Planteamiento del problema La Universidad Politécnica de Tecámac ubicada en Av. además de que será eficaz y con facilidad de manejarlo. El diseño de estilos CSS hacen que cualquier proceso sea eficiente y rápido por eso son comúnmente utilizados por las empresas que llegan a tener problemas con la organización o perdidas de información.

Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Capítulo 1. Referencias del escenario real 5 .

10. mercado. . Ingeniería en Tecnologías de Manufactura Cuenta con un horario de Lunes a Viernes de 7:00 a. GOBIERNO DEL ESTADO DE MÉXICO UAEM . Actualización de página web de la Universidad Politécnica de Tecámac Capítulo 1.m. HERBALIFE .1 Descripción del Contexto Social. Cobra colegiaturas al estudiante en periodo cuatrimestral para su inscripción. y Cultural en el que se ubica el Escenario Real. Económico. DE C.21:00 p. 55740 por su ubicación cuenta con diferentes servicios como accesibilidad a servicios de transporte. Referencias del escenario real 1. Cuenta con las siguientes carreras: . A. DE C. Licenciatura en Negocios Internacionales . a través del desarrollo de competencias profesionales.m. y sábados de 7:00 a. Ingeniería en Software .14:00 p. INGENIERÍA Y SOPORTE EN MECATRONICA AVANZADA S.m. permitiendo con ello resolver la problemática de las empresas y fomentar el bienestar social. Estado de México C. Tecámac de Felipe Villanueva Centro. La Universidad tiene el firme compromiso de contribuir al crecimiento nacional de nuestro país mediante la formación de profesionistas con calidad. Ingeniería Financiera . Prolongación 5 de mayo No. recientemente hizo convenios con las empresas que abajo se mencionan para favorecer al estudiante en cuestión de bolsa de trabajo. V. P. La forma de vida de los habitantes alrededor de la Universidad es de manera tranquila además existen diferentes lugares para el ámbito empresarial. . farmacias y tiendas. . A. Tecámac. . VOLTRAN S. Ingeniería en Mecánica Automotriz . 6 . La Universidad Politécnica de Tecámac ubicada en Av.m. V.

DE C. Cursos culturales . Accidentes viables Tabla 1. MANPOWER S. V. L. DE C. DE R. La viabilidad de la escuela no cuenta . . MANPOWER CORPORATIVO S. Bolsa de trabajo . A. Comercios con alumbrado publico . . . . A. DE R. V. MC CORD PAYEN DE MÉXICO S. NUEVA ESCUELA TECNOLÓGICA NET Participa y realiza acciones culturales y deportivas. realiza acciones de equidad de género. V. LITOGAP S. L. A. Pocas licenciaturas . cuenta con un equipo de fútbol soccer y un equipo de fútbol americano tanto femenil como varonil. DE C. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac . V. Ingenierías Debilidades Amenazas . Cuenta con equipos de calidad en sus . Calidad de profesores . A. V. Seguridad centros de trabajo . Fortalezas Oportunidades . DE C. DE C. Alta demanda . realiza acciones para la prevención de la violencia escolar en educación media superior.Foda 7 . imparte cursos de inglés. OLOLI SYSTEM S. DE C. Áreas deportivas . V. Y MANPOWER INDUSTRIAL S.

Actualización de página web de la Universidad Politécnica de Tecámac 1. Organigrama Institucional 8 .2 Organización General Ilustración 1.

el desarrollo tecnológico. a través de competencias profesionales con innovación en la generación de tecnología. Responsabilidad. Visión y Valores Misión Contribuir al crecimiento nacional. Valores . Honestidad. así como las administrativas para el uso eficiente de los recursos humanos y materiales.3 Misión. avivar los valores humanísticos y la conservación de la cultura ecológica. Dictar las políticas de la administración financiera y tributaria que busquen eficientar la recaudación. programación y evaluación. 9 . contribuyendo al desarrollo de un servicio público de calidad. Libertad. Emprendimiento. por sus aportaciones al desarrollo económico y social. . planeación. Liderazgo. a través de la investigación. mediante la formación de profesionistas con calidad. que permita resolver la problemática de las empresas. el compromiso con la mejora continua y la preservación del medio ambiente. la promoción de la cultura. . . Moral con Sentido Ecológico. . . con reconocimiento internacional en educación superior basada en competencias profesionales. Ética. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac 1. fomentar el bienestar social. por la calidad y pertinencia de sus programas educativos que se expresan en la competencia técnica y calidad personal de sus egresados. Visión Ser un referente nacional. .

4 Croquis de la ubicación Ilustración 2. Actualización de página web de la Universidad Politécnica de Tecámac 1. Croquis 10 .

Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Capítulo 2. Referencia del perfil profesional 11 .

Maneja Sistemas de Información.2 Objetivo de la Carrera Que el alumno adquiera conocimientos de las Tecnologías Informáticas. Referencia del perfil profesional 2. Módulo II. Módulo I. 2. Módulo IV.1 Descripción de la carrera técnica cursada. Maneja Software de Diseño. desarrolle las habilidades y destrezas y asuma una actitud responsable en su ambiente de trabajo. Todos estos conocimientos serán adquiridos mediante el curso completo que consta de los siguientes Módulos: . El alumno será capaz de aplicar sus conocimientos de Informática en alguna empresa u organización que lo requiera. . Identifica las bases de la Informática. así como darle mantenimiento a los mismos. Implementa el proyecto Integrador. porque el alumno será capaz de realizar diferentes actividades tales como realizar mantenimiento de los equipos de cómputo de forma preventiva y correctiva. La carrera de Técnico en Informática proporciona las herramientas necesarias para que el estudiante adquiera conocimientos. . Aplicar las habilidades necesarias para que logre realizar análisis de manera correcta y sea capaz de Diseñar e Implementar Sistemas de Información. . fomentando así la automatización de procesos mediante sistemas de información. Actualización de página web de la Universidad Politécnica de Tecámac Capítulo 2. . Podrá desarrollar aplicaciones informáticas básicas o con cierto nivel de complejidad. Módulo V. Así mismo una de las metas de la carrera es que el alumno logre realizar mantenimiento preventivo y correctivo de equipos de cómputo 12 . Módulo III. Desarrolla Aplicaciones Informáticas. Es importante mencionar que se recomienda una actualización periódica de los temas aprendidos durante el curso debido al creciente desarrollo de nuevas tecnologías.

. Maneja diagramas UML. Clasificación de software. . 13 . Ensambla. . Multimedia y Web. . Analiza procesos relacionados con el manejo de la información. modelo OSI y modelo TCP/IP. Estructura del plan de negocios. Diseña sistemas para automatizar procesos relacionados con el manejo de datos. . Actitudes: . Conocimiento de: . . protocolos de transferencias. . . Maneja software de diseño para multimedia páginas Web. Diseña base de datos. . . Desarrolla proyectos o planes de negocios para la conformación de microempresas. configura y mantiene equipos de cómputo. Construcción de diagramas relacionales para base de datos. Conexiones de redes de computadoras. Conocimientos e interpretación de diagramas UML. Clasificación de hardware. .3 Perfil de egreso Al egreso de la carrera Técnico en Informática habrás obtenido las competencias necesarias para participar en un escenario real en el área de informática. . Análisis y diseño de sistemas de información. . Redes de computadoras. . . Maneja el lenguaje de programación orientado a objetos. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac 2. así mismo ser capaz de manejar los recursos y el uso de los conocimientos y habilidades obtenidas. El egresado será capaz de: . Disponibilidad para trabajar en equipo.

Ser innovador. Servicio 14 . Interés por la actualización constante. Ser emprendedor. . Impulsar a sus compañeros a progresar. Adaptación . . . . Solidaridad . Orden . Honestidad . . Responsabilidad . Limpieza . Respeto . Puntualidad . Actualización de página web de la Universidad Politécnica de Tecámac . Valores: . Empatía . Tener ética en la presentación y entrega de sus servicios. Ser creativo.

4. Análisis de las competencias profesionales desarrolladas. Competencias Profesionales 15 . Ilustración 3. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac 2. de acuerdo al perfil de egreso.

Actualización de página web de la Universidad Politécnica de Tecámac Capítulo 3. Experiencias laborales 16 .

taller mecánico. También cuenta con centros recreativos como un centro de ingeniería avanzada. campos de futbol. En este plantel se eligen diversos chicos de bachilleratos tecnológicos para apoyarlos con la realización de sus proyectos de titulación (estadías) donde adquieren nuevos conocimientos. así como la fundamentación teórica de cada una de ellas y la descripción de debilidades y fortalezas del estudiante o egresado en el momento de su ejecución. auditorio.1 Descripción de las actividades realizadas en escenario. Ingeniería Financiera. La universidad desarrolla muchos proyectos sociales que la benefician adquiriendo herramientas para sus ingenierías y licenciatura así logrando un mejor nivel académico y un mayor prestigio alcanzado por los alumnos y padres de familia. centro de idiomas. Experiencias laborales 3. gimnasio. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Capítulo 3. Ingeniería en Mecánica Automotriz. Ingeniería en Tecnologías de Manufactura y Licenciatura en Negocios Internacionales. basquetbol y futbol americano. 17 . para dar diseño a la página web institucional mejorando la interfaz usuario-pc. En el área de Ingeniería en software aprendimos a aplicar estilos CSS en el software Visual Studio C#. Descripción del escenario real La Universidad Politécnica de Tecámac se dedica a la fomentación de valores así como de conocimientos de diferentes ingenierías y licenciatura como son: Ingeniería en Software.

Se cierran con el nombre de la etiqueta precedido con el símbolo “/”. otorgados por empresas registradoras oficiales). Google. ésta se conforma por una serie de servidores a nivel mundial organizados por dominios (nombres lógicos asociados a instituciones o empresas. como imágenes. en los que se puede localizar una gama de contenidos. Las etiquetas afectan el código delimitado por la apertura y el cierre de la etiqueta. cuya diferencia radica sólo en aspectos como la organización y la selección de la información. Altavista. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web. WWW: Es todo el conjunto de información interrelacionada que se haya disponible en Internet. listas. Página Web: Adrián Estrada Corona (2007) Clara López Guzmán (2007) es un documento digital en el que se puede hallar información variada y numerosa. 18 . Actualización de página web de la Universidad Politécnica de Tecámac Ilustración 4. entre muchos otros. etc. Etiquetas HTML: Jorge Sánchez (2003) dice que las etiquetas en HTML están cerradas entre símbolos “<” y “>”. Esto se puede constatar con tan sólo teclear un tema en buscadores como Yahoo.Fundamento Teórico HTML: Miguel Angel Alvarez (2011) afirma que (HyperText Markup Language) HTML es el lenguaje con el que se define el contenido de las páginas web. En ellos aparecen grandes listados de páginas web. Terra y Ozú. vídeos.

Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Usuario: Leandro Alegsa (2010) define que un usuario es un individuo que utiliza una computadora.NET Framework. Diseño: Wucius Wong (2008) afirma que el diseño es un proceso de creación visual con un propósito. Está formada por un hardware (parte física) que consta de circuitos integrados y otros componentes electrónicos. Estos lenguajes permiten desarrollar aplicaciones ASP.NET es un modelo de desarrollo Web unificado que incluye los servicios necesarios para crear aplicaciones Web empresariales con el código mínimo.NET se puede trabajar con elementos HTML que usen 19 . El código de las aplicaciones puede escribirse en cualquier lenguaje compatible con el Common Language Runtime (CLR). Por lo general es una única persona PC: José Luis Lombardero P encuentra que pc es máquina electrónica que recibe y procesa datos (input) para convertirlos en información útil de salida (output). entre ellos Microsoft Visual Basic. etc. cuyo significado se ha convertido con el paso de los años en un concepto paraguas susceptible de múltiples interpretaciones.net? Microsoft (2007) ASP. seguridad de tipos. ya sea esto un mensaje o un producto. fabricado.NET Framework y al codificar las aplicaciones ASP.NET y J#. Para hacerlo fiel y eficazmente. distribuido. ¿Qué es ASP. C#. una gran variedad de secuencias o rutinas de instrucciones.NET que se benefician del Common Language Runtime.NET forma parte de . Esta propuesta permite una aproximación al concepto evolutivamente y desde diversas miradas. sistema operativo. Interfaz: Scolari (2004) presenta una interesante mirada sobre la historia del término interfaz.NET tiene acceso a las clases en . usado y relacionado con su ambiente. Es la mejor expresión visual de la esencia de «algo». Las páginas Web ASP. JScript . el diseñador debe buscar la mejor forma posible para que ese «algo» sea conformado. herencia.NET están completamente orientadas a objetos. En las páginas Web ASP. rapidez y de acuerdo a lo indicado por un usuario o automáticamente por un programa. ASP. y el software (parte lógica) que se encarga de ejecutar con exactitud. lo propone como una palabra. servicio o cualquier sistema informático.

páginas de propiedades. mejora de la seguridad y mayor compatibilidad entre versiones. lo cual significa que se beneficia de los servicios de Common Language Runtime.NET y puede agregar o revisar los valores de configuración en cualquier momento con un impacto mínimo en aplicaciones y servidores Web de operaciones.NET. Visual C# utiliza plantillas de proyecto. C# se presenta como Visual C# en el conjunto de programas Visual Studio . Puede crear valores de configuración cuando se implementan las aplicaciones ASP. 20 . Supone una evolución de Microsoft C y Microsoft C++. es sencillo. proporciona seguridad de tipos y está orientado a objetos.NET (2003) Microsoft C# es un nuevo lenguaje de programación diseñado para crear un amplio número de aplicaciones empresariales que se ejecutan en . tipos de letra. diseñadores.NET Framework. Puede extender el esquema de configuración para satisfacer sus requisitos. es fácil realizar cambios de configuración a sus aplicaciones Web. recolección de elementos no utilizados.NET se almacenan en archivos basados en la tecnología XML. métodos y eventos. asistentes de código. Los valores de configuración de ASP. Gracias a las CSS somos mucho más dueños de los resultados finales de la página. Dado que estos archivos XML son archivos de texto ASCII. colores. es una tecnología que nos permite crear páginas web de una manera más exacta.NET Framework.. Las aplicaciones ASP. Estos servicios incluyen interoperabilidad entre lenguajes.NET utilizan un sistema de configuración que le permite definir valores de configuración para su servidor Web. Actualización de página web de la Universidad Politécnica de Tecámac propiedades. La biblioteca para programar en Visual C# es .. para un sitio Web o para aplicaciones individuales. ¿Qué es Visual C#? Visual Studio . ¿Qué es estilo CSS? Juliana Monteiro Lázaro (2001) afirma que CSS. El código creado mediante C# se compila como código administrado. como incluir márgenes. moderno. pudiendo hacer muchas cosas que no se podía hacer utilizando solamente HTML. fondos. un modelo de objetos y otras características del entorno de desarrollo.

y que forman la sintaxis de las hojas de estilo. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac CSS son las siglas de Cascading Style Sheets. de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo. esta última va entre corchetes y consiste en una propiedad o atributo. en español Hojas de estilo en Cascada.} H2 ---> es el selector {Color: Green. ¿Cómo se aplica un estilo CSS? El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados. Cada regla consiste en un selector y una declaración.} ---> es la declaración Color ---> es la propiedad o atributo Green ---> es el valor Selector El Selector especifica que elementos HTML van a estar afectados por esa declaración. Las Hojas de Estilo en Cascada se escriben dentro del código HTML de la página web. En este reportaje vamos a ver algunos de los efectos que se pueden crear con las CSS sin necesidad de conocer la tecnología entera. solo en casos avanzados se pueden escribir en un archivo aparte y enlazar la página con ese archivo. 21 . Declaración La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. Ejemplo: H2 {Color: Green. En caso de que haya más de una declaración se usa punto y coma para separarlas. y un valor separados por dos puntos.

fondos. Aumento de la accesibilidad de los usuarios gracias a que pueden especificar su propia hoja de estilo. XML. es decir. . o XUL de la presentación del documento con las hojas de estilo. que puede ser color.000 páginas en un sólo archivo de CSS. alineación. El ahorro global en el ancho de banda es notable. agilizando su actualización. ¿Para qué sirve un estilo CSS? CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML. . Ventajas de utilizar CSS . de manera que por ejemplo. es que el estilo se puede guardar completamente por separado del contenido siendo posible. La principal ventaja de CSS sobre el lenguaje HTML o similar. incluyendo elementos tales como los colores. permitiéndoles modificar el formato de un sitio web según sus necesidades. CSS permite un mejor control en la presentación de un sitio web que los elementos de HTML. bordes. tamaño. . Actualización de página web de la Universidad Politécnica de Tecámac Propiedad o Atributo y Valor Dentro de la declaración. modificando la apariencia de una página web de una forma más sencilla. no se tiene que descargar con cada página web. Por otro lado. especifican qué aspecto del selector se va a cambiar. por ejemplo.. personas con deficiencias visuales puedan configurar su propia hoja de estilo para aumentar el tamaño del texto. tipo de fuente... ya que la hoja de estilo se almacena en cache después de la primera solicitud y se puede volver a usar para cada página del sitio. márgenes. la Propiedad o Atributo define la interpretación del elemento asignándosele un cierto Valor.. esto beneficia al dueño del 22 . quitando todo lenguaje de marcado en la presentación en favor del uso de CSS reduce su tamaño y ancho de banda hasta más del 50%. XHTML. tipos de letra... SVG. permitiendo a los desarrolladores controlar el estilo y formato de sus documentos. almacenar todos los estilos de presentación para una web de 10.

ya que surgió como medio de comunicación entre los científicos. pero. En esta especificación también se propone delegar todas estas características de presentación y diseño en las hojas de estilo. condujeron a que en la última versión de la especificación HTML. ¿Por qué se recomienda utilizar estilo CSS y no etiquetas de diseño en HTML? María Jesús Lamarca Lapuente (2013) comenta que el lenguaje HTML definía la estructura y la semántica de los documentos y se centraba. la diversidad de plataformas y navegadores que recogían de distinta forma estas nuevas versiones. Una hoja de estilo (style sheets) no es más que una colección de reglas que afectan a la apariencia de un documento. El código Cascading Style Sheets (CSS u Hojas de estilo en cascada). en el contenido. Estas reglas se refieren al modo en que aparecerá un 23 . o móviles. Acerca de CSS Si un documento HTML identifica la estructura de una página web. está basado en texto. desaconsejando el uso de ciertos elementos y atributos relacionados con la presentación del documento. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac sitio web con menos ancho de banda y costes de almacenamiento. y no a su diseño o aspecto físico. la 4. en vez de etiquetas. Una página puede tener diferentes hojas de estilo para mostrarse en diferentes dispositivos. así como a los visitantes para los cuales las páginas se van a cargar más rápido. Los diseñadores de webs y los editores de páginas HTML comenzaron a integrar nuevas funciones y las sucesivas versiones de HTML incluyeron nuevas etiquetas capaces de realizar esas funciones. lectores de voz. Sin embargo. contiene normas de estilo o instrucciones de presentación para el navegador web. Sin embargo. sobre todo. se volviera hacia el objetivo inicial que era dar importancia a las características que afectaban a la estructura y a la semántica de los documentos.0. como pueden ser impresoras. un archivo CSS indica al navegador cómo mostrar los elementos estructurales contenidos en la página. . sino también el diseño y la presentación de la información. igual que el HTML. el éxito de la Word Wide Web amplió el abanico de usuarios y poco a poco fue cobrando importancia no sólo el contenido.

). facilitando la consistencia y homogeneidad en el diseño y la imagen del sitio web. navegadores basados en voz. documentos en Braille. Además. alineación y espacio entre caracteres. televisores. a uno más sofisticado. el fondo. y lo mismo ocurre con el lenguaje XML. las hojas de estilo se pueden adecuar a los distintos medios de presentación de documentos (pantallas del ordenador. El HTML 4. Una ventaja adicional es que reducen el tiempo de carga de las páginas web en el ordenador. puesto que las hojas de estilo se cargan en el navegador o visualizador.0 desplaza muchas de las funciones realizadas por las anteriores versiones hacia las hojas de estilo. controlando por ejemplo el color. a los documentos que se desee.. márgenes. relativas a la propia organización del contenido. porque ya se encuentra en el ordenador cliente. 24 . tipo de fuente. de manera que al acceder a un documento que incluya la misma hoja de estilo de otro que se ha "bajado" anteriormente no será necesario volver a cargarla.. Actualización de página web de la Universidad Politécnica de Tecámac documento en pantalla cuando el usuario utilice un navegador o explorador gráfico. impresoras. enteras o alguno de sus niveles. Las ventajas que ofrece la utilización de hojas de estilo es que se diseñan de forma independiente al documento HTML y que se pueden aplicar. apariencia de los bordes. El usuario también puede elegir qué tipo de diseño prefiere visualizar en un mismo documento: desde un formato más simple o tradicional. reservando el lenguaje HTML para cuestiones menos formales.

Ilustración 5. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Pasos para insertar un estilo CSS Se inicia el programa Microsoft Visual Studio y se abre un nuevo proyecto. Ilustración 6.Visual Studio Dar clic en la opción “web”. Web 25 .

Web forms 26 .net Se mostraran los siguientes formularios y se debe elegir web forms. Ilustración 7.NET” y nombrar el proyecto en este caso se llama “evidencia”. a la cual se debe elegir “Aplicación web ASP. Actualización de página web de la Universidad Politécnica de Tecámac Posteriormente al elegir “web” mostrara tres opciones. Asp. Ilustración 8.

Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Se crea el proyecto. Ilustración 9. Proyecto Se eliminan los siguientes formularios: Site. Eliminar formularios 27 .Master y Site Mobile.Master Ilustración 10.

Nuevo elemento Aparecera la siguiente ventana primero dar clic en web. Ilustración 12. Actualización de página web de la Universidad Politécnica de Tecámac En la carpeta “evidencia” dar clic derecho y posteriormente en agregar nuevo elemento. Página maestra 28 . despues en web forms y elegir “Web forms con página maestra”. Ilustración 11.

Formulario Web Aparece la siguiente ventana y dar clic en la página maestra que se creó anteriormente. pero se elige “Formulario web con página maestra” y se nombra “default” Ilustración 13. Página maestra 29 . Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Se repite el mismo proceso que el anterior. Ilustración 14.

Actualización de página web de la Universidad Politécnica de Tecámac Al eliminar los primeros formularios por consecuencia aparecieron algunos errores. Eliminar errores Se abre el formulario default. Ilustración 15. Ilustración 16. los cuales se comentaran con la opción “Ctrl+k+c” para que no afecte al programa. y se colocan los objetos que se requieran en este caso son Label. Objetos 30 . TextBox y Button.

css”. Visualización El estilo CSS se encarga de dar diseño a una página web que ayuda a la interfaz usuario-pc y se agregan de la siguiente manera: En el mismo formulario “default” agregar la propiedad “CssClass:” para mandar a llamar los estilos que vienen integrados en la carpeta “boots.min. en este caso se utilizó el estilo “text-danger” para que el texto se visualice en color rojo. Ilustración 17. 31 . Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac Cuando se ejecuta el programa se visualiza de la siguiente manera. y se alineo al centro con la etiqueta “p align=center”.

Vista De esta manera es como se aplican los estilos CSS en páginas web con el software Microsoft Visual Studio. 32 . Estilos CSS Al agregar los estilos CSS se muestra de la siguiente manera. Ilustración 19. Actualización de página web de la Universidad Politécnica de Tecámac Ilustración 18.

com/faqs/css http://www.unam.com/articulos/que-es-html.com/es-es/library/4w3ex9c2(v=vs.co/se rvlet/SBReadResourceServlet%3Frid%3D1171494054593_16739036_8798+&cd=10&hl= es&ct=clnk&gl=mx https://msdn.pdf http://webcache.ar/Dic/usuario.com/search?q=cache:oJaYx0Ti5ooJ:cmap.es/jlop0164/archivos/glosarioinf.mx/html/2_3_1. Actualización de página web de la Universidad Politécnica de Tecámac Actualización de página web de la Universidad Politécnica de Tecámac BIBLIOGRAFÍA https://desarrolloweb.googleusercontent.html http://www.com/archivos/descargas/manual_rapido_html.alegsa.aragonemprendedor.upb.aspx http://www.edu.pntic.php http://roble.com.100).info/documentos/css.mec.hipertexto.edicion.html http://www.htm 33 .microsoft.masadelante.pdf http://www.