Historia y conceptos martes, 16 de junio de 2020 1:46. m. Conceptos basicos a web Es un documento que hace uso de hipertexto e hipermedia, que son enlaces 0 hipervinculos (URL) Tecnologias para + Gestores de contenido, como Blogger crear paginas + HTML lenguaje de hojas de estilo (CSS) web Es.un sistema en el cual se gestiona informacion que sera compartida por internet, Internet (red de Es un conjunto descentralizado de redes de comunicacién interconectada que redes) permite que redes diferentes tipo puedan conectarse Navegadores _Leen los documento HTML y los muestran correctamente. No muestran las etiquetas peo las usan para determinar como mostrar el documento. Emplean el sistema de localizacion uniforme de recursos (URL). Protocolo En internet, circulan diferentes sistemas protocolos + FTP: transmision de ficheros + SMTP y POP: envi6 y recuperacién de correo electrénico + Telnet: Establece conexiones remotas con otros ordenadores + HTTP: Es el protocolo de la "World Wide Web" + TCP/IP: Permite la comunicacién entre redes. Es el idioma o lenguaje que ‘emplean los sistemas (ordenadores) para comunicarse, Tecnologias fundamentales de la web HTML Hupertext Markup Lenguage (lenguaje de Se emplea para escribir los documentos 0 marcado o etiquetado) paginas web URL Uniform Resource Locator (localizador Es el sistema de localizacién o direccionamiento uniforme de recursos) de los documentos web HTTP Hipertext Transfer Protocol (protocolo de Protocolo o lenguajes con el que se comunica el trasferencia de hipertexto) navegador o servidor web HTML Qué esHTML? Es ellenguaje de marcado o etiquetado de hipertexto y el lenguaje estandar para crear paginas web. Describe la escrutara de una pagina web. Elementos Son los componentes de una pagina web. Esta definidos por una etiqueta de inicia, algo de contenido y una etiqueta de finalizacion. El contenido de un elemento puede ser otro elemento. Etiquetas Son las piezas bases. Toda etiqueta que se abre se debe cerrar. Excepto a algunas como br (que no tienen contenido) Hipertexto e Hipermedia Inventor No tiene un padre claro Paul Otlet Fundador de la bibliografia y la documentacion. A principios del sigo xx imagino mudaneum, un archivo donde este todo el conocimiento del mundo empleando fichas con "enlaces" que conectaban a otras fichas Vannevar Bush Ingeniero y administrador del proyecto manhattan (bombas nucleares) publico un articulo sobre un dispositivo (memex) capaz de crear y seguir enlaces de distintos documentos almacenados en microfichas. Ted Nelson Era un visionario y vendedor de humo. Utilizo los termino de hipertexto e hipermedia e inicio el primer sistema basado en ello (Xanadu) que sigue eneque es hipertexto? eque es hipermedia? URL forma desarrollo (XD) Es un conjunto estructurado de texto, graficos, etc unidos entre si por enlaces y conexiones légicas. El texto puede se puede leer por diferentes caminos, siguiendo enlaces, referencias 0 hipervinculos. Termino relacionada a multimedia que utiliza conjunta y simultaneamente diversos medios como imagenes, sonido y texto, en la trasmision de una informacion + Esquema//usuariocontrasefia@maquina/directorio/archivo + Esquema//maquina:puerto/directorio/archivo + Esquema//Usuario:contrasefia@maquina/protocolo/directorio/archivo Qué es un esquema? Es un protocolo o mecaanismo que se emplea para recuperar un recurso Tipos de esquemas Acortadores de URL URL amigable 0 URL semantica URI atreves dela web Http, https, ftp, mailto y file Permiten convertir una URL larga en una corta Son entendibles por el usuario, formadas con palabras que se relacionan con el contenido de la pagina y son faciles derecordar Desde 1994, el concepto de URL se ha incorporado al mas general: URI URI = URL + URN (uniform resource name)HTML 5: introduccién miércoles, 17 de junio de 2020 2:20. m. Qué es? DHTML (html dinamico) AIAX Nuevas tecnologias AIAX sve Navigator cache Base de datos Web workers Recursos Modernizr Polyfills Es bastante similar a HTML4. Solo que algunas de las etiquetas han desaparecido 0 se ha cambiado su funcionamiento o atributos. Y ademas, se han agregado nuevas etiquetas. Da como resultado paginas web interactivas y es el uso combinado de HTML, CSS, DOMUerarquia de objetos) ¥ JavaScript Es una técnica de desarrollo web que permite crear aplicaciones web interactivas que se ejecutan en el navegador y nace de la combinacion de DHTML, XHR, XML y JSON (formato de intercambio de imagenes) Seles estan uniendo nuevas tecnologias (la familia de tecnologias HTML5) como, HTMIS, CANVAS, SBG, GEOLOCATION, CACHE, DATABASE, WEB WORKERS Permite definir un area dentro de una pagina web en la que se puede dibujar mediante API( conjunto de definiciones y protocolos que se utiliza para desarrollar e integrar el software de las aplicaciones.) para JavaScript. Permite el desarrollo de juegos online o aplicaciones de dibujo. Es un lenguaje de etiquetas basado en XML que permite crerar graficos vectoriales Para JavaScript. Permite obtener la localizacion del usuario Permite indicar aquellos recursos de una pagina web que se desea que se almacenen de forma local, de esta forma, se mejora el rendimiento Permite almacenar informacion del servidor local, en una base de datos Para Jc. Permite crear multiple hilos de ejecucion que se ejecutan en paralelo Para aprender - Dive into HTMLS -HTMISROCKS -W3schools Saber usar las nuevas tecnol -When can iuse -Findmebyip jas (compativilidad con navegador) Es una libreria Javascript que nos permite coocer la compatibilidad del navegador del usuario con las nuevas caracteristicas de HTMLS y C553 Son librerias Javascript que nos permiten cubrir las capacidades de HTMILS y (5S3 que los navegadores no soportanXML, HTML, XTML ie 2020 10:39a.m jueves, 18 de jun Xhtml Extensible hypertext markup lenguage. Es el lenguaje pensado para sustituir HTML. Incorporra rigor. xml Es la version de html de xhtml 1.0 (mas extrito). Que Se paro las renovarsiones, Por que se aumentaron los recursos para HTMLS paso? Htmis Xhtml -Versién trancicional - Version trancicional -Versién estricta _- Version estricta Con masrcos -Con masrcosPagina web basica martes, 16 de junio de 2020 1:46 p. m. estos son encabezados, h1 es el de mayor importancia (mas grande) y h6 es el mas pequefio. Usualmente solo se usaran los 3 primero.

