Sie sind auf Seite 1von 26

Negocios Electrnicos

Herramientas para el Desarroll Web De la Librera Feria de Libros Asignatura de Negocios Electrnicos
Jos Hildebrando Castillo Crdenas , 072ia08062, hica1991@hotmail.com

09/06/2011 Resumen. Este trabajo tiene como finalidad describir los diferentes aspectos que intervienen en el desarrollo de una pgina web, en este caso un pgina web de una librera, Feria de Libros, realiza para el curso de Sistema de Informacin Empresarial. Los Leguaje que se utlizara sern los ms usados que son HTML, php y JavaScript. El contexto del trabajo consistir en la descripcin de todas las herramientas de desarrollo que existen en el mercado para la creacin de una pgina web desde tipo de lenguaje hasta la plataforma de desarrollo que existen. Parra ello se argumentar las cualidades de cada herramienta web para su propio anlisis, identificando las desventajas y ventajas con respecto a los dems que se detallan. Se buscar en el internet y libros sobre herramientas de desarrollo web que se utilicen en sistema operativos Windows y Linux son los que ms se utilizan, para concluir cul de todas se deberan utilizar para agilizar el proceso de desarrollo. Palabras Claves. Colocar a los ms 8 palabras claves tal que permitan al lector de su documento conocer de antemano el mbito de trabajo. TABLA DE CONTENIDO 1. 2. 3. 4. 5. 6. 7. 8. 9. Introduccin Plataformas de desarrollo Servidores Web Sistemas Gestores de Bases de Datos Lenguajes de Programacin y Entornos de Desarrollo Frameworks o libreras Estudio de Caso: Empresa XYZ Conclusiones Referencias bibliogrficas

Apndices

Herramientas para el Desarrollo Web 1. INTRODUCCIN

Este trabajo ser realiza por que existen diferentes herramientas de desarrollo, de las cuales debemos saber cul utilizar para crear nuestra pgina web, primero comenzaremos por describir las diferentes plataformas de desarrollo que existen como son wampserver, xampp entre otros. Despus se detallaran los servidores web y los sistemas gestores de base de datos entre los cuales podemos mencionar a apache, IIS (Microsoft) estos son servidores web y SGBM tenemos a mysql con sus modelador phpmyadmin, postqre y Oracle. En los lenguajes de programacin detallaremos a 4 lenguajes que son: HTML, php, asp.net y java script, son los que ms utilizan los desarrolladores web. Pero solo las aplicaciones, no son necesarias para dar un mejor estilo a nuestra pgina web para ello contamos con libreras o framework que nos ayudaran a dar mejor apariencia y efectos a nuestra mquina. A travs de todos esto analizaremos cada herramienta web con la finalidad de elegir las ms apropiada para nuestro proyecto. Los recursos que utilizaremos sern los medios tecnolgicos como el internet y citas bibliogrficas Todos estos realizaremos para cumplir los siguientes requisitos que deben tener las pginas web: a) Validez de los contenidos: veracidad de la informacin, rigor de los servicios ofrecidos, capacidad de renovacin y actualizacin. b) Estabilidad de la pgina en red: perspectivas slidas de continuidad. c) Funcionalidad de la navegacin: entramado claro y coherente de los enlaces hipertextuales, visin general de las opciones de navegacin. d) Calidad del diseo: secciones con una jerarqua clara de apartados y una secuenciacin lgica. e) Posibilidades de interaccin: servicios de comunicacin e intercambio que ofrece al usuario. f) Atencin y servicios al usuario: posibilidad de realizar consultas y obtener repuesta con un grado razonable de inmediatez y utilidad. g) Enlaces propuestos: comprobar la pertinencia y utilidad de las conexiones que ofrece.

2 / 26

Herramientas para el Desarrollo Web 2. PLATAFORMAS DE DESARROLLO

2.1.

Plataforma: WampServer

WampServer es un entorno de desarrollo web de Windows. Le permite crear aplicaciones web con Apache, PHP y la base de datos MySQL. Tambin viene con PHPMyAdmin para administrar fcilmente tus bases de datos. WampServer instala automticamente (instalador), y su uso es muy intuitivo.Usted ser capaz de ajustar su servidor sin siquiera tocar los archivos de configuracin. WampServer es la nica solucin empaquetada que le permitir reproducir el servidor de produccin. Una vez WampServer est instalado, usted tiene la posibilidad de aadir el mayor nmero de Apache, MySQL y PHP versiones que quieras.

3 / 26

Herramientas para el Desarrollo Web

2.2.

Plataforma: Xampp Server

XAMPP es un servidor independiente de plataforma, software libre, que consiste principalmente en la base de datos MySQL, el servidor web Apache y los intrpretes para lenguajes de script: PHP y Perl. El nombre proviene del acrnimo de X (para cualquiera de los diferentes sistemas operativos), Apache, MySQL, PHP, Perl.

El programa est liberado bajo la licencia GNU y acta como un servidor web libre, fcil de usar y capaz de interpretar pginas dinmicas. Actualmente XAMPP est disponible para Microsoft Windows, GNU/Linux, Solaris y MacOS X. XAMPP 1.7.4, incluyendo: Apache 2.2.17 MySQL 5.5.8 PHP 5.3.5 phpMyAdmin 3.3.9 FileZilla FTP Server 0.9.37 Tomcat 7.0.3 (con mod_proxy_ajp como conector) No han puesto en marcha el Tomcat en nuestro panel de control, sin embargo, as que por favor usar los scripts por lotes para iniciar y detener: xampp / catalina_start.bat xampp / catalina_stop.bat Con una nueva versin de XAMPP, normalmente hay un paquete de actualizacin tambin. Adems, tenemos a veces pequeas manchas entre las versiones. Para entornos de desarrollo esto es genial, pero en un entorno de produccin podra ser fatal. Aqu una lista de seguridad que faltan en XAMPP:

