Page 1

DEFINICIÓN Y VALORACIÓN DEL PROYECTO DE REALIZACIÓN DEL ANÁLISIS Y PROGRAMACIÓN DE UNA WEB PARA LA DIFUSIÓN DE NOTICIAS Y EVENTOS RELACIONADOS CON EL SURF EN LAS ISLAS CANARIAS. Autores: Analistas – Programadores (Técnicos Superiores en Desarrollo de Aplicaciones Multiplataforma):

Benito Fortes Plasencia Marco Antonio Acosta Jordán Jesús Pedraza García-Caro

Teles & Foro Desarrollos Lógicos C.B. Avda. Steve Jobs, nro. 69 – local 13 38400 – Puerto de La Cruz – Santa Cruz de Tenerife Mail: teles&foro@tsurf.es Web: www.tfsurf.es/proyectodam

Oferta para la empresa: Centro de Promoción y Desarrollo del Surf La Ola, S. L. Avda. de Colón, s/n 38400 – Puerto de la Cruz – Santa Cruz de Tenerife Esta información es propiedad de Teles & Foro Desarrollos Lógicos C. B. para el Centro de Promoción y Desarrollo del Surf La Ola, S. L. y no puede ser compartida con un tercero sin la expresa autorización, por escrito, de Teles & Foro Desarrollos Lógicos C. B. © Teles & Foro Desarrollos Lógicos C. B.


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

ÍNDICE 1.- INTRODUCCIÓN – EL SURF EN CANARIAS ..................................pág. 2.- OBJETIVOS Y CUESTIÓN ................................................................pág. 3.- ANÁLISIS DEL PROYECTO ..............................................................pág. 4.- ANÁLISIS DE COMPONENTES DEL SISTEMA ..............................pág. 5.- EJECUCIÓN DEL PROYECTO ..........................................................pág. 6.- TRANSMISIÓN EN VIVO (STREAMING) .......................................pág. 7.- DIAGRAMA DE GANT ......................................................................pág. 8.- PRESUPUESTO .................................................................................pág. 9.- PROS Y CONTRAS DEL TRABAJO EN GRUPO ..............................pág. 10.- AMPLIACION ..................................................................................pág. 11.- FUENTES CONSULTADAS ..............................................................pág.

Página.- 2

03 05 21 23 27 42 47 50 51 54 67


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

1.- INTRODUCCIÓN – EL SURF EN CANARIAS: A mediados del siglo 20, con el boom del turismo en el archipiélago y la llegada de numerosos turistas, en las playas de las dos islas capitalinas comenzaron a verse unos “locos”, así los llamaban quienes por primera vez veían a un hombre subido en una tabla, cabalgando una ola puesto en pie. Los niños de la época, lo que realmente veían era algo a imitar. En un paseo en la tarde de un domingo por la Avenida de Martiánez de un grupo de amigos con sus familias, al llegar el Charco de la Soga (denominado así por la “soga” que tenía para agarrarse a ella), que así se llamaba en la antigüedad, nos encontrábamos con la estampa de un surfero en una ola. Don José Fregel de León, gran fotógrafo portuense, plasmó ese momento en una fotografía mientras corría el año 1963 y es el primer documento gráfico que recoge a alguien surfeando en Canarias. Aunque muchos querían imitar a aquel hombre, era del todo imposible hacerse con una tabla. Así, poco a poco, con el paso de los años y con la llegada cada vez más numerosa de amantes de este deporte, que llegaban a las islas huyendo del frio invernal de sus países de origen, dio la posibilidad de que algunos se pudiesen hacer con una tabla, ya que algunos surferos las vendían al finalizar sus vacaciones. En 1975 ya era una imagen habitual ver a jóvenes en nuestras playas surfeando. La Playa de Martiánez, El Socorro y Los Hermanos, por este orden, se pueden considerar la plataforma de arranque de la expansión de este deporte en Canarias. Pasaron los años y con cada vez más aficionados a este deporte hizo que naciera la Federación Canaria de Surf (F.C.S), en el año 1994, a iniciativa de un grupo de surfistas preocupados por la protección de las olas Canarias. Bajo las siglas de A.D.E.S. (Asociación para la Defensa del Surfing), se crea la estructura que derivaría en una federación deportiva con la categoría de asociación sin ánimo de lucro. Entre los objetivos de esta federación se encuentran: - Promoción del Circuito Canario de Surfing. Página.- 3


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

- Apoyo a eventos de carácter internacional que se desarrollan en el archipiélago canario. - Promoción del surfing femenino en Canarias. - Promoción del surfing para personas con discapacidad en Canarias. - Promoción de la Protección de las Olas en Canarias. - Red de Escuelas Oficiales de Surfing de Canarias. - Programa de Tecnificación Deportiva del Gobierno de Canarias. - Investigación y desarrollo del surfing como motor de economía local. Estas competiciones para poder llevarse a cabo, tienen un trabajo de gestión importante, que a simple vista podría pasar desapercibida. Esta gestión tiene una serie de tareas, entre otras, como son: 1) Tener almacenado los datos de todos los integrantes de las competiciones. 2) Planificar el calendario con la fecha en la que se disputan los campeonatos. 3) Actualizar las clasificaciones de las competiciones con los resultados. 4) Disponer de una vía eficaz de comunicación con los participantes para obtener los resultados y comunicar las fechas de los campeonatos. 5) Tener una vía de comunicación entre los competidores. En la actualidad, en cada club de surf normalmente, esta tarea recae sobre una sola persona, ya que tiene una curva de aprendizaje pronunciada y es un proceso de alta responsabilidad. Esta persona suele gestionarlo todo a mano y utilizar como vía de comunicación con los participantes el teléfono, llevándose a cabo de una forma ineficaz, ya que se necesita mucho tiempo y además se hace inviable cuando el número de participantes pasa a ser elevado. Con la herramienta diseñada e implementada en este proyecto, se pretende por lo tanto facilitar la gestión de las competiciones, de forma que se haga lo más automatizada posible y repartiendo el trabajo de la gestión, que no puede hacerse de forma automatizada entre todos sus integrantes, consiguiendo así resolver el principal problema hasta ahora, que era que toda la gestión recaía sobre una sola persona, siendo el encargado de programar los campeonatos, actualizar los resultados, hacer llegar la información necesaria de las competiciones a los integrantes y un largo etcétera.

Página.- 4


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

2.- OBJETIVOS Y CUESTIÓN: Este proyecto tiene como objetivo principal facilitar la gestión de las competiciones de la Federación Canaria de Surf, haciendo que toda la gestión sea posible de manera automática y repartiendo entre todos los miembros la que necesiten de implicación humana. En este apartado se estudian y analizan los sistemas gestores de bases de datos y los servidores web así como los estándares más utilizados en la actualidad dependiendo de la naturaleza de su contenido (estático y dinámico) y de las estructuras que presentan. Con esto se pretende explicar los motivos de las decisiones tomadas acerca de las tecnologías aplicadas en el desarrollo del proyecto. Además se hablará brevemente de los lenguajes que se han utilizado en la implementación. Sistemas similares Hasta ahora el principal sistema que se usa para la gestión de competiciones de surf es el manual, es decir, toda el proceso recae en una única persona que se encarga de gestionar los datos personales de los jugadores, crear y confeccionar los grupos de las distintas competiciones, planificar el calendario de partidos, actualizar los resultados y clasificaciones, usando como principal vía de comunicación el teléfono. Este sistema tiene como principal inconveniente que no es un sistema eficaz ya que la persona encargada de los trámites, dedica demasiado tiempo a ello. Hasta ahora también se usan programas que están pensados para otro tipo competiciones y que los encargados de la administración de las competiciones de surf utilizan. También existen otros sistemas que no están hechos por empresas, sino por personas particulares y son comercializados a nivel local. Para ello, los desarrolladores se ponen en contacto con algún club de surf y su divulgación se basa en que esos clubs les hacen la publicidad por el boca a boca, cuando se reúnen o compiten entre ellos. Estos sistemas tiene como principal problema, que están pensados por personas que no suelen participar en competiciones de surf, no proporcionando una solución completa y eficaz para su gestión.

Página.- 5


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Herramientas a utilizar Para llevar a cabo la realización de la aplicación utilizaremos las siguientes herramientas: 1).- Lenguajes de programación: Java Script: para dinamizar la página web. PHP: para implementar los componentes dinámicos de la web HTML: para implementar los componentes estáticos de la web. 2).- Bases de datos: MySQL: para gestionar todos los datos de los que hace uso la aplicación PhpMyAdmin: para gestionar de forma fácil la base de datos 3).- Servidor web: Apache: para hacer accesible la aplicación web. Java Script Java Script es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario. Técnicamente, Java Script es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con Java Script se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios. A pesar de su nombre, Java Script no guarda ninguna relación directa con el lenguaje de programación Java. Legalmente, Java Script es una marca registrada de la empresa Sun Microsystems, como se puede ver en http://www.sun.com/suntrademarks/. Características de Java Script Javascript es muy fácil de aprender para quien ya conoce lenguajes similares como el C++ o Java, pero, dada su simplicidad sintáctica y su Página.- 6


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

