WEB

1) ¿Qué es internet?Es un conjunto descentralizado de redes de comunicación interconectadas formando una red lógica única de alcance mundial.

Internet es un neologismo del inglés que significa red informática descentralizada de alcance global. Se trata de un sistema de redes informáticas interconectadas mediante distintos medios de conexión, que ofrece una gran diversidad de servicios y recursos, como, por ejemplo, el acceso a plataformas digitales.

Como tal, es un anglicismo que se forma por la abreviación del término International Network of Computers, que en español se podría traducir como ‘Red Internacional de Computadoras’, o también como ‘Red de redes’.

Internet y World Wide Web (WWW o web) en ocasiones, ambos términos se utilizan de forma indistinta, aunque técnicamente no tienen el mismo significado. Internet es el medio de transmisión que utiliza la World Wide Web o WWW (en español se suele utilizar el término web). De esta forma, uno de los servicios que Internet permite utilizar es la web, entendida como un conjunto de protocolos que permite el acceso a distancia de archivos de hipertexto.

1.1. Características fundamentales para visualización webCundo se hace una web se tiene que tener en cuenta una serie de características para su correcta visualización en los distintos dispositivos:

Tamaño de pantalla. En función del dispositivo habrá unas más grandes que otras. Se miden en pulgadas y por la diagonal de la pantalla. Hay que saber con qué dispositivo se va a visualizar y cómo quedará en dispositivos más grandes y más pequeños.

Resolución, cantidad de pixel de que está compuesta la matriz de un dispositivo de salida. A más resolución más cosas entran.

Densidad de pixeles es una medida que relaciona el número total de pixeles de un monitor con su tamaño en pulgadas, en la dirección horizontal y en la dirección vertical. Hace que en función de la densidad de las pantallas, las imágenes se vean más grandes o más pequeñas, más nítidas o menos nítidas.

Configuración de color como se muestran los colores en los distintos dispositivos

Configuración del brillo como se muestra el brillo o contenido en gris de un dispositivo

Tipos de letra buscar el estándar para que se vea en la mayor parte de los dispositivos o incrustar las fuentes.

Ancho de banda que no sea muy pesada la página

Idioma uso del idioma, problemas con acentos o “ñ”

Dispositivos de entrada Tienen ratón o son táctiles, etc.,

Accesibilidad personas ciegas o sordas etc.,

La conclusión es que en función del mercado que nosotros vamos a abarcar debemos hacer la web de una u otra forma, teniendo en cuenta, con que navegador se verá, que público, con qué dispositivos, etc., sin olvidar que sea la web lo más accesible para todos los dispositivos y/o opciones que plantean los navegadores.

1.2. Dispositivos/Pantallas para visualizar internetSe puede visualizar una web con muchos dispositivos y en ellos, como ya hemos dicho, se visualizará de distinta manera:

OrdenadorTabletTeléfonoTV…

Para liarlo aún más, cada dispositivo tiene una pantalla distinta y se verá de forma distinta:

Monitor de ordenador sobremesaMonitos de ordenador portátilPantallas móviles/Tablet TV…

1.3. Características de los distintos dispositivos de visualizaciónOrdenador personal: -Gran resolución: no habiendo problemas de espacio

-Gran compatibilidad: dado que existe posibilidad de tener distintos navegadores pudiéndose ver los contenidos que genere, si no es en un navegador será en otro.

-Gran potencia: posibilidad de añadir contenidos complejos, como juegos y demás.-Variedad de navegadores: El tener muchos navegadores hace que tenga que hacer un diseño para cada navegador.

Ordenador portátil: -Resolución media: no habiendo muchos problemas de espacio-Gran compatibilidad: dado que existe posibilidad de tener distintos navegadores pudiéndose ver los contenidos que genere, si no es en un navegador será en otro.

-Gran potencia: suelen tener algo menos de potencia que los de sobremesa aunque también existe la posibilidad de añadir contenidos complejos, como juegos y demás.-Variedad de navegadores: El tener muchos navegadores hace que tenga que hacer un diseño para cada navegador.-Como último apunte para estos dispositivos cabe destacar que estos ordenadores no suelen estar fijos en un sitio y las posibilidades de conectarse a la red suelen ser más limitadas, esto hace que cuando se piensa en contenido para estos dispositivos se hagan más ligeros que para los de sobremesa.

Tablets: -Resolución pequeña: Tamaño de las pantallas-Poca compatibilidad: hay contenido que no se pueden ver (flash). -Potencia media-baja: ojo al meter mucho peso a la página que cree.-Navegadores dependientes del modelo: generando los contenidos en función del modelo de Tablet que quiero que funcione, obligando a hacer muchas pruebas de funcionamiento.

Móvil: -Resolución pequeña: Tamaño de las pantallas muy pequeñas, esto hace que los contenidos ocupen gran parte de la pantalla.-Poca compatibilidad: muy baja compatibilidad