El administrador de MySQL (root) no tiene contrasea. El demonio de MySQL es accesible a travs de la red. phpMyAdmin es accesible a travs de la red. El Demopage XAMPP es accesible a travs de la red. Los usuarios por defecto de Mercurio y FileZilla son conocidos.

Todos los puntos pueden ser un riesgo de seguridad enorme. Especialmente si XAMPP es accesible a travs de la red y las personas fuera de la LAN. Tambin puede ayudar el uso de un firewall o un router (NAT). En el caso de un router o firewall, el PC no es normalmente accesible a travs de la red. Es a usted para solucionar estos problemas.Como una pequea ayuda no es la "XAMPP consola de seguridad".

2.3.

Plataforma: AppServer 4 / 26

Herramientas para el Desarrollo Web AppServ es completo pack de Apache, MySQL, PHP, phpMyAdmin. Usted lo instalar y configurar en 1 minuto. Paquete de AppServ - Apaches - PHP - MySQL - PhpMyAdmin AppServ se marca un objetivo, una fcil a la instalacin. No proveemos otra cosa que ms que el lanzamiento binario oficial. AppServ tiene solamente la configuracin especial en la instalacin, apache arreglan httpd.conf, MySQL arregla my.ini, PHP arregla php.ini. Objetivo de AppServ es fcil instalar. Usted configurar servidor de web y el servidor de base de datos en 1 minuto. Para algunos se preguntan si puede AppServ ser servidor de web legtimo o servidor de base de datos. Pueden hacer AppServ para suministrar como servidor. Pero Windows no es suficientemente bueno para la carga pesada sobre su Web o servidor de base de datos.Memoria de mayor cantidad de uso de arquitectura de SO de ventanas y el uso de CPU al que lo recomendamos use SO de Linux / Unix atienda la carga pesada del trabajo. Porque los SO Linux /Unix tienen mayor cantidad acelerar y usar memoria y usan menos CPU. Si usted compara Windows y el SO de Linux / Unix usted debe haber descubierto mucha velocidad de diferencia. Por ejemplo. El Windows puede tratar con 1000 usuarios por segundo pero el SO de Linux / Unix puede tratar con ms de 1000 usuarios por segundo y usar poca memoria y cpu. Versin de AppServ 2.4.x es una obra de versin estable excelente para todo usuario, por la manera en que este versin usa 4.x de PHP porque trabaje bien con sus scripts de PHP. 2.5.x es la funcin de roca. Esta versin provee el ms nuevo y experimental de Apache, PHP, MySQL. Recomendamos para todo el usuario de AppServ. Usted no debe actualizar a la nueva versin cada vez que se libera. Usted debe de escoger alguna versin para su trabajo si usted piensa esta versin estable para usted. La nueva versin no es la mejor media.

5 / 26

Herramientas para el Desarrollo Web 3. SERVIDORES WEB 3.1. Apache

El Apache HTTP Server Project es un esfuerzo para desarrollar y mantener un dilogo abierto servidor HTTP de cdigo para los sistemas operativos modernos, incluyendo UNIX y Windows NT. El objetivo de este proyecto es proporcionar un servidor seguro, eficiente y extensible que proporcione servicios HTTP en sintona con los actuales estndares de HTTP. Apache httpd ha sido el servidor web ms popular en Internet desde abril de 1996, y celebr su cumpleaos nmero 15 como un proyecto de este mes de febrero. Apache Software existe para proporcionar implementaciones de referencia slido y de calidad comercial de muchos tipos de software. Se debe seguir siendo una plataforma sobre la cual los individuos y las instituciones pueden crear sistemas confiables, tanto para fines experimentales y para fines de misin crtica. Creemos que las herramientas de publicacin en lnea debe estar en manos de todos, y que las empresas de software deben hacer su dinero por la prestacin de servicios de valor aadido tales como los mdulos especializados y de apoyo, entre otras cosas. Nos damos cuenta de que a menudo es visto como una ventaja econmica para una empresa de "propio" de un mercado - en la industria del software, lo que significa un estricto control de un canal particular, de tal manera que todos los dems deben pagar por su uso. Esto se realiza normalmente por "poseer" los protocolos a travs del cual las empresas hacer negocios, a costa de todos aquellos de otras empresas. En la medida en que los protocolos de la World Wide Web permanecer "sin dueo" por una sola compaa, la web se mantendr la igualdad de condiciones para las empresas grandes y pequeas. Por lo tanto, "propiedad" de los protocolos deben ser prevenidas

3.2.

Internet Information Services o IIS

es un servidor web y un conjunto de servicios para el sistema operativo Microsoft Windows. Originalmente era parte del Option Pack para Windows NT. Luego fue integrado en otros sistemas operativos de Microsoft destinados a ofrecer servicios, como Windows 2000 o Windows Server 2003. Windows XP Profesional incluye una versin limitada de IIS. Los servicios que ofrece son: FTP, SMTP, NNTP y HTTP/HTTPS. Este servicio convierte a una PC en un servidor web para Internet o una intranet, es decir que en las computadoras que tienen este servicio instalado se pueden publicar pginas web tanto local como remotamente. Los servicios de Internet Information Services proporcionan las herramientas y funciones necesarias para administrar de forma sencilla un servidor web seguro. El servidor web se basa en varios mdulos que le dan capacidad para procesar distintos tipos de pginas. Por ejemplo, Microsoft incluye los de Active Server Pages (ASP) y ASP.NET. Tambin pueden ser incluidos los de otros fabricantes, como PHP o Perl.