manejabilidad, no es tampoco difícil para quien se acerca por primera vez a este lenguaje. Sin embargo, esto puede ser un arme de doble filo porque la simplicidad se basa en una disponibilidad de objetos limitada, por lo que algunos procedimientos, aparentemente muy sencillos, requieren “script” bastante complejos. La característica principal de Javascript, de hecho, es la de ser un lenguaje de “scripting”, pero, sobre todo, la de ser el lenguaje de scripting por excelencia y, sin lugar a dudas, el más usado. Esta particularidad conlleva una notable serie de ventajas y desventajas según el uso que se le deba dar y teniendo en cuenta la relación que se establece entre el mecanismo cliente-servidor. Para explicar con pocas palabras dicha relación, podemos decir que el servidor envía los datos al cliente y estos datos pueden llegar en dos formatos diversos: en formato texto (o ASCII) o en formato binario (o código máquina). El cliente sabe cómo comprender sólo el formato binario (es decir, la secuencia de 1 y 0), por lo que si los datos llegan en este formato son inmediatamente ejecutables (y, por desgracia, no dejan abierta la posibilidad de efectuar controles), mientras que si el formato es diverso tienen que ser interpretados y traducidos al formato binario y, por tanto, el cliente necesitará un filtro, o mejor dicho, un intérprete que sepa leer estos datos y los pueda traducir al binario. Los datos en formato texto son visibles al usuario como simples combinaciones de caracteres y de palabras y son, por tanto, fáciles de manipular, si bien requieran más tiempo para su interpretación a causa de los distintos pasos y de las transformaciones a las que deben someterse para que el cliente pueda comprenderlos. Los datos en formato binario, sin embargo, son difíciles de comprender por el usuario, pero inmediatamente ejecutables por el cliente ya que no requieren fases intermedias. HTML: está en formato texto y no es un lenguaje en el sentido tradicional, sino un empaginador para consentir colocar los objetos en la página con las características indicadas. Naturalmente, por esta peculiaridad, tiene un carácter estático y no interactúa con el usuario ni puede tomar decisiones sino por lo que se refiere a los formularios. Para su interpretación necesita un navegador. Lenguajes compilados: son lenguajes bastante complejos en los que la fuente (un archivo de texto con las operaciones que hay que ejecutar) se compila en código máquina y se empaqueta en un ejecutable que puede utilizarse sólo de la forma y para las operaciones para las que se ha proyectado. Lenguajes semicompilados: en realidad, a esta clase pertenece tan sólo Java porque es un lenguaje compilado en un formato intermedio entre los archivos ASCII y el archivo binario. Dicho formato se llama “bytecode” y es interpretado en el cliente por una máquina virtual llamada “Java Virtual Página.- 7


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Machine”. De esta manera, a la recepción, dicha máquina completa la compilación y hace que el archivo sea ejecutable. Lenguajes interpretados: son los que resultan muy similares al HTML, pero que tienen mayores potencialidades porque permiten efectuar controles y operaciones complejas. Se envían en archivo ASCII y, por tanto, con código en claro que el navegador interpreta y ejecuta línea por línea en modalidad “runtime”. El concepto de “script” queda bien expresado con una comparación que podemos leer en el texto de Michael Moncur sobre Javascript, publicado en Italia por Tecniche Nuove. La explicación es muy eficaz y merece citarse: “script” en inglés significa "guión". De hecho, el uso es exactamente éste: el navegador lee una línea, la interpreta y la ejecuta, después pasa a la sucesiva y hace lo mismo, y así hasta el cierre del script. Ventajas y desventajas El lenguaje de scripting es seguro y fiable porque está en claro y hay que interpretarlo, por lo que puede ser filtrado; para el mismo Javascript, la seguridad es casi total y sólo en su primera versión el CIAC (Computer Incident Advisory Committee) señaló problemas de leve entidad, entre ellos la lectura de la caché y de los sitios visitados, de la dirección e-mail y de los archivos presentes en el disco. Sin embargo, estos fallos se corrigieron ya en las versiones de Netscape sucesivas a la 2.0. Los script tienen capacidades limitadas, por razones de seguridad, por lo cual no es posible hacer todo con Javascript, sino que es necesario usarlo conjuntamente con otros lenguajes evolucionados, posiblemente más seguros, como Java. Dicha limitación es aún más evidente si queremos operar en el hardware del ordenador, como, por ejemplo, la fijación en automático de la resolución vídeo o la impresión de un documento. Un problema importante es que el código es visible y puede ser leído por cualquiera, incluso si está protegido con las leyes del copyright. Esto, que en mi opinión es una ventaja, representa el precio que tiene que pagar quien quiere utilizar el web: la cuestión de los derechos de autor ha asistido a una verdadera revolución con la llegada de Internet (citamos, como ejemplo más representativo, el MP3). La tutela que proporcionan las leyes actuales resulta débil e inadecuada, por lo que la única solución es tomarse las cosas con filosofía. El código Javascript se ejecuta en el cliente por lo que el servidor no es solicitado más de lo debido; un script ejecutado en el servidor, sin embargo, Página.- 8


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

sometería a éste a dura prueba y los servidores de capacidades más limitadas podrían resentir de una continua solicitud por un mayor número de usuarios; el código del “script” debe descargarse completamente antes de poderse ejecutar y ésta es la otra cara de la moneda de lo que hemos dicho anteriormente: si los datos que un “script” utiliza son muchos (por ejemplo, una recopilación de citas que se mostrara de manera casual), el tiempo que tardará en descargarse será muy largo, mientras que la interrogación de la misma base de datos en el servidor sería más rápida. PHP PHP, acrónimo de "PHP: Hypertext Preprocessor", es un lenguaje "Open Source" interpretado de alto nivel, especialmente pensado para desarrollos web y el cual puede ser incrustado en páginas HTML. La mayoría de su sintaxis es similar a C, Java y Perl y es fácil de aprender. La meta de este lenguaje es permitir escribir a los creadores de páginas web, páginas dinámicas de una manera rápida y fácil, aunque se pueda hacer mucho más con PHP. En lugar de usar muchos comandos para mostrar HTML (como en C o Perl), páginas PHP contienen HTML con código incluido en el mismo que hace "algo". El código PHP está entre medio de etiquetas de comienzo y final especiales <?php y ?> que nos permitirán entrar y salir del "modo PHP". Lo que distingue a PHP de algo lado-cliente como Javascript, es que el código es ejecutado en el servidor, generando HTML y enviándolo al cliente. El cliente recibirá los resultados de ejecutar el script, sin ninguna posibilidad de determinar qué código ha producido el resultado recibido. El servidor web puede ser incluso configurado para que procese todos los archivos HTML con PHP y entonces no hay manera que los usuarios puedan saber que tienes debajo de la manga. Lo mejor de usar PHP es que es extremadamente simple para el principiante, pero a su vez, ofrece muchas características avanzadas para los programadores profesionales. Aunque el desarrollo de PHP está centrado en programación de “scripts” en lado-servidor, se puede utilizar para muchas otras cosas. PHP puede hacer cualquier cosa que se pueda hacer con un “script” CGI, como procesar la información de formularios, generar páginas con contenidos dinámicos, o enviar y recibir “cookies”. Y esto no es todo, se puede hacer mucho más. Existen principalmente tres campos en los que se usan scripts en PHP. Página.- 9


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Scripts del lado-servidor. Este es el campo más tradicional y el principal foco de trabajo. Se necesitan tres cosas para que esto funcione. El intérprete PHP (CGI módulo), un servidor web y un navegador. Es necesario hacer funcionar el servidor, con PHP instalado. El resultado del programa PHP se puede obtener a través del navegador, conectándose con el servidor web. Scripts en la línea de comandos. Puede crear un script PHP y correrlo sin necesidad de un servidor web o navegador. Solamente necesita el intérprete PHP para usarlo de esta manera. Este tipo de uso es ideal para scripts ejecutados regularmente desde cron (en Unix o Linux) o el Planificador de tareas (en Windows). Estos scripts también pueden ser usados para tareas simples de procesamiento de texto. Escribir aplicaciones de interfaz gráfica. Probablemente PHP no sea el lenguaje más apropiado para escribir aplicaciones gráficas, pero si conoce bien PHP, y quisiera utilizar algunas características avanzadas en programas clientes, puede utilizar PHP-GTK para escribir dichos programas. También es posible escribir aplicaciones independientes de una plataforma. PHP-GTK es una extensión de PHP, no disponible en la distribución principal. PHP puede ser utilizado en cualquiera de los principales sistemas operativos del mercado, incluyendo Linux, muchas variantes Unix (incluyendo HP-UX, Solaris y OpenBSD), Microsoft Windows, Mac OS X, RISC OS y probablemente alguno más. PHP soporta la mayoría de servidores web de hoy en día, incluyendo Apache, IIS, y muchos otros. Esto incluye cualquier servidor web que pueda utilizar el binario PHP de FastCGI, como lighttpd y nginx. PHP funciona ya sea como un módulo, o como un procesador de CGI. De modo que, con PHP tiene la libertad de elegir el sistema operativo y el servidor web de su gusto. Además, tiene la posibilidad de utilizar programación por procedimientos, programación orientada a objetos (POO), o una mezcla de ambas. Con PHP no se encuentra limitado a resultados en HTML. Entre las habilidades de PHP se incluyen: creación de imágenes, archivos PDF e incluso películas Flash (usando libswf y Ming) sobre la marcha. También puede presentar otros resultados, como XHTML y cualquier otro tipo de ficheros XML. PHP puede autogenerar éstos archivos y almacenarlos en el sistema de archivos en vez de presentarlos en la pantalla, creando un caché en el lado-servidor para contenido dinámico. Una de las características más potentes y destacables de PHP es su soporte para una gran cantidad de bases de datos. Escribir una página web con acceso Página.- 10


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

habilitado a una base de datos es increíblemente simple utilizando una de las extensiones específicas (por ejemplo, para mysql), o utilizar una capa de abstracción como PDO, o conectarse a cualquier base de datos que soporte el estándar de Conexión Abierta a Bases de Datos por medio de la extensión ODBC. Otras bases de datos podrían utilizar cURL o sockets, como lo hace CouchDB. PHP también cuenta con soporte para comunicarse con otros servicios usando protocolos tales como LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (en Windows) y muchos otros. También se pueden crear sockets puros e interactuar usando cualquier otro protocolo. PHP soporta WDDX para el intercambio de datos entre lenguajes de programación en web. Y hablando de interconexión, PHP puede utilizar objetos Java de forma transparente como objetos de PHP. PHP tiene útiles características de procesamiento de texto, las cuales incluyen las Expresiones Regulares Compatibles de Perl (PCRE), muchas extensiones, y herramientas para el acceso y análisis de documentos XML. PHP estandariza todas las extensiones XML sobre el fundamento sólido de libxml2, y extiende este conjunto de características añadiendo soporte para SimpleXML, XMLReader y XMLWriter. Existen otras extensiones interesantes, las cuales están categorizadas alfabéticamente y por categoría. Hay extensiones adicionales PECL que podrían estar documentadas o no dentro del manual de PHP, tal como » XDebug. HTML HTML, siglas de “HyperText Markup Language” («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Java Script), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML. HTML también es usado para referirse al contenido del tipo de MIME text/html o todavía más ampliamente como un término genérico para el HTML, ya sea en forma descendida del XML (como XHTML 1.0 y posteriores) o en forma descendida directamente de SGML (como HTML 4.01 y anteriores). Puede ser creado y editado por cualquier editor de textos básico, como Gedit en Linux o Notepad++ en Windows, simplemente hay que tener en cuenta Página.- 11


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