-Potencia baja: ojo al meter mucho peso a la página que cree olvidándome de poner ciertas cosas que pesen mucho.-Navegadores dependientes del modelo: generando los contenidos en función del modelo de móvil que quiero que funcione, obligando a hacer muchas pruebas de funcionamiento.

Con todos estos condicionantes, lo que parece que hay que hacer es una web para cada dispositivo y para cada navegador. Esto no puede ser así, ya que sería una locura. Lo que habrá que hacer es intentar abarcar lo máximo posible de dispositivos y navegadores y generar el contenido, dejando claro los requisitos de compatibilidad al hacer la web.

1.4. ¿Qué es necesario para hacer una web? Cómo se estructura una webPara la visualización de una página web tendremos que tener una serie de carpetas y archivos alojados dentro de un ordenador llamado servidor. Vamos a definir unos términos para comprender mejor la idiosincrasia de las tecnologías para formar una web.

Página web: lo que está mostrando el navegador en ese momento, html más los archivos relacionados.

Página web clásica o estática: es código html que para cambiar el aspecto de la web hay que editar el código y volver a cargarla. (mi página web).

Página web dinámica: Web que coge de una base de datos los elementos que tiene que mostrar (web de un periódico, donde las noticias van cambiando). Esto se hace mediante scripts que son un conjunto de instrucciones escritas en un lenguaje determinado que van incrustadas dentro de una página WEB de modo que se pueda acceder a ellas en el momento en el que se requiera su ejecución.

Sitio web: Conjunto de los todos los archivos html y otros archivos imágenes, audio etc., alojados (puestos) en un mismo lugar, que forman parte de un conjunto de páginas web relacionadas entre sí. Todas las páginas de una misma web forman parte de un sitio web.

Alojamiento o hosting El tener físicamente metidos los archivos y carpetas en un servidor que tiene nuestra web. Hay empresas que alquilan o venden un alojamiento (para dejar archivos y carpetas que forman una web). Realmente lo que se hace es alquilar un espacio en el disco duro de un servidor que va a contener nuestro sitio web

Dominio: lugar donde está determinado sitio web, se hace mediante URL que es la definición única donde está una página web. También hay empresas que alquilan o venden un dominio (dirección de internet .com, .es, .org, etc.). Asociando alojamiento y dominio podré poner en marcha mi página web, para que sea visualizada en internet.

1.5. ¿Dónde se guarda la una web? Servidores Un servidor es un ordenador con un software que recibe peticiones http y devuelve los datos relacionados con esa petición. Un servidor es la parte inteligente que gestiona la entrada y salida de datos del ordenador. Dicho de otra manera, será un ordenador que es visible dentro de una red y que atenderá peticiones de un navegador.

Cuando se instala un servidor controla las llamadas de los clientes que recibe, ocupándose de enviar la información que solicita un navegador. Un servidor puede contener varios sitios web y ha de distinguir entre las diferentes webs cuando se le hace una llamada o petición.

Los servidores tienen su propio lenguaje de programación:PHP (Apache)ASP.net (IIS)JSP (Java)CGI…

Este lenguaje de programación de los servidores no va a aparecer en el navegador, si no que hará lo siguiente:

El servidor recibe la llamada, entenderá la llamada, leerá el código por ejemplo PHP, este generará un texto HTML, y esto será lo que envíe el servidor al navegador.

Estos códigos permiten trabajar dentro del ordenador, o mejor dicho, gestiona el servicio de servidor. Ejemplos: borrar o copiar archivos, permiten generar flujos de audio y video, etc.

1.6. Estructurando un proyecto webAntes de empezar a hacer una web, hay que tener claro que es lo que se va a hacer, dado que, desde nuestra página, podremos mandar a otras o tener distintos enlaces o lo que sea.

Estructura de navegaciónEstructura de las distintas páginas de mi web y cómo van a enlazar entre ellas.

Diseño, wireframeComo han de quedar las distintas páginas. Se puede hacer con otros programas como Illustrator, pero se ha de hacer para poder plantear la web correctamente y estructurar bien los archivos que voy a poner. Se debería hacerse para saber el aspecto que tendrá la web mostrando lo que el diseñador quiere que se vea a lo largo de toda la web.

Estructura de archivosComo voy a montar mi sitio web, o sea, como voy a colocar mis archivos. Conviene que al principio de crear la web se creen las distintas carpetas que se van a tener que usar

Estructura de servidoresSiempre trabajaremos con dos vistas, una local (en mi propio ordenador con lo que voy editando) y otra remota (en el servidor donde está alojado el sitio web)