6 / 26

Herramientas para el Desarrollo Web 4. SISTEMAS GESTORES DE BASES DE DATOS 4.1. MySql 2

MySQL es un gestor de base de datos sencillo de usar y increblemente rpido. Tambin es uno de los motores de base de datos ms usados en Internet, la principal razn de esto es que es gratis para aplicaciones no comerciales. Las caractersticas principales de MySQL son:

Es un gestor de base de datos. Una base de datos es un conjunto de datos y un gestor de base de datos es una aplicacin capaz de manejar este conjunto de datos de manera eficiente y cmoda.

Es una base de datos relacional. Una base de datos relacional es un conjunto de datos que estn almacenados en tablas entre las cuales se establecen unas relaciones para manejar los datos de una forma eficiente y segura. Para usar y gestionar una base de datos relacional se usa el lenguaje estndar de programacin SQL.

Es Open Source. El cdigo fuente de MySQL se puede descargar y est accesible a cualquiera, por otra parte, usa la licencia GPL para aplicaciones no comerciales.

Es una base de datos muy rpida, segura y fcil de usar. Gracias a la colaboracin de muchos usuarios, la base de datos se ha ido mejorando optimizndose en velocidad. Por eso es una de las bases de datos ms usadas en Internet.

Existe una gran cantidad de software que la usa.

PhpMyAdmin PhpMyAdmin es una herramienta de software libre escrito en PHP para ocuparse de la administracin de MySQL en la World Wide Web. phpMyAdmin es compatible con una amplia gama de operaciones con MySQL. La mayora de las operaciones de uso frecuente son compatibles con la interfaz de usuario (manejo de bases de datos, tablas, campos, relaciones, ndices, usuarios, permisos, etc), mientras que usted todava tiene la capacidad de ejecutar directamente cualquier sentencia SQL. phpMyAdmin viene con una amplia gama de documentacin y de los usuarios son bienvenidos para actualizar nuestras pginas wiki para compartir ideas y tutoriales para diversas operaciones. El equipo de phpMyAdmin a tratar de ayudarte si tienes cualquier problema, puede utilizar gran variedad de canales de soporte para obtener ayuda. phpMyAdmin es tambin muy profundamente documentados en un libro escrito por uno de los desarrolladores - Dominar phpMyAdmin para una eficaz gestin de MySQL , que est disponible en Ingls, checo, alemn y espaol. Para facilitar el uso de una amplia gama de personas, phpMyAdmin se traduce en 62 idiomas y es compatible con LTR y RTL idiomas. 7 / 26

Herramientas para el Desarrollo Web Caractersticas o Interfaz web intuitiva o Apoyo a la mayora de las caractersticas de MySQL: Buscar y eliminar bases de datos, tablas, vistas, campos e ndices Crear, copiar, eliminar y cambiar el nombre de alterar las bases de datos, tablas, campos e ndices Mantenimiento del servidor, bases de datos y tablas, con propuestas sobre la configuracin del servidor Ejecutar, editar y marcar cualquier SQL -declaracin, incluso por lotes consultas Administrar usuarios MySQL y privilegios Gestin de procedimientos almacenados y disparadores o Importar datos de CSV y SQL o Exportar datos a varios formatos: CSV , SQL , XML , PDF , ISO / IEC 26300 - Texto OpenDocument y hoja de clculo, Palabra , Excel , L A T E X y otros o La administracin de varios servidores o Crear PDF de grficos de su diseo de base de datos o Creacin de consultas complejas utilizando Consulta por ejemplo (QBE) o Bsqueda a nivel mundial en una base de datos o un subconjunto de la misma o La transformacin de los datos almacenados en cualquier formato mediante un conjunto de funciones predefinidas, como mostrar los datos BLOB como imagen o enlace de descarga 4.2. PostgreSQL

Es un sistema de gestin de base de datos relacional orientada a objetos y libre, publicado bajo la licencia BSD. Como muchos otros proyectos de cdigo abierto, el desarrollo de PostgreSQL no es manejado por una empresa y/o persona, sino que es dirigido por una comunidad de desarrolladores que trabajan de forma desinteresada, altruista, libre y/o apoyada por organizaciones comerciales. Dicha comunidad es denominada el PGDG (PostgreSQL Global Development Group).

PostgreSQL es una poderosa fuente, abrir el objeto-relacional de bases de datos del sistema. Cuenta con ms de 15 aos de desarrollo activo y una arquitectura probada que se ha ganado una slida reputacin de fiabilidad, integridad de datos y la correccin. Funciona en todos los principales sistemas operativos, incluyendo Linux, UNIX (AIX, BSD, HP-UX, SGI IRIX, Mac OS X, Solaris, Tru64) y Windows. Es totalmente compatible con ACID, tiene soporte completo para claves forneas, uniones, vistas, disparadores y procedimientos almacenados (en varios idiomas). Que incluye la mayor parte de SQL: 2008 los tipos de datos, incluyendo entero, numrico, BOOLEAN, CHAR, VARCHAR, DATE, INTERVAL, y TIMESTAMP. Tambin es compatible con el almacenamiento de objetos binarios grandes, como imgenes, sonidos o vdeo.
8 / 26

Herramientas para el Desarrollo Web

4.3.

Oracle

