dw
-
Upload
institucion-esmeralda -
Category
Education
-
view
154 -
download
1
description
Transcript of dw
Apuntes de Dreamweaver DW 8 Grado Decimo
Docente Carlos Rangel Suarez
Página 1
Apuntes Dreamweaver 8
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
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.
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).
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
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)
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
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.
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.
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
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.
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.
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.
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.
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.
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.
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;
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.
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.
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.
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.
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.
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:
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";
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:
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
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