La estructura de un conjunto de páginas web es muy importante, ya que una buena estructura permitirá al lector visualizar todos los contenidos de una manera fácil y clara, mientras que un conjunto de páginas web con una mala estructura producirá en el lector una sensación de estar perdido, no encontrará rápidamente lo que busca y terminará por abandonar nuestro sitio.

Es importante pensar en la estructura de los contenidos de todo el sitio antes de ponernos a diseñarlo. En este punto tenemos que pensar sobre varias cosas, como las distintas secciones que va a contener el sitio, el árbol de las páginas que vamos a tratar, etc.

La manera de que este punto sea realmente útil, es preparar todas estas ideas sobre

el papel, realizar el wireframe o boceto, que es una representación esquemática de la página web. Con toda la tranquilidad del mundo podemos preparar una serie de diagramas y listados, que nos permitan dirigir nuestros esfuerzos de manera óptima.

Ahora veamos los informes que puedes documentar para realizar la planificación de tu sitio web:

Secciones del sitio: Podremos pensar en qué secciones vamos a poner en el sitio. Una con información general, otra con información de contacto, otra con una visita gráfica a nuestras instalaciones, etc. Tenemos que procurar agrupar las distintas informaciones en páginas y conseguir ofrecer una información completa.

Árbol del sitio: Podemos dibujar en un papel cuáles son las distintas secciones del sitio, metidas dentro de cuadrados y representar también los enlaces que hay entre cada sección, mediante líneas que unen esos cuadrados. Es algo muy simple y divertido de hacer, además podemos tener nuevas ideas para el web a medida que lo vamos dibujando.

Esquema de una página: podemos dibujar en papel también cómo sería una página del sitio que vamos a construir, para decidir dónde colocar la barra de navegación, el logotipo del sitio o la empresa, un posible banner publicitario, etc. Este esquema puede ser también de utilidad a la hora de construir las páginas y siempre es más fácil diseñar sobre el papel que diseñar directamente con el ordenador. (página maestra)

1.6.1. Tipos de estructurasJerárquica: es la típica estructura de árbol, en el que la raíz es la hoja de bienvenida,

esta hoja se puede también sustituir por la hoja de contenido, en la que se exponen las diferentes secciones que contendrá nuestro sitio. La selección de una sección nos conduce asimismo a una lista de subtemas que pueden o no dividirse.Este tipo de organización permite al lector conocer en qué lugar de la estructura se encuentra, además de saber que, con forme se adentra en la estructura obtiene información más específica y que la información más general se encuentra en los niveles superiores.

Lineal: es la más simple de todas, la manera de recorrerla es la misma que si estuviésemos leyendo un libro, de manera que estando en una página, podemos ir a la siguiente página o a la anterior. Esta estructura es muy útil cuando queremos que el lector siga un camino fijo y guiado, además impedimos que se distraiga con enlaces a otras páginas. Por otra parte podemos causar a lector la sensación de estar encerrado si el camino es muy largo o poco interesante. Este tipo de estructura sería válido para tutoriales de aprendizaje o tours de visita guiada.

Lineal con jerarquía: es una mezcla de la dos anteriores, los temas y subtemas están organizados de una forma jerárquica, pero uno puede leer todo el contenido de una forma lineal si se desea. Esto permite tener el contenido organizado jerárquicamente y simultáneamente poder acceder a toda la información de una manera lineal como si estuviésemos leyendo un libro. Esta guía sigue básicamente este tipo de estructura.

Red: es una organización en la que aparentemente no hay ningún orden establecido, las páginas pueden apuntarse unas a otras sin ningún orden aparente. Este tipo de organización es la más libre, pero también es la más peligrosa ya que si no se informa al lector de en dónde se encuentra, puede perderse o puede no encontrar lo que anda buscando o no llegar a ver lo que le queremos mostrar. Por eso es muy recomendable asociar la estructura de las páginas con alguna estructura conocida, como por ejemplo la de una ciudad.

1.7. ¿Dónde está mi web?¿Cómo un ordenador puede recuperar una página web alojada en un servidor? Hay que fijarse en la dirección de la barra del navegador, también llamado URL, que es un archivo único en la red que se utilice. Con ella encontramos la página o archivo concreto que queremos. Una URL está dividida en distintas partes:

Protocolo: indica al ordenador el tipo de contenido que se está solicitando. Ejemplo, http:// corresponde a un paquete de datos, rtmp:// transferencia en streaming, etc.

WWW: indica que va a trabajar con la red (Worl wide web). Existen otras redes, locales o no, que no poseen esta www.

Dominio: nombre único de un sitio web determinado. Ojo puede ser que un mismo dominio se pueda repetir, ya que la extensión puede variar, por ejemplo, en función del país que accedamos, .es, .com, .org, etc.

En este punto ya debería haber encontrado el servidor y este ha de encontrar el alojamiento a mi sitio web.