Oracle es un sistema de gestin de base de datos objeto-relacional (o ORDBMS por el acrnimo en ingls de Object-Relational Data Base Management System), desarrollado por Oracle Corporation. Se considera a Oracle como uno de los sistemas de bases de datos ms completos, destacando: soporte de transacciones, estabilidad, escalabilidad y Soporte multiplataforma. Su dominio en el mercado de servidores empresariales ha sido casi total hasta hace poco, recientemente sufre la competencia del Microsoft SQL Server de Microsoft y de la oferta de otros RDBMS con licencia libre como PostgreSQL, MySql o Firebird. Las ltimas versiones de Oracle han sido certificadas para poder trabajar bajo GNU/Linux.

9 / 26

Herramientas para el Desarrollo Web 5. LENGUAJES DE PROGRAMACIN Y ENTORNOS DE DESARROLLO

5.1.

Lenguaje de Programacin: 5.1.1. PHP


PHP es un lenguaje encapsulado dentro de los documentos html (aunque los CGI hechos con PHP terminan en extensin .php y no .html). De forma que se pueden introducir instrucciones php dentro de las pginas. Gracias a esto el diseador grfico del web puede trabajar de forma independiente al programador. PHP es interpretado por el servidor (apache) generando un HTML con el resultado de substituir las secuencias de instrucciones PHP por su salida PHP es un acrnimo recursivo que significa PHP Hypertext Pre-processor. Fue creado originalmente por Rasmus Lerdorf en 1994; sin embargo la implementacin principal de PHP es producida ahora por The PHP Group y sirve como el estndar de facto para PHP al no haber una especificacin formal. Publicado bajo la PHP License, la Free Software Foundation considera esta licencia como software libre.

Ventajas Es un lenguaje multiplataforma. Orientado al desarrollo de aplicaciones web dinmicas con acceso a informacin almacenada en una base de datos. El cdigo fuente escrito en PHP es invisible al navegador web y al cliente ya que es el servidor el que se encarga de ejecutar el cdigo y enviar su resultado HTML al navegador. Esto hace que la programacin en PHP sea segura y confiable. Capacidad de conexin con la mayora de los motores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL. Capacidad de expandir su potencial utilizando mdulos. Posee una amplia documentacin en su sitio web oficial, entre la cual se destaca que todas las funciones del sistema estn explicadas y ejemplificadas en un nico archivo de ayuda. Es libre, por lo que se presenta como una alternativa de fcil acceso para todos. Permite aplicar tcnicas de programacin orientada a objetos. Desventajas Todo el trabajo lo realiza el servidor y no delega al cliente. Por tanto puede ser ms ineficiente a medida que las solicitudes aumenten de nmero. La legibilidad del cdigo puede verse afectada al mezclar sentencias HTML y php. La orientacin a objetos es an muy deficiente para aplicaciones grandes. Importancia: PHP no soporta directamente punteros, como el C, de forma que no existen los problemas de depuracin provocados por estos. Se

10 / 26

Herramientas para el Desarrollo Web pueden hacer grandes cosas con pocas lneas de cdigo. Lo que hace que merezca la pena aprenderlo. Viene acompaado por una excelente biblioteca de funciones que permite realizar cualquier labor (acceso a base de datos, encriptacin, envi de correo, gestin de un e-commerce, XML, creacin de PDF) Al poderse encapsular dentro de cdigo HTML se puede recoger el trabajo del diseador grfico e incrustar el cdigo php posteriormente. Est siendo utilizado con xito en varios millones de sitios web. Hay multitud de aplicaciones php para resolver problemas concretos (blogs, tiendas virtuales, peridicas) listas para usar. Es multiplataforma, funciona en todas las plataformas que soporten apache. Es software libre. Se puede obtener en la web y su cdigo est disponible bajo la licencia GPL.

5.1.2. HTML Este lenguaje estructura documentos. La mayora de los documentos tienen estructuras comunes (ttulos, parrafos, listas...) que van a ser definidas por este lenguaje mediante tags. Cualquier cosa que no sea una tag es parte del documento mismo. Este lenguaje no describe la apariencia del diseo de un documento sino que ofrece a cada plataforma que le de formato segn su capacidad y la de su navegador (tamao de la pantalla, fuentes que tiene instaladas...). Por ello y para no fustrarnos, no debemos disear los documentos basndonos en como lucen en nuestro navegador sino que debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fcil de leer y entender. No se desespere por lo que acaba de leer. HTML tiene dos ventajas que lo hacen prcticamente imprescindibles a la hora de disear una presentacin web: Su compatibilidad y su facilidad de aprendizaje debido al reducido nmero de tags que usa. Tres son las tags que describen la estructura general de un documento y dan una informacin sencilla sobre l. Estas tags no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML. <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje. <HEAD>: Especifica el prlogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del ttulo <TITLE> que ser utilizado por los marcadores del navegador e identificar el contenido de la pgina. Solo puede haber un ttulo por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de l. En head no hay que colocar nada del texto del documento. <BODY>: Encierra el resto del documento, el contenido.
11 / 26

Herramientas para el Desarrollo Web

<HTML> <HEAD> <TITLE> Ejemplo 1</TITLE> </HEAD> <BODY> Hola mundo </BODY> </HTML> Ventajas: Sencillo que permite describir hipertexto. Texto presentado de forma estructurada y agradable. No necesita de grandes conocimientos cuando se cuenta con un editor de pginas web o WYSIWYG. Archivos pequeos. Despliegue rpido. Lenguaje de fcil aprendizaje. Lo admiten todos los exploradores. Desventajas: Lenguaje esttico. La interpretacin de cada navegador puede ser diferente. Guarda muchas etiquetas que pueden convertirse en basura y dificultan la correccin. El diseo es ms lento. Las etiquetas son muy limitadas.

