Lenguaje Html5, JavaScript y CSS, Monografías, Ensayos de Informática

¡Descarga Lenguaje Html5, JavaScript y CSS y más Monografías, Ensayos en PDF de Informática solo en Docsity!

Gab

Ram

Nie

Fernando Mu Liceo Ibero M 21-9-

Proyecto Tecnológico 2

Índice

1. Introducción.
2. Formularios en HTML.
3. Hojas de estilo en cascada (CSS). 3.1. Breve historia de CSS. 3.2. Soporte en los navegadores. 3.3. Principales tipos de selectores. 3.4. Modelo de cajas y posicionamiento.
4. JavaScript 4.1. Breve historia de JavaScript. 4.2. Variables, tipos de variables y operadores en JavaScript. 4.3. Estructura condicional en JavaScript. 4.4. Funciones en JavaScript.
5. Conclusión.
6. Fuentes de información.

2. Formularios en HTML.

Controles Uso Ejemplo

indica al navegador que no debe permitir que se envíe el formulario si el usuario no ha introducido una dirección de email válida , pero no comprueba si la dirección existe o no, sólo si el formato es válido.

indica al navegador que no debe permitir que se envíe el formulario si el usuario no ha introducido una URL correcta. Algunos navegadores ofrecen ayudas al usuario, como Opera que añade el prefijo http:// a la URL si el usuario no lo ha introducido.

En muchos de los sitios web es normal disponer de campos específicos de fecha, donde el usuario debe especificar fechas. Al existir tantos formatos de fecha diferentes, esto puede suponer un inconveniente para

los desarrolladores o los propios usuarios.

permite introducir una hora en formato 24h, y validarlo.

Este nuevo tipo de campo es la combinación de los tipos date y time, por lo que se valida tanto la fecha como la hora introducida.

Permite la selección de un mes en concreto. La representación interna del mes es un valor entre 1 y 12

Permite la selección de una semana del año concreta. La representación interna del mes es un valor entre 1 y 53

Valida la entrada de un tipo de dato numérico. Este tipo de campo encaja perfectamente con los atributos min, max y step, que veremos más adelante.

Permite seleccionar un color de una paleta de colores mostrada por el navegador.

Controles

List Hace referencia a otro elemento, permitiendo crear un nuevo tipo de entrada de datos. Datalist Da como resultado un campo de texto, donde el usuario puede introducir cualquier contenido.

Atributos

Autofocus Permite definir que control va a tener el foco cuando la página se haya cargado. Min y Max Estos atributos restringen los valores que pueden ser introducidos; no es posible enviar el formulario con un valor menor que min o un valor mayor que max. Step Controla los pasos por los que un campo aumenta o disminuye su valor.

Pattern Nos permite definir una expresión regular que el valor del campo debe cumplir. Placeholder Mejora en la usabilidad de los formularios, suele ser colocar un pequeño texto de ayuda en algunos campos, de manera discreta y que desaparece cuando el usuario introduce algún dato Required Cuando este atributo está presente, el navegador no permite el envío del formulario si el campo en concreto está vacío.

3. Hojas de estilo en cascada (CSS).

3.1. Breve historia de CSS.

En 1995, W3C decidió desarrollar y estandarizar CSS y lo agregó a su grupo de trabajo HTML. A finales de 1996, el W3C publicó la primera recomendación oficial conocida como "CSS Nivel 1". A principios de 1997, el W3C decidió dividir el trabajo del grupo HTML en tres secciones: el grupo de trabajo HTML, el grupo de trabajo DOM y el grupo de trabajo CSS. El 12 de mayo de 1998, el Grupo de Trabajo de CSS publicó su segunda recomendación oficial, conocida como "Nivel 2 de CSS". La versión de CSS utilizada por todos los navegadores en la actualidad es CSS 2.1, una revisión de CSS 2 que todavía está en proceso (la última actualización es el 8 de septiembre de 2009). Al mismo tiempo, la siguiente recomendación de CSS, conocida como "CSS Nivel 3", ha estado en desarrollo desde 1998 y hasta ahora solo se han publicado borradores. Los navegadores han tardado mucho en adoptar CSS. En el mismo año en que se lanzó CSS 1, Microsoft lanzó su navegador Internet Explorer 3.0, que tenía un soporte CSS relativamente limitado. El primer navegador con compatibilidad total con CSS 1 fue la versión para Mac de Internet Explorer 5, lanzada en 2000. Actualmente, ningún navegador tiene compatibilidad completa con CSS 2.1. https://uniwebsidad.com/libros/css/capitulo-1/breve-historia-de-css