Ruta de carpetas: Para encontrar un archivo en concreto se ha de tener una ruta de carpetas lógica y bien estructurada, con nombres que definan los contenidos

que van a mostrar. Esto ayudará a los buscadores a encontrar los archivos y carpetas que suba a mi alojamiento.

Archivo: El archivo en concreto que se quiere visualizar

Ejemplo: http://www.adobe.com/product/flash/flash.html

Todo esto es lo que se escribe en la barra de direcciones de un navegador, pero va a servir de poco para encontrar una web. Esta dirección va a ser interpretada de nuevo para encontrar un alojamiento dentro de un ordenador. Como:

IP: Nombre que identifica a un ordenador y de manera única. Cada ordenador conectado a una red va a tener una IP determinada. Lo hace por un código de 4 series de números con 3 cifras cada uno separados por puntos

DNS: funciona parecida a las IP pero hace referencia a los dominios, o sea, cada dominio tiene una DNS propia. Al comprar un dominio se proporcionan las DNS correspondientes a este, que nos servirán para configurar el servidor y poder asociar DNS y dominioCuando se escribe una ruta URL, esta se retraducirá a una DNS, y esta, servirá para va a buscar el servidor que tiene asociado el alojamiento concreto. Un vez dentro del servidor se pondrá a buscar dentro de este la ruta que fue marcada en la URL

1.8.Cómo se comunica la redPara poder comunicarse y entenderse entre los distintos dispositivos de acceso a internet se han creado una serie de protocolos para poder generar la comunicación entre ellos. Evidentemente, en función de lo que deseemos hacer tendremos que utilizar unos u otros:

TCP/IP primer protocolo de comunicación, para comunicar unos ordenadores con otros. Abre un puerto y pasan datos.

FTP protocolo para subir y bajar archivos, sólo archivos.P2P protocolo para las redes compartidas de archivosIRC protocolo para chats SMTP para enviar mails, Hay muchos más…

1.9. NavegadoresSon softwares que permiten la visualización de páginas web, interpretando la información que reciben. Permiten la visualización de documentos de texto, incluso con recursos multimedia incrustados. Además, permiten visitar páginas web y hacer actividades en ella, es decir, enlazar un sitio con otro, imprimir, enviar y recibir correo,

entre otras funcionalidades más. Existen multitud de navegadores en función del medio que se va a utilizar, bien para ordenadores, móviles, tabletas, etc.

Una cosa es hacer y visualizar una página en un ordenador y otra es como queda en los distintos dispositivos que pueden visualizar web. Ojo, todos los navegadores no interpretan de la misma manera, con lo cual, la visualización de lo interpretado no es igual en cada navegador.

1.10. Cómo se muestra la información en un navegador. Cliente servidorTodos los navegadores piden información, reciben la información y muestran la información.

Cuando se hace una llamada a una web, esta no viene toda junta, o sea, el texto, imágenes, vídeo, audio, etc., todo unido, si no que cada uno viene de una parte. Por un lado, se forma la estructura con HTML y luego se irán añadiendo los distintos componentes.

Primero el cliente solicita al servidor una página. A la respuesta que se devuelve por parte del servidor, o sea, los datos que componen la página que se ha pedido, se le denomina HIPERTEXTO. Ese código se devuelve en HTML, o sea, texto.

Una vez que el navegador del cliente lee el HTML puede encontrar que en la página hay imágenes o videos o sonido, etc., entonces hace tantas peticiones al servidor como archivos “extra” tenga la página, A medida que va teniendo todos los archivos o elementos de la página va componiéndola y la va mostrando.Estos HTML y los otros archivos, cuando se estructura una web, se dividirán en carpetas, cada una conteniendo un tipo de archivo y cada una tendrá una ruta propia pudiendo hacer una llamada a ese archivo o componente aparte. Esto también ocurre con los lenguajes como CSS o JavaScript, ya que así tendremos una mejor organización del código.

Por lo tanto, cuando genere una página web voy a trabajar con una estructura de archivos y por otro lado con el código en HTML que compone mi sitio web.

Ojo, los distintos navegadores tratan el código HTML de distinta manera, y puede mostrarse la información de distinta manera en los distintos navegadores. Esto hace que cuando se cree una página haya que probarlo en los distintos navegadores para ver cómo queda.

En una página web hay código mezclado de varias maneras diferentes, el código de la página web, el código del servidor para hacer HTML, interactuaciones con la página, etc.

Lenguajes de cliente: se ocupan de todo lo que suceda en el navegador. Ejemplo:HTML se ocupa de mostrar los contenidos, CSS se ocupa de mostrar el diseñado de una página como distintos tamaños de textos, colocación de elementos, etc., JavaScript se ocupa de interactuaciones con el navegador…

Lenguajes de servidor: están guardados en el servidor y sirven para generar código HTML, o consultar una base de datos, crear o eliminar archivos, etc. Como pueden ser:PHPASP.netJSPColdfusion…

