UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Voluntad Conocimiento Servicio

Transcripción

1 UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Voluntad Conocimiento Servicio DISEÑO DE SITIO WEB JMR INGENIERÍA Reporte de Estadía para obtener el Título de Técnico Superior Universitario en Electrónica y Automatización MANUEL FERNANDO DUARTE NOGUEZ Santiago de Querétaro, Qro. Febrero, 2010

2 UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Voluntad Conocimiento Servicio DISEÑO DE SITIO WEB JMR INGENIERÍA Reporte de Estadía para obtener el Título de Técnico Superior Universitario en Electrónica y Automatización ASESOR DE LA EMPRESA ING. JUAN MARTÍNEZ RIVERA ASESOR DE LA ESCUELA ING. DAVID VÁZQUEZ RAZO ALUMNO MANUEL FERNANDO DUARTE NOGUEZ Santiago de Querétaro, Qro. Febrero 2010

3 AGRADECIMIENTOS A mis padres que en todo momento me brindaron todo su apoyo, amor, educación y comprensión durante el trayecto de mi vida, por que sin el apoyo que me brindaron no hubiera podido llegar a donde me encuentro actualmente. A mi hermano y mi hermana por el apoyo, amistad y consejos que me brindaron durante los tiempos buenos y malos de mi vida. A mi familia q siempre estuvo ahí para y me apoyaron y ayudaron en esta etapa de mi vida A mis profesores que me brindaron el apoyo y gran parte del valioso conocimiento que e obtenido en el trascurso de mi vida. Y por ultimo pero no menos importantes a mis amigos y compañeros por su amistad que proporcionaron y que siempre estuvieron apoyándome.

4 DEDICATORIAS A todos aquellos que hicieron posible que yo sea la persona que soy ahora. GRACIAS.

5 ÍNDICE AGRADECIMIENTOS INDICE INTRODUCCION CAPÍTULO I. ANTECEDENTES GENERALES DE LA EMPRESA 1.1 Antecedentes generales de la empresa Misión Visión Políticas de calidad Organización Campo de desarrollo Proceso general de producción...12 CAPÍTULO II. EL PROYECTO 2.1 Antecedentes Definición del proyecto Objetivos Alcance Plan de trabajo Separación de actividades asignación de tiempos Grafica de Gantt.16 CAPITULO III. MARCO TEÓRICO 3.1 Internet Páginas web Caracteristicas de la pagina web...17

6 3.3 sitio web Portal HTML CAPÍTULO IV. DESARROLLO DEL PROYECTO 4.1 Introducción Ejecución del proyecto Animación Hipervínculos Revisión de sitio web Subida a red del sitio web Prueba de pagina web...27 CAPÍTULO V. ACTIVIDADES DIVERSAS 5.1 Gabinete para panel view sustitución de tableros de control ampliación de PLC supervisión de proceso..31 CONCLUSIONES..33 BIBLIOGRAFIA 35

7 INTRODUCCIÓN El proceso de estadía de la UTEQ fue asignado y realizado en la empresa JMR Ingeniería, en el área de automatización de procesos que tiene como fin el desarrollo de proyectos para empresas, como principales benefactores, desempeñando funciones que debe realizar un Técnico Superior Universitario en este caso en el área de Electrónica y Automatización. La colaboración en esta empresa fue la realización de múltiples proyectos con la finalidad de satisfacer las necesidades de las empresas en las que se llevaron a cabo los proyectos, el proyecto asignado por la empresa fue la elaboración de un sitio web. Con el fin de expandirse en el mercado de la automatización se inicio la aplicación de métodos de comunicación para difundir los servicios que realizan para la obtención de nuevos clientes,

8 CAPÍTULO I ANTECEDENTES GENERALES DE LA EMPRESA

9 1.1 Antecedentes generales de la empresa. La empresa JMR Ingeniería surge en año 2002 al cerrar en Querétaro una empresa importante dedicada al desarrollo de ingeniería y servicios a la industria. De esta forma se decide dar continuidad del servicio a varios clientes ya que la experiencia y conocimiento adquiridos son fundamentales para poder atender los requerimientos de los clientes. La empresa Inicia con una sola persona teniendo que recurrir a la subcontratación de servicios externos. Posteriormente se fue incorporando más personal para resolver directamente los requerimientos básicos de las empresas. El principal cliente que propicio el surgimiento de la empresa fue la empresa Kellogg s de México y que asta el momento permanece como el principal cliente. El giro de la impresa esta enfocado a la automatización de procesos por medio de sistemas de control. Dentro de la automatización ha surgido la necesidad del desarrollo de varias actividades para poder ofrecer soluciones completas como son: - Desarrollo de mano de obra para alambrado y conexión eléctrica de equipos de control. - Desarrollo de ingeniería para especificación de obra de instrumentación - Desarrollo de ingeniería para especificación de obra eléctrica media tensión - Desarrollo de lógica de programación en equipos de control PLC S