5.1.3. Java Script Este es un lenguaje interpretado, no requiere compilacin. Fue creado por Brendan Eich en la empresa Netscape Communications. Utilizado principalmente en pginas web. Es similar a Java, aunque no es un lenguaje orientado a objetos, el mismo no dispone de herencias. La mayora de los navegadores en sus ltimas versiones interpretan cdigo Javascript. El cdigo Javascript puede ser integrado dentro de nuestras pginas web. Para evitar incompatibilidades el World Wide Web Consortium (W3C) diseo un estndar denominado DOM (en ingls Document Object Model, en su traduccin al espaol Modelo de Objetos del Documento).
<script language="JavaScript" src ="archivo.js"> </script>

Ventajas: Lenguaje de scripting seguro y fiable. Los script tienen capacidades limitadas, por razones de seguridad. El cdigo Javascript se ejecuta en el cliente. Desventajas:
12 / 26

Herramientas para el Desarrollo Web

Cdigo visible por cualquier usuario. El cdigo debe descargarse completamente. Puede poner en riesgo la seguridad del sitio, con el actual problema llamado XSS (significa en ingls Cross Site Scripting renombrado a XSS por su similitud con las hojas de estilo CSS).

5.1.4. Asp.net
Este es un lenguaje comercializado por Microsoft, y usado por programadores para desarrollar entre otras funciones, sitios web. ASP.NET es el sucesor de la tecnologa ASP, fue lanzada al mercado mediante una estrategia de mercado denominada .NET. El ASP.NET fue desarrollado para resolver las limitantes que brindaba tu antecesor ASP. Creado para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Los archivos cuentan con la extensin (aspx). Para su funcionamiento de las pginas se necesita tener instalado IIS con el Framework .Net. Microsft Windows 2003 incluye este framework, solo se necesitar instalarlo en versiones anteriores. Ventajas: Completamente orientado a objetos. Controles de usuario y personalizados. Divisin entre la capa de aplicacin o diseo y el cdigo. Facilita el mantenimiento de grandes aplicaciones. Incremento de velocidad de respuesta del servidor. Mayor velocidad. Mayor seguridad. Desventajas: Mayor consumo de recursos.

5.2.

Entorno de Desarrollo: Adobe Dreamweaver CS3 Dreamweaver permite a sus usuarios disear, desarrollar y mantener de forma eficaz sitios y aplicaciones Web, el propio programa va guiando al usuario en su utilizacin. Algunas de sus caractersticas son: Entorno de desarrollo compatible con PHP, J2EE y Microsoft.NET Diseo de pginas Webs con un interfaz completamente grfico Barra de herramientas de programacin, que facilita las operaciones de programacin ms usuales Contraccin del cdigo, para centrarse solo en el que se est utilizando Barra de herramientas de reproduccin de estilos, con la que se puede ver el resultado final Comparar archivos para ver que ha cambiado Facilidad para aadir vdeos Flash Notificacin y registro de eventos Se integra en Microsoft Word, Flash, Adobe Photoshop y otras 13 / 26

Herramientas para el Desarrollo Web Optimiza las pginas para las diferentes versiones de los navegadores

Diseo de las pginas Web Elija el diseo ms apropiado, o combine las opciones de diseo de Dreamweaver para definir el aspecto de su sitio. En la creacin de su diseo puede utilizar elementos PA, estilos de posicin CSS o diseos CSS predefinidos de Dreamweaver. Las herramientas de tabla le permiten disear pginas rpidamente y, posteriormente, reorganizar la estructura de las mismas. Para mostrar varios documentos de forma simultnea en un navegador, pueden utilizarse marcos para disear los documentos. Por ltimo, puede crear pginas nuevas basadas en una plantilla de Dreamweaver y actualizar su diseo de forma automtica cuando cambie la plantilla. Diseos CSS Dreamweaver ofrece un conjunto de diseos CSS predefinidos que le permiten crear pginas con rapidez y le ayudan a conocer el diseo de pginas CSS mediante amplios comentarios en lnea incluidos en el cdigo. La mayora de los diseos de sitios existentes en la Web pueden agruparse en tres categoras: diseos de una, dos o tres columnas, cada uno de ellos con una serie de elementos adicionales (como los encabezados y pies de pgina). Dreamweaver ofrece ahora una lista completa de diseos esenciales que puede personalizar para adaptarlos a sus necesidades.

14 / 26

Herramientas para el Desarrollo Web