Ambas programaciones son distintas, el lenguaje de servidor genera código HTML a partir de las llamadas que se envían y de los datos almacenados en el servidor. En el lado del cliente utiliza eventos (lo que está haciendo el usuario en un momento determinado) para que desencadene nuevo código, realizando nuevas peticiones al servidor pero que también puede ser procesar datos en el lado del cliente para mostrar otros datos, etc. Lo que sí que hay que tener claro es saber distinguir entre lo que se está ejecutando dentro del lado del cliente en tiempo real y lo que ocurre en el servidor cuando este reciba una llamada y tenga que ejecutar programación.

2. Editores para la creación webUn editor de páginas web es una aplicación diseñada con el fin de facilitar la creación y edición de documentos HTML o XHTML. Su complejidad puede variar desde la de un simple editor de texto plano, entornos WYSIWY, hasta editores WYSIWYM

2.1. Editor de texto sin formatoTambién llamado editor de texto plano. Este tipo de editor suele ser muy sencillo. Dos ejemplos son Notepad o Bloc de Notas (incluido en Windows) y Kate (GNU/Minix). Con cualquiera de los dos bastaría para escribir las líneas de código necesarias para diseñar una página Web.

Existen editores de texto específicamente diseñados para la edición Web, como Kate, que incluyen dentro de su simplicidad coloreado de sintaxis y las etiquetas de marcado usuales necesarias en el lenguaje de hipertexto. Dichos editores incluyen una serie de botones para insertar rápidamente las etiquetas, o combinaciones de estas, más corrientes, salvar el documento con un clic y visionarlo posteriormente en una nueva ventana. el paquete

2.2. Editor de texto con ventanasEs una versión ligeramente más sofisticada que la anterior. Suelen constar de un par de ventanas. Un área de trabajo, donde se teclea el código HTML y el texto que se quiere incluir en la página, y en la otra se visualiza el resultado en tiempo real. En otras palabras, se obtiene una previsualización del documento generado. Lo que significa que no se tiene que guardar el documento, previamente, antes de volver a abrirlo con el navegador para comprobar el resultado.

2.3. Editores WYSIWYGEl término WYSIWYG es el acrónimo de What You See Is What You Get, que traducido al castellano quiere decir: "lo que tú ves es lo que obtienes", en los que de manera visual se pueden colocar distintos elementos sobre una vista previa de la página, encargándose el programa de generar el documento HTML. La manera de trabajar en este tipo de editores, es muy similar a la que se usa cuando se trabaja con un procesador de texto. Esto quiere decir que un usuario no tiene por qué teclear las etiquetas del lenguaje de marcado. En lugar de eso, el usuario escribe el texto, lo formatea, e inserta las imágenes en los lugares deseados, trabajando igual a como lo haría con Writer, (el procesador incluido en la suite ofimática OpenOffice.org),1 o Word. Posteriormente el editor transforma la vista por pantalla en código HTML perfectamente configurado.

Cualquiera de estos editores son una buena alternativa a los editores de texto simple. Los mejores editores HTML señalan las líneas de código mediante distintos tipos de fuente a las usadas en el texto introducido directamente por teclado. Además, proporcionan la posibilidad de volver hacia atrás entre los distintos tipos de vista.

Ejemplos claros de editores de páginas web son Adobe Muse, Mozilla Composer, Amaya, Adobe Dreamweaver o Microsoft Frontpage, entre otros.

2.4. Editores WYSIWYMWYSIWYM es un acrónimo que significa “lo que ves es lo que quieres decir” (en inglés: What You See Is What You Mean). Es un paradigma para la creación de documentos alternativo al modelo (más difundido) WYSIWYG.

En este paradigma, el usuario se encarga de introducir los contenidos de forma estructurada siguiendo su valor semántico, en lugar de indicar su formato de representación final. Por ejemplo, indicando si lo que está escribiendo es un título, una sección, un autor, etc. Para poder utilizar este tipo de editores es necesario conocer, a priori, la estructura del documento que se va a editar. Además, el procesador de texto debe ser capaz de generar el documento en su formato final, coherente con el texto introducido y siguiendo la estructura utilizada.

La principal ventaja de este sistema es que se produce una total separación entre contenido y presentación. Por lo que el usuario sólo debe preocuparse de estructurar y agregar los contenidos, dejando los aspectos visuales a cargo del sistema de exportación. Además, la exportación podrá realizarse en distintos formatos a partir de los mismos contenidos.

2.5. CMSUn sistema de gestión de contenidos (en inglés: Content Management System, más conocido por sus siglas CMS) es un programa informático que permite crear una estructura de soporte (framework) para la creación y administración de contenidos, principalmente en páginas web, por parte de los administradores, editores, participantes y demás usuarios.