este es un parrafo esta etiqueta hace el texto en negrilla y este lo hace en cursiva

Listas martes, 16 de junio de 2020 2:02p. m. Listas no enumeradas

esto es un circulo esto es un cuadrado esto es un punto

Listas enumeradas

iniciara en 20
1. no se necesita volver a ingresar el valor

Listado de definiciones

termino/titulo

aqui se escribe la definicién del termino

Enlaces martes, 16 de junio de 2020 Tipos de enlaces Definir el enlace Definir el destino Pueden ser intra documentales y extra documentales ... + (antes) ... + (ahora)

.. Pagina web interactiva martes, 16 de junio de 2020 4:36. m. Cuando se affadieron los formularios, nacié un mayor grado de interaccion, pues los anteriores eran solo texto, Formularios Qué son? Es una seccion que contiene contendido normal, cédigo, controles y rétulos (W3¢) éPara__Para permitir que el usuario envié informacion para el servido. que? Etiquetas Form, select, label, input, textarea, fildset form _Es fundamental para que el resto de enviados. Todos los campos que se quiere enviar debe estar dentro e la etiqueta de inicio y la etiqueta de cierre. No tiene representacion grafica Atributos + Action: es el unico requerido. Esta una ruta de destino que procese los datos de la deform _peticion + Method: forma de envié - GET (por defecto): Datos visibles URL), es limitada a cada navegador. - POST: Datos no visibles, informacion sensible como contrasefta, sin limite de envios y facilita el envid de ficheros, + Accept-charset: Codificacion de caracteres. No es un atributo comin. + Enctype: Tipo de codificacion ~ Applicaion/x-www-form-urlencoded (por defecto): convertira todos los espacios en sumas y los caracteres especiales en valores accis hexadecimal - Multipart/form- data: subir ficheros mediante el formularios ~Text/plain: convierte los espacios en suma Select _Permite crear litas desplegables y lista de seleccion multiple. Es mejor que input de tipo radio + Requiere el atributo name + El atributo Multiple =" multiple” es lo que permite la creacién de miltiple opciones. + texto permite crear cada una de las opciones + .. permite agrupar las opciones textarea Permite definir el érea visible con un largo y alto establecido. Y utiliza la tecla entre para introducir saltos de linea y muertas una barra de desplazamiento por supera el largo establecido. Es as recomendable que un input de tipo text + Elatributo name es obligatorio + Cols ="numero" (20 por defecto) define el largo + Rows = "numero" (2 defecto) define el largo label No muestra nada en pantalla, Asocia un texto a un control. Es preferible usarla. + Atributo for = "identificador” . Relaciona un label con el control de usuario ejemplo: for ="html" o for "css" fieldset_ _Agrupa elemento relacionados de un formulario dentro de un marco +