que la extensión del documento ha de ser *.htm o *.html. Dentro de estos archivos se implementará el código HTML el cual consta de varias etiquetas básicas: - <head>: Define la cabecera del documento HTML, esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario, como puede ser el título de la ventana del navegador. - <title>: Define el título de la página que aparecerá encima de la ventana del sitio web. - <html>: Define el inicio de un documento HTML, de esta forma se le indica al navegador que el texto que le sigue debe ser interpretado como código HTML. - <script>: Introduce un script en una web, o se llama a uno mediante el atributo "src= 'url del script'". - <link>: Para vincular el sitio a hojas de estilo o iconos. - <style>: Coloca el sitio interno de la página, ya sea usando CSS u otros lenguajes similares. - <a>: Para crear un enlace es necesario utilizar esta etiqueta de ancla junto al atributo href, que establecerá la dirección URL a la que apunta el enlace. - <body>: Define el cuerpo o contenido principal del documento. Esta es la parte del documento que se muestra en el navegador. Dentro del cuerpo se pueden definir numerosas etiquetas, las más utilizadas son: - <p>: Define un párrafo de texto en la web. - <br/>: Introduce un salto de línea. - <h1>: Indica que se va a escribir una cabecera para una sección, el número indica el tamaño de la fuente. - <td>: Define tablas en la página. - <li>, <lu>: Definen listas de elementos, ya sean ordenadas o no. Base de datos MySQL

Página.- 12


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

MySQL es un sistema de gestión de bases de datos relacional, multihilo y multiusuario con más de seis millones de instalaciones. MySQL AB —desde enero de 2008 una subsidiaria de Sun Microsystems y ésta a su vez de Oracle Corporation desde abril de 2009— desarrolla MySQL como software libre en un esquema de licenciamiento dual. Por un lado se ofrece bajo la GNU GPL para cualquier uso compatible con esta licencia, pero para aquellas empresas que quieran incorporarlo en productos privativos deben comprar a la empresa una licencia específica que les permita este uso. Está desarrollado en su mayor parte en ANSI C. Al contrario de proyectos como Apache, donde el software es desarrollado por una comunidad pública y los derechos de autor del código están en poder del autor individual, MySQL es patrocinado por una empresa privada, que posee el copyright de la mayor parte del código. Esto es lo que posibilita el esquema de licenciamiento anteriormente mencionado. Además de la venta de licencias privativas, la compañía ofrece soporte y servicios. Para sus operaciones contratan trabajadores alrededor del mundo que colaboran vía Internet. MySQL AB fue fundado por David Axmark, Allan Larsson y Michael Widenius. Características La siguiente lista describe algunas de las características más importantes del software de base de datos MySQL: a).- Interioridades y portabilidad. b).- Escrito en C y en C++. c).- Probado con un amplio rango de compiladores diferentes. d).- Funciona en diferentes plataformas. e).- Usa GNU Automake, Autoconf, y Libtool para portabilidad. f).- APIs disponibles para C, C++, Eiffel, Java, Perl, PHP, Python, Ruby, y Tcl. g).- Uso completo de multi-threaded mediante threads del kernel. Pueden usarse fácilmente múltiple CPUs si están disponibles. h).- Proporciona sistemas de almacenamiento, transaccionales y no transaccionales.

Página.- 13


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

i).- Usa tablas en disco B-tree (MyISAM) muy rápidas con compresión de índice. j).- Relativamente sencillo de añadir otro sistema de almacenamiento. Esto es útil si desea añadir una interfaz SQL para una base de datos propia. k).- Un sistema de reserva de memoria muy rápido basado en threads. l).- Joins muy rápidos usando un multi-join de un paso optimizado. m).- Tablas hash en memoria, que son usadas como tablas temporales. Las funciones SQL están implementadas usando una librería altamente optimizada y deben ser tan rápidas como sea posible. Normalmente no hay reserva de memoria tras toda la inicialización para consultas. El código MySQL se prueba con Purify (un detector de memoria perdida comercial) así como con Valgrind, una herramienta GPL (http://developer.kde.org/~sewardj/). El servidor está disponible como un programa separado para usar en un entorno de red cliente/servidor. También está disponible como biblioteca y puede ser incrustado (linkado) en aplicaciones autónomas. Dichas aplicaciones pueden usarse por sí mismas o en entornos donde no hay red disponible. Tipos de columnas Diversos tipos de columnas: enteros con/sin signo de 1, 2, 3, 4, y 8 bytes de longitud, FLOAT, DOUBLE, CHAR, VARCHAR, TEXT, BLOB, DATE, TIME, DATETIME, TIMESTAMP, YEAR, SET, ENUM, y tipos espaciales OpenGIS. Registros de longitud fija y longitud variable. Sentencias y funciones. Soporte completo para operadores y funciones en las cláusulas de consultas SELECT y WHERE. Soporte completo para las cláusulas sql GROUP BY y ORDER BY. Soporte de funciones de agrupación (COUNT(), COUNT(DISTINCT ...), AVG(), STD(), SUM(), MAX(), MIN(), y GROUP_CONCAT()). Soporte para LEFT OUTER JOIN y RIGHT OUTER JOIN cumpliendo estándares de sintaxis SQL y ODBC. Soporte para alias en tablas y columnas como lo requiere el estándar SQL. Página.- 14


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

DELETE, INSERT, REPLACE, y UPDATE devuelven el número de filas que han cambiado (han sido afectadas). Es posible devolver el número de filas que serían afectadas usando un flag al conectar con el servidor. El comando específico de MySQL SHOW puede usarse para obtener información acerca de la base de datos, el motor de base de datos, tablas e índices. El comando EXPLAIN puede usarse para determinar cómo el optimizador resuelve una consulta. Los nombres de funciones no colisionan con los nombres de tabla o columna. Por ejemplo, ABS es un nombre válido de columna. La única restricción es que para una llamada a una función, no se permiten espacios entre el nombre de función y el '(' a continuación. Puede mezclar tablas de distintas bases de datos en la misma consulta (como en MySQL 3.22). Seguridad Un sistema de privilegios y contraseñas que es muy flexible y seguro, y que permite verificación basada en el host. Las contraseñas son seguras porque todo el tráfico de contraseñas está cifrado cuando se conecta con un servidor. Escalabilidad y límites Soporte a grandes bases de datos. Usamos MySQL Server con bases de datos que contienen 50 millones de registros. También conocemos a usuarios que usan MySQL Server con 60.000 tablas y cerca de 5.000.000.000.000 de registros. Se permiten hasta 64 índices por tabla (32 antes de MySQL 4.1.2). Cada índice puede consistir desde 1 hasta 16 columnas o partes de columnas. El máximo ancho de límite son 1000 bytes (500 antes de MySQL 4.1.2).Un índice puede usar prefijos de una columna para los tipos de columna CHAR, VARCHAR, BLOB, o TEXT. Conectividad Los clientes pueden conectar con el servidor MySQL usando sockets TCP/IP en cualquier plataforma. En sistemas Windows de la familia NT (NT, 2000, XP, o 2003), los clientes pueden usar named pipes para la conexión. En sistemas Unix, los clientes pueden conectar usando ficheros socket Unix.

Página.- 15


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

En MySQL 5.0, los servidores Windows soportan conexiones con memoria compartida si se inicializan con la opción --shared-memory. Los clientes pueden conectar a través de memoria compartida usando la opción --protocol=memory. La interfaz para el conector ODBC (MyODBC) proporciona a MySQL soporte para programas clientes que usen conexiones ODBC (Open Database Connectivity). Por ejemplo, puede usar MS Access para conectar al servidor MySQL. Los clientes pueden ejecutarse en Windows o Unix. El código fuente de MyODBC está disponible. Todas las funciones para ODBC 2.5 están soportadas, así como muchas otras. La interfaz para el conector J MySQL proporciona soporte para clientes Java que usen conexiones JDBC. Estos clientes pueden ejecutarse en Windows o Unix. Localización El servidor puede proporcionar mensajes de error a los clientes en muchos idiomas. Soporte completo para distintos conjuntos de caracteres, incluyendo latin1 (ISO-8859-1), german, big5, ujis, y más. Por ejemplo, los caracteres escandinavos 'â', 'ä' y 'ö' están permitidos en nombres de tablas y columnas. El soporte para Unicode está disponible. Todos los datos se guardan en el conjunto de caracteres elegido. Todas las comparaciones para columnas normales de cadenas de caracteres son caseinsensitive. La ordenación se realiza acorde al conjunto de caracteres elegido (usando colación Sueca por defecto). Es posible cambiarla cuando arranca el servidor MySQL. Para ver un ejemplo de ordenación muy avanzada, consulte el código Checo de ordenación. MySQL Server soporta diferentes conjuntos de caracteres que deben ser especificados en tiempo de compilación y de ejecución. Clientes y herramientas MySQL server tiene soporte para comandos SQL para chequear, optimizar, y reparar tablas. Estos comandos están disponibles a través de la línea de comandos y el cliente mysqlcheck. MySQL también incluye myisamchk, una utilidad de línea de comandos muy rápida para efectuar estas operaciones en tablas MyISAM. Todos los programas MySQL pueden invocarse con las opciones --help o -? para obtener asistencia en línea. Página.- 16


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

PhpMyAdmin PhpMyAdmin es una herramienta escrita en PHP con la intención de manejar la administración de MySQL a través de páginas web, utilizando Internet. Actualmente puede crear y eliminar Bases de Datos, crear, eliminar y alterar tablas, borrar, editar y añadir campos, ejecutar cualquier sentencia SQL, administrar claves en campos, administrar privilegios, exportar datos en varios formatos y está disponible en 62 idiomas. Se encuentra disponible bajo la licencia GPL. Este proyecto se encuentra vigente desde el año 1998, siendo el mejor evaluado en la comunidad de descargas de SourceForge.net como la descarga del mes de diciembre del 2002. Como esta herramienta corre en máquinas con Servidores Webs y Soporte de PHP y MySQL, la tecnología utilizada ha ido variando durante su desarrollo. Características En la actualidad, phpMyAdmin permite: a).- Visualizar y borrar bases de datos, tablas, vistas, campos e índices. b).- Crear, copiar, borrar, renombrar y alterar bases de datos, tablas, campos e índices. c).- Realizar labores de mantenimiento de servidor, bases de datos y tablas, dando consejos acerca de la configuración del servidor. d).- Ejecutar, editar y marcar cualquier expresión SQL, incluyendo consultas en lote. e).- Carga tablas con el contenido de ficheros de texto. f).- Crea y lee volcados de tablas. g).- Exporta datos a varios formatos: CSV, XML, PDF, ISO/IEC 26300 «OpenDocument Text and Spreadsheet», Word y LATEX. h).- Importar datos y estructuras de MySQL desde hojas de cálculo de OpenDocument, así como de archivos XML, CSV y SQL. i).- Administrar múltiples servidores. j).- Gestionar privilegios y usuarios de MySQL k).- Comprobar la integridad referencial en las tablas MyISAM. Página.- 17


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

