dw

27
Apuntes de Dreamweaver DW 8 Grado Decimo Docente Carlos Rangel Suarez Página 1 Apuntes Dreamweaver 8

description

Apuntes de dramweaver version 8

Transcript of dw

Page 1: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 1

Apuntes Dreamweaver 8

Page 2: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 2

Contenido

Apuntes Dreamweaver 8 ..................................................................................................................... 1

1. Diseño usando Dreamweaver ..................................................................................................... 3

1.1 Primeros pasos en Dreamweaver ............................................................................................. 4

2. Barras de Herramientas .................................................................................................................. 5

2.1 Barra Común ............................................................................................................................. 5

2.1.6.0 Submenú Imágenes ......................................................................................................... 7

2.1.7: Media ................................................................................................................................ 9

2.2 Barra de Formularios ............................................................................................................... 10

3. Breve referencia de HTML ............................................................................................................. 12

4. de PHP ........................................................................................................................................... 22

4.1 Para el envío de emails............................................................................................................ 22

Page 3: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 3

1. Diseño usando Dreamweaver

Si bien en el primer apunte vimos como trabajar en forma ordenada en Fireworks 8, para trabajar

con Dreamweaver vamos a tener que ser aún más ordenados ya que empezaremos a utilizar

subdirectorios con contenidos específicos dentro de nuestro directorio de trabajo.

Como base por cada proyecto nuevo crearemos una carpeta en nuestro directorio web. Este si

instalamos el AppServ será C:\Appserv\www o el directorio que hayamos elegido para su

instalación.

Luego dentro de esa nueva carpeta que para referencia futura llamaremos proyecto1 y su path o

camino completo sería:

C:\AppServ\www\proyecto1\

En esta carpeta vamos a guardar todas las páginas HTML que vayamos creando para este proyecto

en particular.

Luego creamos 2 carpetas más, la primera se llamará “imagenes” (Sin acentos!) y la otra “src”. En

la carpeta “imágenes” guardaremos todas las imágenes que usaremos en la página generalmente

con formato JPG y en la carpeta “src” guardaremos todos los archivos PNG de fireworks (los

cuales pueden ser editados en el futuro).

Resumiendo tendremos la siguiente estructura de directorios:

C:\AppServ\www\proyecto1\

C:\AppServ\www\proyecto1\imagenes\

C:\AppServ\www\proyecto1\src\

Ahora con toda la estructura de directorios creada podemos pasar a la siguiente sección.

Page 4: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 4

1.1 Primeros pasos en Dreamweaver

Al ejecutar el programa por primera vez nos aparecerá una pantalla de presentación con los

diferentes tipos de archivos que podremos crear usando este programa, por ahora

seleccionaremos solamente HTML [figura 1.1]

Figura 1.1

Una vez que hayamos seleccionado esta opción nos aparecerá una ventana similar a la de un

procesador de texto, pues esto tiene sentido ya que la primer parte de la extensión de nuestros

archivos HTML significa HyperTexto (HT).

Page 5: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 5

2. Barras de Herramientas

Las barras de herramientas en Dreamweaver se encuentran en la parte superior de la pantalla

justo debajo de la barra de menús [figura 2.1].

Hay varias barras de herramientas cada una agrupa un set de herramientas que son similares y

cumplen funciones específicas dentro del programa, la primera que veremos es la barra “Común”.

Figura 2.1

2.1 Barra Común

Como se puede apreciar en la figura 2.2 esta barra consta de varias opciones comunes que

necesitaremos para la creación de la estructura general de la

página.

Figura 2.1

Page 6: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 6

A continuación se presenta una breve explicación de lo que hace cada una de las herramientas de

esta barra. Para leer las referencias de cada una de las herramientas hay que seguir el número de

la flecha y el número de la sección, por ejemplo 2.1.1 hace referencia a la imagen uno de la

sección 2.1

2.1.1: Vínculo: esta herramienta sirve para crear links, se puede proceder de dos maneras,