3.2. Soporte en los navegadores.

El trabajo del diseñador web siempre está limitado por las capacidades de los navegadores que utilizan los usuarios para acceder a sus páginas. Por eso es importante conocer el soporte de CSS en cada uno de los navegadores más populares que existen. Internamente, los navegadores se dividen en varios componentes. La parte del navegador que se encarga de interpretar el código HTML y CSS para mostrar las

páginas se llama motor. Desde el punto de vista de un diseñador de CSS, la versión de un motor es mucho más importante que la versión del navegador. La siguiente tabla muestra la compatibilidad con CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores más populares por parte de los usuarios: Navegador Motor CSS 1 CSS 2.1 CSS 3 Google Chrome WebKit Completo desde la versión 85 del motor Completo Todos los selectores, pseudo-clases y muchas propiedades Internet Explorer Trident Completo desde la versión 7.0 del navegador Completo Todos los selectores, pseudo-clases y muchas propiedades a partir de la versión 10. del navegador Firefox Gecko Completo desde la versión 1.0 del navegador Completo Todos los selectores, pseudo-clases y muchas propiedades Safari WebKit Completo desde la versión 85 del motor Completo Todos los selectores, pseudo-clases y muchas propiedades Opera Presto Completo desde la versión 1.0 del navegador Completo Todos los selectores, pseudo-clases y muchas propiedades

Selector identificador El selector identificador utiliza el atributo id para seleccionar un elemento. Solo puede haber un elemento con un id dado en un documento. Sintaxis: #id { atributo:valor } Ejemplo: #cent {color: blue;} /* El estilo se aplicará al elemento que tenga el id #cent */ Selector descendiente Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del elemento padre. Su sintaxis es: selector1 selector2… slectorN. Siendo el selector N el elemento sobre el que se aplica el estilo. selector1 selector2 selectorN{ propiedad: valor; } Combinación de selectores La combinación de selectores nos permite dar un estilo a todos los selectores indicados. selector1, selector2, selector3{ propiedad: valor; } Selector de hijos Se usa para seleccionar un elemento que es hijo de otro elemento y se indica mediante el signo “mayor que” (>). selector1 > selector2{

propiedad: valor; } Selector adyacente Se usa para seleccionar elementos que son hermanos , es decir, su elemento padre es el mismo y están seguidos en el código HTML. Se indica mediante el signo “más” (+). selector1 + selector2{ propiedad: valor; }

3.4. Modelo de cajas y posicionamiento.

Los navegadores crean y posicionan de forma automática todas las cajas que forman cada página HTML. No obstante, CSS permite al diseñador modificar la posición en la que se muestra cada caja. Utilizando las propiedades que proporciona CSS para alterar la posición de las cajas es posible realizar efectos muy avanzados y diseñar estructuras de páginas que de otra forma no serían posibles. El estándar de CSS define cinco modelos diferentes para posicionar una caja:  Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario.  Posicionamiento relativo: variante del posicionamiento normal que consiste en posicionar una caja según el posicionamiento normal y después desplazarla respecto de su posición original.  Posicionamiento absoluto: la posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.