l).- Mediante Query-by-example (QBE), crear consultas complejas conectando automáticamente las tablas necesarias. m).- Crear gráficos PDF del diseño de su Base de Datos. n).- Buscar globalmente o solamente en una parte de una base de datos. o).- Transformar los datos almacenados a cualquier formato usando un conjunto de funciones predefinidas, como mostrar objetos binarios (BLOBs) como imágenes o enlaces de descarga. p).- Visualizar cambios en bases de datos, tablas y vistas. q).- Manejar tablas InnoDB y claves ajenas. r).- Usar mysqli, la extensión mejorada de MySQL s).- Crear, editar, ejecutar y eliminar funciones y procedimientos almacenados («stored procedures»). t).- Crear, editar, exportar y eliminar eventos y disparadores. u).- Comunicarse en 62 lenguajes distintos. v).- Sincronizar dos bases de datos que residan en el mismo o en servidores remotos. Servidor web - Servidor Apache El servidor HTTP Apache es un servidor web HTTP de código abierto para plataformas Unix (BSD, GNU/Linux, etc.), Microsoft Windows, Macintosh y otras, que implementa el protocolo HTTP/1.1 y la noción de sitio virtual. Cuando comenzó su desarrollo en 1995 se basó inicialmente en código del popular NCSA HTTPd 1.3, pero más tarde fue reescrito por completo. Su nombre se debe a que Behelendorf quería que tuviese la connotación de algo que es firme y enérgico pero no agresivo, y la tribu Apache fue la última en rendirse al que pronto se convertiría en gobierno de EEUU, y en esos momentos la preocupación de su grupo era que llegasen las empresas y "civilizasen" el paisaje que habían creado los primeros ingenieros de internet. Además Apache consistía solamente en un conjunto de parches a aplicar al servidor de NCSA. Era, en inglés, a patchy server (un servidor "parcheado"). El servidor Apache se desarrolla dentro del proyecto HTTP Server (httpd) de la Apache Software Foundation.

Página.- 18


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Apache presenta entre otras características altamente configurables, bases de datos de autenticación y negociado de contenido, pero fue criticado por la falta de una interfaz gráfica que ayude en su configuración. Apache tiene amplia aceptación en la red: desde 1996, Apache, es el servidor HTTP más usado. Alcanzó su máxima cuota de mercado en 2005 siendo el servidor empleado en el 70% de los sitios web en el mundo, sin embargo ha sufrido un descenso en su cuota de mercado en los últimos años. La mayoría de las vulnerabilidades de la seguridad descubiertas y resueltas tan sólo pueden ser aprovechadas por usuarios locales y no remotamente. Sin embargo, algunas se pueden accionar remotamente en ciertas situaciones, o explotar por los usuarios locales malévolos en las disposiciones de recibimiento compartidas que utilizan PHP como módulo de Apache. Apache es usado principalmente para enviar páginas web estáticas y dinámicas en la World Wide Web. Muchas aplicaciones web están diseñadas asumiendo como ambiente de implantación a Apache, o que utilizarán características propias de este servidor web. Apache es el componente de servidor web en la popular plataforma de aplicaciones LAMP, junto a MySQL y los lenguajes de programación PHP/Perl/Python (y ahora también Ruby). Este servidor web es redistribuido como parte de varios paquetes propietarios de software, incluyendo la base de datos Oracle y el IBM WebSphere application server. Mac OS X integra apache como parte de su propio servidor web y como soporte de su servidor de aplicaciones WebObjects. Es soportado de alguna manera por Borland en las herramientas de desarrollo Kylix y Delphi. Apache es incluido con Novell NetWare 6.5, donde es el servidor web por defecto, y en muchas distribuciones Linux. Apache es usado para muchas otras tareas donde el contenido necesita ser puesto a disposición en una forma segura y confiable. Un ejemplo es al momento de compartir archivos desde una computadora personal hacia Internet. Un usuario que tiene Apache instalado en su escritorio puede colocar arbitrariamente archivos en la raíz de documentos de Apache, desde donde pueden ser compartidos. Los programadores de aplicaciones web a veces utilizan una versión local de Apache con el fin de previsualizar y probar código mientras éste es desarrollado.

Página.- 19


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Microsoft Internet Information Services (IIS) es el principal competidor de Apache, así como Sun Java System Web Server de Sun Microsystems y un anfitrión de otras aplicaciones como Zeus Web Server. Algunos de los más grandes sitios web del mundo están ejecutándose sobre Apache. La capa frontal (front end) del motor de búsqueda Google está basada en una versión modificada de Apache, denominada Google Web Server (GWS). Muchos proyectos de Wikimedia también se ejecutan sobre servidores web Apache.

Página.- 20


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

3.- ANÁLISIS DEL PROYECTO: Requisitos del sistema En esta sección se presentan los requisitos de usuario que deberán ser satisfechos por el sistema. Todos ellos son esenciales, por lo que se tendrá que poner especial énfasis en completarlos: Estudiando las posibles herramientas disponibles para llevar a cabo el almacenamiento y representación de los datos, se han propuesto una serie de objetivos más concretos para la realización del prototipo de una aplicación que hará posible el objetivo principal del proyecto: Facilitar y permitir los siguientes aspectos: - La comunicación de las noticias relacionadas con las competiciones a sus integrantes. - La visualización de los resultados y clasificaciones de las competiciones a los integrantes. - La comunicación de los resultados de su participación en eventos ajenos a la FCS a los participantes. - La programación de los campeonatos, haciéndolo lo más automatizado posible, al Administrador del programa. - Igualmente, permitir al administrador la gestión de las competiciones. - Federarse y efectuar el pago. - Inscribirse en los campeonatos y efectuar el pago de la inscripción. - Proporcionar un formulario de contacto. Apartado de noticias. - Campeonatos. - Clasificación en campeonatos. - Actualidad o noticias varias. Multimedia - Presentaciones de imágenes, videos y otros contenidos multimedia.