teniendo un texto seleccionado y luego presionando esta herramienta o directamente

presionando esta herramienta. Si lo hacemos de la primer forma el texto seleccionado nos

aparecerá en la ventana emergente, sino tendremos que completar el texto y el link en los cuadros

de texto correspondientes.

2.1.2: Vínculo de email: Sirve para crear un tipo especial de links llamados de email, sirve para

crear un link que tiene como peculiaridad que cuando lo presionamos abre nuestro programa de

correo e ingresa el email ingresado en el campo “to” del correo electrónico.

2.1.3: Ancla: esta es una herramienta para moverse rápidamente entre las distintas partes de una

página, generalmente se usa para las páginas que son muy extensas para saltar entre distintos

títulos o secciones del sitio, cabe aclarar que no abre nuevas páginas como los links sino que

mueve la página de un ancla a la otra.

2.1.4: Tabla: Con esta herramienta podemos crear lo que va a ser la estructura de nuestro sitio, a

estas también podemos anidarlas para crear estructuras más complejas o simplemente usarlas

para mostrar u ordenar datos o imágenes.

2.1.5: Div: Inserta una división la cual puede tener una justificación, por ahora la utilidad de esta

herramienta es más bien limitada, más avanzado el curso encontraremos que es la herramienta

más usada en la diagramación de estructuras.

2.1.6: Imagen: Con esta herramienta podremos agregar imágenes a nuestra página, para esto

antes siempre se recomienda guardar la imagen en la carpeta recomendada en la primer parte de

este apunte. Si presionamos sobre la flecha pequeña que se encuentra al lado del botón que

corresponde a las imágenes nos encontraremos con un nuevo menú (figura 2.3) con diferentes

opciones (Ver sección 2.1.6.0)

Page 7: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 7

2.1.7: Media: Esta herramienta nos permitirá ingresar un número de objetos los cuales se

distinguen del resto por su contenido multimedial, entre los objetos que podremos ingresar se

encuentran animaciones flash, applets java y contenido shockwave entre los más comunes.

2.1.6.0 Submenú Imágenes

2.1.6.1: Imagen: esta es la opción por defecto y se utiliza para insertar imágenes per se.

2.1.6.2: Marcador de posición de imagen: Es solamente una forma para marcar la posición y

parámetros que va a tener una imagen pero sin seleccionar una imagen en sí, se utiliza hasta que

tengamos la imagen.

2.1.6.3: Imagen de sustitución: esta es más bien 2 imágenes, una que va a ser la imagen por

defecto y la otra la imagen por la cual se va a cambiar cuando el mouse este sobre la imagen, se

utiliza para crear efectos de interactividad con el usuario.

2.1.6.4: HTML de Fireworks: si creamos algún menú o zonas interactivas y exportamos las mismas

desde fireworks utilizaremos esta herramienta para importar dicho HTML, la única diferencia con

hacerlo nosotros mismos es que al utilizar esta herramienta nos elimina los encabezados repetidos

del HTML.

2.1.6.5: Barra de Navegación: esta es parecida a las imágenes de sustitución solo que puede

constar de muchas imágenes agrupadas, prácticamente es lo mismo que insertar varias imágenes

de sustitución, la ventaja es que esta todo mucho más organizado utilizando esta herramienta.

2.1.6.6: Zonas Interactivas: si estamos seleccionando una imagen podremos crear zonas

interactivas (que pueden ser “clickeadas” y obtener un comportamiento tras esta acción) de

Page 8: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 8

distintas formas utilizando estas herramientas. Simplemente basta con seleccionar alguna de las

formas de las zonas interactivas y luego dibujar la zona dentro de la imagen que seleccionamos.

Page 9: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 9

2.1.7: Media

Si bien en este submenú se pueden encontrar diversas herramientas solo utilizaremos y

estudiaremos algunas a lo largo de este curso.

2.1.7.1: Flash: Esto nos permite insertar una animación flash (archivo SWF) que hayamos creado

anteriormente.

2.1.7.2: Botón Flash: Con esta herramienta podremos crear botones animados de forma muy

sencilla, con solo presionar en esta herramienta nos aparecerá un menú contextual con el cual

podremos elegir y definir las características de un nuevo botón.

2.1.7.3: Texto Flash: Al presionar sobre esta herramienta podremos crear un texto simple usando

una interface muy intuitiva. La principal ventaja de hacerlo mediante “texto flash” y no usar texto

común es que con esta herramienta podremos elegir cualquier tipografía, mientras que en texto

común en HTML tenemos una cantidad muy limita de fuentes.

Page 10: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 10

2.2 Barra de Formularios

En este conjunto de herramientas encontraremos la mayoría de las utilidades que necesitaremos a

la hora de crear formularios interactivos, desde los campos de texto a los botones. A continuación

se describen brevemente cada una de ellas:

2.2.1: Formulario: Esta etiqueta nos indica el método y la acción que el formulario va a realizar una

vez que el mismo haya sido enviado, además podemos elegir el tipo de codificación. La única

aclaración pertinente a esta herramienta es que la acción generalmente es una página, ejemplo:

proceso_formulario.php.

2.2.2: Campo de texto: Mediante esta herramienta podremos posibilitar a que nuestro visitante

complete cierta información que quisiéramos recibir o que utilicemos para realizar cálculos

simples para nuestro usuario.

2.2.3: Campo oculto: Estos campos son iguales que los campos de texto con la única diferencia que

no son “visibles” para el usuario, sin embargo se pueden utilizar para enviar información junto con

los datos que envía el visitante.

2.2.4: Área de texto: Estos son campos más extensos, que dejan escribir más de una línea pero

muy similares a los campos de texto comunes.

2.2.5: Casilla de verificación (checkbox): Este es un campo particular que sirve para que el usuario

elija una, ninguna o varias de un set de opciones presentadas ante él, muchas veces es utilizado

para que el usuario acepte los términos y condiciones del sitio cuando este se registra en el

mismo.

2.2.6: Botón de opción: al contrario de la herramienta anterior los botones de opción solo

permiten elegir una opción entre las presentadas y generalmente se deja una establecida por

Page 11: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 11

defecto para evitar cualquier posible error. Se utiliza para que el usuario elija una opción entre

varias pero en este caso si o si debe elegir alguna.

2.2.7: Grupo de opción: Esta es una herramienta facilitada por el Dreamweaver para crear un

grupo de opciones en forma rápida, no posee ninguna particularidad más que la habilidad para

crear grupos de opciones en forma más veloz que si lo hiciéramos de un campo por ves.

2.2.8: Lista/menú: Estos campos se utilizan para presentar un listado de opciones en forma de lista

o lista desplegable, la ventaja principal de las listas desplegables (combobox) es que pueden

presentar una gran cantidad de información ocupando muy poco espacio. Otra característica que

distinguen las listas a las listas desplegables es que en las listas presionando la tecla Ctrl podemos

seleccionar más de un ítem del listado.

2.2.9: Menú de salto: Esta es una herramienta provista por el Dreamweaver que nos facilitará la

creación de una lista para ir a distintas páginas, solamente tenemos que seguir los pasos y

completar la información requerida y el programa nos generará una lista en forma automática.

2.2.10: Campo de imagen: Con esta herramienta podremos crear un botón a partir de una imagen,

tiene las mismas opciones que las imágenes convencionales con la diferencia que el usuario puede

presionar sobre la imagen y esta actuaria como un botón de envío de formulario.

2.2.11: Campo de archivo: Este tipo campo sirve para posibilitar el envío de archivos, simplemente

nos agrega un campo y un botón que el usuario debe presionar. Una vez que el usuario presiona

dicho botón aparecerá una ventana desde la cual el usuario podrá elegir un archivo para subir.

2.2.12: Botón: Sirve para agregar botones con alguna funcionalidad específica, si uno en cambio no

le agrega ninguna función específica sirve para el envío del formulario en el cual se encuentra

dicho botón.

2.2.13: Etiqueta: No tiene ninguna función en particular más que de servir de identificador para los

campos.

2.2.14: Juego de campos: Se utiliza para delimitar un área del formulario con una etiqueta en la

parte superior, su única utilidad es para separar ciertas áreas de un formulario.

Page 12: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 12

3. Breve referencia de HTML

HTML o como sus siglas Hypertext Markup Language (Lenguaje de marcas de Hypertexto) es un

lenguaje de marcas o marcado que se utiliza en la creación de páginas web. Es texto puro que una

vez interpretado por un navegador o dispositivo a fin puede verse como si fuera un documento

multimedia (con imágenes, animaciones, texto, enlaces, etc).

Casi todos los elementos en HTML son “etiquetas” las mismas son palabras encerradas entre los

signos menor y mayor, por ejemplo: <b>, luego poseen un contenido y finalmente una etiqueta de

cierre que es igual a la etiqueta de apertura solo que posee una “barra” antes de la palabra,

siguiendo el mismo ejemplo: </b>.

Por ejemplo en la imagen que se presenta a continuación (Figura 3.1) se pueden observar las

distintas partes de una etiqueta HTML, en este caso la etiqueta DIV, cabe aclarar que solo se

muestra uno de los posibles atributos que esta etiqueta posee. Además cada etiqueta puede tener

dentro de su contenido otras etiquetas HTML así que el anidado de etiquetas debe ser lo más

ordenado posible para facilitar (y muchas veces hasta posibilitar) el entendimiento de nuestro

código de forma sencilla.

Figura 3.1

Lo más importante a tener en cuenta cuando escribamos HTML es siempre recordar donde están

las etiquetas de inicio y fin dentro del mismo formulario, ya que todo son etiquetas y saber en

dónde estamos ubicados dentro del documento nos ahorrará muchos dolores de cabeza.

Page 13: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 13

Los documentos HTML constan por una etiqueta HTML que inicia el documento en sí, luego dentro

de la misma tienen una etiqueta head y luego de esta una etiqueta body. Dentro de la etiqueta

body se ubica el contenido que nuestros visitantes podrán ver.

Page 14: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 14

La figura 3.2 es un ejemplo de un documento HTML simple:

Figu

ra 3.2

La primer parte delimita la etiqueta HEAD que dentro tiene una etiqueta “meta” que es ingresada

en forma automática por el Dreamweaver y nos sirve para identificar a nuestro documento HTML

con el juego de caracteres iso-8859-1 (alfabeto latino). Además aquí encontramos la etiqueta title

(título) la cual nos indica el título de la página (lo que aparece sobre la barra de título en la ventana

del navegador).

La segunda parte que se encuentra coloreada es la etiqueta “BODY”, la misma sirve para presentar

el contenido del documento. En este caso dentro de la etiqueta “BODY” encontramos una etiqueta

“H1” que es un texto más grande, generalmente usado para presentar los títulos de las secciones,

y luego una etiqueta “P” que es usada para mostrar un párrafo de texto. Si bien en este ejemplo

particular la mayor parte de las etiquetas no tienen atributos agregarles un atributo es tan simple

como cambiar una propiedad a la etiqueta en Dreamweaver.

Notesé que la única etiqueta que no tiene etiqueta de cierre es la etiqueta “META” esta

particulariadad se debe a que no tiene contenido, entonces la etiqueta de cierre puede ser

omitida si se agrega una barra “/” antes de terminar la etiqueta, por ejemplo “<br/>”.

Otra particularidad de este documento es la línea 1, esta tiene una etiqueta especial que establece

el tipo de documento que vamos a usar, esta como el atributo de la linea siguiente “xmlns” son

optativos y el documento funciona bien sin estas.

Page 15: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 15

Como contra ejemplo se presenta el siguiente documento (Figura 3.3) que sería un documento

HTML un poco más complejo pero sin tipo, al carecer de un tipo definido toma los valores por

defecto que generalmente funcionan bien.

Figura 3.3

En la parte superior del documento vemos que ya no existen las etiquetas extrañas que nos había

agregado anteriormente el Dreamweaver, además borramos el juego de caracteres utilizados,

dejando la etiqueta “HEAD” bastante simple.

Además, dentro de la etiqueta “BODY” cambiamos la propiedad de alineación (align) de las

etiquetas “H1” y “P”. Luego dentro de la etiqueta “BODY” agregamos una tabla de dos filas por

dos columnas y cambiamos la propiedad del color de fondo (bgcolor) de cada una de las celdas.

Nótese como se mantuvo el código siempre ordenado, esta es una cuestión clave en la generación

de documentos HTML. Sin el orden, la lectura de un documento HTML es extremadamente

complicada y crece exponencialmente con el tamaño y la complejidad de nuestra página por todo

esto se debe tener especial cuidado en que nuestros documentos queden bien ordenados para

que el día de mañana cuando tengamos que hacer un cambio al mismo, esta tarea sea lo más

sencilla posible.

Page 16: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 16

Nuestro siguiente ejemplo es ligeramente más complicado, tiene definido en la parte del HEAD

estilos CSS que luego aplicamos a las distintas etiquetas HTML para que estas tomen las

propiedades definidas para cada clase. El contenido en este caso va a ser un formulario de

contacto con sus diferentes campos.

En la clase uno básicamente decimos que las etiquetas HTML que tengan este estilo van a tener:

Nombre de la Clase: tabla_formulario

Borde: de un pixel, sólido de color gris.

Fondo: #EEE (color gris muy claro).

Tipo de Fuente: Arial o Helvetica o Sans Serif (toma la primera disponible)

Nombre de la Clase: campo_texto

Borde: de un pixel, sólido de color gris.

Fondo: #EEE (color gris muy claro).

Tipo de Fuente: Arial o Helvetica o Sans Serif (toma la primera disponible).

Grosor de la fuente: Negrita.

Page 17: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 17

Color del texto: Gris oscuro.

Espacio del texto al borde: 3px

Margen: 4px;

Page 18: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 18

Nombre de la Clase: boton

Borde: de dos pixeles, sólido de color gris.

Fondo: #EEE (color gris muy claro).

Tipo de Fuente: Arial o Helvetica o Sans Serif (toma la primera disponible).

Grosor de la fuente: Negrita.

Color del texto: Gris oscuro.

Espacio del texto al borde: 2px

Margen: 4px;

Si queremos cambiar los estilos o crear uno nuevo tendremos que ir a la parte derecha de la

ventana del Dreamweaver, en donde se encuentra el panel de CSS:

Si esta sección no nos aparece en los paneles de la derecha debemos ir a:

O presionar como dice al lado del menú las teclas Mayus+F11

En (1) podemos ver todos los estilos que definimos y

si los seleccionamos y presionamos en (3) podremos

editar dicho estilo. Si en cambio queremos crear un

estilo nuevo debemos presionar en (2).

Tenemos que tener en cuenta que el nombre de las

“clases” que creamos siempre comienzan con un

punto (.), y por el momento solo vamos a utilizar de

estas para definir estilos.

Otra forma de definir estilos es mediante el nombre

de la etiqueta a la que queremos darle el estilo, por

ejemplo (el estilo que se llame “TD” va a alterar el

estilo de todas las celdas del documento HTML.

Page 19: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 19

Si presionamos en crear un estilo nuevo (véase (2) en la página anterior) nos aparecerá una nueva

pantalla como la siguiente:

Tenemos que tener en cuenta que por el momento siempre debemos seleccionar en [1] (Clase),

luego escribir el nombre de la clase con el punto adelante [2] y no hay que olvidarse que las clases

no deben tener espacios, para esto utilizamos los guiones bajos. Finalmente vamos a definirlo por

ahora siempre en este documento [3].

Una vez que presionamos en “Aceptar”

Luego nos aparecerá la pantalla anterior en la cual tenemos en el titulo de la ventana [1] el

nombre de la clase, luego en la parte izquierda [2] tenemos las distintas clasificaciones de

propiedades que podremos cambiar. A la derecha tendremos las propiedades [3] de la categoría

de propiedades seleccionada.

Page 20: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 20

Se recomienda ir probando las distintas combinaciones e ir viendo los cambios para aprender bien

que es lo que hace cada propiedad sobre cada tipo de etiqueta.

Una vez que cambiamos las propiedades que nosotros queremos presionamos en aceptar y

tendremos creada nuestra clase CSS, el siguiente paso sería seleccionar alguna etiqueta HTML,

como por ejemplo una tabla y asignarle a dicha tabla nuestra clase recién creada, para esto

seleccionamos la tabla y vamos en la parte de propiedades en donde dice clase y elegimos de la

lista de opción nuestra clase:

Lo que tenemos que tener en cuenta cuando modificamos algunas propiedades de una clase es

que algunas propiedades se propagan a través de las distintas etiquetas, por ejemplo si nosotros

elegimos la fuente “Arial” para la clase “tabla_formulario”, todos los textos que estén dentro del

objeto al que nosotros le hayamos puesto ese estilo, en este caso una tabla, van a cambiar su

fuente a “Arial”. Aunque esto parece complicado a priori con el tiempo nos vamos a dar cuenta

que el comportamiento de la herencia de estilos sigue el sentido común, o al menos así lo hace en

la mayoría de los casos .

Otra cosa particular de los estilos es que no todos los navegadores toman todos los estilos de la

misma forma, algunos como el Internet Explorer 6 tiene muchos problemas con los contenedores

tipo DIV y más aún con las transparencias de los PNG. Se deja como ejercicio al lector probar usar

PNG transparentes en Internet Explorer 6 y ver el resultado peculiar que este navegador muestra.

Puede parecer algo complicado seguir cada uno de los estilos que creamos de esta forma pero a la

larga el orden que logramos en el sitio si usamos nombres que representen realmente el estilo que

estamos usando nos va a facilitar mucho la creación de nuestro sitio y más aún la reusabilidad del

código HTML que creemos.

Page 21: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 21

Siguiendo con nuestro ejemplo el código de la sección del cuerpo del html sería el siguiente:

Como nota particular se puede ver el “action” o acción del formulario esta “apuntando” a un php

llamado proceso.php, este archivo lo que va a hacer es enviar el formulario y luego un mensaje

para comunicarle al usuario el éxito del envío.

También tenemos que tener en cuenta los nombres de los campos que creamos, en este caso de

arriba hacia abajo: nombre, email, teléfono y mensaje. No está de más aclarar que como siempre

se siguen las convenciones de nombres, sin espacios ni acentos ni eñe y todo en minúsculas.

Page 22: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 22

4. de PHP

PHP es un lenguaje de programación muy sencillo que se utiliza en la programación web, es

probablemente el más conocido y más ampliamente utilizado. Además es muy sencillo de

aprender ya que carece de complicaciones técnicas o semánticas.

Es un lenguaje de programación sin tipos de variables, todas las variables pueden almacenar

cualquier cosa en cualquier momento y esto puede variar en el transcurso de nuestro programa o

script.

Tiene un gran número de ventajas y es muy fácil de instalar y configurar sin mencionar que

requiere muy pocos recursos del sistema para funcionar correctamente. Como desventaja puede

verse el hecho que es mucho más lento que lenguajes como C o C++ y además anteriormente la

carencia de tipos hacía que la mayoría de los programadores mal usara esta ventaja y los

programas que creaban se volvían muy difíciles de mantener.

Basta de historia vamos a ver nuestro primer script en PHP!

4.1 Para el envío de emails.

Para completar el ejemplo del capítulo anterior veremos el código de la página proceso.php, hay

que tener en cuenta que el email se envía por más que los campos no hayan sido completados así

que si no queremos que esto suceda deberíamos verificar que el usuario haya completado dichos

campos. Una forma de hacer esto es preguntar por el contenido de cada una de las variables y solo

enviarlo si estos no están vacíos.

Para este tipo de validaciones vamos a tener que llegar al menos hasta la página 21 en donde se

propone una solución al problema mencionado anteriormente.

Page 23: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 23

En el caso que quisiéramos validar que el usuario haya completado los campos el código sería el

siguiente:

Page 24: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 24

Los cambios que hicimos fueron:

Agregamos la variable “$mensaje_usuario” para almacenar aquí el mensaje que vamos a mostrarle

al usuario en el caso que el envío se haya podido realizar o si el usuario tiene que volver atrás y

corregir los datos que trató de enviar.

Agregamos un IF preguntando si cada uno de los campos tiene “algo”. La forma más sencilla es

simplemente preguntando por la variable si todas tienen algo distinto de “0” o vacío entonces la

condición se cumple si al menos una de estas tiene un 0 o es vacía entonces la condición no se

cumple y va por el lado del “else” se ejecuta la línea:

$mensaje_usuario = "Debes completar todos los campos antes de continuar";

Page 25: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 25

Y no todo lo que está arriba de esta.

Cambiamos el mensaje que mostrábamos por el “echo” de la variable que creamos, esto nos

genera un mensaje dinámico que según si el usuario completó o no los datos que debía le va a

mostrar un mensaje u otro.

4.2 Para mostrar la fecha

Siguiendo con los scripts simples ahora vamos a ver cómo podemos hacer para mostrar la fecha en

algún lugar de nuestra página web, para esto creamos una tabla que usaremos de marco de

nuestro sitio y luego vamos a insertar el código para mostrar la fecha en la parte superior de la

página justo debajo del encabezado de la página:

Page 26: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 26

Como vemos en el boceto creado tenemos una imagen de fondo en el encabezado y luego

tenemos el contenido del sitio, primero ponemos la imagen de fondo en la celda que va a

representar el encabezado de la página y luego dentro del contenido de la celda, o sea dentro del

tag “TD” (<td>Aquí</td>) vamos a ingresar el siguiente código:

<?php echo date("F j, Y, g:i a"); ?>

El problema es que la fecha nos aparecerá en inglés y nosotros la queremos en español para esto

tendremos que hacer lo siguiente:

<?php

function fechaCastellano(){

$mes = date("n");

$todos_los_meses = array(

1 => "Enero",

2 => "Febrero",

3 => "Marzo",

4 => "Abril",

5 => "Mayo",

6 => "Junio",

7 => "Julio",

8 => "Agosto",

9 => "Septiembre",

10 => "Octubre",

11 => "Noviembre",

12 => "Diciembre"

);

$semana = date("D");

$dias_de_la_semana = array(

"Mon" => "Lunes",

"Tue" => "Martes",

"Wed" => "Miercoles",

"Thu" => "Jueves",

"Fri" => "Viernes",

"Sat" => "Sábado",

"Sun" => "Domingo",

);

$textoMes = $todos_los_meses[$mes];

$textoDia = $dias_de_la_semana[$semana];

$dia = date("d");

$año = date ("Y");

return $textoDia." ".$dia." de ".$textoMes." de ".$año;

}

Echo fechaCastellano();

?>

Básicamente esta es nuestra primera función, por ahora lo único que nos interesa es que si

nosotros copiamos este código y lo pegamos en donde nosotros queremos que aparezca la fecha

Page 27: dw

Apuntes de Dreamweaver DW 8 Grado Decimo

Docente Carlos Rangel Suarez

Página 27

esta nos aparecerá de la siguiente forma: el día de la semana, seguido por el número del día, luego

el nombre del mes actual y finalmente el año actual. Todo esto se puede observar en la línea que

comienza con un “return” esto justamente es lo que “devuelve” la función cuando se la llama.

Para más información sobre la función date() que tantos usamos en este capítulo ver:

http://ar.php.net/manual/es/function.date.php