1
Victor Güipe
Nota editorial U
na página web, o página electrónica, página digital, o ciberpágina es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada World Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar acceso a otras páginas web mediante enlaces de hipertexto. Frecuentemente también incluyen otros recursos como pueden ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros. Las páginas web pueden estar almacenadas en un equipo local o en un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).
2
Contenido La WWW (World Wide Web) ...................................................................... 4 El Lenguaje HTML5 ..................................................................................... 5 Historia del HTML5 ...................................................................................... 6 Etiquetas de HTML5 ..................................................................................... 7 El CSS3 ......................................................................................................... 8 JavaScript ...................................................................................................... 9 Sentencias y declaraciones .......................................................................... 10 Pรกginas web Dinรกmicas y Estรกticas ............................................................ 11
3
La WWW (World Wide Web) WWW son las iniciales que identifican a la expresión inglesa World Wide Web, el sistema de documentos de hipertexto que se encuentran enlazados entre sí y a los que se accede por medio de Internet. A través de un software conocido como navegador, los usuarios pueden visualizar diversos sitios web (los cuales contienen texto, imágenes, videos y otros contenidos multimedia) y navegar a través de ellos mediante los hipervínculos. De esta manera, podríamos decir, utilizando una comparación con el sector de las comunicaciones telefónicas, que www es el “prefijo” que tiene todo portal que se encuentre en la mencionada Red al que queremos acceder. Gracias precisamente a Internet, al uso de la www y, por consiguiente, a las diversas páginas web que aquellas presentan los ciudadanos de todo el mundo tenemos la posibilidad de acceder a un sinfín de espacios donde podemos encontrar la información sobre un aspecto que estamos buscando, donde tenemos la oportunidad de entretenernos visualizando imágenes interesantes o incluso donde podemos comunicarnos con personas de cualquier rincón de la geografía de nuestro planeta. En este sentido, y partiendo de los ejemplos expuestos, podemos subrayar que algunas del web que más afluencia de usuarios tienen en todo el mundo son el buscador Google, el portal de vídeos YouTube o redes sociales como Facebook. Merece destacarse que por todo ello Internet y el mundo www se ha convertido en la auténtica revolución e innovación del siglo XX y en eje indiscutible del siglo actual. Y es que ha logrado originar un cambio absoluto no sólo en el ámbito tecnológico sino también social. El funcionamiento de la WWW se da por iniciado cuando un usuario ingresa una dirección (URL) en su navegador o cuando sigue un enlace de hipertexto incluido en una página. El navegador entonces impulsa una serie de comunicaciones para obtener los datos de la página solicitada y, de esta forma, visualizarla.
4
El Lenguaje HTML5 ¿Qué es el HTML5 y para qué sirve? Es la última versión del lenguaje en el que se escriben las páginas Webs y los blogs de Blogger, un lenguaje que sólo con capaces de leer los últimos navegadores, ya que los que son más anticuados hay algunas etiquetas que no son capaces de interpretar. En un blog el uso de HTML5 se realiza principalmente en las plantillas, es decir: nuestra plantilla puede estar escrita en HTML4, o en HTML5, usando la versión 2 ó 3 de CSS. Sirve para integrar contenidos multimedia, flash y para dar un sentido semántico a cada parte del blog o página Web. HTML5 significa HyperText Markup Language, versión 5, ¿qué es esto? Un lenguaje en el que se escriben las páginas Web, que permite hacer enlaces (hipertexto) y que es leído por los navegadores para poder mostrar la información en la pantalla de tu ordenador de una forma correcta. Por ejemplo, el lenguaje HTML5 indica al navegador cuando un texto tiene un enlace y también la dirección URL a la que tiene que dirigirse si se hace click sobre el link. Los lenguajes humanos son algo vivo que evoluciona a lo largo del tiempo y al HTML le pasa lo mismo, según ha ido evolucionando Internet se ha ido modificando. Por ello el HTML5 que es la última fase de desarrollo comparte muchas características con HTML4, pero tiene algunas cosas nuevas de gran importancia. 1. HTML5 es un lenguaje más simple. 2. HTML5 es un lenguaje más semántico. 3. HTML5 es un lenguaje que deja desfasadas a las versiones más antiguas de los navegadores. 4. HTML5 incluye más elementos gráficos y multimedia. 5. HTML5 incluye la geolocalización. 6. HTML5 permite el uso de las Webs offline.
5
Historia del HTML5 Podría decirse que HTML5 nació en 2004, cuando se fundó el grupo de trabajo WHAT con miembros de Apple, la Fundación Mozilla y Opera Software. Dos años después consiguieron uno de sus principales apoyos, pues el W3C (World Wide Web Consortium) decidió abandonar XHTML y comenzó a trabajar con WHAT. 2008 fue un gran año para este lenguaje, pues se finalizó su primera versión. Esto permitió que Firefox 3, el navegador de Mozilla, fuese compatible con HTML5. Más adelante se sumarían Internet Explorer, Google Chrome y Safari. Poco a poco se fueron sumando compañías y se fue abandonando el uso de tecnologías como Flash. De hecho, en septiembre de 2011, 34 de las 100 páginas con más tráfico según el ranking de Alexa utilizaban este lenguaje.
6
Etiquetas de HTML5 Una etiqueta (términos a veces reemplazados por el anglicismo tag) es una marca con clase que delimita una región en los lenguajes basados en XML. También puede referirse a un conjunto de juegos informáticos interactivos que se añade a un elemento de los datos para identificarlo (Oxford English Dictionary). Esto ocurre, por ejemplo, en los archivos MP3 que guardan información sobre una canción, así como sobre el artista que la ha cantado o compuesto. Como ocurre en otros casos, a menudo se emplea la palabra inglesa (tag) a pesar de que «etiqueta» o «baliza» son perfectamente adecuadas. Con la llegada de la World Wide Web ha habido una invasión de tags. La Web se basa en el HTML, o «lenguaje de marcado de hipertexto», que está basado en el uso de etiquetas. Las etiquetas (entre otras muchas cosas) le dicen al programa visualizador de páginas web (o navegador) en qué juego de caracteres está la página, de qué tipo es cada uno de los fragmentos de texto que contiene (por ejemplo, encabezamiento, texto normal, etc.), si están alineados a un lado o centrados, en qué tipo de letra está el texto (cursiva, negrita, etc.), si hay tablas, de qué anchura son etc. Dicho de otro modo: las balizas dan al navegador las instrucciones necesarias para que presente la página en pantalla. Si se observa el código de una página web (sencillamente escogiendo en el menú del navegador «Ver -> Código fuente»), se encontrará con los paréntesis angulares < > (los símbolos "menor que" y "mayor que", que enmarcan habitualmente la etiqueta de apertura o inicio, y </ >, que acotan la etiqueta de cierre o final). Lo que hay entre las etiquetas suele ser el texto que se puede ver directamente en pantalla. Acá algunas: <html>: Representa la raíz de un documento HTML o XHTML. Todos los demás elementos deben ser descendientes de este elemento. <head>: Representa una colección de metadatos acerca del documento, incluyendo enlaces a, o definiciones de, scripts y hojas de estilo. <title>: Define el título del documento, el cual se muestra en la barra de título del navegador o en las pestañas de página. Solamente puede contener texto y cualquier otra etiqueta contenida no será interpretada. <body>: Representa el contenido principal de un documento HTML. Solo hay un elemento <body> en un documento. <h1> a <h6>: Los elementos de cabecera implementan seis niveles de cabeceras de documentos; <h1> es la de mayor y <h6> es la de menor importancia. Un elemento de cabecera describe brevemente el tema de la sección que introduce.
<p>: Define una parte que debe mostrarse como un párrafo. <img src= “fuente de imagen”>: Representa una imagen.
7
El CSS3 El nombre hojas de estilo en cascada viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación. La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "<style>". El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio web, el mismo sitio web puede variar totalmente de estética cambiando solo la CSS, sin tocar para nada los documentos HTML o jsp o asp que lo componen. CSS es un lenguaje utilizado para dar estética a un documento HTML (colores, tamaños de las fuentes, tamaños de elemento, con css podemos establecer diferentes reglas que indicarán como debe presentarse un documento. Podemos indicar propiedades como el color, el tamaño de la letra, el tipo de letra, si es negrita, si es itálica, también se puede dar forma a otras cosas que no sean letras, como colores de fondo de una página, tamaños de un elemento (por ejemplo, el alto y el ancho de una tabla.
8
JavaScript JavaScript (abreviado comúnmente JS) es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, débilmente tipado y dinámico. Se utiliza principalmente en su forma del lado del cliente (clientside), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas, aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo, en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo. JavaScript se diseñó con una sintaxis similar a C, aunque adopta nombres y convenciones del lenguaje de programación Java. Sin embargo, Java y JavaScript tienen semánticas y propósitos diferentes. Todos los navegadores modernos interpretan el código JavaScript integrado en las páginas web. Para interactuar con una página web se provee al lenguaje JavaScript de una implementación del Document Object Model (DOM). Tradicionalmente se venía utilizando en páginas web HTML para realizar operaciones y únicamente en el marco de la aplicación cliente, sin acceso a funciones del servidor. Actualmente es ampliamente utilizado para enviar y recibir información del servidor junto con ayuda de otras tecnologías como AJAX. JavaScript se interpreta en el agente de usuario al mismo tiempo que las sentencias van descargándose junto con el código HTML.
9
Sentencias y declaraciones Control de flujo Block
break
continue
Un bloque de sentencias se utiliza para agrupar cero o más sentencias. El bloque se delimita por un par de llaves.
Finaliza la sentencia actual loop, switch, o label y transfiere el control del programa a la siguiente sentencia de la sentencia finalizada.
Finaliza la ejecucion de las sentencias dentro de la iteracion actual del actual bucle, y continua la ejecucion del bucle con la siguiente iteracion.
Empty
if...else
switch
Una sentencia vacía se utiliza para proveer una "no sentencia", aunque la sintaxis de JavaScript esperaba una.
Ejecuta una sentencia si una condición especificada es true. Si la condición es false, otra sentencia puede ser ejecutada.
Evalua una expresión, igualando el valor de la expresión a una clausula case y ejecuta las sentencias asociadas con dicho case.
throw
try...catch
Lanza una excepción definida por el usuario.
Marca un bloque de sentencias para ser probadas (try) y especifica una respuesta, en caso de que se lance una excepción.
Declaraciones var
let
const
Declara una variable, opcionalmente inicializándola a un valor.
Declara una variable local de ambito de bloque, opcionalmente inicializándola a un valor.
Declara una constante de solo lectura.
function
function*
async function
Declara una función con los parámetros especificados.
Los generadores de funciones permiten escribir iteradores con más facilidad.
Declara una función asíncrona con los parámetros especificados.
Funciones
10
Páginas web Dinámicas y Estáticas Páginas Web Estáticas Son páginas enfocadas principalmente a mostrar información permanente, se crean mediante el lenguaje HTML, que no permite grandes libertades para crear efectos o funcionalidades más allá de los enlaces, pero que haciendo uso de otros recursos se pueden obtener muy buenos resultados llegando a ser páginas muy similares a las dinámicas en cuanto a su visualización se refiere. Esta es una opción más que suficiente para aquellos que simplemente ofrecen una descripción de su empresa, quiénes somos, donde estamos, servicios, etc.… ideal para empresas que no quieren muchas pretensiones con su sitio Web, simplemente informar a sus clientes de sus productos y dar a conocer su perfil de empresa, entre otros. Estas suelen tener un costo mucho menor que las webs dinámicas.
Páginas Web Dinámicas Se construyen haciendo uso de otros lenguajes de programación, siendo el más utilizado de todos el PHP, con lo cual se pueden definir las funciones y características que se deben cumplir de acuerdo a las necesidades. Estas permiten la creación de aplicaciones dentro de la propia Web, ofrecen también una mayor interactividad con los usuarios que la visiten. Otras funcionalidades que se pueden crear mediante las webs dinámicas son las aplicaciones como encuestas y votaciones, foros de soporte, libros de visita, gestor de noticias, entre otros. La creación de una página web dinámica es más compleja, ya que se requiere de conocimientos específicos de lenguajes de programación y gestión de bases de datos. Mediante la creación de una página web dinámica, el cliente o empresa que la solicite recibirá prácticamente 2 páginas en una, ya que por un lado tendrá un panel de administración no visible por los usuarios.
11
Gracias por su Atención. "Esta fue nuestra primera edición de la revista, esperamos haya sido de su agrado como lector, estamos muy contentos de haber compartido con ustedes una información tan importante como lo fue esta, ya que no es un tema del que todas las personas sepan, pero esto en parte ayuda a saber o complementar los conocimientos básicos sobre como estan elaboradas las páginas web, y que el HTML, el CCS y JavaScript son complementos necesarios en este mundo tecnológico. Pronto regresaremos con un nuevo tema en nuestra próxima edición, Saludos."
12