chechirussel

Hola a todos, cree este post con la necesidad de contarles mi proyecto, en el que tuve muchos altibajos debido a la crisis que vivimos hoy día en nuestro país, pero cuando se quiere y se desea tanto algo se puede! hace un par de años que estoy en taringa y si bien he participado, creo que nunca he aportado mis ideas y mis proyectos personales acá. Por ahí no porque no haya querido, sino porque he estado en busca de ese “algo” que llame la atención y valga la pena. Antes que nada quiero presentarme para los que no me conocen. Mi nombre es Agustín Chechi, tengo 25 años y vivo en la provincia de Mendoza. Actualmente estoy en 4to año de la carrera “Licenciatura en Informática y Desarrollo de Software” y si bien aún no he terminado mis estudios, esta carrera me dio las herramientas para llevar a cabo mi proyecto. Hace aproximadamente 2 años, con Federico (Mi socio y amigo) decidimos encarar un proyecto juntos al que titulamos “Ipage”. Ipage es una empresa de desarrollo web, diseño de sistemas y aplicaciones con base web. De tanto escuchar ideas de la gente, que nos contaba sus proyectos para que nosotros los lleváramos a cabo, surgió esta idea de la que hoy voy a contarles. Después de pensar y planificar un largo rato titulamos esta idea como “shopping de agencias de autos”. Esta denominación fue la primera descripción de nuestro proyecto que más tarde pasaba a llamarse AgenShop. La idea era crear un portal donde cada agencia iba a tener una página web propia dentro de una página web madre. Para que se entienda mejor y llevándolo al actual auge de las redes sociales se podría decir que AgenShop cuenta con una página principal (inicio de Facebook) con diferentes agencias (perfiles de Facebook). Es decir, AgenShop seria Facebook y las Agencias serían las personas dentro de Facebook. La página web principal de AgenShop tiene 5 secciones, entre ellas podemos destacar “Encontra tu auto” y “Agencias” •Encontra tu auto: En esta sección se listan todos los autos de todas las agencias. Contiene un buscador por segmento, marcas y modelos, precios, etc. Al hacer clic en un vehículo seremos redirigidos al perfil (página web) de la agencia a la que pertenece dicho auto. •Agencias: En esta sección se listan todas las agencias activas de nuestro portal. Posee un buscador por zonas y haciendo clic en una agencia seremos redirigidos al perfil (página web) de esta. Cada agenciero cuenta con un panel de administración donde podrá subir sus vehículos, administrar su perfil, manejar sus clientes y vendedores, agregar sucursales de su agencia, consultar estadísticas y reportes de su agencia, etc. El panel también cuenta con un sistema de mail interno, es decir, las consultas por los vehículos llegan al panel y pueden ser contestadas desde ahí mismo sin tener que ingresar a nuestro proveedor de mail (Hotmail, Gmail, etc) para contestar una consulta. Siempre creímos que los negocios online triunfan cuando ofrecen algo diferente. Nuestra idea fue integrar todo en un solo portal. Ya teníamos “la web de la agencia”, “el sistema para administrar la agencia” y nos faltaba algo más. Se nos ocurrió que desde AgenShop también los agencieros puedan manejar su cuenta de “napsix” (napsix es un sistema de clasificados muy conocido en Mendoza, recibe 9.000.000 de visitas mensuales), esto cerraba por todos lados, estábamos ofreciendo un sistema que incluía no solo la web de tu agencia y la administración de la misma sino que ahora también podías manejar tu cuenta de napsix desde AgenShop! Osea, subís un auto a AgenShop y automáticamente se sube a Napsix, en vez de ir subiendo uno por uno en las 2 páginas basta solo con subirlo a una, te ahorras la mitad del tiempo y todos sabemos que el tiempo es oro. Esto fue un punto fuerte de nuestra idea que ya contaba con sus 3 pilares principales. Después de 11 meses de desarrollo nuestro proyecto estaba terminado, hay que aclarar que en todo ese tiempo sufrimos muchos altibajos, el impuestazo a los autos fue un gran dilema para nosotros, ya que paralizo el sector y nos hizo replantearnos las cosas más de una vez. Julio fue el mes de lanzamiento de nuestra web, a esta altura somos 3 socios: 2 en la parte de desarrollo y 1 en la parte de ventas. Salimos a ofrecer nuestro sistema sin un peso, no teníamos como financiar la publicidad ni dinero para ella (tampoco lo tenemos hoy), Incluso nosotros mismos salimos a venderlo sin tener la más mínima idea de marketing. Debo decir que nos llevamos una gran sorpresa, nuestro sistema tenía una buena aceptación. Nos costaba un poco explicar de que trataba el sistema (incluso hoy en día me cuesta jaj) y era un poco complejo de entender, pero era cuestión de que el agenciero probara AgenShop para darse cuenta lo fácil e intuitivo que era. De apoco se fueron sumando agencias, y hoy a menos de 2 meses de haber empezado contamos en AgenShop con más de 32 agencias, más de 630 autos publicados y las visitas crecen día a día (tenemos un promedio de 600 visitas diarias). Si bien falta para que este proyecto sea denominado “Exitoso” vamos por muy buen camino, incluso ha tenido gran aceptación en un lugar donde la gente es bastante cerrada (Mendoza). Ya estamos empezando a gestionar Buenos Aires y la idea es expandirse a las demás provincias en el corto plazo. Bueno veo que se hizo un poco largo, la idea era explicarles mi proyecto y obtener críticas constructivas, o no, del mismo. No quiero olvidarme de aclarar que para llevar a cabo este este proyecto compramos 2 plantillas prediseñadas (una para el principal y otra para la web de las agencias) y las adaptamos a gusto, no tengo problema en pasarle los nombres por privado a los que deseen saberlos. Les dejo el link de la página para los que estén interesados y quieran verla: http://agenshop.com.ar Gracias por su tiempo y espero que les guste!

Hoy les vengo a dejar un megacurso de programacion en HTML. Como dice el titulo del post, entras sin saber nada y salis siendo un experto! yo ya puse en marcha mi empresa!¿Que voy a aprender en este curso? vas a aprender mucho sobre HTML, CSS, XML y JavaScripts sin la necesidad de saber algo, es decir que es para todo tipo de usuario. Espero les sea util!. Dejen cargar el post un ratito, ya que tiene bastantes imagenes! Introducción El HTML no es más que una aplicación SGML (Standard Generalized Markup Language), un sistema para definir tipos de documentos estructurados y lenguajes de marcas para representar esos mismos documentos. El término HTML se suele referir a ambas cosas, tanto al tipo de documento como al lenguaje de marcas. A medida que nos afianzamos en el manejo de internet cada uno de nosotros pasa por tres etapas diferentes: Al principio solamente conocemos unas pocas paginas, luego nos damos cuenta que existen buscadores los cual lo hace mas interesante y por ultimo nos damos cuenta que en Internet no solamente se puede se puede ver la información sino que también se puede publicar. ¿y qué otra manera más fácil y más sencilla? Si Internet tiene acceso a todos los rincones del mundo. Para que varias personas se comuniquen es necesario que éstas hablen un mismo idioma. El lenguaje que utilizan las computadoras que están conectadas a Internet es HTML. A través de esta monografía explicaremos que es HTML, sus orígenes y el proceso de creación de una página web. PRIMERA PARTE Introducción al HTML CAPITULO I ¿Qué es un HTML? Definición de un HTML. El HTML no es más que el lenguaje en el que se escriben las páginas web, o mas concretamente es el lenguaje con el cual se crean la mayoría de las páginas web. Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, y nuestros servidores muestran el contenido de las páginas web luego de haber leído su contenido HTML. Eguíluz dice: El lenguaje HTML es un estándar reconocido en todo el mundo y cuyas normas define un organismo sin ánimo de lucro llamado World Wide Web Consortium, más conocido como W3C. Como se trata de un estándar reconocido por todas las empresas relacionadas el mundo del Internet, una misma página HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo. (p. 5). Desde su creación el HTML es definido por muchas entidades y también por el mismo W3C, como un lenguaje universal utilizado exclusivamente para crear documentos electrónicos de cualquier tipo. Orígenes del HTML. El origen del HTML (HiperText Markup Language) se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) propuso un nuevo sistema de "hipertexto" para compartir documentos. La primera descripción para HTML disponible públicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos comprendiendo el diseño inicial y relativamente simple de HTML. Trece de estos elementos todavía existen en HTML 4. La primera propuesta oficial para convertir HTML en un estándar se realizo en 1993 por parte del organismo IETF (Internet Engineering Task Foce). Aunque se consiguieron avances significativos (en esta época se definieron las etiquetas para imágenes, tablas y formularios) ninguna de las dos propuestas de estándar, llamadas HTML y HTML+ consiguieron convertirse en estándar oficial. El organismo IETF organiza un grupo se trabajo de HTML en1995 y consigue publicar, el 22 de septiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML. A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C (World Wide Web Cosortium). El 14 de Enero de 1997 se publicó la versión HTML 3.2 y es la primera recomendación de HTML publicada por W3C. Esta versión incorpora los últimos avances de la páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes. El HTML 4.0 fue publicado el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del 18 de Diciembre de 1997) y supuso un gran salto desde las versiones anteriores. Entre sus novedades más destacadas se encuentran la posibilidad de incluir pequeños programas o scrips en las páginas web, las hojas de estilo CSS, mejora la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios. El HTML 4.01 (la última especificación oficial de HTML) se publicó el 24 de Diciembre de 1999. Se trata de una revisión y actualización de la versión HTML 4.0, pero lo que incluye novedades significativas. Desde la publicación de HTML 4.01, se detuvo la actividad de estandarización de HTML y el W3C se centro en el desarrollo del estándar XHTML. Por este motivo, las empresas Apple, Mozila y Opera mostraron en el año 2004 su preocupación por la falta de interés del W3C en HTML y decidieron organizarse e una nueva asociación llamada WHATWG (Web Hipertext Application Technology Working Group). En la actualidad la actividad del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial se publico en 22 de Enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y la publicación de los borradores de HTML 5.0, en Marzo del 2007 el W3C decidió retomar la actividad estandarizadora de HTML. Paralelamente a su actividad con HTML, W3C ha continuado con la estandarización de XHTML, que es una versión avanzada de HTML y basada en XML. La primera versión de XHTML se denomina XHTML 1.0 y fue publicada el 26 de Enero de 2000 (y posteriormente se revisó el 1 de Agosto del 2002). XHTML1.0 e una adaptación de HTML 4.01 al lenguaje XML, así que mantiene todas sus etiquetas y características, pero añade algunas restricciones y elementos propios de XML. La versión XHTML 1.1 ya ha sido publicada en forma de borrador y pretende modularizar XHTML. También ha sido el borrador de XHTML 2.0, que supondrá un cambio muy importante respecto a las anteriores versiones de XHTML. CAPITULO II Características Básicas 2.1. Estructura fundamental de un fichero HTML. 2.2. Etiquetas. El proceso de indicar las diferentes partes que componen la información se denomina marcar (markup en inglés). Cada una de las palabras que se emplean para marcar el inicio y el final de una sección se denominan etiquetas. Aunque existen alguna excepciones, en general las etiquetas se indican por pares y se forman de la siguiente manera: Eguíluz dice: HTML es un lenguaje de etiquetas (también llamado lenguaje de marcado) y las páginas web habituales están formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en inglés a los lenguajes de marcado. Además de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML. (p. 10). Una de las ventajas de estas etiquetas es que son muy sencillos de leer y escribir tanto por las personas y por los sistemas electrónicos, pero la principal desventaja es que estas etiquetas pueden aumentar mucho el tamaño del documento, es por eso que se usan etiquetas con nombres muy cortos. Por ejemplo, podemos mostrar la palabra "¡Hola!" en cursiva de la siguiente forma: 2.3. Atributos. HTML define 91 etiquetas que los diseñadores puede utilizar para marcar los diferentes componentes de una página web. A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para crear páginas web complejas. Como no es viable crear una etiqueta por cada enlace diferente, la solución consiste en personalizar las etiquetas HTML mediante cierta información adicional llamada atributos. El primer enlace del ejemplo anterior no está completamente definido, ya que no apunta a ninguna dirección. No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su propia lista de atributos disponibles. Además, cada atributo también indica el tipo de valor que se le puede asignar. Si el valor de un atributo no es válido, el navegador ignora ese atributo. Pero algunos de estos atributos son comunes a muchos o casi todas las etiquetas, estos se dividen en cuatro grupos según su funcionalidad: a) Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas HTML. id = "texto": Establece un identificador único a cada elemento dentro de una página HTML class = "texto": Establece la clase CSS que se aplica a los estilos del elemento Style = "texto": Establece de forma directa los estilos CSS de un elemento title = "texto": Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento) La mayoría de páginas web actuales utilizan los atributos id y class de forma masiva. Sin embargo, estos atributos sólo son realmente útiles cuando se trabaja con CSS y con Javascript. b) Atributos para internacionalización: los utilizan las páginas que muestran sus contenidos en varios idiomas o aquellas que quieren indicar de forma explítica el idioma de sus contenidos: lang = "código de idioma": Indica el idioma del elemento mediante un código predefinido xml:lang = "idioma": Indica el idioma del elemento mediante un código predefinido dir: Indica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda) En las páginas XHTML, el atributo xml:lang tiene más prioridad que lang y es obligatorio incluirlo siempre que se incluye el atributo lang. Como la palabra internacionalización es muy larga, se suele sustituir por la abreviatura i18n (el número 18 se refiere al número de letras que existen entre la letra i y la letra n de la palabra internacionalización). c) Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas con JavaScript. onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup: Permiten controlar los eventos producidos sobre cada elemento de la página Cada vez que un usuario mueve le ratón o pulsa cualquier botón del ratón, se produce un evento en el navegador. Utilizando JavaScript y los atributos anteriores, es posible responder de forma adecuada a cada evento. d) Atributos para los elementos que pueden obtener el foco: Eguíluz dice: Cuando el usuario selecciona un elemento de la interfaz de una aplicación, se dice que "el elemento tiene el foco del programa". Si por ejemplo un usuario pincha con su ratón sobre un cuadro de texto y comienza a escribir, ese cuadro de texto tiene el foco del programa, llamado "focus" en inglés. Si el usuario selecciona después otro elemento, el elemento original pierde el foco y el nuevo elemento es el que tiene el foco del programa. (p. 16). Los elementos de las páginas web también pueden obtener el foco de la aplicación y HTML define algunos atributos específicos para controlar cómo se seleccionan estos elementos. accesskey = "letra": Establece una tecla de acceso rápido a un elemento HTML tabindex = "numero": Establece la posición del elemento en el orden de tabulación de la página. Su valor debe estar comprendido entre 0 y 32.767 Onfocus, onblur: Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco Cuando se pulsa repetidamente la tecla del tabulador sobre una página web, el navegador selecciona de forma alternativa todos los elementos de la página que se pueden seleccionar (principalmente los enlaces y los elementos de formulario). El atributo tabindex permite alterar el orden en el que se seleccionan los elementos, por lo que es muy útil cuando se quiere controlar de forma precisa cómo se seleccionan los campos de un formulario complejo. Por su parte, el atributo accesskey permite establecer una tecla para acceder de forma rápida a cualquier elemento. Aunque la tecla de acceso rápido se establece mediante HTML, la combinación de teclas necesarias para activar ese acceso rápido depende del navegador. En el navegador Internet Explorer se pulsa la tecla Alt + la tecla definida; en el navegador Firefox se pulsa Alt + Shift + la tecla definida; en el navegador Opera se pulsa Shift + Esc + la tecla definida; en el navegador Safari se pulsa Ctrl + la tecla definida. En el resto de la documentación, se emplearán las palabras "básicos", "i18n", "eventos" y "foco" respectivamente para referirse a cada uno de los grupos de atributos comunes definidos anteriormente. Sintaxis de las etiquetas. El leguaje HTML original era muy permisivo en su sintaxis, por lo que era posible escribir sus etiquetas y atributos de muchas maneras diferentes. La flexibilidad de HTML puede parecer un aspecto positivo, pero el resultado final páginas con un código HTML desordenado, difícil de mantener y muy poco profesional. Pero XHTML, ha logrado introducir ciertas normas para el mejor orden y mayor comprensión en el código. A continuación se muestran las cinco restricciones básicas que introduce XHTML respecto a HTML en la sintaxis de sus etiquetas: La mayoría de etiquetas HTML encierran un contenido de texto entre la etiqueta de apertura y la etiqueta de cierre. Sin embargo, algunas etiquetas especiales llamadas "etiquetas vacías" no necesitan encerrar ningún texto. Ejemplo correcto en XHTML: SEGUNDA PARTE Contenidos de Documento HTML CAPITULO III Textos La mayor parte del contenido de las páginas HTML habituales está formado por texto, llegando a ser más del 90% del código de la página. Por este motivo es muy importante conocer los elementos y etiquetas que define HTML para el manejo del texto. Y para esto los párrafos son muy importantes, por este motivo una de las etiquetas mas usadas en HTML es , que permite definir los párrafos que conforman un texto de una página. 3.1 Secciones. Es habitual que las páginas se dividan en diferentes secciones jerárquicas. 3.2. Marcado de textos. Una vez estructurado el texto en párrafos y secciones, el siguiente paso es el marcado de los elementos que componen el texto. Los textos habituales están formados por elementos como palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos, etc. HTML proporciona varias etiquetas para marcar cada uno de los diferentes tipos de texto. Entre las etiquetas más usadas en el marcado de textos tenemos: Ejemplo: Ejemplo: 3.3. Espacios en blanco y nuevas líneas. El aspecto más sorprendente del lenguaje HTML cuando se desarrollan los primeros documentos es el tratamiento especial de los "espacios en blanco" del texto. HTML considera espacio en blanco a los espacios en blanco, los tabuladores, los retornos de carro y el carácter de nueva línea (ENTER o Intro). Con el siguiente ejemplo entenderemos con más caridad: Como podemos observar en la imagen los dos párrafos son idénticos, a pesar de que el segundo contiene vario espacios en blanco. Esto de debe a que HTML ignora los espacios en blanco sobrantes, es decir, todos los espacios en blanco que no son espacios en banco que separan las palabras. No obstante, HTML proporciona varias alternativas para poder incluir tantos espacios en blanco y tantas nuevas líneas como sean necesarias dentro del contenido textual de las páginas. 3.3.1. Nuevas líneas. 3.3.2. Espacios en blanco. La solución al problema de los espacios en blanco no es tan sencilla como el de las nuevas líneas. Para incluir espacios en blanco adicionales, se debe sustituir cada nuevo espacio en blanco por el texto (es importante incluir el símbolo (& al principio y el símbolo ( al final). Y tomando en cuenta el ejemplo anterior, le adicionamos los espacios en blanco: Pero ha excepción de estas dos últimas etiquetas que vimos, también podemos utilizar la etiqueta la cual nos muestra el texto tal y como se ha escrito. Ejemplo: 3.4. Color en el texto. Para que lo que escribamos en HTML sea de un color específico que deseemos tenemos que especificar el color deseado, ya sea especificando el color en ingles o poner de manera hexadecimal. Y la etiqueta para poner color a las letras es: A continuación tenemos algunos de lo colores más usuales: Pero para ponerle fondo a la página que realizamos se debe escribir: Colocar mal los colores de fondo en nuestras páginas puede provocar problemas. ¿Qué ocurría con los links o enlaces si colocáramos un fondo de color azul?. Puesto que los links son azules cuando todavía no se han pulsado puede ocurrir que no se puedan leer con claridad o incluso que no se puedan distinguir en absoluto del fondo. Se puede imaginar todavía un caso peor si decidiéramos colocar un fondo demasiado oscuro, tan oscuro que no permitiera distinguir con claridad la información que se presenta en pantalla. Podemos remediar esto eligiendo nosotros mismos el color que queremos que tengan los links o enlaces e incluso el texto, las etiquetas para hacer esto son las siguientes: CAPITULO IV Listas 4.1. Listas desordenadas. Las listas no ordenadas son las más sencillas y también las que más se utilizan. 4.2. Listas ordenadas. Las listas ordenadas son casi idénticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que se realiza cada paso. Cuando se muestra un índice o tabla de contenidos en un libro, es importante el orden de cada elemento del índice. 4.3. Listas de definición. Las listas de definición apenas se utilizan en la mayoría de páginas HTML. Su funcionamiento es similar al de un diccionario, ya que cada elemento de la lista está formado por términos y definiciones. CAPITULO V Tablas 5.1. Tablas básicas. Siendo esta una tabla muy sencilla, en los siguientes ejemplos veremos tablas de mayor complejidad. Ejemplos tales como fusión de columnas: En el ejemplo anterior, para fusionar filas se utilizo la etiqueta: Utilizando los atributos rowspan y colspan, es posible diseñar tablas complejas como las que se muestran en los siguientes ejemplos. 5.2. Tablas complejas. Algunas tablas complejas están formadas por más elementos que filas y celdas de datos. Así, es común que las tablas más avanzadas dispongan de una sección de cabecera, una sección de pie y varias secciones de datos. Además, también es posible agrupar varias columnas de forma lógica para poder aplicar estilos similares a un determinado grupo de columnas. Un ejemplo clásico de tablas avanzadas es el de las tablas utilizadas en contabilidad, como por ejemplo la tabla que muestra el balance de una empresa: La siguiente imagen muestra una tabla avanzada con cabecera, pie y una sección de datos: Y el código HTML necesario para el ejemplo es: El código HTML necesario para el ejemplo anterior es: CAPITULO VI Enlaces Los enlaces se utilizan para ara establecer relacione entre dos recursos. Aunque la mayoría de enlaces relacionan página web, también es posible enlazar otros recursos como imágenes, documentos y archivos. Pero como ya e menciono la mayoría de enlaces se hacen en relación a otras páginas web. 6.1. Definición de URL. Eguíluz dice: Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios. (p.48). La URL de un recurso tiene dos objetivos principales: 1) Identificar de forma única a ese recurso. 2) Permitir localizar de forma eficiente a ese recurso. En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página. Si se accede a la página principal de Youtube, la dirección que muestra el navegador es: http://www.youtube.com El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL. http://www.librosweb.es/xhtml/capitulo4.html Las partes que componen la URL anterior son: 1) Protocolo (http://): el mecanismo que debe utilizar el navegador para acceder a ese recurso. 2) Servidor (www.librosweb.es): simplificando mucho su explicación, se trata del ordenador en el que se encuentra guardada la página que se quiere acceder. 3) Ruta (/xhtml/capitulo4.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso específico que se quiere acceder. La mayoría de URL son tan sencillas como la URL mostrada anteriormente. No obstante, existen URL complejas formadas por más partes. http://www.alistapart.com/comments/webstandards2008?page=5#42 Las cinco partes que forman la URL anterior son: Como las URL utilizan los caracteres :, =, & y / para separar sus partes, estos caracteres están reservados y no se pueden utilizar libremente. Además, algunos caracteres no están reservados pero pueden ser problemáticos si se utilizan en la propia URL. 6.2. Enlaces internos. Son los enlaces que apuntan a un lugar diferente dentro de la misma página. Este tipo de enlaces son esencialmente utilizados en páginas donde el acceso a los contenidos puede verse dificultado debido al gran tamaño de la misma. Mediante estos enlaces podemos ofrecer al visitante la posibilidad de acceder rápidamente al principio o final de la página o bien a diferentes párrafos o secciones. Para crear un enlace de este tipo es necesario, aparte del enlace de origen propiamente dicho, un segundo enlace que será colocado en el destino. Veamos más claramente como funcionan estos enlaces con un ejemplo sencillo: Supongamos que queremos crear un enlace que apunte al final de la página. Lo primero será colocar nuestro enlace origen. Lo pondremos aquí mismo y lo escribiremos del siguiente modo: Como podemos ver, el contenido del enlace es el texto "Ir abajo" y el destino, abajo, es un punto de la misma página que todavía no hemos definido. Ojo al símbolo #; es él quien especifica al navegador que el enlace apunta a una sección en particular. En segundo lugar, hay que generar un enlace en el destino. Este enlace llevara por nombre abajo para poder distinguirlo de los otros posibles enlaces realizados dentro de la misma página. En este caso, la etiqueta que escribiremos será ésta: A decir verdad, estos enlaces, aunque útiles, no son los más extendidos de cuantos hay. La tendencia general es la de crear páginas (archivos) independientes con tamaños más reducidos enlazados entre ellos por enlaces locales (los veremos enseguida). De esta forma evitamos el exceso de tiempo de carga de un archivo y la introducción de exceso de información que pueda desviar la atención del usuario. Una aplicación corriente de estos enlaces consiste en poner un pequeño índice al principio de nuestro documento donde introducimos enlaces origen a las diferentes secciones. Paralelamente, al final de cada sección introducimos un enlace que apunta al índice de manera que podamos guiar al navegante en la búsqueda de la información útil para él. 6.3. Enlaces locales. Enlaces HTML con otras páginas del mismo sitio web. Como hemos dicho, un sitio web esta constituido de páginas interconexas. En el capitulo anterior hemos visto como enlazar distintas secciones dentro de una misma página. Nos queda pues estudiar la manera de relacionar los distintos documentos HTML que componen nuestro sitio web. Para crear este tipo de enlaces, hemos de crear una etiqueta de la siguiente forma: Por regla general, para una mejor organización, los sitios suelen estar ordenados por directorios. Estos directorios suelen contener diferentes secciones de la página, imágenes, sonidos...Es por ello que en muchos casos no nos valdrá con especificar el nombre del archivo, sino que tendremos que especificar además el directorio en el que nuestro archivo.html esta alojado. Para aquellos que no saben como mostrar un camino de un archivo, aquí van una serie de indicaciones que os ayudaran a comprender la forma de expresarlos. No resulta difícil en absoluto y con un poco de práctica lo lograremos prácticamente sin pensar. 1) Hay que situarse mentalmente en el directorio en el que se encuentra la página con el enlace. 2) Si la página destino esta en un directorio incluido dentro del directorio en el que nos encontramos, hemos de marcar el camino enumerando cada uno de los directorios por los que pasamos hasta llegar al archivo y separándolos por el símbolo barra "/". Al final obviamente, escribimos el archivo. 3) Si la página destino se encuentra en un directorio que incluye el de la página con el enlace, hemos de escribir dos puntos y una barra "../" tantas veces como niveles subamos en la arborescencia hasta dar con el directorio donde esta emplazado el archivo destino. 4) Si la página se encuentra en otro directorio no incluido ni incluyente del archivo origen, tendremos que subir como en la regla 3 por medio de ".." hasta encontrar un directorio que englobe el directorio que contiene a la página destino. A continuación haremos como en la regla 2. Escribiremos todos los directorios por los que pasamos hasta llegar al archivo. 6.4. Enlaces externos, de correo y hacia archivos. Vemos tres tipos de enlaces. Los dirigidos a otras páginas de otros webs, a direcciones de correo y a ficheros externos. Para acabar con los enlaces vamos a ver los últimos 3 tipos de enlaces que habíamos señalado. Enlaces remotos Son los enlaces que se dirigen hacia páginas que se encuentran fuera de nuestro sitio web, es decir, cualquier otro documento que no forma parte de nuestro sitio. a) Enlaces a direcciones de correo. Los enlaces a direcciones de correo son aquellos que al pincharlos nos abre un nuevo mensaje de correo electrónico dirigido a una dirección de mail determinada. Estos enlaces son muy habituales en las páginas web y resultan la manera más rápida de ofrecer al visitante una vía para el contacto con el propietario de la página. Para colocar un enlace dirigido hacia una dirección de correo colocamos mailto: en el atributo href del enlace, seguido de la dirección de correo a la que se debe dirigir el enlace. Nota: El visitante de la página necesitará tener configurada una cuenta de correo electrónico en su sistema para enviar los mensajes. Lógicamente, si no tiene servicio de correo en el ordenador no se podrán enviar los mensajes y este sistema de contacto con el visitante no funcionará. b) Enlaces con archivos Este no es un tipo de enlace propiamente dicho, pero lo señalamos aquí porque son un tipo de enlaces muy habitual y que presenta alguna complicación para el usuario novato. El mecanismo es el mismo que hemos conocido en los enlaces locales y los enlaces remotos, con la única particularidad de que en vez de estar dirigidos hacia una página web está dirigido hacia un archivo de otro tipo. Si pinchamos un enlace de este tipo nuestro navegador descargará el fichero, haciendo la pregunta típica de "Qué queremos hacer con el archivo. Abrirlo o guardarlo en disco". Consejo: No colocar en Internet archivos ejecutables directamente sino archivos comprimidos. Por dos razones: El archivo ocupará menos, con lo que será más rápida su transferencia. Al preguntar al usuario lo que desea hacer con el fichero le ofrece la opción de abrirlo y guardarlo en disco. Nosotros generalmente desearemos que el usuario lo guarde en disco y no lo ejecute hasta que lo tenga en su disco duro. Si se decido a abrirlo en vez de guardarlo simplemente lo pondrá en marcha y cuando lo pare no se quedará guardado en su sistema. Si los archivos están comprimidos obligaremos al usuario a descomprimirlos en su disco duro antes de ponerlos en marcha, con lo que nos aseguramos que el usuario lo guarde en su ordenador antes de ejecutarlo. Si queremos enlazar hacia otro tipo de archivo como un PDF o un mundo VRML (Realidad virtual para Internet) lo seguimos haciendo de la misma manera. El navegador, si reconoce el tipo de archivo, es el responsable de abrirlo utilizando el conector adecuado para ello. Así, si por ejemplo enlazamos con un PDF pondrá el programa Acrobat Reader en funcionamiento para mostrar los contenidos. Si enlazamos con un mundo VRML pondrá en marcha el plug-in que el usuario tenga instalado para ver los mundos virtuales (Cosmo Player por ejemplo). Este sería un ejemplo de enlace a un documento PDF. CAPITULO VII Formularios 7.1 Definición de los formularios. Hemos visto anteriormente que podíamos, mediante los enlaces, contactar directamente con un correo electrónico. Sin embargo, esta opción puede resultar en algunos casos poco versátiles si lo que deseamos es que el navegante nos envíe una información bien precisa. Es por ello que el HTML propone otra solución mucho más amplia: Los formularios. Los formularios son esas famosas cajas de texto y botones que podemos encontrar en muchas páginas web. Son muy utilizados para realizar búsquedas o bien para introducir datos personales por ejemplo en sitios de comercio electrónico. Los datos que el usuario introduce en estos campos son enviados al correo electrónico del administrador del formulario o bien a un programa que se encarga de procesarlo automáticamente. Usando HTML podemos únicamente enviar el formulario a un correo electrónico. Si queremos procesar el formulario mediante un programa la cosa puede resultar un poco más compleja ya que tendremos que emplear otros lenguajes más sofisticados. En este caso, la solución más sencilla es utilizar los programas prediseñados que nos proponen un gran número de servidores de alojamiento y que nos permiten almacenar y procesar los datos en forma de archivos u otros formatos. Si nuestras páginas están alojadas en un servidor que no nos propone este tipo de ventajas, siempre podemos recurrir a servidores de terceros que ofrecen este u otro tipo de servicios gratuitos para webs. Los años transcurridos desde la publicación de los estándares de HTML y XHTML ha provocado que no estén disponibles todos los elementos utilizados por los formularios más avanzados y modernos. No obstante, HTML/XHTML incluye los suficientes elementos de formulario para crear desde los formularios sencillos que utilizan los buscadores hasta los formularios complejos de las aplicaciones más avanzadas. 7.2. Formularios básicos. Y este código muestra lo siguiente en un navegador cualquiera, un claro ejemplo de un formulario simple. La mayoría de formularios utilizan sólo los atributos action y method. El atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador. El atributo method establece la forma en la que se envían los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method="get" o el atributo method="post". 7.3. Elementos de los formularios. Los elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario". A continuación se muestran ejemplos para utilizar los controles que se pueden crear con la etiqueta 7.3.1. Cuadro te texto. Se trata del elemento más utilizado en los formularios. En el caso más sencillo se muestra un cuadro vacio en el cual el usuario puede escribir cualquier texto. Y el código necesario para este cuadro es: En este código solo mostraremos solo lo que nos interesa que es la parte del formulario. Para los cuadros de texto, su valor es text. El atributo name es el más importante en los campos del formulario. De hecho, si un campo no incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario. El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea un formulario para insertar datos, los cuadros de texto deberían estar vacíos. Por lo tanto, o no se añade el atributo value o se incluye con un valor vacío value="". Si por el contrario se crea un formulario para modificar datos, lo lógico es que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluirá el valor que se desea mostrar: Por último, el atributo readonly permite que el usuario pueda ver los contenidos del cuadro de texto pero no pueda modificarlos y el atributo disabled deshabilita un cuadro de texto de forma que el usuario no pueda modificarlo y además, el navegador no envía sus datos al servidor. 7.3.2. Cuadro de contraseña La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles. Y el código necesario seria: 7.3.3. Checkbox Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes. Y para este ejemplo el código es: El valor del atributo type para estos controles de formulario es checkbox. Como se muestra en el ejemplo anterior, el texto que se encuentra al lado de cada checkbox no se puede establecer mediante ningún atributo, por lo que es necesario añadirlo manualmente fuera del control del formulario. El valor del atributo value, junto con el valor del atributo name, es la información que llega alservidor cuando el usuario envía el formulario. Si se quiere mostrar un checkbox seleccionado por defecto, se utiliza el atributo checked. Si el valor del atributo es checked, el checkbox se muestra seleccionado. En cualquier otro caso, el checkbox permanece sin seleccionar. Aunque resulta redundante que el nombre y el valor del atributo sean idénticos, es obligatorio indicarlo de esta forma porque los atributos en XHTML no pueden tener valores vacíos: 7.3.4. Radiobutton Los controles de tipo radiobutton son similares a los controles de tipo checkbox, solo con la diferencia de que este en este tipo de control solo se puede elegir una sola opción de varias, así cuando seleccionas una opción la otra de deselecciona automáticamente. El código necesario para el ejemplo es: El valor del atributo type para estos controles de formulario es radio. El atributo name se emplea para indicar los radiobutton que están relacionados. Por lo tanto, cuando varios radiobutton tienen el mismo valor en su atributo name, el navegador sabe que están relacionados y puede deseleccionar una opción del grupo de radiobutton cuando se seleccione otra opción. 7.3.5. Botón de envío de formulario La mayoría de los formularios cuentan con un botón para envía los datos introducidos por e usuario: El valor del atributo type para este control de formulario es submit. El navegador se encarga de enviar automáticamente los datos cuando el usuario pincha sobre este tipo de botón. El valor del atributo value es el texto que muestra el botón. Si no se establece el atributo value, el navegador muestra el texto predefinido Enviar consulta. 7.3.6. Botón de reseteo del formulario El uso de este es muy reducido actualmente, ya que al seleccionar este botón todos los datos ingresados por el usuario en el formulario se resetean y vuelve a su estado inicial. El código necesario para el ejemplo es: El valor del atributo type para este control de formulario es reset. Cuando el usuario pulsa este botón, el navegador borra toda la información introducida y muestra el formulario en su estado original. Si el formulario no contenía originalmente ningún valor, el botón de reset lo vuelve a mostrar vacío. si el formulario contenía información, el botón reset vuelve a mostrar la misma información original. 7.3.7. Ficheros adjuntos. Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden restricciones por motivos de seguridad. El código necesario para el ejemplo es: Fichero adjunto El valor del atributo type para este control de formulario es file. El navegador se encarga de mostrar un cuadro de texto donde aparece el nombre del archivo seleccionado y un botón que permite navegar por los directorios y archivos del ordenador del usuario. 7.3.8. Campos ocultos Los campos ocultos se emplean para añadir información oculta en el formulario: El código necesario para el ejemplo es: El valor del atributo type para este control de formulario es hidden. Los campos ocultos no se muestran por pantalla, de forma que el usuario desconoce que el formulario los incluye. Normalmente los campos ocultos se utilizan para incluir información que necesita el servidor pero que no es necesario o no es posible que la establezca el usuario. 7.3.9. Botón El valor del atributo type para este control de formulario es button. Si pruebas a pulsar un botón de este tipo, verás que el navegador no hace nada: no envía los datos al servidor y no borra los datos introducidos. Este tipo de botones sólo son útiles si se utilizan junto con el lenguaje de programación JavaScript. Si la página incluye código JavaScript, los botones de este tipo se pueden programar para que realicen cualquier tarea compleja cuando se pulsa sobre ellos. TERCERA PARTE Datos Importantes CAPITULO VIII Otras Etiquetas Importantes 8.1. Comentarios. Al igual que la mayoría de lenguajes de marcado, HTML perite incluir comentarios dentro de su código para añadir información que no se debe mostrar en pantalla. Normalmente, los diseñadores y programadores incluyen comentarios para marcar el comienzo y el final de las secciones de las páginas, para incluir avisos y notas para otros diseñadores o para incluir explicaciones sobre la forma en la que se ha creado el código HTML. La sintaxis de los comentarios es la siguiente: Y asi es como sale la información en pantalla, como podemos ver los comentarios no se ven en pantalla. Los comentarios de HTML pueden ocupar tantas líneas como sea necesario. Sin embargo, los comentarios no se pueden anidar, es decir, no se puede incluir un comentario dentro de otro comentario. 8.2. JavaScript. Sin embargo, algunos navegadores no disponen de soporte completo de JavaScript, otros navegadores permiten bloquearlo parcialmente e incluso algunos usuarios bloquean completamente el uso de JavaScript porque creen que así navegan de forma más segura. En el siguiente ejemplo tenemos las diferencias entre tener el JavaScript activado y deshabilitado. Imagen de www.netvibes.com con JavaScript activado Imagen de www.netvibes.com con JavaScript deshabilitado 8.3. CSS. Algunos de los atributos más utilizados en la creación de páginas web son id, class y style. Los tres atributos están muy relacionados con CSS, sobre todo class y style. El atributo id se emplea para asignar un identificador único a cada elemento de la página, lo que es útil tanto para aplicar estilos CSS a ese elemento como para programar aplicaciones con JavaScript. Por otra parte, el atributo class se emplea para definir la clase CSS que se aplica a un elemento. La clase CSS es el nombre de un conjunto de estilos que se definen en la hoja de estilos y que se quieren aplicar a un elemento: El párrafo del ejemplo anterior se muestra por pantalla con el aspecto definido por el conjunto de estilos llamado resumen y que se define en la hoja de estilos CSS enlazada por la página web. El atributo style se emplea para definir estilos CSS directamente sobre los elementos HTML, tal y como se muestra en el siguiente ejemplo: 8.4. Iframes. Aunque su uso no es muy común, la etiqueta puede ser muy útil en determinadas ocasiones, ya que permite insertar un documento HTML dentro de otro documento HTML. Un iframe puede considerarse como un agujero que se abre en una página web y a través del cual se muestra otra página web. En ocasiones se utiliza para mostrar contenidos externos al sitio web como si fueran parte del mismo sitio. Otra veces se emplea para incluir una aplicación común a varios sitios web de una misma empresa. La página principal de Google Analytics emplea un para incluir en un pequeño recuadro la página correspondiente a la validación de usuario. El siguiente ejemplo define la altura y anchura del iframe, indica la URL que se debe mostrar y mediante el atributo scrolling se indica que el iframe no debe mostrar barras de scroll ni siquiera en el caso de que el contenido mostrado no quepa en el iframe definido: 8.5. Otras etiquetas. El siguiente ejemplo sencillo muestra directamente el nombre, dirección y teléfono de contacto de una empresa: El código necesario para el ejemplo anterior es: CAPITULO IX Accesibilidad El principal objetivo de la accesibilidad web es el de permitir a cualquier usuario, independientemente del tipo de discapacidad que sufra, el acceso a los contenidos del sitio y permitirle la navegación necesaria para realizar las acciones deseadas. Los sitios web accesibles no solamente facilitan el acceso de sus contenidos a los usuarios discapacitados, sino que también permiten ofrecer la misma funcionalidad con dispositivos muy limitados (dispositivos sin pantalla o con pantallas minúsculas, dispositivos sin teclado ni ratón, etc.). Las cuatro principales ventajas de diseñar un sitio web completamente accesible son las siguientes: 1) Los sitios accesibles separan completamente diseño y contenido. 2) Un sitio accesible puede ser accedido por multitud de dispositivos diferentes sin necesidad de reescribir el código HTML. 3) Los sitios accesibles son los únicos con una audiencia potencial global, ya que permiten el acceso a todos los usuarios y a todos los dispositivos. 4) Generalmente, los sitios accesibles son más fáciles de utilizar también para los usuarios sin discapacidades. La creación de sitios accesibles puede realizarse siguiendo las recomendaciones establecidas por el W3C y que se recogen en el documento WCAG (Web Content Accessibility Guidelines) Las recomendaciones del WCAG 1.0 están formadas por 65 requisitos que un sitio web debe cumplir para considerarse accesible. Los requerimientos se agrupan en prioridades. Los requisitos de prioridad 1 son de obligado cumplimiento, los de prioridad 2 son recomendables y los de prioridad 3 son deseables. Si un sitio web cumple con todos los requisitos de prioridad 1, se considera que el sitio es conforme al nivel A de accesibilidad. El nivel AA de accesibilidad está reservado para los sitios que cumplan todos los requisitos de prioridad 1 y prioridad 2. Finalmente, los sitios que cumplen los 65 requisitos, son conformes al nivel AAA de accesibilidad. 9.1. Requisitos del nivel A de accesibilidad Los requisitos de accesibilidad que exige el nivel A son los siguientes: 9.1.1. Generales. Proporcionar un texto alternativo para todas las imágenes, objetos y otros elementos no textuales (mediante los atributos alt y longdesc). Asegurar que toda la información que utilice el color como elemento informativo pueda ser entendida por las personas o dispositivos que no pueden distinguir los colores. Marcar claramente (mediante los atributos lang y xml:lang) las variaciones del idioma del texto o de los elementos textuales () respecto del idioma principal de la página. El documento debe poder leerse completamente cuando no se utilicen hojas de estilos. La información equivalente para los contenidos dinámicos debe adaptarse a los cambios de los contenidos dinámicos. Ningún elemento debe parpadear en la pantalla. El contenido del sitio se debe escribir con un lenguaje sencillo y limpio. 9.1.2. Si se utilizan mapas de imagen. Proporcionar un enlace textual por cada una de las regiones del mapa de imagen. Utilizar mapas de imagen en el cliente, en vez de mapas de imagen de servidor. 9.1.3. Si se utilizan tablas. Utilizar cabeceras de fila y de columna. Si la tabla tiene varios niveles de cabeceras, utilizar las agrupaciones disponibles (, ). 9.1.4. Si se utilizan frames. Indicar un título a cada frame para su identificación y facilitar la navegación. 9.1.5. Si se utilizan applets y scripts Asegurar que la página también se pueda utilizar cuando no se ejecutan los applets y los scripts. Si no es posible, proporcionar informaciones equivalente o páginas alternativas que sean accesibles. 9.1.6. Si se utilizan contenidos multimedia (audio y vídeo) Incluir una descripción textual del contenido multimedia. Para los contenidos basados en vídeo o animaciones, sincronizar las alternativas textuales con la presentación. CUARTA PARTE Revisión de los Contenidos HTML CAPITULO X Validación La validación es el proceso que asegura que un documento escrito en un determinado lenguaje (por ejemplo XHTML) cumple con las normas y restricciones de ese lenguaje. Las normas y restricciones de los documentos escritos en XML (y en sus lenguajes derivados, como XHTML) se definen en el DTD o Document Type Definition ("Definición del Tipo de Documento". El concepto de validación es objeto de controversia en el ámbito del diseño web. Por una parte, la validación no es obligatoria y las páginas web se pueden ver bien sin que sean válidas. Por otra parte, una página válida es más correcta que otra página que no lo sea, ya que cumple con las normas y restricciones impuestas por XHTML. Devido a esta controversia una parte de los diseñadores consideran que se da demasiada importancia a la validación de paginas y la creación de paginas web validas. El resto de diseñadores argumentan que si la especificación de XHTML impone una serie de normas y restricciones, lo más correcto es que las páginas web las cumplan, aunque no sea obligatorio. En cualquier caso, el proceso de validación consiste en probar página a página si su código HTML pasa la prueba de validación. Los validadores son las herramientas que se utilizan para validar cada página. Algunos editores de páginas web incluyen sus propios validadores y el organismo W3C ha creado una herramienta gratuita para la validación de las páginas. 10.1. Validación con Dreamweaver. Si utilizas Dreamweaver para crear las páginas web, el validador se encuentra integrado en la propia herramienta. En primer lugar, accede a la configuración de la herramienta de validación desde la opción En esta ventana de configuración se puede elegir el DTD que se utili