Conexión a una Base de datos MySQL

Para crear una conexión debemos realizar los siguientes pasos:

1.- Ir al menú de aplicación seleccionar ventana y la siguiente opción:

2.- Y presionamos las siguientes opciones:

3.- Visualizaremos el siguiente cuadro para la configuración de la conexión, ingresar los siguientes valores y presionar el botón "prueba":

4.- Si visualizamos el siguiente mensaje significará que la conexión es correcta:

5.- Presionar el botón "Aceptar" y veremos la información de conexión en el panel de comportamientos del servidor:

DIV con posicionamiento flotante

La potencialidad de esta opción, es que desplaza este elemento todo lo que pueda a la dirección indicada, hasta encontrar el límite del elemento contenedor, u otro elemento también flotante, además hace que todos los elementos fluyan a su alrededor.

Crearemos un archivo HTML con dos elementos div con posición flotante a la izquierda y a la derecha, como vemos en la siguiente imagen:

Realizaremos los siguientes pasos:

1.- Crearemos un archivo HTML en blanco.

2.- Presionaremos la siguiente opción para insertar un DIV:

3.- Ingresar en siguiente nombre de ID y presionar el botón "Nueva regla CSS":

4.- Presionar el botón "Aceptar":

5.- Visualizaremos el cuadro de edición de regla CSS, en la la opción tipo definiremos fuente color blanco.

6.- En la la opción Fondo definiremos el color negro.

7.- En la opción Cuadro ingresaremos el ancho, alto y float left:

8.- Presionaremos el botón "Aceptar":

9.- Presionaremos el botón "Aceptar":

10.- Presionaremos la siguiente opción para insertar un DIV:

11.- Ingresar en siguiente nombre de ID y presionar el botón "Nueva regla CSS":

12.- Presionar el botón "Aceptar":

13.- Visualizaremos el cuadro de edición de regla CSS, en la la opción tipo definiremos fuente color blanco.

14.- En la la opción Fondo definiremos el color rojo.

15.- En la opción Cuadro ingresaremos el ancho, alto y float left:

16.- Presionaremos el botón "Aceptar":

17.- Presionaremos el botón "Aceptar":

18.- Presionaremos F12 y visualizaremos el siguiente resultado:

Ver Ejemplo

¿Cuáles son las versiones de HTML?

HTML fue desarrollado originalmente por Tim Bernes-Lee pero debido al rápido crecimiento de la web, surgió la necesidad de crear un estándar para que tanto los programadores como los navegadores pudieran basarse en unas mismas normas para escribir HTML. Cada versión de HTML establece unas normas respecto a cuáles son las etiquetas válidas y cómo se deben escribir.

Los estándares oficiales HTML son el HTML 2.0, el HTML 3.2, el HTML 4.0 y el HTML 4.01, aunque actualmente se trabaja en el HTML 5. El HTLM 5 ya está empezando a ser usado aunque todavía no es una especificación oficial. El XHTML, una forma más avanzada del HTML que se suponía iba a sustituir a éste, va a quedar integrado dentro del HTML 5.

Evolución de HTML:

HTML 2.0: En 1995 se publica el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer estándar oficial de HTML, es decir, el HTML 1.0 no existió como estándar. HTML 2.0 no soportaba tablas.

Se simplificaba al máximo la estructura del documento para agilizar su edición, donde la declaración explícita de los elementos body, html y head es opcional.

HTML 3.2: La versión HTML 3.2 se publicó en 1997 y es la primera recomendación de HTML publicada por el W3C (Consorcio internacional). Esta revisión incorporó los últimos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.

HTML 4.01: La última especificación oficial de HTML se publicó en diciembre de 1999 y se denomina HTML 4.01. Desde la publicación de HTML 4.01, el W3C se centró en el desarrollo del estándar XHTML. Por este motivo, en el año 2004, las empresas Apple, Mozilla y Opera mostraron su preocupación por la falta de interés del W3C en HTML y decidieron organizarse en una nueva asociación llamada WHATWG (Web Hypertext Application Technology Working Group) que comenzó el desarrollo del HTML 5, cuyo primer borrador oficial se publicó en enero de 2008. Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML, y actualmente W3C está trabajando para el lanzamiento del estándar HTML 5.0, dentro del cual ha decidido integrar el XHTML.