El significado de cada uno de los posibles valores de la propiedad position es el siguiente:  static: corresponde al posicionamiento normal o estático. Si se utiliza este valor, se ignoran los valores de las propiedades top, right, bottom y left que se verán a continuación.  relative: corresponde al posicionamiento relativo. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.  absolute: corresponde al posicionamiento absoluto. El desplazamiento de la caja también se controla con las propiedades top, right, bottom y left, pero su interpretación es mucho más compleja, ya que el origen de coordenadas del desplazamiento depende del posicionamiento de su elemento contenedor.  fixed: corresponde al posicionamiento fijo. El desplazamiento se establece de la misma forma que en el posicionamiento absoluto, pero en este caso el elemento permanece inamovible en la pantalla. La propiedad position no permite controlar el posicionamiento flotante, que se establece con otra propiedad llamada float y que se explica más adelante. Además, la propiedad position sólo indica cómo se posiciona una caja, pero no la desplaza. Normalmente, cuando se posiciona una caja también es necesario desplazarla respecto de su posición original o respecto de otro origen de coordenadas. CSS define cuatro propiedades llamadas top, right, bottom y left para controlar el desplazamiento de las cajas posicionadas: Propiedades top, right, bottom, left Valores unidad de medida | porcentaje | auto | inherit Se aplica a Todos los elementos posicionados Valor inicial auto

Descripción Indican el desplazamiento horizontal y vertical del elemento respecto de su posición original En el caso del posicionamiento relativo, cada una de estas propiedades indica el desplazamiento del elemento desde la posición original de su borde superior/derecho/inferior/izquierdo. Si el posicionamiento es absoluto, las propiedades indican el desplazamiento del elemento respecto del borde superior/derecho/inferior/izquierdo de su primer elemento padre posicionado. En cualquiera de los dos casos, si el desplazamiento se indica en forma de porcentaje, se refiere al porcentaje sobre la anchura (propiedades right y left) o altura (propiedades top y bottom) del elemento.

4. JavaScript

JavaScript es un lenguaje de programación o de secuencias de comandos que te permite implementar funciones complejas en páginas web, cada vez que una página web hace algo más que sentarse allí y mostrar información estática para que la veas, muestra oportunas actualizaciones de contenido, mapas interactivos, animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, etc., puedes apostar que probablemente JavaScript está involucrado.

4.1. Breve historia de JavaScript.

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. Brendan Eich, un programador que trabajaba en Netscape, pensó que

var dia2 = "Martes"; ... var dia7 = "Domingo";  Una variable de tipo boolean almacena un tipo especial de valor que solamente puede tomar dos valores: true (verdadero) o false (falso). var clienteRegistrado = false; var ivaIncluido = true; Las variables por sí solas son de poca utilidad. Hasta ahora, sólo se ha visto cómo crear variables de diferentes tipos y cómo mostrar su valor mediante la función alert(). Para hacer programas realmente útiles, son necesarias otro tipo de herramientas. Los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.

4.3. Estructura condicional en JavaScript.

JavaScript tiene solo dos condicionales, que son:

 If

 Switch

La estructura if es la más sencilla del lenguaje. La palabra if (en inglés) significa si (condicional), con esto entendemos que su funcion es cumplir condiciones. La estructural if else se utiliza para dar otra alternativa, si se da el caso de que la condicion no se cumpla

Esta forma es la más compleja de la estructura if..else. En la estructura anterior, se controlaba una condición y si no se cumplía, se optaba por todas las demás opciones infinitas. A veces, dispones de más alternativas, las cuales quieres controlar y responder de diferentes formas. En este sentido, tienes la opción de utilizar la sentencia if…else if… tantas veces como quieras. La estructura de control se basa en evaluar una variable, es decir, compara cada una de las opciones que colocamos dentro de la estructura y si coincide, ejecuta el código que hay dentro de dicha coincidencia, para después romper la evaluación de cualquier otra opción.

4.4. Funciones en JavaScript.

En términos generales, una función es un "subprograma" que puede ser llamado por código externo (o interno en caso de recursión) a la función. En JavaScript, las funciones son objetos de primera clase, es decir, son objetos y se pueden manipular y transmitir al igual que cualquier otro objeto. Concretamente son objetos Function. La forma más común de definir una función es usando la palabra reservada “function” seguido de un único nombre de función, y de los parámetros deseados (puede ser sin parámetros), y un bloque de instrucciones dentro de llaves. En JavaScript existen dos maneras de definir una función las cuales pueden ser mediante: declaración de función o una expresión de función: Declaración de Función