10 - Desarrollo de lógica de programación en Terminal de operación HMI En base a la oportunidad que han brindado varias empresas para desarrollar varios proyectos, se ha adquirido una confianza, que permite ofrecer al cliente una mejor solución, que solo se va adquiriendo con la comunicación y plantación directa con el cliente. Existen varias empresas dedicadas a la integración de sistemas y son parte de una competencia. Nuestra postura es mantenernos siempre a la vanguardia en cuanto a software y equipos de control para poder ofrecer una solución a costos competitivos. 1.2 Misión. Brindar a los clientes un servicio de calidad, en cuanto a la automatización de procesos y diseños de equipos industriales, con costos competitivos. 1.3 Visión. Ser una empresa competitiva en el ramo de la automatización, mantenimiento, elaboración de diseño de equipo industrial y la planeación de nuevos proyectos. 1.4 Política de calidad. Proporcionar un servicio rápido y eficiente que satisfaga las necesidades y requerimientos del cliente en su totalidad 1.5 Organización.

11 La empresa JMR ingeniería cuenta con la organización q se muestra en la figura 1.1 Figura 1.1 Organigrama de JMR Ingeniería 1.6 Campo de desarrollo. La empresa es considera como pequeña empresa y el principal mercado es nacional abarcando estados del centro y norte. Queretano (Industria de alimentos) León (Industria de alimentos) Aguascalientes (Industria automotriz) Toluca (Industria automotriz) Monterrey (Industria automotriz)

12 1.7 Proceso general de producción. En el siguiente diagrama se muestran los pasos q se llevan acabo en la elaboración de los proyectos de la empresa JMR Ingeniería en la elaboración de los proyectos. Figura 1.2 Diagrama de flujo utilizado por JMR Ingeniería.

13 CAPÍTULO II EL PROYECTO

14 2.1 Antecedentes JMR ingeniería en una Pequeña empresa que actualmente está en crecimiento y para llevar a cabo una expansión más éxito decidió colocar un sito oficial por Ethernet. 2.2 Definición del proyecto El proyecto se llama Diseño de un sitio web y consiste en la colocación de un sitio oficial por Ethernet de la empresa 2.3 Objetivo Aumentar las ventas de productos para la integración de sistemas Aumentar los clientes que tiene la empresa 2.4 Alcance La creación de un sitio web para el desarrollo y expansión de la empresa mediante la adquisición de nuevo clientes, aumentar ventas de los productos y el desarrollo de nuevos proyectos 2.5 Plan de trabajo Separación de actividades Diseñar páginas web base Diseñar páginas web Revisar páginas web Introducir información Subir a la red

15 2.5.2 Asignación de tiempos. Actividades Inicio Termino Tiempo investigar 09/08/ /08/ diseñar 11/08/ /08/ introducir información 12/08/ /08/ corregir 16/08/ /08/ probar 17/08/ /08/ aplicación 18/08/ /08/ Tabla 1.1 Asignación de tiempos Grafica de Gantt A continuación se muestra la grafica de Gantt con las tareas en la grafica 1.1 6/8/10 8/8/10 10/8/1012/8/1014/8/1016/8/1018/8/1020/8/1022/8/10 investigar diseñar introducir informacion corregir probar aplicación 1.1 Grafica de gantt

16 CAPÍTULO III MARCO TEÓRICO

