Revista Digital - HTML5, CSS3 y JavaScript

Page 1


o World Wide Web, es conocida como una red de alcance mundial, que consiste en un complejo sistema de hipertextos e hipermedios interconectados entre sí y a los que puede tenerse acceso mediante una conexión a Internet y un conjunto de software especializado.

“Comúnmente referida como “la Web” o “la Red”, se desarrolló entre 1889 y 1990, por los científicos de CERN (Organización Europea para la Investigación Nuclear) en Ginebra, Suiza, y fue publicada en 1993. Desde entonces, este nuevo espacio virtual ha crecido y se ha multiplicado hasta convertirse en el principal medio de consulta de información digital y de telecomunicaciones del mundo contemporáneo.”


HTML5 es el principal lenguaje de la web. Es uno de los primeros lenguajes que debes dominar si deseas dedicarte al diseño y desarrollo web.

Pero… ¿por qué es tan importante? ¿cuál es el alcance de este popular lenguaje? Estas y otras preguntas serán respondidas, comenzaremos explicando qué es el lenguaje HTML5 y por qué es tan importante en la actualidad.


HTML5 (HyperText Markup Language) es la quinta revisión del lenguaje de marcado estándar que se emplea para la web. Es uno de los lenguajes de marcado más usados en todo el mundo y la razón es bastante obvia: gracias a HTML5 podemos crear la estructura de una página web. Texto, imágenes y material multimedia pueden mostrarse correctamente gracias a HTML5.


Como ya habíamos mencionado anteriormente, el lenguaje HTML5 se usa para definir la estructura básica de una página web. Sin embargo, una de sus más grandes adiciones en esta nueva versión es poder añadir audio y video sin necesidad de usar Flash u otro reproductor multimedia.

Ya sabiendo un poco mas sobre HTML5 pero


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.


HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer>.


CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XM.

Pero realmente ¿Qué es CSS3? CSS3 es una tecnología que ha tenido una evolución en el tiempo, que actualmente se encuentra en su versión 3, como su propio nombre indica. CSS ha ido evolucionando desde hace 25 años a la versión actual, que es CSS3, pero su función es la misma, sirve para dar estilos visuales a las páginas web.


Sus siglas corresponden a “Cascading Style Sheets”, que tiene el siguiente significado: • Cascading, que significa que los estilos que aplicamos a los elementos de una página web se propagan a los elementos que contiene, se propagan en cascada. • Style, porque mediante CSS lo que hacemos es aplicar estilos visuales a los distintos elementos de nuestra página web.

• Sheets, que significa hojas, porque los estilos de una página web se añaden en ficheros aparte, en ficheros con la extensión .css de manera general.


JavaScript es un lenguaje de programación que permite a los desarrolladores crear acciones en sus páginas web.

Pero… ¿es JavaScript solo una adición mas a las creación de paginas web? En respuesta podemos decir que ¡NO! JavaScript es un lenguaje de programación que te permite crear contenido nuevo y dinámico, controlar archivos de multimedia, crear imágenes animadas y muchas otras cosas más. Se puede decir que es la tercera capa del pastel de los estándares en las tecnologías para la web, dos de las cuales son (HTML y CSS)


La historia del lenguaje JavaScript empieza durante la década de los años 90, se vivió un verdadero boom tecnológico, el Internet cobró un protagonismo mayor a nivel mundial y la humanidad inició formalmente su relación con las computadoras. Comenzaron a desarrollarse las primeras aplicaciones web y las páginas web empezaron a incorporar elementos adicionales a su arquitectura, como por ejemplo, formularios complejos.

El surgimiento de aplicaciones web más sofisticadas acompañadas de una velocidad para navegar bastante lenta (28.8 kbps.) originó la necesidad de concebir un lenguaje de programación que se ejecutara en el mismo navegador, con el objetivo de optimizar el tiempo de navegación de los usuarios.


Fue entonces que la idea del JavaScript empezó a invadir la cabeza del conocido programador Brendan Eich, empleado de Netscape, una sólida empresa estadounidense de software, que por aquellos momentos estaba por lanzar el navegador Netscape Navigator 2.0. A la sazón, Brendan pensó que la mejor solución para los problemas tecnológicos que se tenían, era la mezcla de varias tecnologías existentes con dicho navegador. Y fue así que antes de 1995, el brillante programador produjo su innovadora creación, un lenguaje que denominó LiveScript, el cual cambiaría su nombre por JavaScript para darse a conocer y beneficiar al mundo.