titulo del grupo

Input —_Entradas de tipo texto, casillas de verificacion, casillas de opcion (radio), archivo, texto enmascarado (password), ocultos y botones. Atributos + Name: es comiin en topos los campo de formularios, requiere un nombre del campodeinput | para el envio. + Type: en que se convertira el control + Values: le da un valor inicial o pista para que el usuario sepa que digitar + Disable: deshabilita el campo para que no pueda ser utilizado -Habilitado: Deshabilitado Tipos de input martes, 16 de junio de 2020. 4:37. m. Tipos de input campo detexto checkbox"--> casilla de verificacion "radio" —> casilla de opcién Accion de los botones Imganes y boton con imagen Value en botones *""text" > campo de texto + "checkbox"--> casilla de verificacion "radio" > casilla de opcion + "file" —> subir fichero * "password" --> texto enmascarado + "hidden" > campo oculto * "button" —> botén botén de enviar imagen como botén de enviar (poco utilizada) +"reset" -> boton de limpiar + "subimit" + Mazlength: atributo que determinar el numero maximo de caracteres. ‘Maxlength ="numero” + Size: atributo que determina el tamafio en numero de caracteres, se usa por ‘cuestion de estilo y el valor de este atributo es un numero + Value: valor por defecto, para saber el funcionamiento + Name: se debe poner el mismo nombre ej HTNL 5S + Checked. Es un atributo que toma como valor "checked" y establece que la casilla esta marcada por defecto + Value: es imprescindible e indica que valor debe tomar sila casilla esta activada + Name: Al igual que las casillas de verificacion, se debe poner el mismo nombre para todo el grupo + Checked: Al igual que el anterior +Value Es necesario trabajar con el evento onclick = "javascript:function();” Se utilizan los siguientes atributos: ‘texto alternativo" "ruta a la imagen” Especifica el texto que aparecera en los botones, expertos en los botones de tipo imagenNuevos formularios: etiquetas miércoles, 17 de junio de 2020 3:46 p. m. Etiquetas Novedades Asociasion de controles Type url Tel email number Color search range datime Datetime-tocal Date Month Week time se puede prescindir de javaScript debido a controladores nativos. Esto supone un ahorro de tiempo y permite corregir valores. Se pueden mostrar ejemplo, mostrar un calendario y escoger colores La asociacién de los controles de los formularios se puede realizar de dos formas: + Explicita: La asociacion se realiza identificando cada control con un atributo id linico y asociéndolo atreves del atributo for de la etiqueta label correpondiente (recomendable) + Implicita: La etiqueta debe estar inmediatamente antes o después del su control, 0 el control esta dentro dela etiqueta Esto trajo nuevos estados del atributos type del elemento input Seusan campos que requieran una direccion web y es automaticamente validado cuando el formulario es enviado. Un numero de teléfono, Este tipo no impone una sintaxis. Para hacerlo se debe complementar con el atributo pattern. Las pantallas tctiles cambiaran su formato por defecto y se utilizaran para la introduccion de un numero mostrando un teclado numérico Direccién de correo valida Ingresar un nlimero, Se pueden realizar restricciones con los siguientes atributos: + Min = "numero minimo a ingresar" + Max= #inumero maximo a ingresar" + Value = "numero por defect" Seleccionar un color desde una paleta de colores. Sino se define un color, el automatico sera negro. Campos de busqueda en formato de texto Permite ingresar valores numericos dentro de un rango especifico (con los atributos min ymax) Hora completa, dia, mes, aifo y zona horaria Hora completa, dia, mes, aio Dia, mes, aifo Mes, aifo Semana, aito Hora en formato de horas y minutos Acosiacién con los controles de formulariosatributos de input lunes, 6 de julio de 2020 8:31am Nota: algunos de estos funcionan para ptras etiquetas ‘Autocomplete Autocomplete type input Autofocus (poco recomendado) Min y Max Step Pattern Placeholder Required Tiene como valor on o off, (activado o desactivado). Cuando esta activado (on), el navegador auto complementara un valor. Puede estar activado en uno de los campos del formulario y desactivado en otro. Funciona con los elementos form y algunos input Text, search, url tel, email, date pickers, password, range, color Permite especificar en que campo de entrada queremos que se ponga el "foco# cuando se cargue la pagina es un atributo de tipo booleano (no se le da valor) por lo que no debemos definir mas de un atributo en la misma pagina. Delimitan un rango de valores numéricos. Funcionan con los tipos de input number, range, date, datetime, datetime-local, month, time, week Especifica los intervalos numericos validos para un elemento input. Puede ser usado con max y min, Por ejemplo, si min = 2, max =14 y step = 2, los valores validos seran 2,4, 6, 8 10, 12y 14 Permite validad un elemnto input en base a una expresion regular (modelo 0 patrones que describen las combinaciones de caracteres que se pueden escribir dentro de un campo de texto). Se apoya del atributo global title para que el usuario sepa que escribir en el campo. Funciona con los tipo de input text, search, url tel, email, password Muestra un ejemplo de lo que el usuario debe introducir en el campo de entrada, Funciona con lo tipo de input text, search, url, tel, email, password Es un atributo booleno (no tiene valor) que cuando esta presente indica que el campo debe ser llenado por el usuario antes de enviar el formulario. Funciona con los tipo de input: text, search, url, tel, email, date pickers, password, numer, checkbox, radio, filePagina web bien estructurada miércoles, 17 Je junio de 2020 10:31am Validacion del codigo Indica que version de HTML se va a utilizar. Pero la gente parece no saber utilizarlos. Hay uno para cada version para html5 se debe usar + xhtml: + HTMILS: "text/html; charset = El juego de caracteres que indicamos con la etiqueta meta, debe coincidir con el juego de caracteres con el que almacenamos el fichero. Si no es asi, tendremos problemas, + Primera descripcion de un sistema de numeracién binario(Siglo I! a.C, Matematico hind Pingalla ) + Sistema binario moderno (siglo XVII, Leibniz) + Otros Migrar a un nuevo juego de caracteres Linux y macx Desde la linea de comandos: file, iconv ‘Windows Utilizar un editor de texto (notpad++) y convertir fichero a ficheroNueva estructura miércoles, 17 de junio de 2020 3:32p.m Dehtmis a htm Span y div | son elementos que se utilzan para definir partes de un documento , de modo que se Span div Uso excesivo solucion lang puedan determinar cuéndo es necesaria una clasificacién dnica Span representa una parte en linea de un documento, por ejemplo, palabras dentro de una oracion Div representa una porcién a nivel de bloque de un documento, como algunos parrafos, o una imagen con su titulo. El uso juicioso de divy spanes una parte vital del marcado HTML y XHTML. Sin embargo, a veces se usan en exceso. Para evitar el uso execivo de estas etiquetas, en HTMLS se han creado nuevas etiquetas: header, nav, main, article, section, aside, figure, footer Es.un atributo de la etiqueta HTML indicamos el idioma base de los valores de los atributos y el texto del contenido Etiquetas de estructura en HTML Header Nav Main Article Figure Aside Footer figcaption blockquite Es la cabecera visible de la pagina Panel de navegacion El panel principal Un articulo Una figura, fragmento de codigo o una cita Panel con informacion adicional El pie de pagina Permite definir el titulo de una figura Define una citaTablas miércoles, 17 de junio de 2020. 11:51.m Basico Tabla Es una forma grafica de representar informacion Tabla HTML La tablas se organizan en filas y celdas _ Indica en inicio y cierre de la tabla Table Row, representa una nueva fila de la tabla (horizontal) Table Dat Cell, representa en una celda de datos en la tabla (Ios elementos de una fila) ‘Avanzado |Table Heaader cell, sustituye la etiqueta td y reprecenta celdas de cabecera. Se pueden usar en cuarquier punto dea tabla. Tambien se puede usar para destacar estilos Agrupa filas de cabecera Agrupa filas de cuerpo Agrupa filas del pie dela tabla _Affade un titulo sobre la table Colgroup y col Permite dar estilos por columas (no tiene etiqueta de cierre, pero se pone para ‘cumplir con el estandar) Atributos de las tablas Colspan Combina celdas. Se le aigna a td y el valor quetoma es el numero de columnas que ocupa Rowpab Combina filas. Se le asigna a td y el valor que toma es el numero de filas que ocupa Span _Seusa solo con col o colgrupo y sitve para agrupar filas. El valor del atributo indica el numero de columnas que agrupara Cédigo de ejemplo

