HTML5, CSS3 y JavaScript

Page 1

HTML 5: CONOCE SU HISTORIA, ETIQUETAS Y ESTANDARES ACTUALES

El futuro de las páginas web y de los navegadores.

Html CSS 3 JavaScript Páginas web y dinámicas ¿Qué Tan imprescindible es JavaScript en las web dinámicas? Historia, Elementos y REALIZADO POR Luisana Leon Sentencias El futuro de las páginas web y de los navegador

20633045

REPORTAJE ESPECIAL: PRINCIPALES TENDENCIAS PARA LA TECNOLOGÍA WEB Y MÓVIL EN 2018


NOTA EDITORIAL Internet es una red enorme formada por redes de computadoras más pequeñas. ¡Tú estás en Internet ahora mismo! Cuando visitas un sitio web de noticias, vídeos, redes sociales, correo electrónico estás en un mundo creado de la imaginación que al emplearse con distintas herramientas se puede visualizar todo lo que este contiene como lo es HTML y algunas otras que veremos en esta edición

CONTENIDO


CONTENIDO La edi WWW. Nota torial  El LaLenguaje WWW. HTML5 (Historia, Etiquetas y Estándares Actuales).  CSS3. El Lenguaje HTML5 (Historia, Etiquetas y Estándares Actuales). Lenguaje JavaScript (Historia, Elementos y Sentencias).  CSS3 Páginas Web Dinámicas y Estáticas.  Lenguaje JavaScript (Historia, Elementos y Sentencias). El futuro de las páginas web y de los navegadores.  Páginas Web Dinámicas y Estáticas.  El futuro de las páginas web y de los navegadores.  Reportaje especial


WWW LaLA WWW Es un sistema de hipertexto que utiliza Internet como su mecanismo de transporte o desde otro punto de vista, una forma gráfica de explorar Internet.

La web fue creada en 1989 en un instituto de investigación de Suiza, la web se basa en buscadores y el protocolo de transporte de hipertexto (hypertext transport protocol (http)). La mayoría de los documentos de la web se crean utilizando lenguaje HTML (hypertext markup language).


HTML5 es un lenguaje markup (de hecho, las siglas de HTML significan Hyper Text Markup Language) usado para estructurar y presentar el contenido para la web. Es uno de los aspectos fundamentales para el funcionamiento de los sitios, pero no es el primero. Es de hecho la quinta revisión del estándar que fue creado en 1990

No solamente Google con su navegador Chrome, hace unos años, sino también Adobe hace unos meses, que removió el soporte de Flash para A fines del año pasado, la W3C la recomendó para

Android para dar paso a la llegada de HTML5.

transformarse en el estándar a ser usado en el desarrollo de proyectos venideros. Por así decirlo, qué es HTML5 está relacionado también con la entrada en decadencia del viejo estándar HTML 4, que se combinaba con otros lenguajes para producir los sitios que podemos ver hoy en día. Con HTML5,

tenemos

otras

posibilidades

para

explotar usando menos recursos. Con HTML5, también entra en desuso el formato XHTML, dado que ya no sería necesaria su implementación.

HTML4 fue “declarado” el lenguaje oficial de la web en el año 2000, y tomó una década para comenzar a implementar el desarrollo de su nueva revisión. Esta nueva generación de HTML, se dice, pronto dominará el desarrollo en internet, pero introduce algunos cambios importantes que veremos dentro de

algunas

desarrolladores

líneas. de

Por

sitios

ende, web

es

para

los

importante

conocer las ventajas de HTML5, considerando que algunas entidades se están moviendo en esta dirección.

Volviendo a qué es HTML5. Se trata de un sistema para formatear el layout de nuestras páginas, así como hacer algunos ajustes a su aspecto. Con HTML5, los navegadores como Firefox, Chrome, Explorer, Safari y más pueden saber cómo mostrar una determinada página web, saber dónde están los elementos, dónde poner las imágenes, dónde ubicar el texto


El lenguaje HTML funciona a través de marcas de sentido llamadas etiquetas. Las etiquetas son la herramienta fundamental para que los navegadores puedan interpretar el código y permitirnos ver imágenes, texto, párrafo, y estructuras. Los navegadores vendrían a ser como “traductores” de las etiquetas, y con HTML5, se agregan nuevas etiquetas para utilizar que nos ahorran el uso de otros productos que se usaban para complementar y hacer cosas que con el simple HTML no se podían hacer. HTML5 fue creado para hacer que el proceso de escribir el código sea más simple y más lógico, por decirlo de una forma. La sintaxis de HTML5 se destaca, como dijimos, en el ámbito multimedia, pero son bastantes las etiquetas introducidas para generar una mejoría.