Creacin de una pgina con un diseo CSS 1.- Seleccione Archivo > Nuevo. 2.- En el cuadro de dilogo Nuevo documento, seleccione la categora Pgina en blanco (seleccin predeterminada.) 3.- En Tipo de pgina, seleccione el tipo de pgina que desea crear. 4.- En Diseo, seleccione el diseo CSS que desea utilizar. Puede elegir entre ms de 30 diseos distintos. La ventana Vista previa muestra el diseo y ofrece una breve descripcin del diseo seleccionado. Los diseos CSS predefinidos ofrecen los siguientes tipos de columnas: Fija El ancho de columna se especifica en pxeles. La columna no cambia de tamao en funcin del tamao del navegador o de la configuracin del texto del visitante del sitio. Elstica El ancho de columna se especifica en una unidad de medida relacionada con el tamao del texto. El diseo se adapta si el visitante del sitio cambia la configuracin del texto, pero no en funcin del tamao de la ventana del navegador. Flotante El ancho de columna se especifica como porcentaje del tamao del navegador del visitante. El diseo se adapta si el visitante del sitio amplia o reduce el navegador, pero no en funcin de la configuracin del texto. Hbrida Las columnas son una combinacin de las tres opciones anteriores. Por ejemplo, el diseo dos columnas hbridas, barra lateral derecha tiene una columna principal que se ajusta al tamao del navegador y una columna elstica a la derecha que se ajusta al tamao de la configuracin del texto del visitante del sitio. 5.- Seleccione un tipo de documento del men emergente DocType. 6.- Seleccione una ubicacin para el cdigo CSS del diseo en el men emergente Diseo CSS en. Aadir a Head Aade cdigo CSS para el diseo al encabezado de la pgina que se va a crear. Crear nuevo archivo Aade cdigo CSS para el diseo a una nueva hoja de estilos CSS externa y la adjunta a la pgina que se va a crear. Vincular a archivo existente Permite especificar un archivo CSS existente que ya contiene reglas CSS necesarias para el diseo. Esta opcin es especialmente til cuando desea utilizar el mismo diseo CSS (las reglas CSS para el mismo se encuentran en un nico archivo) en varios documentos. 7.- Siga uno de estos procedimientos: Si ha seleccionado Aadir a Head en el men emergente Diseo CSS en (opcin predeterminada), haga clic en Crear. Si ha seleccionado Crear nuevo archivo en el men emergente Diseo CSS en, haga clic en crear y, a continuacin, especifique un nombre para el nuevo archivo externo en el cuadro de dilogo Guardar archivo de hoja de estilos como. Si ha seleccionado Vincular a archivo existente en elmen emergente Diseo CSS en, aada el archivo externo al cuadro de texto Adjuntar archivo CSS; para ello haga clic en el icono Adjuntar hojas de estilos, introduzca la informacin necesaria en el cuadro de dilogo Vincular hoja de estilos externa y haga clic en 15 / 26

Herramientas para el Desarrollo Web Aceptar. Cuando haya finalizado, haga clic en Crear en el cuadro de dilogo Nuevo documento. 8.- (Opcional) Tambin puede adjuntar hojas de estilos CSS a la nueva pgina (independientes del diseo CSS) al crearla. Para ello, haga clic en el icono Adjuntar hoja de estilos situado encima del panel Adjuntar archivo CSS y seleccione una hoja de estilos CSS.

16 / 26

Herramientas para el Desarrollo Web 6. FRAMEWORKS O LIBRERAS JQUERY 1.6.1 JQuery es una biblioteca o framework de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el rbol DOM, manejar eventos, desarrollar animaciones y agregar interaccin con la tcnica AJAX a pginas web. Fue presentada el 14 de enero de 2006 en el BarCamp NYC. JQuery es software libre y de cdigo abierto, posee un doble licenciamiento bajo la Licencia MIT y la Licencia Pblica General de GNU v2, permitiendo su uso en proyectos libres y privativos.1 jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requeriran de mucho ms cdigo, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio. Las empresas Microsoft y Nokia anunciaron que incluirn la biblioteca en sus plataformas.2 Microsoft la aadir en su IDE Visual Studio3 y la usar junto con los frameworks ASP.NET AJAX y ASP.NET MVC, mientras que Nokia los integrar con su plataforma Web Run-Time. jQuery consiste en un nico fichero JavaScript que contiene las funcionalidades comunes de DOM, eventos, efectos y AJAX.

6.1.

Demo 1 de jQuery
Para empezar vamos a ver este ejemplo, donde tenemos dos botones y un texto. Al pulsar un botn, cambiaremos el texto y al pulsar el otro pondremos otro texto distinto. En este ejemplo tenemos una capa que tiene este cdigo <div id="capa" style="padding: 10px; background-color: #ff8800">Haz clic en un botn</div> Luego tenemos dos botones con estos cdigos: <input type="button" value="Botn A" onclick="$('#capa').html('Has hecho clic en el botn <b>A</b>')"> <input type="button" value="Botn B" onclick="$('#capa').html('Recibido un clic en el botn <b>B</b>')"> Como se puede ver, en los botones hay definidos un par de eventos onclick (uno en cada uno) que ejecutan una instruccin Javascript cuando se hace clic sobre ellos. La instruccin est en Javascript, pero hace uso de algunas herramientas disponibles en jQuery para trabajo con los elementos de la pgina. En este caso, por explicarlo rpidamente, se hace una seleccin del elemento DIV de la capa y luego se ejecuta un mtodo sobre l para cambiar el contenido HTML del elemento.

17 / 26

Herramientas para el Desarrollo Web ESTUDIO DE CASO: Feria de Libros 6.2. Plataformas de desarrollo Se utilizara Wamp Server 2.1.17

6.3.

Servidor Web Apache v2.2

6.4.

Sistema Gestor de Base de Datos Mysql 5.1 ms PhpMyAdmin 3.2

Apache 2.2.17 PHP 5.3.4 Mysql 5.1.53 PhpMyadmin 3.2.0.1 SQLBuddy 1.3.2 XDebug 2.1.0-5.3 webGrind 1.0 XDC 1.5

6.5.

Lenguaje de Programacin Emplearemos Php y JavaScrip

6.6.

Entorno de Desarrollo Dreamweaver CS3 Notepad ++ Komodo Navegador web: Google Crome, Firefox y IE8

6.7.

Libreras
Libreras Jquery CSS3 Mega Drop Down Menu

18 / 26

Herramientas para el Desarrollo Web

VERSION 3 0.0 Esta cada de Mega Down Menu es ahora ms flexible y puede incluir contenido an ms con el nuevo ancho total de caractersticas. Este Mega Drop Down Menu es perfecto para la creacin de mens nica facilidad. Es CSS / XHTML solo, no hay absolutamente ninguna javascript. El contenido se puede organizar en las columnas 1, 2, 3, 4 o 5 basado en el sistema de red 960. Este artculo viene con 9 variantes de color y una documentacin detallada que le ayudarn a comenzar con su nuevo men. Clases de CSS permite crear listas, prrafos con (o sin) las imgenes, que su memoria men de la izquierda o la derecha, y crear sus propios esquemas de color rpidamente. Caractersticas 9 colores Variante de ancho Fcil de personalizar XHTML / CSS 3 marcas Soporte del navegador de la Cruz Hasta 6 columnas Ejemplos de la tipografa Estilos de forma Alineado a la izquierda o a la derecha La documentacin de ayuda