Consiste en una interfaz que controla una o varias bases de datos donde se aloja el contenido del sitio web. El sistema permite manejar de manera independiente el contenido y el diseño. Así, es posible manejar el contenido y darle en cualquier momento un diseño distinto al sitio web sin tener que darle formato al contenido de nuevo, además de permitir la fácil y controlada publicación en el sitio a varios editores. Un ejemplo clásico es el de editores que cargan el contenido al sistema y otro de nivel superior (moderador o administrador) que permite que estos contenidos sean visibles a todo el público (los aprueba).

El gestor de contenido es una aplicación informática usada para crear, editar, gestionar y publicar contenido digital multimedia en diversos formatos. El gestor de contenidos genera páginas web dinámicas interactuando con el servidor web para generar la página web bajo petición del usuario, con el formato predefinido y el contenido extraído de la base de datos del servidor.

Esto permite gestionar, bajo un formato estandarizado, la información del servidor, reduciendo el tamaño de las páginas para descarga y reduciendo el costo de gestión del portal con respecto a un sitio web estático, en el que cada cambio de diseño debe ser realizado en todas las páginas web, de la misma forma que cada vez que se agrega contenido tiene que maquetarse una nueva página HTML y subirla al servidor web.

2.5.1. Ventajas y oportunidadesEl gestor de contenidos facilita el acceso a la publicación de contenidos a un rango mayor de usuarios. Permite que sin conocimientos de programación ni maquetación cualquier usuario pueda añadir contenido en el portal web.

Además, permite la gestión dinámica de usuarios y permisos, la colaboración de varios usuarios en el mismo trabajo, la interacción mediante herramientas de comunicación.

Los costes de gestión de la información son mucho menores ya que se elimina un eslabón de la cadena de publicación, el maquetador. La maquetación es hecha al inicio

del proceso de implantación del gestor de contenidos.

La actualización, backup y reestructuración del portal son mucho más sencillas al tener todos los datos vitales del portal, los contenidos, en una base de datos estructurada en el servidor.

Algunos ejemplos de CMS son Wordpress Joomla, Drupal, wix, etc.

3. HTML

HTML es una implementación del estándar SGML (Standard Generalized Markup Language), estándar internacional para la definición de texto electrónico independiente de dispositivos, sistemas y aplicaciones. Proporciona un medio de codificar documentos, hipertexto, cuyo destino sea el intercambio directo entre sistemas o aplicaciones. Las siglas HTML son las iniciales de la expresión en inglés Hyper Text Markup Language. Traducido al castellano sería Lenguaje de Etiquetas de Hipertexto.

Dicho de una manera más simple HTML es un lenguaje de programación basado en etiquetas. Recordar que el HTML es sólo texto y las imágenes o archivos que muestra una página, no están incrustadas dentro de la misma, si no que mediante una etiqueta se hará referencia a donde se ha guardado ese archivo en concreto. Esto quiere decir, que el HTML es un conjunto de etiquetas que se van a ir intercalando entre el texto, de forma que los programas que utilizamos para navegar por la Red, sepan qué es lo que tienen que mostrar cuando accedemos a una página y cómo deben presentarlo en la pantalla.

El código está formado por etiquetas para organizar los contenidos de manera que queden bien estructurados, en los cuales se pueden meter unos contenidos dentro de otros y se puedan organizar listas de datos. Los nombres de las etiquetas hacen referencia a lo que van a contener, se hace con el nombre o acrónimo en inglés.

Etiquetas: Una palabra encerrada entre los signos “<” y “>”. Cada etiqueta se abre y se cierra. Para abrir la etiqueta se empieza con el símbolo de “<” a continuación la palabra que le da sentido a la etiqueta, o sea, el contenido de la misma, y por último el símbolo “>”. Para cerrarla se repetirá esta fórmula, pero en el símbolo final “>” se le acompañará con una “/”. Ejemplo:

<b>Esto va en negrita</b> lo veremos así: Esto va en negrita

Dentro de una etiqueta se puede meter más etiquetas que definen más cosas. Ejemplo:

<html> <head> <meta charset="utf-8"> <title>Documento sin título</title> </head> <body> <b>Esto va en negrita</b> </body></html>

Dada la constante evolución de Internet, el lenguaje HTML ha ido igualmente evolucionando de forma rápida e incorporando especificaciones a través de las sucesivas versiones del mismo.

Existe un organismo internacional independiente (W3C) que se encarga de ir fijando cuales son las etiquetas válidas pero, a pesar de ello, la batalla comercial que se ha desarrollado en torno a los navegadores para Internet ha originado situaciones en las que han aparecido etiquetas propietarias de un determinado programa. Llamamos

etiquetas propietarias a aquellas que sólo son interpretadas correctamente por un navegador, mientras que el resto de los navegadores las ignora.