Elementos El Lenguaje JavaScript utiliza una sintaxis pareceida a la de C y admite construcciones estructuradas, como ifelse, for y do-while. Se utilizan llaves {} para delimitar los bloques de instrucciones. El lenguaje admite varios tipos de datos, como STRING, NUMBER, BOOLEAN, OBJECT y ARRAY. Admite 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, es un lenguaje con establecimiento flexible de tipos, esto quiere decir que no se declaran explícitamente los tipos de datos de las variables.


Sentencias 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.

--Sentencias y declaraciones por categoría--


Control de flujo Block : Un bloque de sentencias se utiliza para agrupar cero o mas sentencias. El bloque se delimita por un par de llaves. Break : 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 ejecucion de las sentencias dentro de la iteracion actual del actual bucle, y continua la ejecucion del bucle con la siguiente iteracion. Empty : Una sentencia vacía se utiliza para proveer una "no sentencia", aunque la sintaxis de JavaScript esperaba una.

If-Else : Ejecuta una sentencia si una condición especificada es true. Si la condición es false, otra sentencia puede ser ejecutada. Switch : Evalua una expresión, igualando el valor de la expresión a una clausula case y ejecuta las sentencias asociadas con dicho case. Throw : 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.


Declaraciones Var : Declara una variable, opcionalmente inicializándola a un valor.

Let : Declara una variable local de ambito de bloque, opcionalmente inicializándola a un valor. Const : Declara una constante de solo lectura.

Funciones Function : Declara una función con los parámetros especificados. Function* : Los generadores de funciones permiten escribir iteradores con mas facilidad.

async function : Declara una función asíncrona con los parámetros especificados. Return : Especifica el valor a ser retornado por una función. Class : Declara una clase.


Iteraciones Do-while : Crea un bucle que ejecuta una instrucción especificada hasta que la condición de prueba se evalúa como falsa. La condición se evalúa después de ejecutar la instrucción, lo que da como resultado que la instrucción especificada se ejecute al menos una vez. For : Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a statement executed in the loop. For each-in : Itera una variable especificada sobre todos los valores de las propiedades del objeto. Para cada propiedad distinta, se ejecuta una instrucción especificada. For-in : Itera sobre las propiedades enumerables de un objeto, en orden albitrario. Para cada propiedad distinta, las instrucciones pueden ser ejecutadas. For...of : Iterates over iterable objects (including array, array-like objects, iterators and generators), invoking a custom iteration hook with statements to be executed for the value of each distinct property. While : Crea un bucle que ejecuta la instrucción especificada siempre que la condición de prueba se evalúe como verdadera. La condición se evalúa antes de ejecutar la instrucción.


Otros Debugger : Invoca cualquier funcionalidad de depuración disponible. Si no hay funcionalidad de depuración disponible, esta isntrucción no tiene efecto. Export : Usada para permitir a un script firmada proveer propiedades, funciones y objetos a otros scripts firmada o sin firmar. Esta antigua funcionalidad de Netscape ha sido removida y será redefinida por los modulos de ECMAScript 6

Import : Usada para permitir a un escript importar propiedades, funciones y objetos desde otro script firmado que ha exportado su información. Esta antigua funcionalidad de Netscape ha sido removida y será redefinida por los modulos de ECMAScript 6. Label : Provee una instrucción con un identificador que puedes referir usando una instrucción break o continue . With : Extiende la cadena de alcance para una instrucción.


Las paginas web dinámicas son aquellas en las que la información presentada se genera a partir de una petición del usuario de la pagina. Son aquellos que permiten crear aplicaciones dentro de la propia web, otorgando una mayor interactividad con el navegante. Una página web estática es un sitio de Internet que muestra el mismo contenido para todos los usuarios, en vez de proporcionar contenido personalizado a la medida de cada usuario, y que no se actualiza a menudo, Son aquellos sitios enfocados principalmente a mostrar una información permanente, donde el navegante se limita a obtener dicha información, sin que pueda interactuar con la página Web visitada, las Web estáticas están construidas principalmente con hipervínculos o enlaces.


Génesis López El futuro de las páginas web y de los navegadores Todo el mundo está familiarizado con Firefox, Chorme, 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.

Los navegadores más utilizados ya tienen nueva versión, pero los cambios y mejoras pueden no ser suficientes para quienes pasan más tiempo en Internet. 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 navegantes.


Influencia del internet en la sociedad. Ventajas y desventajas del internet ÂżComo actĂşa el internet en el aprendizaje? ÂżEs realmente beneficioso el internet actual mente?


Intenta aprender algo sobre todo y todo sobre algo.


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.