Página.- 21


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Apartado para protección del medio ambiente Apartado para escuelas. Apartado para programas de tecnificación deportiva. Apartado para información a los competidores. - Clasificación de los competidores o ranking. - Calendario de competición. - Seguro para competidores. Apartado para usuarios registrados no administradores. Tener en cuenta la posibilidad, casi segura, de la creación o habilitación de nuevos módulos en la web. Disponer de una zona de descargas. (aplicaciones para usuario, documentos, cartelería, fotografías, etc. Módulos para publicidad - Banners. - Módulos laterales en columnas. (La template debe contar con una estructura de tres columnas). - Debe soportar url de enlace a la web del anunciante. Contendrá un modulo para streaming que habilitaremos o no en función de las necesidades. Publicación en redes sociales de cuantas noticias se publiquen en la web. Las fotografías se visualizarán como galerías, una por cada evento, y deben permitir al usuario su descarga o no, según se nos demande. El contenido inicial de la web tendremos que colgarlo nosotros. - Presentación, fotografía, textos, descargables, videos, etc.

Página.- 22


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

4.- ANÁLISIS SISTEMA:

DE

Teles & Foro Desarrollos Lógicos C.B.

COMPONENTES

DEL

La aplicación desarrollada tiene dos partes diferenciadas, una la parte del servidor y otra la de los clientes. Por lo tanto para poder utilizar la aplicación desarrollada se tienen que cumplir una serie de requisitos mínimos en el servidor y otros en los clientes. Requisitos mínimos Servidor El servidor consta de: 1).- El servidor o la maquina física como tal. 2).- Sistema operativo. 3).- Conexión a internet. 4).- El servidor web, en este caso apache. 5).- Servidor de correo electrónico. 6).- El modulo PHP. 7).- La base de datos MySQL. 8).- phpMyAdmin. A continuación se describe cada uno de ellos. Servidor físico La elección del servidor vendrá marcada por el tráfico que vaya a cursar nuestra aplicación, el cual dependerá del número de personas que pertenezcan a nuestras competiciones. Aun así el tráfico que cursa nuestra aplicación por persona no es muy elevado, por lo tanto con el alquiler de uno de los servidores más baratos del mercado tendríamos suficiente. Sistema operativo Nos servirá cualquier sistema operativo que tenga las siguientes características: Multiusuario: Permite que dos o más usuarios utilicen sus programas al mismo tiempo. Algunos sistemas operativos permiten a centenares o millares de usuarios al mismo tiempo. Página.- 23


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Multiprocesador: Soporta el abrir un mismo programa en más de una CPU. Multitarea: Permite que varios programas se ejecuten al mismo tiempo. Multitramo: Permite que diversas partes de un solo programa funcionen al mismo tiempo. Conexión a internet Con una conexión de 100 Mbits/seg nos es suficiente, aunque dependerá del número de participantes que van a usar la aplicación. Servidor web apache Los requerimientos mínimos para hacer funcionar el "Apache" son: - Un sistema Windows 2003 Server. - Un protocolo TCP/IP. PHP Cualquier servidor web actual cumple con los requisitos para poder usar PHP. MySQL Según lo instalemos en Windows o en Linux tendremos unos requisitos u otros. Para ejecutar MySQL, se necesita lo siguiente: Un sistema operativo GNU/Linux o Windows de 32 bits, mínimo Windows 2003 Server. Se recomienda especialmente el uso de un sistema operativo Windows basado en NT (NT, 2000, 2003) puesto que éstos permiten ejecutar el servidor MySQL como un servicio. Soporte para protocolo TCP/IP. Suficiente espacio en disco rígido para descomprimir, instalar, y crear las bases de datos de acuerdo a sus requisitos. Generalmente se recomienda un mínimo de 200 megabytes. También podrían necesitarse los siguientes ítems opcionales: Página.- 24


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Si se planea conectarse al servidor MySQL a través de ODBC, se deberá contar con un driver Conector/ODBC. Si se necesitan tablas con un tamaño superior a 4GB, debe instalarse MySQL en un sistema de ficheros NTFS o posterior. Al crear las tablas no debe olvidarse el uso de MAX_ROWS y AVG_ROW_LENGTH. phpMyAdmin Para poder utilizar phpMyAdmin es necesario contar con un servidor web con soporte de PHP, un motor de bases de datos MySQL y un navegador web. Java Para poder usar java necesitamos 128 MB de memoria y 98MB de espacio libre. Requisitos Cliente El cliente consta de: 1).- El ordenador desde el que accede a la aplicación. 2).- Sistema operativo. 3).- Conexión a Internet. 4).- Navegador web. 5).- Java Script. A continuación se describe cada uno de ellos. Ordenador El ordenador desde el cual el cliente accede a la aplicación deberá tener, como mínimo, un microprocesador de capacidad similar a un i486, disponer de un mínimo de 16 MB de memoria RAM y, para una visualización cómoda de la aplicación, una resolución en su pantalla de al menos 800x600 píxeles y a 256 colores como mínimo. Eso sí, tanto los modelos más recientes de navegador, como los programas informáticos en general, requieren para su instalación y correcto funcionamiento de un microprocesador iPentium o similar, memoria RAM por encima de 64 MB, una resolución de pantalla de 1024x768 píxeles con color de alta densidad (16 bits), y de bastante espacio libre en el disco duro.

Página.- 25


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Sistema operativo Cualquier sistema operativo que soporte la instalación de un navegador web nos sirve para ejecutar la aplicación. Conexión a internet Se deberá disponer de una conexión a Internet a través de un proveedor de tal servicio (ISP o Internet Service Provider). Es necesario, asimismo, que el equipo esté conectado a un módem con suficiente ancho de banda (al menos 2Mb) adecuado a la modalidad de conexión que tenga contratada. Navegador web Para acceder a la aplicación bastaría con tener instalado Microsoft Internet Explorer 4.0 o Netscape Communicator 4.0. Sin embargo, se sugiere que en la medida de lo posible, se utilice una de las versiones más recientes de alguno de los siguientes navegadores, disponibles todos ellos en castellano y algunos incluso en catalán, euskera y gallego. MS Internet Explorer 8.0 y superiores: disponible para sistemas operativos Apple MacOS y MS Windows. Mozilla 7.0 y superiores: Disponible en castellano para GNU/Linux y MS Windows, y en inglés para Apple MacOS y otros muchos sistemas operativos. También se pueden utilizar diversos navegadores basados en el "motor" de fuente abierta de Mozilla, como Galeon (para GNU/Linux) o MozillaFirebird (multiplataforma pero aún no traducido al castellano). Java Script Para ejecutar el código JavaScript necesitamos un navegador como firefox o Internet Explorer. Tan solo hay que tener en cuenta que la versión del navegador que utilicemos interprete la versión del código JavaScript de la página a ejecutar.

Página.- 26


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

5.- EJECUCIÓN DEL PROYECTO: Joomla Todas las exigencias anteriormente desglosadas nos lo encontramos en el gestor de contenidos conocido por Joomla una palabra tomada del idioma swahili que significa “todos juntos o todos a una “. Este gestor de contenidos de licencia libre, integra todas las herramientas que nos hacen falta para desarrollar este proyecto, evitándonos tener que partir desde cero.

Con unos pocos pasos podremos tener instalado en el servidor el paquete joomla, que se encargara de gestionar el contenido de nuestro proyecto. De esta manera ahorraremos tiempo, recursos y mano de obra lo que redundara en el coste de ejecución del proyecto haciéndonos más competitivos y ofreciendo una calidad más que aceptable. Alojamiento web La instalación del paquete joomla lo haremos en un servidor de pago, teniendo en cuenta las necesidades de transferencia y espacio en disco así como las cuentas de correo que podemos crear. Esto aunque es modificable con ampliaciones de contrato es mejor tenerlo bien amarrado de antemano pues estas ampliaciones suelen ser caras y si somos nosotros los reseller y el Página.- 27


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

alojamiento forma parte del contrato tendríamos que correr con los gastos originados por dichas ampliaciones. Otra cuestión es el dominio sugerido por el cliente que deberemos registrarlo. La información relativa al sitio web nos será remitida por la empresa de alojamiento y será la que utilizaremos para la instalación del paquete joomla. Mediante el c- panel accedemos a la herramienta Base de Datos y creamos las que nos hagan falta.

Para subir los archivos de instalación podemos utilizar algún programa del tipo de Filezilla, programas llamados cliente de Ftp.

Página.- 28


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

En unos pocos pasos realizamos la instalación en el servidor teniendo en cuenta que al finalizar deberemos borra la carpeta , installation, de nuestro servidor. Otra opción de instalación es hacerla mediante la herramienta “Fantastico”. Esta consiste en un asistente que nos guiara durante la instalación. Administrador de archivos del Panel de control. El panel de control es un gestor FTP que nos permite interactuar con nuestro hosting incluyendo la posibilidad de: Subir archivos comprimidos y descomprimirlos, renombrarlos, copiar, mover etc. También desde aquí podemos cambiar los permisos sobre las carpetas. PhpMyAdmin Aunque en apartados anteriores ya se ha tocado este tema vale la perna recordar que es una herramienta que nos encontraremos en el c.panel y que nos sirve para modificar, añadir bases de datos pero que es de suma importancia en el caso de que perdamos las claves de usuario del superadministrador. Operaciones en la base de datos Base de datos:

Página.- 29


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Base de datos tabla m贸dulos:

Base de datos consulta tabla m贸dulos:

P谩gina.- 30

Teles & Foro Desarrollos L贸gicos C.B.


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Base de datos operaciones en tablas:

Base de datos insertar:

P谩gina.- 31

Teles & Foro Desarrollos L贸gicos C.B.


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Base de datos estructura:

Base de datos consulta:

Requerimientos del Servidor A medida que ha ido saliendo nuevas versiones de Joomla las necesidades del servidor también han ido cambiando actualmente ya tenemos una versión 3.0 pero vamos a basarnos en las necesidades de la versión 2.5. Servidor http: Apache 2.x o superior. (http://www.apache.org); o Microsoft IIS 7 o superior (http://www.iis.net). Servidor de bases de datos: MySQL 5.0.4 o superior. Página.- 32


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Intérprete del lenguaje PHP 5.3 o superior. Junto con los módulos que se activan en PHP para MySQL y dar: Soporte XML. XML es la sigla del inglés eXtensible Markup Language, lenguaje de marcado ampliable o extensible, desarrollado por el World. Wide Web Consortium (W3C). Soporte Zlib, configurado en PHP. Zlib es una librería de compresión gratuita, cuyo propósito es plantear una librería de compresión estable y libre de errores que pueda ser usada en cualquier máquina o sistema operativo, y que permitirá a PHP leer archivos comprimidos en formato ZIP. Datos del Hosting El proveedor del hosting nos facilitara un c-panel al que accedemos desde una url para gestionar nuestro sitio web para esto nos serán facilitadas unas claves de acceso para poder instalar joomla. La información que debemos tener es: Url de acceso al espacio web. Usuario y nombre de servidor ftp. Usuario y nombres del servidor y de la base de datos Mysql. Instalación Joomla Unas vez tengamos cubiertos todos los requisitos anteriormente descritos estamos ya en disposición de instalar joomla en un servidor remoto. Template del sitio Una plantilla para joomla consiste en una serie de archivos que controlan la presentación de un sitio que utiliza Joomla. Los contenidos que maneja joomla son componentes, modulos y plugins. Los elementos de una plantilla son: Index.php.- Codigo para la manipulación de datos. Template css .- Reglas para manipular la visulizacion de los datos. TemplateDetails.xml.

Página.- 33


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

- Instalación de datos en el Backend. - Template_thumbnail.png vista previa en el backend. Otros elementos: - Imágenes. - Favicon.ico. - HTML – Overrides. Detalle de html:

Página.- 34


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Detalle de css:

Detalle de PHP:

P谩gina.- 35

Teles & Foro Desarrollos L贸gicos C.B.


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Manejos del Contenido Todo el contenido lo maneja Joomla con los componentes, módulos y plugin. Los componentes uno por página situado en el centro de la misma. Los módulos varios por pagina y se sitúan en las diferentes posiciones de la plantilla. Vista módulos en témplate:

Los plugin se utilizan varios y se encargan de manipular el comportamiento del contenido. Cada grupo es manejado de forma distinta por las plantillas. Los elementos tradicionales de una plantilla tradicional son Html, css y img. Sin embargo en joomla nos encontramos como ya hemos comentado anteriormente los modulos, componentes y plugins. Las plantillas constan de unas posiciones que es la ubicación física dentro de la pagina donde se muestra un modulo, cada modulo tiene un nombre que hace relación a su posición y que será de gran ayuda cuando trabajemos en el backend. Acceso a la administración En nuestro navegador escribimos: www.nuestrodominio.com/administrator Introducimos nuestro nombre de usuario y password e iniciamos la sesión.

Página.- 36


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

A partir de este momento comenzaríamos a darle contenido a la web habilitando sus componentes, estructura de usuarios, creando secciones etc. etc., pero ya esto se explicara a los usuarios administradores de la aplicación en el curso de formación pertinente, si el cliente lo demanda.

Creacion de una base de datos para gestionar los Campeonatos de Surf. Tablas e ítems de la aplicación 1).- CAMPEONATOS - Identificación - Descripción - Lugar - Fecha - Patrocinios - Estrellas - Minutos - Olas - Mejores_Olas Página.- 37


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