3.1. Estructura básica del HTMLTodas las páginas web se estructuran de la misma manera. Para entender cómo se estructura un HTML lo haremos con un ejemplo:

1 <!doctype html>2 <html>3 <head>4 <meta charset="utf-8">5 <title>Documento sin título</title>6 </head>7 8 <body>9 </body>10 </html>

Línea 1: será el tipo de documento HTML. Hay distintas versiones de HTML y la primera línea la lee el navegador para saber que versión es y cómo comportarse ante ella.

Línea 2: para saber el tipo de página que es, en nuestro caso etiqueta <html>, página html. Muestra el contenido que se va a mostrar en el navegador, parte visible y no visible.

Línea 10: cierra la etiqueta </html>, o sea, la página html.

De línea 3 a línea 6: compuesto por la etiqueta <head>, también llamado “cabecero” o “cabeza”. Que contendrá la parte no visible de la página web define las características de la página, ejemplo: el título de la página, codificación del texto, palabras claves para que los buscadores encuentren la página, etc.

De línea 8 a línea 9: Compuesto por la etiqueta <body>, también llamado “cuerpo”. Contendrá la parte visible de la página web contendrá los contenidos de la página web, donde podemos meter el texto, las imágenes, etc.

3.2. Qué se puede añadir en el HTMLRecordaremos que el lenguaje HTML es solo texto y que imágenes, audio y demás contenidos, se adjuntan en forma de enlace dentro del código. Partiendo de esta base hemos de pensar que en cualquier página web no sólo hay lenguaje HTML, también hay distintos lenguajes de programación como estilos como CSS o como JavaScript.

CSS: sirve para dar aspecto, para modificar el diseño de nuestras páginas, afectan tanto al texto como a las etiquetas contenedores de información. Permite separar los contenidos (etiqueta <bodoy>) de la visualización (etiqueta <head>), esto hace que sea fácilmente editable los controles de visualización de un contenido.

JavaScript: Permite poner comportamientos a un elemento cualquiera, esto es, que cuando interactúes con un elemento (pasar el ratón por encima, clicar en un elemento, etc.) ocurra algo.

Dependiendo de la versión de HTML que utilicemos estos contenidos CSS y JavaScript, van a venir dentro del código HTML o bien en archivos externos asociados a este HTML. Esta última forma se hace mediante referencias dentro de la etiqueta head al archivo asociado.

3.2.1. Que son los estilos CSSCuando se empezó a construir internet, se diseñó para generar listas de elementos sin grandes alardes de diseño. Cuando fue creciendo, poco a poco, el diseño de las páginas fue cada vez más complejo, y cuando se iban a revisar las páginas dentro del código, era muy difícil encontrar donde estaba cada elemento y así se pensó en separar por un lado los contenidos y por otro el diseño, naciendo así el CSS

El lenguaje CSS se ocupa de definir cómo se van a ver los distintos elementos de una página. Si una página está bien estructurada y posee CSS bien definidos, al modificarlos se cambiará el diseño de la página, o sea, con ellos podemos modificar la estructura de la página, así como sus atributos, sin modificar el contenido. El lenguaje CSS vale tanto para páginas pequeñas como páginas grandes.

Cada etiqueta DIV que tienen una página web tiene una regla CSS propia. Una vez que entras en el archivo asociado al estilo CSS y vemos como se estructura encontraremos una serie de reglas. Cada una de estilo empezará una # o un punto o nada afectará a un elemento u otro. Después de esto vendrá el nombre de la etiqueta DIV que va a afectar y a continuación el continente del estilo mediante paréntesis { } Lo que hay dentro de las llaves es un listado que modificará a un elemento en concreto. Ejemplo:

#apDiv1 {position: absolute;left: 394px;top: 454px;width: 287px;height: 74px;z-index: 4;text-align: center;font-family: Arial, Helvetica, sans-serif;font-weight: bold;font-size: 22px;color: #00F;

}3.2.2. Que es el JavaScript

JavaScript es el lenguaje que se añade al HTML y sirve para añadir interactividad compleja a este. Se basa en funciones y eventos

Funciones: grupos o agrupaciones de código. Se generan con la palabra function más el nombre de dicha función, entre paréntesis parámetros para que actúe de diferentes maneras y entre corchetes se agrupa todo el código que ha de ejecutarse cuando se llama a esa función.

Eventos: Cuando se quiere que se ejecute una función. Las funciones se ejecutan gracias a los eventos

Para llevar a cabo un JavaScript se aplica al DIV una función. Esta explica que comportamiento tiene que tener el elemento que se le ha aplicado el JavaScript.

function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}.Funcion

es

.

.function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }...onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','ALIMT068.JPG',1)"><img src="AGRI076J.JPG" alt="prueba" width="1098" height="732" id="Image1"></a>