Navegadores compatibles Este men ha sido probado (y funciona!) En todos los navegadores siguientes: Internet Explorer 6, 7, 8 y 9 Firefox 2, 3, 3.5, 3.6 y 4 Safari 4 y 5 Opera 10 y 11 Chrome 4 a 11

19 / 26

Herramientas para el Desarrollo Web

EASY SLIDER 1.7

Easy Slider, nos permitir deslizar horizontalmente o verticalmente tanto imgenes como cualquier otro contenido que se nos ocurra. Es completamente configurable tan solo con CSS, lo que permite una integracin realmente simple a nuestro sitio. Si desean ver una idea de cmo podran llegar a implementar Easy Slider en sus porfolios, basta con visitar templatica, otro de los sitios de Alen Grakalic, donde ha logrado integrar Easy Slider de una forma maravillosa. Opciones:

prevId
Identificacin del atributo de "anterior" botn. El valor por defecto es "prevBtn".

prevText NextID

El texto interior para "anterior" botn. El valor por defecto es "anterior". Identificacin de atributos para botn "Siguiente". El valor por defecto es "nextBtn".

nextText

El texto interior de botn "Siguiente". El valor por defecto es "Next".

orientacin velocidad

Deslizamiento puede ser horizontal o vertical . Horizontal es por defecto y si quieres configurar vertical que esto "vertical". Velocidad de la animacin en milisegundos, valor por defecto es 800.

ControlsShow Por defecto es cierto, pero si se establece en false, no se aade ningn tipo de control. Se puede utilizar con desplazamiento automtico cuando desee desactivar la interaccin del usuario. 20 / 26

Herramientas para el Desarrollo Web ControlsBefore y controlsAfter En caso de que desee aadir un poco de margen adicional para tener un mayor control sobre los botones, puede hacerlo mediante el uso de estos parmetros. Echa un vistazo a la demo en la que el uso de estas opciones. ControlsFade Por defecto el valor true. Si se establece en false se desactivar ocultar el botn deslizante cuando llega al final. FirstShow y lastShow Estos parmetros de ocultar (o mostrar) "ir a la primera" e "ir a la ltima" botones Auto Esta opcin permite a los automviles de deslizamiento, slo se establece en true. Pausa Esta opcin se configura en milisegundos y que representan la duracin de cada diapositiva cuando plugin se establece en automtico de deslizamiento Continuo Si es verdadero clic en el botn siguiente, cuando el regulador de llegar al final salta al principio (y viceversa). La combinacin de esta opcin con auto (ambos establecidos en true) obtendr la animacin sin fin