titulo

2"otitulo
..	.

Cédigo de ejemplo (columnas) Imagenes miércoles, 17 de junio de 2020 12:18 p.m Sre alt Width y height longdesc Ismap y usemap Atributos obsoletos se define el ‘mapa de imagen, con sus distintas zonas activas. (debe tener un nombre para relacionar el mapa de imagen con la imagen). En la eiqueta de umagen que representa la imagen, se utiliza la etiqueta usemap para inidcar el nombre del mapa que se va a utilizar Se define mediante una figura geometrica. -Shape: tipo de figura geometria (hay 3) - Coords: coordenadas dela figura -Href: URL del destino ~Alt: Texto alternativo + Rect: define un rectangulo con cordenadas x1, yi, x2, y2 (que son los extremos de la diagonal principal de rectangulo) + Circle: define un circulo con las cordenadas x, y,r. siendo x, y el centro del circulo y relradio + Poly define un poligono con coordenadas x1, y1, x2, y2,..,xn, ynPagina web presentacién viernes, 1 css Esctructura ‘Acoplamiento Desacoplamiento total HTMLy css Aplicar (5S Atributo style Propiedades de css Para body Etiqueta style ‘Agrupar estilos elementos (55 Etiqueta link Fichero Css je 2020 85am CascadingStyle sheet. Exiten distintos niveles de CSS, Google ty (color: ¥FF9000; background: #00FF00) » | Valor | Propiedad Valor ‘Separador SeparadorSeparador Indica el nivel de dependencia entre las unidades de softwares (el grado en que unas funcion puede funcionar a otra). EI nivel mas bajo es cuando una funcion puede hacer su trabajo sin influir a otra (estan desacopladas).. Es deseada pero imposible. Por lo que se debe reducir el desacoplamiento. Se crea un acoplamiento entre las dos tecnologia - Atributo style: La peor opcién -Etiqueta style -Etiqueta link Se puede apricar a casi cualquier elemeto o etiquetas de HTML (en HTMLS todos) . Pero es la peor opcidn para elegir, ya que genera un acoplamiento absoluto ~ Color: color de la letra -Backgroud-color: color del fondo -Font-family: tipo de fuente -Font-size: tamaifo dela fuente ~Text-decoration (resalta un texto, como los links visitado) -Border-color Para hacer cambios en la pagina general, se aplican los atributos a body Sereuce el acomplamiento. Se escribe en el head del html de la siguiete forma: