Embed Size (px)
Citation preview
Consulta
¿Qué es intranet?
Es una red informática que utiliza la tecnología del Protocolo de Internet para compartir información, sistemas operativos o servicios de computación dentro de una organización. Este término se utiliza en contraste con Extranet, una red entre las organizaciones, y en su lugar se refiere a una red dentro de una organización. A veces, el término se refiere únicamente a la organización interna del sitio web, pero puede ser una parte más extensa de la infraestructura de tecnología de la información de la organización, y puede estar compuesta de varias redes de área local. El objetivo es organizar el escritorio de cada individuo con mínimo costo, tiempo y esfuerzo para ser más productivo, rentable, oportuno y competitivo.
¿Qué es la nube?
Referencias a "la nube" -the Cloud en inglés- soy muy comunes en el mundo de Internet. En realidad la nube es una metáfora empleada para hacer referencia a servicios que se utilizan a través de Internet.
Antes del concepto de la nube, el procesamiento y almacenamiento de datos se hacían en tu computadora; en cambio, computación en la nube -cloud computing en inglés- permite una separación funcional entre los recursos que se utilizan y los recursos de tu computadora, esto es: se utilizan recursos en un lugar remoto y que se acceden por Internet.
Todo lo que ocurre dentro de la nube es totalmente transparente para ti y no necesitas conocimiento técnico para utilizarla.
El término software como servicio -software as a service en inglés, abreviado SaaS- es utilizado también para referirse a programas que se ofrecen mediante la nube.
Consulta
Access es un programa que le permite crear y administrar bases de datos. Una base de datos es un lugar donde usted puede guardar información relacionada con un tema específico. Según el uso que le va a dar a la información sabrá si necesita una base de datos de Access o un programa diferente para crear y administrar sus datos.
¿Para qué sirve? A través de este programa se puede ordenar la información de diferentes formas según la que le sea mas conveniente al usuario. Microsoft Access tiene diversas funciones con las cuales se pueda facilitar la manipulación y modificación de la información que contenga la base de datos.
¿Por Qué Necesitamos Bases de Datos? ¿Qué es una Base de Datos? Una base de datos le permite guardar información relacionado con un tema específico de una manera organizada. Además de guardar datos, también puede, clasificar, extraer, y resumir información relacionada con los datos. Uno de los programas que le permite hacer esto es Microsoft Office Access 2007, el cual es un programa para crear y administrar bases de datos. Ejemplo Access 2007
¿QUÉ ES Y PARA QUÉ SIRVE HTML?
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está
compuesto por una seríe de etiquetas que el navegador interpreta y da forma en la
pantalla. HTML dispone de etiquetas para imágenes, hipervínculos que nos permiten
dirigirnos a otras páginas, saltos de línea, listas, tablas, etc.
Podríamos decir que HTML sirve para crear páginas web, darles estructura y
contenido. Un ejemplo sencillo de código HTML podría ser:
<html>
<body>
<p>Esto es un párrafo. Bienvenidos a esta página web.</p>
</body>
</html>
Este ejemplo está formado por 3 etiquetas HTML. Como podemos observar cada
una de las etiquetas debe acabar con su homóloga de cierre. En este caso la etiqueta
<html> debe cerrarse con </html>, la etiqueta <body> con </body> y la etiqueta
<p> con </p>.
Hay muchas más etiquetas que veremos más adelante pero nos debe quedar claro
que por cada etiqueta que abramos, deberemos incluir la correspondiente etiqueta de
cierre. Así conseguiremos un código HTML bien formado y que los navegadores
puedan interpretar sin ambigüedad.
Este sencillo ejemplo mostraría por pantalla lo siguiente.
¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre?
Digamos que se trataría de un código HTML mal construido, y los navegadores esto
lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como
esperábamos sin aparente error. Quizás nos muestren una página de error o se quede
en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML
bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje
para que los navegadores puedan saber exactamente qué es lo que pretendemos
mostrar.
ALGO DE HISTORIA
HTML nació públicamente en un documento llamado HTML Tags (Etiquetas
HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En
esta publicación se describen 22 etiquetas que mostraban un diseño inicial y
relativamente simple de HTML. Varios de estos elementos se conservan en la
actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el
paso de los años. De esta manera, podemos hablar de que han existido distintas
versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar
con el HTML estándar actual, que es el utilizado por los navegadores y páginas web
de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y
especificidades de cada versión, ya que el objetivo de este curso es aprenderlos
fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o
especificidades de una versión concreta. ¿Por qué no le damos importancia a la
versión? Porque una persona que cuenta con los fundamentos y comprensión básica
sobre el lenguaje es capaz de adaptarse a las características particulares de una
versión sin problema. En cambio, centrarse en los detalles de una versión sin
conocer los fundamentos hará que no tengamos capacidad para comprender lo que
hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de
los desarrollos web.
Tim Berners-Lee
HTML5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web,HTML. HTML5 especifica dos variantes de sintaxis para HTML: un «clásico» HTML (text/html), la variante conocida comoHTML5 y una variante XHTML conocida como sintaxis XHTML5 que deberá ser servida como XML.1 2 Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
La versión definitiva de la quinta revisión del estándar se publicó en octubre de 2014.3
Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se recomienda al usuario común actualizar a la versión más nueva, para poder disfrutar de todo el potencial que provee HTML5.
El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.
2.3. Etiquetas y atributos
HTML define 91 etiquetas que los diseñadores pueden utilizar para marcar los
diferentes elementos que componen una página:
a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body,
br, button,caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fi
eldset, font, form, frame,frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, im
g, input, ins, isindex, kbd, label, legend, li,link, map, menu, meta, noframes, noscript
, object, ol, optgroup, option, p, param, pre, q, s, samp, script,select, small, span, stri
ke, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title,tr, tt, u, ul, v
ar.
De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se
pueden utilizar:applet, basefont, center, dir, font, isindex, menu, s, strike, u.
A pesar de que se trata de un número de etiquetas muy grande, no es suficiente para
crear páginas complejas. Algunos elementos como las imágenes y los enlaces
requieren cierta información adicional para estar completamente definidos.
La etiqueta <a> por ejemplo se emplea para incluir un enlace en una página.
Utilizando sólo la etiqueta<a> no es posible establecer la dirección a la que apunta
cada enlace. Como no es viable crear una etiqueta por cada enlace diferente, la
solución consiste en personalizar las etiquetas HTML mediante cierta información
adicional llamada atributos.
De esta forma, se utiliza la misma etiqueta <a> para todos los enlaces de la página y
se utilizan los atributos para indicar la dirección a la que apunta cada enlace.
<html>
<head>
<title>Ejemplo de atributos en las etiquetas</title>
</head>
<body>
<p>
Los enlaces son muy fáciles de indicar:
<a>Soy un enlace incompleto, porque no tengo dirección de destino</a>.
<a href="http://www.google.com">Este otro enlace apunta a la página de Google</a>.
</p>
</body>
</html>
Figura 2.6 Los atributos permiten personalizar las etiquetas HTML
El primer enlace del ejemplo anterior no está completamente definido, ya que no
apunta a ninguna dirección. El segundo enlace, utiliza la misma etiqueta <a>, pero
añade información adicional mediante un atributo llamado href. Los atributos se
incluyen dentro de la etiqueta de apertura. Por ahora no es importante comprender la
etiqueta <a> ni el atributo href, ya que se explicarán con todo detalle más adelante.
No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada
etiqueta define su propia lista de atributos disponibles. Además, cada atributo
también indica el tipo de valor que se le puede asignar. Si el valor de un atributo no
es válido, el navegador ignora ese atributo.
Aunque cada una de las etiquetas HTML define sus propios atributos, algunos de los
atributos son comunes a muchas o casi todas las etiquetas. De esta forma, es habitual
explicar por separado los atributos comunes de las etiquetas para no tener que volver
a hacerlo cada vez que se explica una nueva etiqueta. Los atributos comunes se
dividen en cuatro grupos según su funcionalidad:
Atributos básicos: se pueden utilizar prácticamente en todas las etiquetas
HTML.
Atributos para internacionalización: los utilizan las páginas que muestran sus
contenidos en varios idiomas.
Atributos de eventos: sólo se utilizan en las páginas web dinámicas creadas
con JavaScript.
Atributos de foco: relacionados principalmente con la accesibilidad de los
sitios web.
2.3.1. Atributos básicos
Los siguiente cuatro atributos básicos se pueden aplicar prácticamente a todas las
etiquetas HTML:
Atributo Descripción
id = "texto"
Establece un identificador único a cada elemento dentro de una página HTML
class = "texto"
Establece la clase CSS que se aplica a los estilos del elemento
style = "texto"
Establece de forma directa los estilos CSS de un elemento
title = "texto"
Establece el título a un elemento (mejora la accesibilidad y los navegadores lo muestran cuando el usuario pasa el ratón por encima del elemento)
La mayoría de páginas web actuales utilizan los atributos id y class de forma
masiva. Sin embargo, estos atributos sólo son realmente útiles cuando se trabaja con
CSS y con Javascript.
Respecto al valor de los atributos id y class, sólo pueden contener guiones medios
(-), guiones bajos (_), letras y/o números, pero no pueden empezar por números.
Además, los navegadores distinguen mayúsculas de minúsculas y no se recomienda
utilizar letras como ñ y acentos, ya que no es seguro que funcionen correctamente en
todas las versiones de todos los navegadores.
2.3.2. Atributos para internacionalización
Estos atributos son útiles para aquellas páginas que muestran sus contenidos en
varios idiomas y para aquellas que quieren indicar de forma explítica el idioma de
sus contenidos:
Atributo Descripción
lang = "codigo de idioma"
Indica el idioma del elemento mediante un código predefinido
xml:lang = "codigo de idioma"
Indica el idioma del elemento mediante un código predefinido
dirIndica la dirección del texto (útil para los idiomas que escriben de derecha a izquierda)
En las páginas XHTML, el atributo xml:lang tiene más prioridad que lang y es
obligatorio incluirlo siempre que se incluye el atributo lang. Los idiomas se indican
mediante un código estandarizado (espara español, en para inglés, etc.), tal y como
se explicará más adelante en la sección idioma del enlace del capítulo 4.
Como la palabra internacionalización es muy larga, se suele sustituir por la
abreviatura i18n (el número 18 se refiere al número de letras que existen entre la
letra i y la letra n de la palabrainternacionalización).
2.3.3. Atributos de eventos
Estos atributos sólo se utilizan en las páginas web que incluyen código JavaScript
para realizar acciones dinámicas sobre los elementos de la página. Cada vez que el
usuario pulsa una tecla, mueve su ratón o pulsa cualquier botón del ratón, se produce
un evento dentro del navegador. Utilizando JavaScript y los siguientes atributos, es
posible responder de forma adecuada a cada evento.
Atributo Descripción Elementos que pueden usarlo
onblurDeseleccionar el elemento
<button>, <input>, <label>, <select>,<textarea>, <body>
onchange
Deseleccionar un elemento que se ha modificado
<input>, <select>, <textarea>
onclickPinchar y soltar el ratón
Todos los elementos
ondblclick
Pinchar dos veces seguidas con el ratón
Todos los elementos
onfocusSeleccionar un elemento
<button>, <input>, <label>, <select>,<textarea>, <body>
Atributo Descripción Elementos que pueden usarlo
onkeydownPulsar una tecla (sin soltar)
Elementos de formulario y <body>
onkeypressPulsar una tecla
Elementos de formulario y <body>
onkeyupSoltar una tecla pulsada
Elementos de formulario y <body>
onload
La página se ha cargado completamente
<body>
onmousedown
Pulsar (sin soltar) un botón del ratón
Todos los elementos
onmousemove
Mover el ratón
Todos los elementos
onmouseout El ratón "sale" del elemento (pasa por encima de
Todos los elementos
Atributo Descripción Elementos que pueden usarlo
otro elemento)
onmouseover
El ratón "entra" en el elemento (pasa por encima del elemento)
Todos los elementos
onmouseup
Soltar el botón que estaba pulsado en el ratón
Todos los elementos
onreset
Inicializar el formulario (borrar todos sus datos)
<form>
onresize
Se ha modificado el tamaño de la ventana del navegador
<body>
onselectSeleccionar un texto
<input>, <textarea>
onsubmit Enviar el <form>
Atributo Descripción Elementos que pueden usarlo
formulario
onunload
Se abandona la página (por ejemplo al cerrar el navegador)
<body>
2.3.4. Atributos de foco
Cuando el usuario selecciona un elemento en una aplicación, se dice que "el
elemento tiene el foco del programa". Si por ejemplo un usuario pincha con su ratón
sobre un cuadro de texto y comienza a escribir, ese cuadro de texto tiene el foco del
programa, llamado "focus" en inglés. Si el usuario selecciona después otro elemento,
el elemento original pierde el foco y el nuevo elemento es el que tiene el foco del
programa.
Los elementos de las páginas web también pueden obtener el foco de la aplicación
(en este caso, el foco del navegador) y HTML define algunos atributos específicos
para controlar cómo se seleccionan los elementos.
Atributo Descripción
accesskey = "letra"
Establece una tecla de acceso rápido a un elemento HTML
tabindex = "numero"
Establece la posición del elemento en el orden de tabulación de la página. Su valor debe estar comprendido entre 0 y 32.767
Atributo Descripción
onfocus, onblur
Controlan los eventos JavaScript que se ejecutan cuando el elemento obtiene o pierde el foco
Cuando se pulsa repetidamente la tecla del tabulador sobre una página web, el
navegador selecciona de forma alternativa todos los elementos de la página que se
pueden seleccionar (principalmente los enlaces y los elementos de formulario). El
atributo tabindex permite alterar el orden en el que se seleccionan los elementos, por
lo que es muy útil cuando se quiere controlar de forma precisa cómo se seleccionan
los campos de un formulario complejo.
Por su parte, el atributo accesskey permite establecer una tecla para acceder de
forma rápida a cualquier elemento. Aunque la tecla de acceso rápido se establece
mediante HTML, la combinación de teclas necesarias para activar ese acceso rápido
depende del navegador. En el navegador Internet Explorer se pulsa la tecla ALT + la
tecla definida; en el navegador Firefox se pulsa Alt + Shift + la tecla definida; en el
navegador Opera se pulsa Shift + Esc + la tecla definida; en el navegador Safari se
pulsa Ctrl + la tecla definida.
Nombres de colores hexadecimales
Del más claro al más oscuroIncluya la notación hex
Nombre del color Código hexColor "seguro para web" más cercano
BLANCO #FFFFFF #FFFFFF
AZUR #F0FFFF #FFFFFF
CREMA #F5FFFA #FFFFFF
NIEVE #FFFAFA #FFFFFF
MARFIL #FFFFF0 #FFFFFF
BLANCO FANTASMA #F8F8FF #FFFFFF
BLANCO FLORAL #FFFAF0 #FFFFFF
AZUL ALICIA #F0F8FF #FFFFFF
CIAN CLARO #E0FFFF #CCFFFF
MELÓN VERDE #F0FFF0 #FFFFFF
AMARILLO CLARO #FFFFE0 #FFFFFF
CONCHA #FFF5EE #FFFFFF
SONROJO LAVANDA #FFF0F5 #FFFFFF
HUMO BLANCO #F5F5F5 #FFFFFF
ENCAJE ANTIGUO #FDF5E6 #FFFFFF
SEDA DE MAÍZ #FFF8DC #FFFFCC
LINO #FAF0E6 #FFFFFF
AMARILLO ALAMBRE DORADO CLARO
#FAFAD2 #FFFFCC
GASA LIMÓN #FFFACD #FFFFCC
BEIGE #F5F5DC #FFFFCC
LAVANDA #E6E6FA #CCCCFF
BATIDO DE PAPAYA #FFEFD5 #FFFFCC
ROSA BRUMOSA #FFE4E1 #FFCCCC
BLANCO ANTIGUO #FAEBD7 #FFFFCC
BLANCO ALMENDRA #FFEBCD #FFFFCC
SOPA #FFE4C4 #FFFFCC
TURQUESA PÁLIDO #AFEEEE #99FFFF
MOCASÍN #FFE4B5 #FFCCCC
GAINSBORO #DCDCDC #CCCCCC
SOPLIDO MELOCOTÓN #FFDAB9 #FFCCCC
BLANCO NAVAJO #FFDEAD #FFCC99
DORADO ALAMBRE PÁLIDO #EEE8AA #FFFF99
TRIGO #F5DEB3 #FFCCCC
POLVO AZUL #B0E0E6 #CCCCFF
AGUAMARINA #7FFFD4 #66FFCC
GRIS CLARO #D3D3D3 #CCCCCC
ROSA #FFC0CB #FFCCCC
AZUL CLARO #ADD8E6 #99CCFF
CARDO #D8BFD8 #CCCCCC
ROSA CLARO #FFB6C1 #FFCCCC
AZUL CIELO CLARO #87CEFA #99CCFF
VERDE PÁLIDO #98FB98 #99FF99
AZUL ACERO CLARO #B0C4DE #99CCCC
CAQUI #F0D58C #FFCC99
AZUL CIELO #87CEEB #99CCFF
AGUA #00FFFF #00FFFF
CIAN #00FFFF #00FFFF
PLATA #C0C0C0 #CCCCCC
CIRUELA #DDA0DD #CC99CC
GRIS #BEBEBE #CCCCCC
VERDE CLARO #90EE90 #99FF99
VIOLETA #EE82EE #FF99FF
AMARILLO #FFFF00 #FFFF00
TURQUESA #40E0D0 #33CCCC
MADERA FORNIDA #DEB887 #CCCC99
AMARILLO VERDE #ADFF2F #99FF33
BRONCEADO #D2B48C #CCCC99
TURQUESA MEDIO #48D1CC #33CCCC
SALMÓN CLARO #FFA07A #FF9966
AGUAMARINA MEDIO #66CDAA #66CC99
GRIS OSCURO #A9A9A9 #999999
ORQUÍDEA #DA70D6 #CC66CC
VERDE MAR INTENSO #8FBC8F #99CC99
AZUL CIELO INTENSO #00BFFF #00CCFF
MARRÓN ARENA #F4A460 #FF9966
DORADO #FFD700 #FFCC00
VERDE PRIMAVERA MEDIO #00FA9A #00FF99
CAQUI OSCURO #BDB76B #CCCC66
ACIANO AZUL #6495ED #6699FF
ROSA CALIENTE #FF69B4 #FF66CC
SALMÓN OSCURO #E9967A #FF9966
TURQUESA OSCURO #00CED1 #00CCCC
VERDE PRIMAVERA #00FF7F #00FF66
CORAL CLARO #F08080 #FF9999
MARRÓN ROSADO #BC8F8F #CC9999
SALMÓN #FA8072 #FF9966
CHARTREUSE #7FFF00 #66FF00
PÚRPURA MEDIO #9370DB #9966CC
VERDE CÉSPED #7CFC00 #66FF00
AZUL DODGER #1E90FF #3399FF
VERDE AMARILLO #9ACD32 #99CC33
VIOLETA ROJO PÁLIDO #DB7093 #CC6699
AZUL PIZARRA MEDIO #7B68EE #6666FF
ORQUÍDEA MEDIO #BA55D3 #CC66CC
CORAL #FF7F50 #FF6666
AZUL CADETE #5F9EA0 #669999
VERDE MAR CLARO #20B2AA #339999
DORADO ALAMBRE #DAA520 #CC9933
NARANJA #FFA500 #FF9900
GRIS PIZARRA CLARO #778899 #669999
FUCSIA #FF00FF #FF00FF
MAGENTA #FF00FF #FF00FF
VERDE MAR MEDIO #3CB371 #33CC66
PERÚ #CD853F #CC9933
AZUL ACERO #4682B4 #3399CC
AZUL REAL #4169E1 #3366CC
GRIS PIZARRA #708090 #669999
TOMATE #FF6347 #FF6633
NARANJA OSCURO #FF8C00 #FF9900
AZUL PIZARRA #6A5ACD #6666CC
VERDE LIMA #32CD32 #33CC33
LIMA #00FF00 #00FF00
ROJO INDIO #CD5C5C #CC6666
ORQUÍDEA OSCURO #9932CC #9933CC
AZUL VIOLETA #8A2BE2 #9933FF
ROSA INTENSO #FF1493 #FF0099
DORADO ALAMBRE OSCURO #B8860B #CC9900
CHOCOLATE #D2691E #CC6633
CIAN OSCURO #008B8B #009999
GRIS DIFUSO #696969 #666666
GRIS ACEITUNA #6B8E23 #669933
VERDE MAR #2E8B57 #339966
VERDE CERCETA #008080 #009999
VIOLETA OSCURO #9400D3 #9900CC
VIOLETA ROJO MEDIO #C71585 #CC0066
NARANJA ROJO #FF4500 #FF3300
ACEITUNA #808000 #999900
SIENA #A0522D #996633
AZUL PIZARRA OSCURO #483D8B #333399
VERDE ACEITUNA OSCURO #556B2F #666633
VERDE BOSQUE #228B22 #339933
CARMESÍ #DC143C #CC0033
AZUL #0000FF #0000FF
MAGENTA OSCURO #8B008B #990099
GRIS PIZARRA OSCURO #2F4F4F #336666
MARRÓN MONTURA #8B4513 #993300
MARRÓN #A52A2A #993333
LADRILLO REFRACTARIO #B22222 #993333
PÚRPURA #800080 #990099
VERDE #008000 #009900
ROJO #FF0000 #FF0000
AZUL MEDIO #0000CD #0000CC
ÍNDIGO #4B0082 #330099
AZUL MEDIANOCHE #191970 #000066
VERDE OSCURO #006400 #006600
AZUL OSCURO #00008B #000099
AZUL MARINO #000080 #000099
ROJO OSCURO #8B0000 #990000
GRANATE #800000 #990000
NEGRO #000000 #000000