La idea detrás de HTML5 es que podamos visualizar el contenido multimedia variado que podemos encontrar en internet aun cuando nos encontramos en dispositivos de gama baja que no podrían soportarlo cuando tienen que instalar infinidad de plug-ins. No solamente contamos con etiquetas especiales como audio, video y canvas, sino también integración con contenidos de gráficos en vectores (que anteriormente se conocía como la etiqueta object. Con estas etiquetas, los usuarios pueden consumir videos y canciones, por ejemplo, sin necesidad de instalar nada de forma adicional.


O

frece una nueva forma de añadir elementos de vídeo a su página Web sin necesidad

de un complemento, como sucede en muchos navegadores actuales. El principal objetivo de HTML5 y de sus estándares relacionados es proporcionar un conjunto de potentes instrumentos para desarrollar aplicaciones y páginas Web con las que interactuar. Por ejemplo, incluye un lienzo para dibujar en dos dimensiones, una función para delimitar la ubicación geográfica de los visitantes y una técnica para que las páginas interactivas funcionen sin conexión.


CSS es un lenguaje (no un lenguaje de programación) utilizado para especificar el aspecto de una página web para diferentes dispositivos. Esto entra en contraste con HTML que es un lenguaje que define la estructura de un documento para su distribución por la web. El HTML le dice al navegador como se estructura el documento mientras que el CSS le dice como debe renderizarlo. CSS3 añade muchas capacidades nuevas a la especificación anterior. Aunque aún está en proceso de estandarizado y le queda un largo camino por recorrer, ya se ha hecho un hueco al lado de HTML5 y supone uno de los mayores adelantos en el diseño web actual.


A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con módems a una velocidad máxima de 28.8 kbps. En esa época, empezaban a desarrollarse las primeras aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios complejos. Con unas aplicaciones web cada vez más complejas y una velocidad de navegación tan lenta, surgió la necesidad de un lenguaje de programación que se ejecutara en el navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le hacía esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los errores existentes. Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar este problema adaptando otras tecnologías existentes (como ScriptEase) al navegador Netscape Navigator 2.0, que iba a lanzarse en 1995. Inicialmente, Eich denominó a su lenguaje LiveScript. Posteriormente, Netscape firmó una alianza con Sun Microsystems para el desarrollo del nuevo lenguaje de programación. Además, justo antes del lanzamiento Netscape decidió cambiar el nombre por el de JavaScript. La razón del cambio de nombre fue exclusivamente por marketing, ya que Java era la palabra de moda en el mundo informático y de Internet de la época. La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0 ya incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo, Microsoft lanzó JScript con su navegador Internet Explorer 3. JScript era una copia de JavaScript al que le cambiaron el nombre para evitar problemas legales. Para evitar una guerra de tecnologías, Netscape decidió que lo mejor sería estandarizar el lenguaje JavaScript. De esta forma, en 1997 se envió la especificación JavaScript 1.1 al organismo ECMA (European Computer Manufacturers Association). ECMA creó el comité TC39 con el objetivo de "estandarizar de un lenguaje de script multiplataforma e independiente de cualquier empresa". El primer estándar que creó el comité TC39 se denominó ECMA262, en el que se definió por primera vez el lenguaje ECMAScript. Por este motivo, algunos programadores prefieren la denominación ECMAScript para referirse al lenguaje JavaScript. De hecho, JavaScript no es más que la implementación que realizó la empresa Netscape del estándar ECMAScript. La organización internacional para la estandarización (ISO) adoptó el estándar ECMA-262 a través de su comisión IEC, dando lugar al estándar ISO/IEC-16262.


El lenguaje JavaScript utiliza una sintaxis parecida a la de C y admite construcciones estructuradas, como if...else, for y do...wh ile. Se utilizan llaves ({}) para delimitar los bloques de instrucciones. El lenguaje admite varios tipos de datos, como String, Number, Bool ean, Object y Array. Admit e las características de fecha mejoradas, las funciones trigonométricas y las expresiones regulares. JavaScript usa prototipos en vez de clases. Puede definir un objeto creando una función constructora. JavaScript es un lenguaje con establecimiento flexible de tipos. Esto quiere decir que no se declaran explícitamente los tipos de datos de las variables. En muchos casos, JavaScript realiza las conversiones automáticamente cuando es necesario. Por ejemplo, si agrega un número a un elemento que consiste en texto (una cadena), el número se convierte a texto.

Control de flujo Block

break

Un bloque de sentencias se utiliza para agrupar cero o mas 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.

continue Finaliza la ejecución de las sentencias dentro de la iteración actual del actual bucle, y continua la ejecución del bucle con la siguiente iteración. Empty

if...else

switch

throw

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.

Evalúa una expresión, igualando el valor de la expresión a una clausula case y ejecuta las sentencias asociadas con dicho case.

Lanza una excepción definida por el usuario.

try...catch Marca un bloque de sentencias para ser probadas (try) y especifica una respuesta, en caso de que se lance una excepción.

Las aplicaciones JavaScript se componen de sentencias con una sintaxis propia. Una sentencia puede estar formada por múltiples líneas. Puede haber varias sentencias en una sola línea si separamos cada una de las sentencias por un punto y coma. No es una palabra clave, sino un grupo de palabras clave


Las páginas dinámicas permiten el completo dominio y control de una web, incluidos los contenidos e información que aparecen allí.

Beneficios: Una vez desarrolladas, el control de los contenidos y la información de estas páginas queda a cargo del webmaster del cliente. Una vez que esa transferencia se concreta, el cliente puede hacer cambios que necesite en el contenido gráfico y textual del sitio (aunque no en la estructura).

Los sitios dinámicos requieren de bases de datos -donde se almacena la informacióny de lenguajes de programación -para el desarrollo de accesos a los datos y su distribución en la Web.

Limitantes: Por ser un sitio web con características más complejas, el tiempo en el proceso, desarrollo y diseño es mayor. La implementación del gestor de contenidos, panel de administración asociado, y el equipo involucrado requieren de un mayor nivel de preparación.

Proceso de web dinámica A. El navegador web solicita la página dinámica. B. El servidor web localiza la página y la envía al servidor de aplicaciones. C. El servidor de aplicaciones busca instrucciones en la página y la termina. D. El servidor de aplicaciones pasa la página terminada al servidor web. E. El servidor web envía la página finalizada al navegador solicitante.

Cuando un servidor Web recibe una petición para mostrar una página Web estática, el servidor la envía directamente al navegador que la solicita. Cuando el servidor Web recibe una petición para mostrar una página dinámica, sin embargo, reacciona de distinta forma: transfiere la página a un software especial encargado de finalizar la página. Este software especial se denomina servidor de aplicaciones.

El servidor de aplicaciones lee el código de la página, finaliza la página en función de las instrucciones del código y elimina el código de la página. El resultado es una página estática que el servidor de aplicaciones devuelve al servidor Web, que a su vez la envía al navegador solicitante. Lo único que el navegador recibe cuando llega la página es código HTML puro. A continuación, se incluye una vista de este proceso:


Las páginas estáticas son una forma sencilla de publicitar un negocio en internet. No requieren bases de datos ni lenguajes de programación. Las páginas estáticas contienen información que no necesitan una actualización constante, o que rara vez la necesitan. Para modificar cualquier tipo de contenido en una web estática, el cliente necesita ponerse en contacto con la firma que desarrolló la página para hacer esos cambios, un servicio adicional que normalmente se añade al costo inicial de desarrollo de este sitio.

Beneficios: Son páginas sencillas y económicas. Pueden contener texto, gráficos y fotografías. El desarrollo conlleva un corto espacio de tiempo.

Limitantes: Cualquier tipo de modificación posterior a su desarrollo deberá ser realizada por nuestro equipo o un staff con conocimientos, equipo y software especializado. Supone un costo adicional.

Estas páginas son muy recomendadas para profesionales, productos, servicios que no requieren generar nuevo contenido y no necesita meterse con la estructura del sitio web.


Futuro de las paginas web y navegadores Todo el mundo está familiarizado con Firefox, Chrome, Safari e Internet Explorer – navegadores “tradicionales” con barras de direcciones, funcionalidad de búsqueda y botones para saltar hacia delante y hacia atrás. Pero no son los únicos navegadores que usamos todos los días. Estamos gastando cantidades crecientes de tiempo dentro de las aplicaciones de mensajería y redes sociales, que son envoltorios para la web móvil. En realidad son navegadores.


Reportaje Especial La tecnología es un activo poderoso en el tiempo de hoy. Está cambiando mucho nuestra vida por buenas razones y nos hace sentir muy cómodos. La vida no puede ser imaginada sin tecnología. Hay dos tecnologías destacadas que crecen rápidamente y ofrecen una serie de beneficios: tecnología móvil y tecnología web. Vamos a discutir algunas tendencias futuras para ambas industrias. 1. Inteligencia Artificial:es una tecnología que ha creado mucho bullicio hoy y nos facilita la vida de muchas maneras. Todos estamos familiarizados con la inteligencia artificial, ya que ha visto el asistente de voz en su teléfono inteligente o ha tomado la sugerencia de un producto perfecto mientras compra en línea. No es más que un software que reúne datos, los analiza y responde de forma inteligente como lo hace un cerebro humano. 2. Realidad virtual:Un juego muy famoso de 2016: Pokémon go, que se hizo muy popular debido a la realidad virtual. Mucha gente lo ha optimizado para desarrollar aplicaciones web, sitios web y aplicaciones móviles. Esta tecnología ha sido una tendencia en 2017 y definitivamente va a dar forma al desarrollo web y de aplicaciones en 2018 también. 3. BlockchainEs una tecnología descentralizada que se utiliza para administrar la base de datos que registra la transacción digital. Para transferir cualquier propiedad digital de manera segura, se usa blockchain.

4. Sistemas de CRM:La computación en la nube le ha dado una nueva forma al sistema empresarial moderno al proporcionar bases de datos, seguridad, servidores, almacenamiento, software, análisis de redes y mucho más. Los sistemas CRM (Customer Relationship Management) ahora están basados en la nube. Las organizaciones están tomando los CRM más en serio para mejorar su entorno de trabajosoftware que reúne datos, los analiza y responde de forma inteligente como lo hace un cerebro humano.


Avance de la próxima edición

¿UN ENTORNO PARA PAGINAS WEB? CONOCE LO QUE TRAE ADOBE


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.