http://itgs.wikispaces.com/Criterion+A+-+Project
LA EVALUACIÓN INTERNA: consiste en un proyecto que deberás entregar al profesor en una carpeta con los siguientes contenidos:
CARPETA: "00128_001_APELLIDO":
. 00128_001_Apellido_portada.html
. 00128_001_Apellido_portada.txt
. PRODUCTO: carpeta estructurada con index.html y demás webs.
. DOCUMENTACION: Criterios A, B, C, etc. en doc y en PDF.
. MP4 ScreenCast (video explicativo por parte del alumno)
. Puntuación obtenida por el profesor en PDF, justificación de la nota.
. Formulario del profesor 3/CS
. Listado de número de alumnos de la muestra en PDF.
(Nota interna para el profesor: IBIS>formulario 3/CS
Descarga aquí las plantillas: PLANTILLA_PROYECTO.
DREAMWEAVER:
Las páginas web se programan en lenguaje HTML y a menudo consisten en varios centenares de funciones y etiquetas.
Las páginas web son muy simples pues sólo continenen varios de los siguientes elementos básicos: texto, imágines, vínculos, formularios, tablas, hojas de estilos. etc. Dreamweaver ofrece herramientas de fácil uso que permite insertar estos elementos sin necesidad de programación (el código HTML es creado automáticamente).
Antes de empezar con Dreamwever debemos Planificar el sitio (objetivos, audiencia, tecnología). Un primer paso es diseñar un mapa de sitio sencillo (mapa de arquitectura), olvidarse de los adornos de momento y establecer la página principal, las categorías principales y los páginas vínculos secundarias. Tambien es importante indentificar los puntos inicio-fin con claridad.
* INTERFAZ de Dreamweaver: Al abrir el programa accedemos como "diseñador" y elegimos "crear nuevo: HTML". La ventana principal está formada por "la página web" en el centro, "la barra de menús" en la zona superior, "las propiedades" en el inferior y "los paneles" en el lado izquierdo.
Lo primero que debemos hacer es definir el Interfaz de Usuario: el antiguo estándar 640x480 píxeles ya se ha quedado obsoleto por lo que tendremos que buscar una resolución intermedia entre 1024x768(máxima) y 800x600(mínima).
1º CREAR UN SITIO: antes de empezar a colocar elementos en la página, debes crearte un "sitio" donde se guardarán todos los documentos. En nuestro caso elige la opción "sin utilizar la tecnología de servidor FTP".
Un sitio web estará formada por varias páginas web distintas vinculadas entre sí que podremos ver en el panel Archivos, "Vista de mapa".
2º CREA UNA PÁGINA WEB: Archivo>nuevo página básica HTML. Y guarda con frecuencia el proyecto en el sitio. En el panel de la derecha "archivos" podrás ver todos tus documentos. En propiedades de página podrás poner fondos de página, márgenes, fuentes, etc. ..y ya está listo para ir incorporando textos, imágenes, bontones flash, vínculos, formularios, hojas de estilos, tablas, etc.
3º TABLAS: Hay varias formas de organizar el contenido: tablas, hojas de estilos, marcos. Las tablas organizan los datos en filas y columnas pero su modificación no es muy rápida. En este sentido las CSS son más versátiles pero a su vez más complicadas de utilizar. Inicialmente las tablas se diseñaron para contener datos pero actualmente se usan para diseñar composiciones debido a las limitaciones originarias del HTML. El problema de las tablas es que tardan en cargarse y no son rápidas a la hora de modificarlas.
Se pueden asignar CSS a una determinada celda de una tabla.
4º CSS, HOJAS DE ESTILOS: <STYLE> las hojas de estilos sirven para asignar propiedades generales a la página. Permite también composiciones imposibles con sólo el HTML. Una regla de hoja de estilo está compuesta por dos partes: a) "el selector" que es la etiqueta HTML a la que se le aplicará el estilo ej.H2, y b) "la declaración" o definición del estilo ej.Font-family:helvetia. Podemos diseñar CSS para una sóla línea, incrustrada para toda una página en <head> o como enlace para varias páginas desde una hoja de estilo (fichero **.css).
Parar crear CSS abrimos en la derecha el panel Diseño, +, nuevo CSS, selector, tipo selector (clase), definir en un archivo separado.
Existen CSS a modo de plantillas: "archivo nuevo">nuevo documento>diseño CSS>crear. Una página web con formato a través de CSS delimita las zonas con etiquetas DIV. Cada etiqueta DIV tiene sus propias propiedades.
La ventaja de las CSS es su flexibilidad y rapidez. Modificando una sóla hojas CSS puedes modificar todo la apariciencia de tu sitio web.
5º MARCOS. (frames) dividen una página web en distintas zonas donde se muestran distintas páginas a la vez. Por ejemplo un marco que contenga un menú que se mantenga fijo y siempre visible.
archivo>nuevo documento>conjunto de marcos>crear.
Para administrar las propiedades de disintos marcos deberemos abrir el panel de la derecha "marcos". En el panel de propiedades se pueden modificar sus tamaños.
6º CAPAS. Con las capas se puede controlar de forma más precisa la colocación de las imágenes, textos, etc. Mediante el previsualizador de Dreamweaver podemos ir comprobando los resultados rápidamente.
Accedemos a las capas desde: Propiepades de Ventana>Capas (propiedades de las capas).
Capas>insertar ventanas... dentro de la capa se pueden meter texto, imágenes, animaciones, etc.
Dentro de sus propiedades encontramos: ID o nombre de la capa_Layer1, Iz_Sup como parámetro de los píxeles (x,y), Z como orden de apilamiento (1,2,3...), Visibilidad que por defecto se ven las capas pero podemos hacer que estas no se vean o crear un evento asociadas a tiempo, onmouseover, etc. (default: muestra la capa, Inherit: hereda la propiedad de su capa padre, Hidden: oculta, Visible: se vé directamente o se le asocia un evento.
7º COMPORTAMIENTOS. Etiquetas interactivas. Gracias a estos, podemos hacer que las páginas sean interactivas (que cambien en función de las acciones del usuario). Un comportamiento tiene parejo "una acción" por ejemplo la reproducción de un audio, asociado a "un evento" por ejemplo cuando el usuario pasa el ratón sobre una imagen.
Ejemplos sencillos de comportamientos son las "imágenes de sustitución".
Los comportamientos son pequeños programas en lenguaje JavaScript que pueden llegar a ser bastante complicados. Dreamwever incluye un gran número de comportamientos preprogramados.
La gestión de comportamientos se realiza desde el panel Etiqueta de comportamientos de la derecha de la ventana de Dreamwever.
VER>Comportamientos> con "+" creamos comportamientos y con "-" los borramos.
ej. El puntero al pasar sobre imagen "1" hace que se muestre otra imagen "2" en otro sitio de la página.
a) Insertar los dos gráficos en el sitio.
b) Colocar cada imagen en capas independientes y asignar nombres a las dos capas.
c) En propiedades hacer las imágenes invisibles mediente un ojo cerrado, para que no se vean cuando se cargue desde el principio la página.
d) en comportamientos seleccionar la primera imágen (no la capa) ir a la lista de comportamientos Mostrar>Ocultar Capas>seleccionar la capa 2>boton mostrar>y aceptamos.
8º JAVASCRIPT. Nos permite añadir efectos especiales. Es un lenguaje de programación orientada a objetos. Ej. Ventanas popup, alertas, contraseñas, etc.
9º PLUGIN. Ej. *.swf
10º SONIDOS. ej. *.wav
LA EVALUACIÓN INTERNA: consiste en un proyecto que deberás entregar al profesor en una carpeta con los siguientes contenidos:
CARPETA: "00128_001_APELLIDO":
. 00128_001_Apellido_portada.html
. 00128_001_Apellido_portada.txt
. PRODUCTO: carpeta estructurada con index.html y demás webs.
. DOCUMENTACION: Criterios A, B, C, etc. en doc y en PDF.
. MP4 ScreenCast (video explicativo por parte del alumno)
. Puntuación obtenida por el profesor en PDF, justificación de la nota.
. Formulario del profesor 3/CS
. Listado de número de alumnos de la muestra en PDF.
(Nota interna para el profesor: IBIS>formulario 3/CS
Descarga aquí las plantillas: PLANTILLA_PROYECTO.
DREAMWEAVER:
Las páginas web se programan en lenguaje HTML y a menudo consisten en varios centenares de funciones y etiquetas.
Las páginas web son muy simples pues sólo continenen varios de los siguientes elementos básicos: texto, imágines, vínculos, formularios, tablas, hojas de estilos. etc. Dreamweaver ofrece herramientas de fácil uso que permite insertar estos elementos sin necesidad de programación (el código HTML es creado automáticamente).
Antes de empezar con Dreamwever debemos Planificar el sitio (objetivos, audiencia, tecnología). Un primer paso es diseñar un mapa de sitio sencillo (mapa de arquitectura), olvidarse de los adornos de momento y establecer la página principal, las categorías principales y los páginas vínculos secundarias. Tambien es importante indentificar los puntos inicio-fin con claridad.
* INTERFAZ de Dreamweaver: Al abrir el programa accedemos como "diseñador" y elegimos "crear nuevo: HTML". La ventana principal está formada por "la página web" en el centro, "la barra de menús" en la zona superior, "las propiedades" en el inferior y "los paneles" en el lado izquierdo.
Lo primero que debemos hacer es definir el Interfaz de Usuario: el antiguo estándar 640x480 píxeles ya se ha quedado obsoleto por lo que tendremos que buscar una resolución intermedia entre 1024x768(máxima) y 800x600(mínima).
1º CREAR UN SITIO: antes de empezar a colocar elementos en la página, debes crearte un "sitio" donde se guardarán todos los documentos. En nuestro caso elige la opción "sin utilizar la tecnología de servidor FTP".
Un sitio web estará formada por varias páginas web distintas vinculadas entre sí que podremos ver en el panel Archivos, "Vista de mapa".
2º CREA UNA PÁGINA WEB: Archivo>nuevo página básica HTML. Y guarda con frecuencia el proyecto en el sitio. En el panel de la derecha "archivos" podrás ver todos tus documentos. En propiedades de página podrás poner fondos de página, márgenes, fuentes, etc. ..y ya está listo para ir incorporando textos, imágenes, bontones flash, vínculos, formularios, hojas de estilos, tablas, etc.
3º TABLAS: Hay varias formas de organizar el contenido: tablas, hojas de estilos, marcos. Las tablas organizan los datos en filas y columnas pero su modificación no es muy rápida. En este sentido las CSS son más versátiles pero a su vez más complicadas de utilizar. Inicialmente las tablas se diseñaron para contener datos pero actualmente se usan para diseñar composiciones debido a las limitaciones originarias del HTML. El problema de las tablas es que tardan en cargarse y no son rápidas a la hora de modificarlas.
Se pueden asignar CSS a una determinada celda de una tabla.
4º CSS, HOJAS DE ESTILOS: <STYLE> las hojas de estilos sirven para asignar propiedades generales a la página. Permite también composiciones imposibles con sólo el HTML. Una regla de hoja de estilo está compuesta por dos partes: a) "el selector" que es la etiqueta HTML a la que se le aplicará el estilo ej.H2, y b) "la declaración" o definición del estilo ej.Font-family:helvetia. Podemos diseñar CSS para una sóla línea, incrustrada para toda una página en <head> o como enlace para varias páginas desde una hoja de estilo (fichero **.css).
Parar crear CSS abrimos en la derecha el panel Diseño, +, nuevo CSS, selector, tipo selector (clase), definir en un archivo separado.
Existen CSS a modo de plantillas: "archivo nuevo">nuevo documento>diseño CSS>crear. Una página web con formato a través de CSS delimita las zonas con etiquetas DIV. Cada etiqueta DIV tiene sus propias propiedades.
La ventaja de las CSS es su flexibilidad y rapidez. Modificando una sóla hojas CSS puedes modificar todo la apariciencia de tu sitio web.
5º MARCOS. (frames) dividen una página web en distintas zonas donde se muestran distintas páginas a la vez. Por ejemplo un marco que contenga un menú que se mantenga fijo y siempre visible.
archivo>nuevo documento>conjunto de marcos>crear.
Para administrar las propiedades de disintos marcos deberemos abrir el panel de la derecha "marcos". En el panel de propiedades se pueden modificar sus tamaños.
6º CAPAS. Con las capas se puede controlar de forma más precisa la colocación de las imágenes, textos, etc. Mediante el previsualizador de Dreamweaver podemos ir comprobando los resultados rápidamente.
Accedemos a las capas desde: Propiepades de Ventana>Capas (propiedades de las capas).
Capas>insertar ventanas... dentro de la capa se pueden meter texto, imágenes, animaciones, etc.
Dentro de sus propiedades encontramos: ID o nombre de la capa_Layer1, Iz_Sup como parámetro de los píxeles (x,y), Z como orden de apilamiento (1,2,3...), Visibilidad que por defecto se ven las capas pero podemos hacer que estas no se vean o crear un evento asociadas a tiempo, onmouseover, etc. (default: muestra la capa, Inherit: hereda la propiedad de su capa padre, Hidden: oculta, Visible: se vé directamente o se le asocia un evento.
7º COMPORTAMIENTOS. Etiquetas interactivas. Gracias a estos, podemos hacer que las páginas sean interactivas (que cambien en función de las acciones del usuario). Un comportamiento tiene parejo "una acción" por ejemplo la reproducción de un audio, asociado a "un evento" por ejemplo cuando el usuario pasa el ratón sobre una imagen.
Ejemplos sencillos de comportamientos son las "imágenes de sustitución".
Los comportamientos son pequeños programas en lenguaje JavaScript que pueden llegar a ser bastante complicados. Dreamwever incluye un gran número de comportamientos preprogramados.
La gestión de comportamientos se realiza desde el panel Etiqueta de comportamientos de la derecha de la ventana de Dreamwever.
VER>Comportamientos> con "+" creamos comportamientos y con "-" los borramos.
ej. El puntero al pasar sobre imagen "1" hace que se muestre otra imagen "2" en otro sitio de la página.
a) Insertar los dos gráficos en el sitio.
b) Colocar cada imagen en capas independientes y asignar nombres a las dos capas.
c) En propiedades hacer las imágenes invisibles mediente un ojo cerrado, para que no se vean cuando se cargue desde el principio la página.
d) en comportamientos seleccionar la primera imágen (no la capa) ir a la lista de comportamientos Mostrar>Ocultar Capas>seleccionar la capa 2>boton mostrar>y aceptamos.
8º JAVASCRIPT. Nos permite añadir efectos especiales. Es un lenguaje de programación orientada a objetos. Ej. Ventanas popup, alertas, contraseñas, etc.
9º PLUGIN. Ej. *.swf
10º SONIDOS. ej. *.wav