- Juez1 - Juez2 - Juez3 - Juez4 - Juez5 - Juez6 - Juez7 - Juez8 - Juez9 - Juez10 2).- CATEGORIAS - Identificación - Descripción - Campeonatos 3).- MANGAS - Identificación - Categoría - Ronda - Orden 4).- CATEGORIA_SURFISTAS - Categoría - Surfista - Cabeza_Serie 5).- MANGAS_SURFISTAS - Identificación

Página.- 38

Teles & Foro Desarrollos Lógicos C.B.


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

- Manga - Surfista - Pasa_Siguiente_Ronda - Puntuación - Posición 6).- PUNTUACIONES - Identificación - Manga - Surfista - Juez - Ola - Puntuación - Desechada - Interfiere_A 7).- INTERFERENCIAS_ SURFISTAS - Identificación - Manga - Surfista - Juez - Interfiere_A 8).- SURFISTAS - Identificación - Apellidos - Nombre - Club

Página.- 39

Teles & Foro Desarrollos Lógicos C.B.


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

P谩gina.- 40

Teles & Foro Desarrollos L贸gicos C.B.


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

P谩gina.- 41

Teles & Foro Desarrollos L贸gicos C.B.


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

6.- TRANSMISIÓN EN VIVO (STREAMING): A continuación relacionamos los medios que necesitamos para poder realizar transmisiones en vivo (streaming), a través de nuestra web, de los eventos y campeonatos que deseemos. Con esta técnica, haremos que nuestra web reciba muchas mas visitas, al ser un atractivo para todas aquellas personas que no puedan o no quieran desplazarse a los lugares en donde se celebran los actos. Cámara de video con salida RCA o Firewire Requerimos de una cámara de video que nos servirá para capturar las imágenes. Es importante verificar las conexiones y cables que nos servirán para conectarla al equipo de computación. La conexión RCA se identifica por sus conectores: un cable amarillo (video), un cable rojo y otro blanco (estas dos últimas serán las salidas de audio).

Algunos equipos incluyen conectores Mini-RCA en un extremo, identificado por un solo conector negro y que tradicionalmente se conecta a la cámara.

La conexión Firewire fue introducida por Apple y sirve para transmitir datos a alta velocidad entre equipos digitales. Existen cables de 4 y 6 pines. Tradicionalmente las cámaras y equipos como laptops incluyen las conexiones de 4 pines.

Página.- 42


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Si usted está buscando una cámara para transmitir video, le recomendamos que busque una opción con las dos alternativas para extraer las grabaciones. Si una cámara incluye Firewire, traerá seguramente conexión RCA. Tarjeta capturadora de video con RCA o una tarjeta Firewire

Debemos tener en cuenta, que algunas laptops ya incluyen en su configuración la conexión Firewire de 4 pines. En algunas configuraciones se tendrá un ordenador con una tarjeta Firewire de 6 pines y una cámara de 4 pines. Debido a esto es muy importante utilizar el cable adecuado. Transmisión en vivo con Procaster Con Procaster accedes a tu canal de televisión y comienzas a configúralo según tus necesidades de transmisión. Si lo queremos usar para video-conferencia, deberemos habilitar una template con diferentes posiciones, donde incrustaremos el código de inserción de la cámara, que va a seguir a los diferentes ponentes o participantes en la video conferencia. De esta manera podremos visualizar en una misma pantalla a los diferentes integrantes del acto. Directo y video conferencia. Procaster de Livestream es un servicio de transmisión de videos en vivo por Internet. Puedes transmitir imagen y sonido desde muchas cámaras e insertar durante la transmisión anuncios o cuñas publicitarias previamente alojadas en el servidor. A continuación vemos una pantalla del Livestream:

Página.- 43


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Tiene dos formas de acceder a este servicio: bien creándote una cuenta gratuita o bien una de pago. La primera es con publicidad que no podemos evitar, mientras que la segunda, nos permite el control total de las imágenes que proyectamos por medio de nuestro canal de Televisión.

Con Procaster accedemos a nuestro propio canal de televisión y comenzamos a configúralo según las necesidades de transmisión que Página.- 44


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

tengamos.

En el caso de una retransmisión en directo, el codigo de inserción tiene que permitir al usuario activar la imagen cuando se desee. De lo contrario comenzará a reproducirse una vez accedamos a la web donde esta insertado. Como ejemplo de funcionamiento de lo relatado en este capítulo, ponemos el siguiente: Se plantea una reunión de la directiva de la FCS (Federación Canaria de Surf), en la que cada isla tiene sus representantes y esto obligaría al desplazamiento de los mismos hasta un lugar común con los consiguientes gastos de desplazamientos, dietas etc. A esto tenemos que sumarle la posibilidad de que por motivos de índole laboral o personal algunos de los miembros no puedan desplazarse. Pues con este sistema a la hora y día acordados y desde las diferentes sedes insulares, se comienza la retransmisión. Con siete cámaras y siete ordenadores (un sistema por cada isla), tenemos solucionado el problema. Dicho así se podría plantear la posibilidad de fuese una locura si todos intentasen hablar al mismo tiempo; pero para esto está el regidor que es el que marca el orden de intervención de los diferentes participantes.

Página.- 45


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Ahora mismo son muchas las plataformas que te permiten realizar retransmisiones en vivo, como por ejemplo las siguientes: ustream.tv justin.tv livestream.com tinychat.com qik.com De entre todas ellas y en base a nuestra experiencia, podemos recomendar como las mas fácil de usar, a nuestro criterio, y siendo de forma gratuita si la publicidad es puesta por los propios administradores, la “justin.tv”.

Página.- 46


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

7.- DIAGRAMA DE GANT: Se han establecido los siguientes eventos con los tiempos necesarios en cada caso, en los que algunos de ellos podrán realizarse de forma simultánea, mientras que otros deberán de hacerse en el momento en el que otros hayan sido finalizados: 1.- Reunión con el cliente: 1 día. 2.- Reunión equipo de desarrolladores: 1 día. 3.- Reunión con cliente: 1 día. 4.- Reunión equipo de desarrolladores: 2 días. 5.- Registro dominio y contratación hosting principal: 2 horas. 6.- Instalación paquete joomla y configuración base de datos: 2 días. 7.- Contratación hosting segundo y configuración del mismo (Fotografías): 4 horas. 8.- Contratación hosting tres y configuración (Vídeos): 4 horas. 9.- Desarrollo de la template principal: 4 semanas. 10.- Desarrollo de la template menú galería de fotografías: 1 semana. 11.- Desarrollo de la template sliders galería de fotografías: 2 semanas. 12.- Desarrollo template plataforma de pago, formularios y configuración de la base de datos: 3 semanas. 13.- Grabación de video: 1semana. 14.- Toma de fotografías: 1 semana. 15.- Tratamiento de imágenes de video y edición: 2 días. 16.- Tratamiento de fotografías y montaje galerías: 2 días. 17.- Alojamiento de videos en el servidor: 2 días. 18.- Alojamiento de galerías fotografías en el servidor: 2 días. 19.- Creación de mapas de situación: 1 día. 20.- Dar contenido inicial a la web para su puesta en marcha: 1 semana. Página.- 47


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

21.- Periodo de evaluación y pruebas de funcionamiento: 1 semana. Programa para gestión de eventos 1.- Creación base de datos Access: 1 semana. 2.- Creación interfaz de usuario: 1 semana.

Recursos materiales para la elaboración del proyecto - Tres ordenadores de sobremesa. - Tres ordenadores portátiles. - Disco duro externo. - Cámara de video. Página.- 48


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

- Carcasa submarina para video cámara. - Cámara fotográfica. - Carcasa submarina para cámara fotográfica. - Suite Adobe Premier. - Microsoft Access. - Microsoft Word. - Sony Vega. Otros recursos ( Obtención de imágenes) - Equipo de submarinismo - Paramotor o helicóptero. Recursos Humanos - Un fotógrafo. - Una cámara y un editor (Video). - Tres analistas programadores.

Página.- 49


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

8.- PRESUPUESTO: Se detallan todos y cada uno de los aspectos que incluye el presente presupuesto con su importe especificado.

Por lo que asciende el presente presupuesto a la cantidad de 17.510,00 € (diecisiete mil quinientos diez euros), impuestos no incluidos.

Página.- 50


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

9.- PROS Y CONTRAS DEL TRABAJO EN GRUPO: Pros: 1.- Aumenta la calidad, productividad y la eficiencia. Permite realizar un seguimiento de las tareas realizadas, el estatus del workflow, los milestones. Puesto que cada individuo conoce la importancia de su trabajo, su nivel de compromiso es mayor, lo cual repercute en una considerable optimización de su rendimiento en pro del objetivo común. 2.- Consigue que los objetivos, que no podrían de otro modo conseguirse de modo individual, se alcancen en grupo: “si termino mi tarea y confío en que los otros terminen las suyas, todos conseguimos el objetivo”. 3.- Fomenta la especialización del trabajo entre los miembros de los equipos y organizaciones implicadas. 4.- Amplia la red de contactos. 5.- Ahorra tiempo, ya que el nivel de especialización del trabajo y profesionalidad de los participantes, conlleva una mejora en el tiempo necesario para completar los objetivos. 6.- Reduce los costes (al contar con una mayor especialización del trabajo, monitorización, comunicación y profesionalidad). 7.- Impulsa el desarrollo y mejora de los profesionales, la mayoría de los profesionales se sienten más seguros y cómodos trabajando en entornos que demuestran confianza y ayuda por parte de los líderes, managers y jefes. 8.- Anima a la participación entre los participantes y los compromete en la consecución del objetivo. Contras: 1.- Si la planificación falla (al no haber estudiado la estrategia adecuadamente), el sistema se viene abajo: workflow, equipos de trabajo/workteams, milestones, objetivos… 2.- Pérdida de control: cuando el sistema colaborativo comienza, a pesar de poder monitorizar en todo momento las tareas, se produce una pérdida del control sobre las mismas, ya que basamos la estrategia en la profesionalidad y compromiso, es decir, la confianza en los participantes.

Página.- 51


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

3.- Es trascendental llevar a cabo un plan eficaz de recursos humanos que pueda solucionar con facilidad, agilidad y dinamismo los posibles problemas que puedan surgir en el proceso de adaptación de los participantes. 4.- Si los participantes provienen de diferentes culturas, pueden existir conflictos o “choques culturales” que llevan a malentendidos, por lo tanto es importante asegurarse de que se liman esas diferencias y de que todos están en la misma línea y comprenden los objetivos y tareas. 5.- Un factor muy a tener en cuenta es la “traición”, ya que para colaborar es necesario compartir información con los demás (el dilema del prisionero, según el cual dos o más personas podrían no cooperar aunque ambos se beneficien de ello). 6.- Otro riesgo sería que alguno o varios participantes no se adapten al nuevo sistema de trabajo. Notas: Workflow .- Logistica Milestones.- Calendario Workteams.- Equipos de trabajo Pros y contras del trabajo en grupo ( Nuestra Experiencia en el desarrollo de este proyecto) Pros: 1.- Motivación y apoyo entre todos cuando han surgido problemas. 2.- Cada uno ha aportado lo mejor de sí y su experiencia haciendo participes a los demás de sus conocimientos. 3.- Reparto del trabajo a la hora de buscar información haciendo las cosas más llevaderas y acortando el plazo de realización del proyecto, pues hemos tenido que buscar y repasar mucho material de estos dos años, pues no todo se queda en la cabeza. 4.- La especialización en un determinado apartado del trabajo. 5.- Los que comenzamos hace dos años como completos desconocidos y que con el tiempo hemos sido compañeros bien avenidos, hemos terminado como muy buenos amigos.

Página.- 52


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Contras: 1.- No ser un grupo jerarquizado. 2.- Distancia entre nuestros domicilios, con la consiguiente pérdida de tiempo en los desplazamientos. 3.- Diferencia de horarios laborales por lo que se ha hecho difícil concertar las reuniones para la puesta en común de la evolución del proyecto. 4.- Unificación de criterios a la hora de enfocar el proyecto.

Página.- 53


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

10.- AMPLIACIÓN: Ya habíamos dado por terminado el proyecto pero el hecho de que la template no estuviese optimizada para visualizarla en los Smartphone, con el consabido problema de que tienes que irla ampliando para poder leer el texto, nos ha impulsado a intentar hacer una o modificar alguna. Esto la verdad que ha sido un autentico viaje por la web buscando información, ya que las plantillas que te encuentras son de pago, con la excepción de una llamada "Elástica", pero que no termina de convencer. Como nuestra aplicación rueda sobre el gestor de contenidos joomla, hemos encontrado un componente que permite que la template se adapte de forma automática a los diferentes dispositivos tales como móviles android, iphone, tabletas, etc. El nombre de este componente es mobile-joomla. Funciona bien pero presenta dos problemas: 1.- La aplicación gratuita te inserta publicidad. 2.- Lo que es mas grave y es que genera problemas de seguridad, o por lo menos es lo que nos ha pasado a nosotros, pues durante el tiempo que la hemos tenido instalada hemos sufrido varias intrusiones en la web y una vez desinstalada, ha desaparecido el problema. En estos últimos días hemos encontrado una témplate gratuita y que da mucho juego, siendo su nombre “Protostar”. Un poco más adelante comentaremos algo sobre la misma. Layouts fluidos o elásticos En este estilo de estructura, la mayoría de los componentes internos tienen anchos en porcentaje, lo que les permite ajustarse a la resolución de pantalla del usuario. Se pueden fijar ciertos elementos en los diseños fluidos, tales como los márgenes, pero el layout en general se basa en porcentajes de anchura de los elementos. En el ejemplo se muestra un diseño web fluido.

Página.- 54


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Las ventajas de los diseños fluidos o elásticos son: 1.- Se trata de un diseño que puede ser más fácil de usar, ya que se adapta a la configuración del usuario. 2.- La cantidad de espacio en blanco es similar entre todos los navegadores y resoluciones de pantalla, lo que puede ser más atractivo. 3.- Si está bien desarrollado, un diseño fluido o elástico puede eliminar barras de desplazamiento horizontal en las resoluciones de pantalla más pequeña. La ventaja principal de este planteamiento es que, si está bien desarrollado, se adaptará a cualquier tipo de resolución o dispositivo. Por otra parte, al ocupar un mayor espacio en la ventana del navegador, permite mostrar más contenido sin necesidad de hacer scroll. Lógicamente también tiene inconvenientes pero, por ahora, nos quedamos con sus virtudes. Modificando la Témplate Protestar Al abrir la carpeta de la plantilla nos encontramos el contenido de la misma que mostramos en la siguiente imagen

El contenido es prácticamente igual que el de cualquier témplate pero nos aparece una carpeta con el nombre de less. Dentro de la carpeta CSS nos encontramos con dos archivos: index y template css.

Página.- 55


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos L贸gicos C.B.

Si intentamos modificar el c贸digo del css nos da problemas o simplemente cuando lo probamos para ver los cambios estos no surten efecto.

Para conseguir hacer modificaciones tenemos que irnos a la carpeta less y en el interior de la misma nos encontramos los siguientes ficheros.

P谩gina.- 56


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Es en variables less donde tenemos que hacer las modificaciones. Una vez realizadas, tenemos que compilar y al hacerlo nos va a generar un nuevo témplate css que sustituiremos en la carpeta css por el nuevo. La compilación se puede hacer en línea, pero da mejor resultado hacerlo con la aplicación gratuita SimpLess.

Solamente tenemos que arrastrar variables.less dentro de simpLess y nos genera el nuevo témplate less ya compilado. El "problema" es que el nuevo css lo compila en una sola línea, quitando los comentarios que hayamos podido hacer etc. Ver imagen siguiente:

Si queremos evitar esto basta con poner el siguiente código al principio pero según dicen no es muy aconsejable sin dar explicaciones: //simpLess:!minify

Página.- 57


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Bueno, la cuestión es que funciona y podemos hacer muchas modificaciones y adaptar la témplate a nuestras necesidades.

Lo interesante de este sistema es que funciona con variables, herencias etc. A continuación les dejamos el tutorial más completo encontrado.

que hemos

¿ LESS? LESS extiende CSS para dotarlo de un comportamiento dinámico a través de variables, mixins, operaciones y funciones. ¿Cómo funciona? Para utilizar LESS no necesitas un plus-in ni nada especial. La idea detrás de la herramienta es que el navegador interpreta código CSS normal y corriente producido a través de un proceso de compilación de nuestras plantillas escritas en LESS. Lo único que cambia es la forma que tenemos de compilar las plantillas LESS. Si usamos un servidor Web basado en Node.js o bien servimos nuestras hojas de estilo CSS a través de un script en cualquier lenguaje como PHP, Python, Ruby o Perl (por ejemplo), podemos compilar nuestras plantillas LESS en tiempo de ejecución (del servidor) utilizando para ello Node.js Si queremos utilizar Node.js debemos de crear un archivo JavaScript que se encargue de cargar nuestra plantilla LESS y compilarla al vuelo devolviendo el archivo CSS compilado. Si usamos un servidor web Node.js es bastante sencillo: Página.- 58


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

var less = require('less'); var fs = require('fs'); fs.readFile('styles.less', 'utf8', function(err, data) { if (err) throw err; less.render(data, function(e, css) { console.log(css); }); }); Si no ejecutamos nuestro sitio web sobre un servidor Node.js podemos seguir compilando nuestras plantillas en tiempo de ejecución usando un sencillo script para ello. Voy a poner el código de ejemplo en Python, traducirlo a otro lenguaje es algo trivial: import subprocess node = subprocess.Popen(['node', 'compiler.js'], stdout=subprocess.PIPE) print node.communicate()[0] Como puedes ver, llamamos a Node.js para ejecutar un archivo compiler.js que contiene el código anterior y lo hacemos desde un servidor web con mod_python o Twisted (por ejemplo) utilizando el módulo subprocess de Python. También podemos utilizar el script less.js que podemos descargar directamente desde la página del proyecto para compilar el archivo LESS desde el propio cliente. A diferencia del método anterior, estaríamos utilizando ciclos de CPU del cliente en lugar del servidor para compilar el código: <link rel="stylesheet/less" type="text/css" href="styles.less"> <scipt type="text/javascript" src="less-1.1.3.js"></scipt></link> Es muy importante que incluyamos primero las hojas de estilo. El script compilará nuestro archivo LESS y añadirá un elemento style a nuestro DOM con el código compilado listo para su uso. Existe además otra manera (que es la que al menos yo recomiendo) que consiste en compilar previamente nuestras plantillas LESS con la utilidad de línea de comandos lessc (LESS Compiler) para generar los archivos CSS necesarios y después incluirlos normalmente en nuestro documento: genbeta@dev ~ $ lessc styles.less styles.css Si queremos usar una versión minificada del archivo solo tenemos que añadir la opción -x: Página.- 59


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