HTML 5.0, HTML 5.1 y HTML 5.2: El consorcio internacional W3C marcó las siguientes fechas para liberación de los estándares de especificación: 2014/2015 para HTML 5.0, 2016 para HTML 5.1 y 2019 para HTML 5.2

Hasta el momento la versión de HTML más utilizada ha venido siendo la 4.01. Esta versión fue definida por la W3C (Comité Internacional que define los estándares web) hace varios años. Actualmente ya está disponible la nueva versión de HTML, denominada HTML 5. Esta versión ya se está usando de modo experimental y se espera que se imponga como estándar en los próximos años.

Además de cada versión, cada una tiene variantes (digamos que “distintas formas”). Cuando escribimos un documento HTML debemos indicar en una línea inicial qué versión y variante es la que estamos usando de forma que cualquier persona que lea ese documento HTML sepa qué versión y variante se ha empleado. Las variantes del HTML 4.01 son:

HTML 4.01 Strict: En este tipo de documentos podemos usar etiquetas HTML 4.01, pero no se aceptan etiquetas obsoletas, es decir, etiquetas propias de versiones más antiguas. Es la versión que si usamos en teoría nos debería dar un resultado óptimo en los navegadores más modernos. Esto no siempre es así, como explicaremos un poco más adelante.

HTML 4.01 Transitional: En este tipo de documentos se pueden usar todas las etiquetas de todas las versiones de HTML. Usar esta variante de HTML plantea el interrogante de si es correcto permitir el uso de etiquetas obsoletas que podrían dejar de funcionar en las proximas versiones de los navegadores. Sin embargo, este es el estándar más usado, porque combina la posibilidad de usar etiquetas más antiguas y etiquetas más modernas, de forma que podamos aspirar a una mejor visualización en la mayor parte de los navegadores.

HTML 4.01 Frameset: Este tipo de documentos tiene soporte para frames. Los frames son unos marcos a modo de pequeñas subventanas dentro de una misma página web que se usaban mucho hace unos años pero que hoy en día se usan cada vez menos. Este tipo de HTML podemos considerarlo anticuado, porque hay otras formas de diseñar páginas web sin frames más modernas y útiles que nos permiten obtener el mismo resultado de forma más eficiente.

En la figura podemos ver cómo el ser más estrictos supone que tengamos que usar un menor número de etiquetas.

¿CUÁL ELIJO, Y CÓMO?

No te preocupes demasiado por utilizar una versión “correcta y concreta” sino por crear páginas web que se vean bien. Para ello debes aprender cómo se construye y cuál es la lógica del HTML, más que una versión concreta de éste. Ten en cuenta que hay diversidad de versiones y que no todos los navegadores se ciñen a los estándares, con lo cual no tiene demasiado sentido preocuparse por ceñirse a una versión. Te puede resultar un poco extraño, pero cuando adquieras experiencia en desarrollos web comprobarás que las normas para los desarrollos web no están 100 % claras.

Si ya sabías HTML pero nunca has separado contenido y diseño, o todos estos estándares te suenan a chino, usa el HTML normal, en concreto la versión 4.01, que es la última. Elige la rama Strict si necesitas cumplir el estándar Strict por algún motivo (por ejemplo porque te lo pida un cliente así específicamente). Usar la variante Strict puede resultar un poco más complicado porque tenemos más limitaciones. 

El XHTML es un lenguaje que va a quedar integrado dentro de HTML 5 y que no estudiaremos en este curso.

En un archivo HTML debemos indicar qué versión y variante estamos usando. Para indicar ésto hay que poner una línea al principio de la página web (del archivo donde está el contenido). No es una etiqueta, por tanto es algo rara y no hay que cerrarla ni ponerla en minúsculas. Eso sí, debemos ponerla en todos nuestros documentos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Fuente