17 A continuación se muestra la descripción general de los siguientes elementos: Internet, Página web, sitio web, HTML, portal 3.1 Internet El internet es un sistema mundial de redes de computadoras, es un conjunto integrado por las diferentes redes de cada país, desde donde cualquier usuario atreves de una computadora puede obtener la información de otra computadora La comunicación se establece entre dos puntos uno es la computadora en la que se accede y otra es el servidor que ay en red y que facilita la transferencia de información. 3.2 Pagina web Una página web es un documento situado en una red informática a la que se accede mediante enlaces, este en un documento HTML que tiene su propia dirección web. La pagina web en un documento electrónico que contiene un tema en particular y que es almacenado en algún sistema de computo que se encuentra conectado a una red de información llamada internet de tal forma que sea accesible para cualquier persona que esté conectado a las red de información Características de la página web Tienden a mezclar texto con imágenes para hacer q el documento sea dinámico y permita q se puedan ejecutar diferentes acciones ya sea en texto remarcado o en las imágenes q nos pueda llevar a otra sección de información esta puede ser trasportándonos a otra página del sitio o enviándonos a otro sitio web atreves de los hipervínculos. Una página web es una pieza electrónica de información vista atreves de una computadora q está conectada al internet permitiendo q los visitantes la vean.

18 Una página web provee información al observador q puede ser de cualquier tipo. 3.3 Sitio web El sitio web es un conjunto de archivos y páginas web que es referente a un tema en particular y que contiene una página principal un dominio y una dirección de internet. Estos sitios son usados por instituciones públicas y privadas para comunicarse con el mundo. En el caso de las empresas es usado para comunicar bienes y servicios. Los sitios web no deben estar ubicados necesariamente en el equipo local, el sitio web puede estar ubicado en otra localidad o incluso en otro país, la única condición es q esté conectado a la red denominada internet, este equipo de computo o servidor web puede tener más de un sitio web almacenado y atender a los diferentes visitantes de los otros sitios web. Los sitios web pueden ser de diferentes géneros, destacando los diferentes sitios de negocios servicio comercio en línea, imagen corporativa, entretenimiento i sitios informativo q es vista atreves de una computadora q esta siempre encendida. 3.4 Portal. Portal es un término para referirse a un sitio web que pretende servir como sitio principal de partida para las personas q se conecta al Internet. Son sitios q los usuarios tienden a visitar como sitio ancla. Los portales tienen gran reconocimiento en Internet por el poder de influencia q tienen sobre las comunidades.

19 3.5 HTML Es el lenguaje de mayor uso para la realización de páginas web. La gran cantidad de comandos que pueden llevar los códigos del HTML permiten llevar a cabo un gran número de arreglos y modificaciones de efectos que van desde estructura, forma, efectos, tipos de letras hasta la adición de imágenes y una gran variedad mas. En la imagen 2.1 se muestra un poco de los códigos HTML, en esta imagen se puede observar la gran cantidad de códigos q se necesitan para poder dar forma a una página web ya sea desde el titulo hasta la adición de imágenes. Un sitio web probé información al observador que está producida a color y puede tener imágenes, animación, productos incluso se pueden hacer compras desde la misma. Actualmente hay un gran número de cosas que se puede hacer en un sitio web. Figura 2.1 Código HTML.

20 CAPÍTULO IV DESARROLLO DEL PROYECTO

21 4.1 Introducción El proyecto se refiere a la elaboración de un sitio web para la empresa JMR Ingeniería tiene como objetivo dar a conocer la empresa como tal para expandirse en el mercado de la ingeniería, en la cual debe incluir información de la empresa, los bienes y servicios que ofrece la empresa El sitio se dividió en 5 páginas web para distribuir de forma accesible la información, las partes son: Inicio Quiénes somos? Ventas Soporte Servicios} Para la realización de las diferentes páginas se empleo el programa Microsoft FrontPage, debido a su capacidad de generar códigos HTML de una forma fácil y rápida y con buena presentación. El proceso que debió realizarse para la elaboración del sitio web fue desde su creación la inspección de la el funcionamiento correcto de las diferentes paginas desde la computadora en q fue realizado así como la inspección de su funcionamiento en el servidor en el q fue almacenado.

22 4.2 Ejecución del proyecto Debido a que nuestro conocimiento sobre la elaboración de una página web era muy limitado se procedió a una investigación por parte de nosotros para aclarar nuestras dudas sobre la realización de un sitio web. Se realizo una página en el programa elegido para la realización del sitio web el cual es FrontPage, de esta página se basaron las otras páginas del sitio web que debían ser parecidas con una barra superior con los enlaces que permiten ligar las diferentes paginas del sitio web como se muestra en la figura 4.1. El desarrollo del sitio inicio desde página principal en donde además de colocar una bienvenida formal como se muestra en la pagina 4.2 así como un pequeño párrafo de lo que la empresa es JMR ingeniería así como del trabajo que se realiza en la empresa así como imágenes que muestran algunos de los trabajos que se realizan en la empresa Figura 4.1 barra de hipervínculo. Figura4.2 Página de inicio.

23 En el diseño de la siguiente página se procedió a añadir la información de la empresa tal como la misión, visión, objetivos y la filosofía de la empresa. La realización de esta parte del sitio fue sencillo debido a q la información colocada en esta sección ya estaba definida por la empresa desde sus inicios En la página de ventas se realizo un breve listado ilustrado sobre lo que la empresa ofrece cuestión de equipos: PLC s Panel view Magelis Wonderware In Touch Se agrega una pequeña información acerca del hardware para que el visitante pueda apreciar un poco de lo que se realiza así como las características y detalles del producto así como se puede ver en la figura 4.3. Figura 4.3 imagen de una magelis con descripción. En la pagina llamada Servicios se coloco un listado de la empresa realiza de una forma ilustrada para q el posible cliente pudiera aprecias un poco del trabajo que la empresa realiza así como la calidad del trabajo realizado.

24 Desarrollo de proyecto llave en mano Diagnostico de fallas en PLC e interface de operación Diseño de arquitectura en PLC ensamble y conexión de gabinetes integración de sistemas Diseño de fabricación de equipo especial Diseño de diagrama de tubería e instrumentación programación de interface HMI soporte para puesta en marcha de línea de producción La última página fue una sección pata que todo posible cliente se pueda comunicar a la empresa para solicitar más información o bien solicitar un servicio de la misma. 4.3 Animación Así como es posible colocar imágenes, el programa también te permite introducir animaciones para dar una mayor resalte a la página de tal modo hacerla más llamativa a la vista del observador. Estas imágenes fueron realizadas en un programa llamado Photo scape el cual es un programa gratuito de fácil uso y con buena calidad, El proceso de animación consistió en tomar varias imágenes del mismo tamaño y a ser que se desplegaran en un determinado tiempo una de otra

25 4.4 Hipervínculos. Ya ávido concluido el diseño de las paginas se procedió a enlazarlas unas a otras de tal modo de tal modo de acceder al la información mas rápido i poder pasar d una página a otra. La colocación de hipervínculos se realiza ya sea seleccionando un texto o creando uno en la ventana de herramientas de insertar hipervínculo (figura 4.4) la q vemos en la imagen y seleccionando q desea enlazar puede ir desde otro sitio web una imagen o archivos electrónico de cualquier tipo. Figura 4.4 Ventana de hipervínculos.

26 4.5 Revisión de sitio web Antes de q se procediera a subir el archivo a la rede se reviso que todo sirviera como es debido q los hipervínculos estuvieran ubicados correctamente que las imágenes y animaciones se mostraran en la página de acuerdo a como fueron acomodadas y q los enlaces no estuvieran rotos como se muestra en la imagen Enlace roto 4.6 Subida a red del sitio web. Ya concluida la etapa de pruebas en la computadora con el emulador que contiene el programa se procedió a buscar un servidor para comenzar las etapas de prueba en un servidor web debido a que para la empresa es difícil mantener su propio servidor se recurrió a uno dedicado a almacenar la información de sitios web Debido a que muchos servidores web cuentan o no con su propio sistema para subir la información desde el equipo del usuario al servidor, existen programas dedicados a esta función, para esto utilizamos el programa llamado filezilla.

27 Antes de subir se tiene que seleccionar el servidor al que se va a colocar el sitio web normalmente hay muchos servidores de este tipo que se dedican al almacenamiento de sitios web ya sea gratuito o puede tener algún costo y obtener una cuenta y un dominio donde colocar el sitio web. Para utilizar el programa filezilla solo se necesita seleccionar los archivos que se subirán a la red y colocar los datos de la cuenta y el server a que se va a subir los archivos del sitio web y el programa lo sube al servidor. 4.7 Prueba de página web Ya subida la página se procedió a ubicar la página por su dominio, revisar y verificar que esta funcionara, que las imágenes se vieran adecuadamente así como los hipervínculos funcionen, de manera adecuada debido a que al realizar la subida se pueden dañar los archivos y causar un mal funcionamiento en la pagina. Por seguridad de la página, la empresa, la adquisición del servidor fue tarea del ingeniero a cargo de nuestra estadía, fue el encargado de seleccionar el servidor donde se almacenaría el sitio web.

28 CAPÍTULO V ACTIVIDADES DIVERSAS

29 El momento en el que se llevo a cabo la estadía muchas otras actividades, a las cuales se refiere este capitulo 5.1 Gabinete para panel View Una de las actividades más comunes que realizamos fue el diseño de gabinetes para la colocación de pantallas táctiles para las interfaces hombre maquina. Para esto fue necesario perforar el gabinete a la medida de la pantalla táctil y las dos botoneras, en la parte interior del gabinete se atornillaban rieles para poder colocar las clemas y una fuente de 24v para la alimentación de la pantalla, luego se procedió al cableado de la fuente de las clemas y de ahí a la alimentación de la pantalla El gabinete era armado y entregado al cliente listo para su instalación 5.2 Sustitución del tablero de control de una prensa Una empresa mando renovar algunas piezas de su prensas hidráulicas para mejorar su eficiencia y seguridad, nosotros estuvimos a cargo de la sustitución del gabinete de control con un PLC debido a las condiciones en q se encontraba el PLC fue conservado. Su principal función de esta maquinaria es aplanar piezas hasta darles una formar dependiendo del molde, que estaba ubicado en un pistón accionado por un motor de 10 hp que Asia ascender o descender el pistón al momento que se accionaban dos botones además constaba de una barrera de luz que se encontraba por el lugar de entrada donde se colocaban las piezas para ser aplastadas, y en caso de que la barrera fuera cortada el pistón se detendría i subiría a su posición inicial y se apagaría el motor.

30 Lo primero fue perforar los hoyos en el gabinete para ubicar botoneras de alimentación y encendido/apagado así como las entradas y salidas para cableado, atornillar los rieles dentro del gabinete para la colocar las clemas, interruptores, relevadores y el PLC, Al momento de cablear todas las entradas, salidas y alimentación del PLC fueron cableadas Asia las clemas, igual q los otros dispositivos que se colocaron. Al momento de volver a ensamblar el panel de control se procedió a conectar el motor a los relevadores para controlas el movimiento del pistón así como la ubicación de los dos sensores ópticos, y la ubicación de la berrera de luz Acabado la instalación de todo el pistón fue probado para determinar si el programa cargado al PLC cumplía con la función q era requerida, al constatar esta prueba la maquinaria fue llevada a la empresa donde se ubicaba y ahí fue probada por la empresa que dio su aprobación. 5.3 Ampliación del PCL Debido a la expansión de un procesos la empresa Kelloggs solicito una ampliación de salidas del PLC de control de motores, la instalación constaba de un rack de 20 salidas. La instalación consistió en el cableado de este rack de salidas, dejando el cable unos 5 metros para colocar los extremos opuestos en clemas, para su posterior instalación en la empresa.

31 5.3 Supervisión de procesos Se realizo una supervisión de procesos en la empresa de Kelloggs después de que se instalara un nuevo proceso en la planta, y el PLC fue cargado con una extensión en su programa, esta supervisión constaba de mantener monitoreado el PLC para comprobar que el programa agregado funcionara correctamente.

32 CONCLUSIONES

33 La estadía se realizo en la empresa JMR ingeniería, la cual para mi fue muy provechosa ya que pude reafirmar mis conocimientos que adquirí en la universidad así como obtener mas conocimientos ya que aunque sea una estadía es también un pequeño vistazo a lo que es la vida laboral y también me di cuenta que aunque no sea una escuela todo trabajo te permite seguir aprendiendo y mejorando en los conocimientos cada vez mas. Mi estancia en esta empresa fue grata ya que se dedicaban mas q nada a la automatización de sistemas como la programación de PLC, pero también al diseño de equipos aunque hubo casos en los que pude participar en casos de mantenimiento y correcciones de equipos. Mi experiencia en esta empresa fue grata por que se dedicaba a la desarrollo de proyectos de automatización a varias empresas y pude apreciar los diferentes modos de trabajo y procesos que llevaban a cabo estas empresas asi como diferentes tipos de equipos industriales. Sobre el trato personal que tuve con los demás trabajadores fue muy agradable debido a que es una empresa pequeña de personal pero que realizaba un gran trabajo en equipo apoyándose unos a otros

34 BIBLIOGRAFÍA

35 BIBLIOGRAFÍA. Iederst Robbins, Jennifer Diseño Web. Guía de referencia Anaya Multimedia Agosto 2006 Códigos HTML Diseño con FrontPage