genbeta@dev ~ $ lessc styles.less styles.css -x También puede usarse la técnica de invocar al compilador desde nuestros scripts en PHP, Python, Ruby o lo que sea si servimos los archivos CSS de forma dinámica: import subprocess node = subprocess.Popen(['lessc', 'styles.less', '-x'], stdout=subprocess.PIPE) print node.communicate()[0] Una vez tenemos claro qué es y como funciona LESS, vamos al lio. Variables Las variables nos permiten definir en un solo lugar un valor que será usado en múltiples sitios de nuestro código CSS. Esto nos permite reutilizar las variables y en caso de cambiar por ejemplo un color corporativo, tendremos que cambiarlo solo en un lugar de nuestro archivo CSS. Las variables nos permiten aplicar el principio DRY (Dont Repeat Yourself). // LESS @color: #a8b317; a{ color: @color; } h2 { color: @color; } El código LESS anterior se convertiría en el siguiente código CSS al compilarse. // CSS a{ color: #a8b317; } h2 { color: #a8b317; } Como ya hemos dicho, se pueden utilizar operaciones, por lo tanto podemos sumar, restar, multiplicar y dividir variables: @minWidth: 20%; @columnLeft: @minWidth * 2; Página.- 60


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

@columnRight: @columnLeft + @minWidth; @color: #4a785b; .sideLeft { background-color: @color + #111; width: @columnLeft; } .sideRight { background-color: @color; width: @columnRight; } LESS entiende la diferencia entre un color o una unidad al realizar operaciones, lo cual es una pasada. El código anterior daría como resultado al compilarse: .sideLeft { background-color: #5b896c; width: 40%; } .sideRight { background-color: #4a785b; width: 60%; } Como ya has podido apreciar por ti mismo, LESS abre la puerta a un mundo maravilloso de oportunidades sin límite. Mixins Los Mixins te permiten embeber todas las propiedades de una clase dentro de otra clase simplemente incluyendo el nombre de la misma como una de sus propiedades. .round-corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .round-corners; } Creo que no es necesario que exprese lo excitante que resulta esto. Pero eso no es todo, te habrás fijado en que he utilizado una variable a modo de parámetro como si de una función se tratara, y seguro que te estás repitiendo abrazado a un osito de peluche y en posición fetal no puede ser, no puede ser, no Página.- 61


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

puede ser…. Pues si, si que puede ser, se le pueden pasar valores como parámetros al invocarlas. #post { .round-corners(16px); } Los códigos anteriores darían como resultado el siguiente código CSS: #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #post { border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; } Cuando un mixin recibe más de un parámetro y no queremos escribirlos todos, podemos utilizar la variable especial @arguments: .shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; box-shadow: @arguments; } .shadow(1px, 2px); Reglas Anidadas Cuando programamos en LESS no es necesario que escribamos largos selectores para especificar la herencia de nuestras reglas. Podemos usar selectores anidados dentro de otros selectores. Esto convierte a la herencia en algo limpio y elegante. #record { h1 { font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 2em; } p{ font-size: 12px; a{ Página.- 62


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

}

Teles & Foro Desarrollos Lógicos C.B.

text-decoration: none; &:hover { color: red; }

} } Este código daría como resultado al compilarse: #record h1{ font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 2em; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { color: red; } } La sintaxis de LESS es mucho más clara y elegante que el uso de selectores naturales de CSS. Funciones de Color LESS nos ofrece una variedad de funciones para transformar colores. Primero son transformados a HSL y después son manipulados a nivel de canal. lighten(@color, 10%); // devuelve un color un 10% mas "claro" que @color darken(@color, 10%); // devuelve un color un 10% mas "oscuro" que @color saturate(@color, 10%); // devuelve un color un 10% "más" saturado que @color desaturate(@color, 10%); // devuelve un color un 10% "menos" saturado que @color fadein(@color, 10%); // devuelve un color un 10% "menos" transparente que @color fadeout(@color, 10%); // devuelve un color un 10% "más" transparente que @color spin(@color, 10); // devuelve un color con 10 grados de tono mayor que @color spin(@color, -10); // devuelve un color con 10 grados de tono menor que @color Página.- 63


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

También podemos extraer información de un color: hue(@color); // devuelve el canal `hue` de @color saturation(@color); // devuelve el canal `saturation` de @color lightness(@color); // devuelve el canal `lightness` de @color Espacios de nombres En ocasiones necesitamos agrupar nuestras variables y mixins para organizarlos mejor, para ofrecer algún tipo de encapsulación o para redistribuirlos. Sea cual fuere nuestra necesidad, LESS nos ofrece una forma sencilla de utilizar espacios de nombres en nuestras plantillas. #main_header { .logo () { display: block; border: none; background: transparent url(../media/logo.png) 0 0 scroll; } .slogan { ... } .menu { ... } ... } Usar el nuevo espacio de nombres es igualmente sencillo. Si queremos utilizar la clase .logo en nuestro #header podemos hacerlo de la siguiente forma: #header a { color: green; #main_header > .logo; } Alcance de Variables (Scope) El alcance o ámbito de variables en LESS es muy parecido al alcance en otros lenguajes. Primero se busca localmente, si no se encuentra, el compilador busca en el ámbito inmediatamente superior y así sucesivamente. @var: #333; #page { @var: #fff; #header { color: @var; // #fff } } Página.- 64


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

#footer { color: @var; // #333 } Importación En LESS podemos importar archivos y disponer de todas las variables y mixins que definan de forma automática. La extensión .less es opcional. Para importar un archivo usamos la regla @import. También podemos importar archivos CSS que no serán procesados por el compilador. Interpolación de cadenas El valor de las variables puede ser empotrado dentro de cadenas parecido a como se hace en Bash o Ruby pero usando el constructor @{nombe}: @url: "http://www.genbetadev.com"; background-image: url("@{url}/images/background.png"); Ignorar Elementos A veces querremos ignorar CSS que no es CSS válido o que pertenece a una sintaxis especial propietaria no disponible en el estándar y que LESS no entiende. En esos casos podemos ignorar partes del archivo utilizando el caracter ~: .transparente { filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png')"; } Toda la definición será ignorada por el compilador de LESS que no la tendrá en cuenta y será añadida al archivo CSS resultante sin cambios. Emulación de JavaScript Se pueden evaluar expresiones JavaScript dentro de los archivos .less, para ello, es necesario envolver la expresión con back-ticks (acentos cerrados): @var: `"genbetadev".toUpperCase() + ' mola!'`; La expresión anterior daría como resultado: @var: "GENBETADEV mola!"; Página.- 65


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lรณgicos C.B.

Conclusiรณn LESS es una poderosa herramienta con la que crear hojas de estilo en cascada se convierte en una parte mรกs del proceso de desarrollo de software al elevar a CSS al nivel de lenguaje de programaciรณn.

Pรกgina.- 66


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

11.- FUENTES CONSULTADAS: - Materiales didácticos del ciclo Desarrollador de aplicaciones Multiplataforma. -

Internet:

http://www.monografias.com/trabajos58/manual-php/manualphp.shtml http://educabilia.es/clases/130872/lenguaje-de-programacion-php http://php.net/manual/es/tutorial.php http://www.programacion.com/ http://www.es.hscripts.com/tutoriales/mysql/index.php http://www.taringa.net/posts/info/12408120/Tutorial-para-poderutilizar-MySQL.html http://www.estructurayprogramacion.com/ http://www.ayuda-internet.net/tutoriales/desarrollo/apache/index.html -

Bibliografía

Planificación Organización y Gestión de Proyectos Antonio Druidis Ediciones Gestión 2000 S.A. -------------------------------------------------------------------Harvard Business Review Equipos que triunfan (Ideas con impacto) Deusto. 2004 Harvard Business School Publishing Corporation 2004 Ediciones Deusto Planeta Deagostini Profesional Formación S.L.

Página.- 67


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

Traducción: Carlos Ganzinelli --------------------------------------------------------------------MySQL Construcción de Interfaces de Usuario (Edicion especial) Matthews Stucky Prentice Hall ---------------------------------------------------------------------MySQL Para Windows y Linux Cesar Perez Ra-Ma ----------------------------------------------------------------------Creación de Aplicaciones Web con PHP 4 Ratschiller 3 Gerken Pearson Prentice Hall ----------------------------------------------------------------------PHP 5 Guía Practica para Usuarios Francisco Charte Ojeda Anaya/Multimedia ---------------------------------------------------------------------Diseño de páginas web interactivas con Java Script Juan Carlos Orós Ra-Ma

Página.- 68


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos Lógicos C.B.

----------------------------------------------------------------------Programación en Java Script Actualizada a Java Script 1.3 y jScript 5 José Manuel Alarcón Anaya/Multimedia (Guía práctica para usuarios) ---------------------------------------------------------------------HTML con XHTML Y CSS Anaya/Multimedia Diseño y Creatividad Elizabeth Castro ----------------------------------------------------------------------PHP y MYSQL Creación de sitios web dinámicos y con base de datos. Anaya/Multimedia O`Reilly Michelle E. Davis y Jon A. Phillips ------------------------------------------------------------------------Desarrollo web con PHP y MYSQL (Programación) Anaya/Multimedia Luke Welling y Laura Thomson -----------------------------------------------------------------------------PHP and MYSQL Webs Development Luke Welling y Laura Thomson

Página.- 69


PROYECTO DE UNA WEB SOBRE EL SURF EN CANARIAS

Teles & Foro Desarrollos L贸gicos C.B.

S1 MS ------------------------------------------------------------------------------

P谩gina.- 70

Proyecto final de estudios dam  
Read more
Read more
Similar to
Popular now
Just for you