Posicionamiento DIVs y CSS

El contenido de la siguiente imagen es la base para tener un manejo apropiado del posicionamiento de objetos web y en especial para el uso de DIV con CSS:

1.- Position STATIC: 

El posicionamiento por defecto para todos los elementos es position: static, lo que significa que el elemento no estará posicionado y aparecerá donde normalmente debería hacerlo (siempre en su lugar original). Normalmente no deberá especificarse a no ser que deba modificarse una posición previamente definida, ignora por completo las propiedades de desplazamiento. 

Ejemplo: 

Ver ejemplo

2.- Position RELATIVE:

En caso de especificarse position: relative, podrán utilizarse los valores top o bottom, right o left para posicionar el elemento en la posición relativa donde inicialmente debería aparecer. En el siguiente ejemplo el div se posicionará 20 pixeles hacia abajo y 40px a la derecha de su posición original.

Ejemplo:

Ver ejemplo

3.- Position ABSOLUTE:

Cuando se especifica position:absolute, el elemento será desplazado colocado en función del primer elemento padre posicionado en que se encuentre (normalmente será el body).

La diferencia del posicionamiento relativo, los demás elementos ocuparán su posición.

Ejemplo:

Ver ejemplo

4.- Position FIXED:

Se comporta igual que con el valor absolute pero aquí al mover las barras de desplazamiento de la ventana, (siempre que la página ocupe más espacio que la ventana), la caja se queda inmóvil, por lo que no se moverá con el resto de la ventana. En el ejemplo, si desplazamos la ventana con la barra de desplazamiento lateral (derecha) vemos que mientras el resto de la página se desplaza, la caja fija queda en el mismo sitio en la pantalla.

Ejemplo:

Ver ejemplo

Comportamientos: Abrir Popup

Para abrir una ventana popup con Dreamweaver realizaremos los siguientes pasos:

1.- Creamos un archivo HTML:

2.- Seleccionamos la siguiente opción de comportamiento "Abrir ventana del navegador":

3.- Visualizaremos la siguiente ventana de configuración, ingresaremos la siguiente información para su configuración:

4.- Presionar la opción "Aceptar":

5.- La ejecución del comportamiento quedara como OnLoad:

6.- Presionar F12, veremos el siguiente resultado:

OBS: No se abrirá el popup si tenemos bloqueados desde nuestro navegador estos elementos.

Ver ejemplo

Comportamentos: Cambiar propiedades a div y texto

1.- Creamos una archivo HTML con los siguientes objetos:

2.- El siguiente es el código HTML:

OBS: Para utilizar el comportamiento de modificación de propiedades debemos asegurarnos que cada objeto tenga un nombre de ID.

3.- Desde el panel de comportamientos seleccionamos las siguientes opciones:

OBS: Seleccionamos "Cambiar propiedad"

 4.- Se abrirá la ventana de cambio de propiedad, para cambiar al color de fondo de la capa "Div" configuraremos las siguientes opciones y presionamos "Aceptar":

OBS: Cambiar el comportamiento de OnLoad a OnClick.

5.- Nuevamente abrimos un comportamiento cambio de propiedad, para cambiar al color de la letra A (id text) configuraremos las siguientes opciones  y presionamos "Aceptar":

OBS: Cambiar el comportamiento de OnLoad a OnClick.

Ver ejemplo

Otra forma de centrar un DIV contenedor

1.- Crear un DIV con las siguientes propiedades:

2.- El siguiente es el estilo CSS:

3.- El siguiente es el código HTML:

4.- La siguiente es la vista en nuestra ventana de documento:

OBS: Para centrar una capa con respecto al elemento que la contiene hemos empleado CSS. 

En Izq. ponemos 50%, para que el lado izquierdo cuente a partir del centro, le damos un margen izquierdo negativo que sea la mitad del ancho de la capa. 

En nuestro ejemplo nuestro DVI tiene un ancho de 800px, añadiríamos por CSS margin-left: -400px.

Ver ejemplo