3.3. El PHPEl PHP es un lenguaje de servidor, que sirve para introducir de manera dinámica contenidos distintos a un listado.

Si tuviéramos que añadir contenidos, por ejemplo, noticias, en una web y lo tuviéramos que hacer con HTML sería muy tedioso, ya que tendríamos que modificar el código continuamente. Para generar esto de manera automática están los lenguajes de servidor, que lo que hacen es hacer una petición al servidor y este genera un HTML a partir de dicha petición mediante la configuración que tiene.

Para funcionar con PHP lo que se hace es hacer una base de datos con los distintos listados que se necesiten y se van añadiendo a este, nuevos contenidos. Una vez que se le hace una petición de esa lista lo que hace PHP es que recupera los datos de la petición y mediante un bloque de código les da formato. Esto se hace de manera automática. De esta manera no hay que generar un nuevo HTML para cada registro nuevo.

Para poder añadir contenido PHP primero hay que tener un sitio web en un servidor en alguna parte (se puede hacer que el propio ordenador sea un servidor mediante APACHE y así generar un sitio web)

Para hacer que un HTML metamos PHP hay que hacerlo mediante la etiqueta:

<?php ...?>

Todo lo que esté entre esos dos símbolos será código interpretado como PHP. Cuando se haga una llamada a una página que tenga estas etiquetas el servidor las leerá, hará una interpretación y las ejecutará en código HTML

3.4. HTML5 semánticoCuando miras el código de una web deberías poder ver la estructura ordenada de una manera lógica, y de un solo vistazo deberías saber lo que está mostrando. Esto no ocurría con las anteriores versiones de HTML, ya que la forma de estructurar el código

Eventos

no era tan organizada como en la de HTML5.

El HTML5 busca estructurar el contenido de las páginas web de una manera lógica, para que sea más fácil identificar y encontrar los contenidos. El resultado va a ser que voy a tener muchas etiquetas, que voy a poder ver en pantalla y que gracias a los CSS

voy a poder ordenar. He aquí unos ejemplos de etiquetas:

Trabajando así, se crearán webs más intuitivas, más fáciles de encontrar para los buscadores y con mayor facilidad para reescribirlas o modificarlas.

3.4.1. Lenguajes semánticosSegún se van añadiendo contenidos HTML tendremos un código cada vez más complejo y menos estructurado. Al utilizar etiquetas, los contenidos se mostrarán seguidos unos detrás otros, pero en realidad no me dan información sobre nada que tenga que ver con ellos, además utilizando posteriormente CSS los contenidos pueden aparecer en sitios que no tienen nada que ver con su colocación dentro del código HTML.

Por otra parte, vamos a tener diferentes user-agents, diferentes sitios, donde se van a ver nuestras páginas y que traten los contenidos de maneras muy diversas, por ejemplo, un lector de pantalla, va a entender los contenidos de una manera distinta a como lo hace un navegador.

Por todo esto, es conveniente estructurar los contenidos HTML de una manera semántica. HTML5 añade una serie de etiquetas que guardan información sobre qué parte del HTML es la que está contenido dentro de ellas.

Las etiquetas semánticas de estructura de lo que es la página web, van a ser:

Cabecera <header>La cabecera es la parte superior página y su contenido no es visible en la ventana del navegador. En ella aparecerán cosas como el rótulo, lema para la página, logotipo. Generalmente se repetirá a lo largo de nuestro sitio web.

Dentro del header nos encontraremos con partes de navegación, enlaces para navegar a lo largo de nuestra página. Pueden ser menús o listados de enlaces. Aparecerá con la etiqueta <nav> y podrá aparecer también en otras zonas de la página que no sea el header.

FooterEs la parte inferior de la página y aquí tendremos información que no es tan importante, pero que está bien que aparezca, como por ejemplo el copyright, los

Cabecero

Botones para navegar Tipos de

contenidos y

Contenidos laterales de la página

Pie de la página

enlaces de legal, de contacto, etc.

AsideBarras laterales en las que suelen aparecer barras de navegación, banners, etc., que contienen información para tareas secundarias.

SectionGuardará los contenidos reales de la página. Puede haber distintos tipos de contenidos y, por tanto, puede haber varias secciones y dentro de cada una, puede haber artículos distintos.

Esta es la estructura semántica básica de una página HTML, si la ponemos en forma de código quedaría:

<!doctype html><html><head>

<meta charset="utf-8"><title> Lenguaje semántico HTML </title>

</head><body>

<header><nav></nav>

</header><aside>

<nav></nav></aside><section><article> Practicar escribiendo aquí </article>

<article></article></section><footer></footer>

</body></html>

Bibliografía

https://www.video2brain.comhttp://educalab.es/http://www.ite.educacion.es/http://www.deusto.es/https://www.wikipedia.orghttp://www.significados.com