(function($) { $.fn.easySlider = function(options){ // default configuration properties var defaults = { prevId: 'prevBtn', prevText: '',

21 / 26

Herramientas para el Desarrollo Web


nextId: nextText: controlsShow: controlsBefore: controlsAfter: controlsFade: firstId: firstText: firstShow: lastId: lastText: lastShow: vertical: speed: auto: pause: continuous: }; var options = $.extend(defaults, options); this.each(function() { var obj = $(this); var s = $("li", obj).length; var w = $("li", obj).width(); var h = $("li", obj).height(); obj.width(w); obj.height(h); obj.css("overflow","hidden"); var ts = s-1; var t = 0; $("ul", obj).css('width',s*w); if(!options.vertical) $("li", obj).css('float','left'); if(options.controlsShow){ var html = options.controlsBefore; if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>'; html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>'; html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'; if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>'; html += options.controlsAfter; $(obj).after(html); }; $("a","#"+options.nextId).click(function(){ animate("next",true); }); $("a","#"+options.prevId).click(function(){ animate("prev",true); }); $("a","#"+options.firstId).click(function(){ animate("first",true); }); $("a","#"+options.lastId).click(function(){ animate("last",true); }); function animate(dir,clicked){ var ot = t; switch(dir){ case "next": t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1; break; case "prev": t = (t<=0) ? (options.continuous ? ts : 0) : t-1; break; case "first": t = 0; break; case "last": t = ts; break; 'nextBtn', '', true, '', '', true, 'firstBtn', 'First', false, 'lastBtn', 'Last', false, false, 800, false, 2000, false

22 / 26

Herramientas para el Desarrollo Web


default: break; }; var diff = Math.abs(ot-t); var speed = diff*options.speed; if(!options.vertical) { p = (t*w*-1); $("ul",obj).animate( { marginLeft: p }, speed ); } else { p = (t*h*-1); $("ul",obj).animate( { marginTop: p }, speed ); }; if(!options.continuous && options.controlsFade){ if(t==ts){ $("a","#"+options.nextId).hide(); $("a","#"+options.lastId).hide(); } else { $("a","#"+options.nextId).show(); $("a","#"+options.lastId).show(); }; if(t==0){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); } else { $("a","#"+options.prevId).show(); $("a","#"+options.firstId).show(); }; }; if(clicked) clearTimeout(timeout); if(options.auto && dir=="next" && !clicked){; timeout = setTimeout(function(){ animate("next",false); },diff*options.speed+options.pause); }; }; // init var timeout; if(options.auto){; timeout = setTimeout(function(){ animate("next",false); },options.pause); }; if(!options.continuous && options.controlsFade){ $("a","#"+options.prevId).hide(); $("a","#"+options.firstId).hide(); }; }); }; })(jQuery);

23 / 26

Herramientas para el Desarrollo Web 8. CONCLUSIONES

Con el siguiente trabajo se podra concluir: Todo el sistema se podra trabajar en puro lenguaje php, pero tiene restriccin grfica, por lo cual se opta por utilizar varios lenguajes a la vez como HTML con php y java script, las cuales posee grandes libreras para mejorar 100% el diseo de la pgina web. Las plataformas de Desarrollo son esenciales porque agilizan las instalaciones de las diferentes aplicaciones que se necesitan para comenzar a programar nuestra pgina web. Los entornos de desarrollo pueden ayudarnos para programar acciones comunes, y para saber utilizar al mximo sus recursos que ofrecen es necesario tener conocimiento del lenguaje de programacin, y establecer la metodologa de programacin a utilizar a los largo de toda la pgina web.

24 / 26

Herramientas para el Desarrollo Web 9. REFERENCIAS BIBLIOGRFICAS

Bibliografa
[1] codecanyon. (2011, Junio) CSS3 Mega Drop Down Menu. [Online]. HYPERLINK "http://codecanyon.net/item/css3-mega-drop-down-menu/126387" http://codecanyon.net/item/css3-mega-drop-down-menu/126387 [2] Joaquin Gracia. (2011, Junio) Iniciacion a PHP. [Online]. HYPERLINK "http://www.webestilo.com/php/php00.phtml" http://www.webestilo.com/php/php00.phtml [3] Joaquin Gracia. (2011, Junio) Manual de Mysql. [Online]. HYPERLINK "http://www.webestilo.com/mysql/" http://www.webestilo.com/mysql/ [4] Ing. Gerardo Herrera. (2011, Junio) PHP. [Online]. HYPERLINK "http://www.vaslibre.org.ve/publicaciones/phpflisol2006.pdf" http://www.vaslibre.org.ve/publicaciones/phpflisol2006.pdf [5] Romain Bourdon. (2011, Junio) Wamp Server. [Online]. HYPERLINK "http://www.wampserver.com/en/download.php" http://www.wampserver.com/en/download.php [6] phpMyAdmin devel team. (2011, Junio) phpMyAdmin Documentation. [Online]. HYPERLINK "http://www.phpmyadmin.net/documentation/" http://www.phpmyadmin.net/documentation/ [7] The Apache Software Foundation. (2011, Junio) Apache HTTP Server Project. [Online]. HYPERLINK "http://httpd.apache.org/ABOUT_APACHE.html" http://httpd.apache.org/ABOUT_APACHE.html [8] wikipedia. (2011, Junio) PHP. [Online]. HYPERLINK "wikipedia" wikipedia [9] wikipedia. (2011, Junio) Jquery. [Online]. HYPERLINK "http://es.wikipedia.org/wiki/JQuery" http://es.wikipedia.org/wiki/JQuery [10] Miguel Angel Alvarez. (2011, junio) El manual de jQuery. [Online]. HYPERLINK "http://www.desarrolloweb.com/manuales/manual-jquery.html" http://www.desarrolloweb.com/manuales/manual-jquery.html [11] The jQuery Project. (2011, Junio) Jquery. [Online]. HYPERLINK "http://jquery.com/" http://jquery.com/ [12] Adobe Systems Incorporated. (2011, Junio) ADOBE DREAMWEAVER CS3 Manual de Usuario. [Online]. HYPERLINK "http://livedocs.adobe.com/en_US/Dreamweaver/9.0_API/dreamweaver_cs3_api.pdf" http://livedocs.adobe.com/en_US/Dreamweaver/9.0_API/dreamweaver_cs3_api.pdf [13] AppServNetwork. (2011, Junio) AppServer Open Project. [Online]. HYPERLINK "http://www.appservnetwork.com/modules.php?name=Content&pa=showpage&pid=21" http://www.appservnetwork.com/modules.php?name=Content&pa=showpage&pid=21 [14] Wikipedia. (2011, Junio) XAMPP. [Online]. HYPERLINK "http://es.wikipedia.org/wiki/XAMPP" http://es.wikipedia.org/wiki/XAMPP [15] Microsoft Corporation. (2011, Junio) ISS. [Online]. HYPERLINK "http://learn.iis.net/page.aspx/38/planning-your-iis-7-architecture/" http://learn.iis.net/page.aspx/38/planning-your-iis-7-architecture/ [16] Grupo de Desarrollo Global de PostgreSQL. (2011, Junio) PostgreSQL. [Online]. HYPERLINK "http://www.postgresql.org/about/" http://www.postgresql.org/about/ [17] Wikipedia. (2011, Junio) Oracle. [Online]. HYPERLINK
25 / 26

Herramientas para el Desarrollo Web

[18] [19] [20] [21]

"http://es.wikipedia.org/wiki/Oracle" http://es.wikipedia.org/wiki/Oracle Joaquin Gracia. (2011, Junio) ASp.net. [Online]. "http://www.webestilo.com/aspnet/" http://www.webestilo.com/aspnet/ Joaquin Gracia. (2011, Junio) JavaScript. [Online]. "http://www.webestilo.com/javascript/" http://www.webestilo.com/javascript/ Joaquin Gracia. (2011, Junio) Html. [Online]. "http://www.webestilo.com/html/" http://www.webestilo.com/html/ wikipedia. (2011, Junio) Oracle. [Online]. "http://es.wikipedia.org/wiki/Oracle" http://es.wikipedia.org/wiki/Oracle

HYPERLINK HYPERLINK HYPERLINK HYPERLINK

26 / 26