viernes, 23 de mayo de 2014
lunes, 28 de abril de 2014
Practica 19. Ventana dreamweaver y barra de herramientas
Ventana principal de Dreamweaver
La Ventana
de documento o zona de edición, en la que escribirá y creará los detalles
de una página.
La
barra Insertar, que contiene botones para la inserción de diversos tipos
de objetos, como imágenes, tablas, etc.
El botón
desplegable Común cuenta con un buen número de barras, que
clasifican por temas los objetos que se pueden manipular. Cada objeto es un
fragmento de código HTML y podrá establecer diversos atributos al insertarla.
La barra de herramientas
La barra de
herramientas de Dreamweaver contiene botones que permiten alternar entre
diferentes vistas del documento rápidamente, cambiar el título del documento o
previsualizar la página en el navegador. Los elementos del menú Opciones (botón
situado en el extremo derecho de la barra de herramientas) cambia en función de
la vista que seleccione.
- Para
ver sólo código en la ventana de documento, haga clic en el
botón Vista de código.
- Para
ver una vista que contenga las vistas de Código y de Diseño, haga clic en
el botón Vistas de código y diseño.
- Para
ver sólo la vista de Diseño, haga clic en el botón Vista de diseño.
- Para
introducir un título para el documento, utilice el campo Título. Si el
documento ya tiene título, éste aparecerá en dicho campo.
- Para
poner, obtener o proteger un archivo, haga clic en el botón de menú de
"Estado de archivo".
- Para
previsualizar o depurar un documento en un navegador, haga clic en Vista
previa/depurar en navegador y elija uno de los navegadores enumerados en
el menú emergente.
- Para
actualizar la vista de Diseño, haga clic en el botón Actualizar vista de
diseño.
- Para
obtener información de referencia sobre código HTML, CSS y
JavaScript, haga clic en el botón Referencia.
- Para
desplazarse por el código, haga clic en el botón Navegación por el código.
Para obtener más información, consulte "Introducción al depurador
JavaScript".
- Para
mostrar u ocultar la regla, la cuadrícula y las ayudas visuales, haga clic
en el botón de menú Opciones.
El pánel objetos
Este pánel
contiene botones que permiten la creación e inserción de diversos tipos de
objetos, como tablas, vínculos, capas e imágenes. El pánel contiene siete
categorías de forma predeterminada: Común, Formularios, Marcos, Head,
Invisibles y Caracteres. También contiene botones que cambian de vista:
Estándar y Disposición. Cada uno de estos elementos serán explicados en temas
posteriores.
Para
cambiar de categoría dé clic sobre alguna de las pestañas situadas en la parte
superior del pánel.
Si
desea insertar un objeto en el documento haga clic en el correspondiente botón
del pánel o arrastre el ícono del botón hasta la ventana de documento.
Dependiendo del objeto, aparecerá un cuadro de diálogo en el cual se le pedirá
que seleccione o inserte el archivo u objeto deseado.
Si
desea insertar un marcador de posición mantenga presionada la tecla Control
mientras da clic en el ícono para insertar el objeto. (Por ejemplo, para
insertar un marcador de posición para una imagen sin especificar un archivo de
imagen, mantenga presionada la tecla Control y haga clic en el botón Imagen.)
Nota: Esto no permite omitir todos los
cuadros de diálogo. Algunos objetos, como las barras de navegación, las capas,
los botones Flash, los marcos, etc., no insertan marcadores de espacio.
El
inspector de propiedades permite examinar y editar las propiedades del elemento
que esté seleccionado actualmente, puede ser un objeto o texto. Es posible
seleccionar los elementos en la ventana de documento o en el inspector de
código.
La
mayoría de los cambios realizados en las propiedades se aplicarán de inmediato
en la ventana de documento. (Para algunas propiedades, los cambios no se
aplican hasta que se hace clic fuera de los campos de texto de edición de la
propiedad, se presiona Enter o se presiona Tab para cambiar a otra propiedad.)
El
contenido del inspector de propiedades varía en función del elemento
seleccionado. Si quiere obtener información sobre propiedades concretas,
seleccione un elemento en la ventana de documento y, a continuación, haga clic
en el icono Ayuda, situado en la esquina superior derecha del inspector de
propiedades.
El inspector
de propiedades muestra inicialmente las propiedades del elemento seleccionado
que se utilizan con mayor frecuencia; para ver todas las propiedades haga clic
en la flecha de ampliación situada en la esquina inferior derecha del inspector
de propiedades, para ver más propiedades del elemento.
A la
derecha de la ventana, tenemos los grupos de paneles. Son conjuntos de
paneles relacionados y apilados y se les identifica con un nombre.
Para
desplegar un grupo de paneles, haga clic en la punta de flecha 
de despliegue
de despliegue
Para
desacoplar un grupo de paneles, arrástrelo pinchando en el botón mover 
(formado por dos columnas de
puntitos) situado en el borde izquierdo de la barra de título del grupo.
(formado por dos columnas de
puntitos) situado en el borde izquierdo de la barra de título del grupo.
10. El
panel Sitio, desplegado, permite administrar los archivos y carpetas que forman
el sitio Web.
11. El
botón Ampliar / Contraer 
del panel de Archivos ofrece
la posibilidad de ver todos los archivos del disco duro local de manera
semejante a como lo hace el Explorador de Windows.
del panel de Archivos ofrece
la posibilidad de ver todos los archivos del disco duro local de manera
semejante a como lo hace el Explorador de Windows.
12. Interesante
es el botón en forma de punta de flecha que se ve en el lateral izquierdo del
panel. Haciendo clic, conseguimos plegar el panel hacia el margen derecho para
ampliar la superficie de edición o volverlo a desplegar para ver de nuevo el
árbol de archivos del sitio Web.
13. Recuerde
que pulsando F4 oculta todos los paneles lo que aumenta la superficie
de la vetana documento. Esto es muy útil cuando escribe la página Web.
Dreamweaver
ofrece otros muchos paneles, inspectores y ventanas, como el panel
Historial y el Inspector de código. Para abrir paneles, inspectores y ventanas
tiene que utilizar el menú Ventana.
Practica 18. Terminología basica del software para diseñar paginas web
1; Dreamweaver CS5
Dreamweaver CS5 es un
software fácil de usar que permite crear páginas web profesionales.
Las funciones de edición visual de Dreamweaver
CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la
necesidad de programar manualmente el código HTML.
Se puede crear tablas,
editar marcos, trabajar con capas, insertar comportamientos JavaScript, etc..,
de una forma muy sencilla y visual.
Además incluye un
software de cliente FTP completo, permitiendo entre otras cosas trabajar con
mapas visuales de los sitios web, actualizando el sitio web en el servidor sin
salir del programa.
2; CSS
CSS es un lenguaje de
estilo que define la presentación de los documentos HTML. Por ejemplo, CSS
abarca cuestiones relativas a fuentes, colores, márgenes, líneas, altura,
anchura, imágenes de fondo, posicionamiento avanzado y muchos otros temas.
3; Plantilla
de Dreamweaver
Una plantilla es una
estructura en la que hay partes no editables (que no se van a poder modificar)
y otras que son modificables para llenarse de contenido.
4; Contenedor
en Dreamweaver
Los contenedores están incluidos en
la misma página, pero cada contenedor puede albergar un elemento muy concreto
tal como una imagen, una animación o un texto, y podemos situarlo donde
deseemos, en cualquier parte de la página.
5;
Comportamientos en Dreamweaver
Los comportamientos de
Dreamweaver introducen en los documentos código JavaScript que permite a los
visitantes interactuar con la página Web para modificarla de diversas maneras o
para que se realicen determinadas tareas. Un comportamiento es una combinación
de un evento con una acción que desencadena ese evento.
6; Sitio
local
Al definir un sitio local,
está indicando a Dreamweaver el lugar en el que tiene intención de almacenar
todos los archivos de un sitio concreto.
7; Sitio
dinámico
Los sitios Web dinámicos son aquellos que permiten
crear aplicaciones dentro de la propia Web, otorgando una mayor
interactividad con el navegante. Aplicaciones dinámicas como encuestas y
votaciones, foros de soporte, libros de visita, envío de e-mails inteligentes,
reserva de productos, pedidos on-line, atención al cliente personalizada ....
8;
Sitio interactivo
Un sitio web
interactivo permite a los usuarios participar y aportar contenido. Un sitio interactivo es básicamente un sitio
dinámico al que se le han añadido prestaciones interactivas.
http://www.designioweb.com/interactivos.html
9; Región
editable
En una plantilla, las
regiones editables son las partes de la página que se pueden cambiar en los
archivos basados en esa plantilla. Las regiones bloqueadas (no editables)
son las partes del diseño de la página que permanecen constantes de una página
a otra.
10; Maquetación
La maquetación es la
distribución de los elementos en nuestra página. Piensa en una página web
cualquiera. Seguro que distingues algunos elementos claramente diferenciados,
como un encabezado, columnas, y un pie de página.
11;
Etiqueta Div
Se emplea para definir
un bloque de contenido o sección de la página, para poder aplicarle diferentes
estilos e incluso para realizar operaciones sobre ese bloque específico.
12;
Tabla
Las tablas son una
herramienta potente para presentar datos e imágenes en páginas HTML. Las tablas proporcionan a los diseñadores Web formas de
añadir estructura vertical y horizontal a una página.
13;
Formulario
Los formularios sirven
para que los usuarios o visitantes de la página envien un comentario o consulta al cliente.
14;
Formulario de contacto
Los formularios de
contacto son una gran manera hacer que los visitantes se unan a tu sitio
martes, 11 de febrero de 2014
Practica 1.3 Elementos básicos de HTML
1; Bloc de notas:
El bloc de notas es un editor de texto gratuito incluido en todas las versiones del sistema Windows desde 1985.
Es una aplicación básica, sencilla y rápida. Generalmente graba los archivos en formato ".txt", un formato que no tiene etiquetas ni estilos.
Es una aplicación básica, sencilla y rápida. Generalmente graba los archivos en formato ".txt", un formato que no tiene etiquetas ni estilos.
2; Buscador:
Un buscador es un tipo de software que crea índices de bases de datos o de sitios web en función de los títulos de los ficheros, de palabras clave, o del texto completo de dichos ficheros
3; Compatible:
Que tiene aptitud o capacidad para estar, ocurrir o
desarrollarse junto con otro u otros.
4; Estructura de página web:
Toda página Web tiene una estructura que permite al
programador saber de antemano qué tipo de información necesita introducir. Esto
ayuda a que la página que diseña sea claramente legible y se pueda modificar
más fácilmente.
<HTML>
<HEAD>
<TITLE>Primera página</TITLE>
</HEAD>
<BODY>
...
...
...
</BODY>
</HTML>
Estas líneas son permanentes en una página
Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea
la página y el contenido.
La primera instrucción <HTML> indica al
explorador de Internet que ahí comienza una página Web. La siguiente
instrucción <HEAD> indica el encabezado de la página, es decir el área de
la barra de título. <TITLE> indica el título de la página propiamente
dicho. <BODY> es una instrucción que indica al explorador de Internet que
ahí empieza el área de contenido de la página (es decir el cuerpo de la
página).
En el lenguaje HTML, muchas instrucciones se
cierran con el signo / (diagonal) para indicar al programa que las propiedades
aplicadas con esa instrucción se terminan ahí donde se pone el signo diagonal.
Si el signo de cierre (/) no se aplica convenientemente, el programa seguirá
aplicando las propiedades de la instrucción anterior a todas las líneas
inferiores, hasta que se encuentre otra instrucción que modifique las
propiedades actuales.
5; Etiqueta:
Marca o marcas que se dejan en un texto para que luego sean
interpretadas, generalmente para realizar alguna acción sobre el mismo texto
marcado. Por ejemplo, el lenguaje HTML se basa en la aplicación de múltiples
etiquetas para dar formato y darle características a un texto. Este texto es
interpretado y mostrado por un navegador.
6; Hipertexto:
Todo documento que está vinculado (hipervínculo) con
otros documentos a través
de enlaces (links).
Al ingresar a ese enlace se puede acceder al documento enlazado.
También pueden ser vínculos al mismo documento,
sólo que a otra posición más arriba o más abajo.
Las páginas web html son ejemplos de hipertextos.
Las páginas web html son ejemplos de hipertextos.
7; Lenguaje HTML:
Es un lenguaje de marcación especialmente ideado para
permitir la creación de contenidos basados en el hipertexto, es decir, enlaces
que permiten desplazarnos a través de diversos documentos en cualquier momento.
8: Marcas (tag):
Tag (metadato), una palabra clave o término asociado con o
asignado a una pieza de información.
9; Navegador:
Un navegador web es un tipo de software que permite la
visualización de documentos y sitios en hipertexto, comúnmente agrupados bajo
la denominación de Web o Internet.
10; Página web:
Se conoce como página web al documento que forma parte de un sitio
weby que suele contar con enlaces (también conocidos como hipervínculos olinks)
para facilitar la navegación entre los contenidos.
Las páginas web están desarrolladas con lenguajes de
marcado como el HTML,
que pueden ser interpretados por los navegadores. De esta forma, las páginas
pueden presentar información en distintos formatos (texto, imágenes, sonidos,
videos, animaciones), estar asociadas a datos de estilo o contar con
aplicaciones interactivas.
11; Plataforma:
Es un sistema que sirve como base para hacer funcionar
determinados módulos de hardware o de software con los que es compatible.
12; Sitio web:
Es una colección de páginas de internet relacionadas
y comunes a un dominio de Internet o subdominio en la World Wide Web en Internet.
13; Servidor web:
Un servidor web es un programa que se ejecuta continuamente
en un computador, manteniéndose a la espera de peticiones de ejecución que le
hará un cliente o un usuario de Internet.
14; Vínculos:
En Internet,
un vínculo o hipervínculo (también conocido como enlace, hiperenlace
o link) es un elemento de un documento electrónico que está relacionado con
otro recurso y que, al formar parte de una red de documentos, posibilita la
navegación.
Los vínculos permiten
que una persona que está leyendo una página web haga click en ciertas palabras
o imágenes para trasladarse virtualmente hacia otra página.
viernes, 7 de febrero de 2014
1.2 Introduccion al HTML
1; ¿Que
entiendes por HTML?
Es un lenguaje que sirve en la creación de páginas web y
permite a los navegadores
2;
Define cada una de las letras que conforma la palabra HTML
Es el acrónimo de
HyperText Markup Language (Lenguaje de Marcado de Hipertexto)
3; ¿Quién
invento el HTML?
Tim Berners-Lee
Es un científico de la
computación británico, conocido por ser el padre de la Web. Estableció la
primera comunicación entre un cliente y un servidor usando el protocolo HTTP en
noviembre de 1989.
4; ¿Cuál
era el objetivo al crear el lenguaje HTML?
Es dotar a un texto de estructura
lógica: párrafos, listas, citas, etc. En HTML, no dices cómo se representa cada cosa;
únicamente qué es cada cosa.
5;
Menciona cuatro características del lenguaje HTML
1; HTML es un lenguaje de marcas orientado a la publicación
de documentos en Internet. La mayoría de las marcas son semánticas. Es un
lenguaje extensible, al que se le pueden añadir nuevas características, marcas
y funciones, dependiendo de la experiencia y la habilidad del programador.
2; Los documentos HTML están formados por una serie de
bloques de texto (titulares, párrafos, listas...). La interpretación de estas
entidades se deja al navegador.
3; HTML es un lenguaje estructurado.
4; HTML utiliza etiquetas o marcas,
que consisten en breves instrucciones de comienzo y final, mediante las cuales
se determina la forma en la que debe aparecer el texto en el navegador, así
como las imágenes y demás elementos.
6; Menciona
7 reglas básicas que debes seguir para el diseño de una pagina web
1; Usar imágenes de alta
calidad. Elige cuidadosamente las mejores imágenes que va con el mensaje.
2; Sé valiente a la hora
de diseñar. Los sitios web que se destacan entre la multitud son
memorables para los clientes y lectores.
3; Diseño con un propósito.
Cada elemento de una página web debe ser diseñado con un propósito. Siempre
tiene que haber una razón para la creación de cualquier elemento de la página
web.
4; Lo simple es mejor. Los
diseños simples tienen un mayor impacto en lugar de los complicados. Una
disposición de uno o dos-columnas es mucho mejor que un diseño de múltiples
columnas.
5; Elija las fuentes
sabiamente. La tipografía es una parte muy importante de un diseño.
6; Elija gráficos sobre el
texto. Las imágenes entregan el mensaje de manera más directa y son más fáciles
de entender que un bloque de texto. Recuerde siempre que los lectores tienen
prisa y quieren encontrar la información lo más rápidamente posible.
7; Mejorar las partes
importantes de una página. El lector debe saber de lo que trata su sitio web en
los primeros 10 segundos de la primera visita, por lo que es muy importante
destacar las características importantes.
8; Organización. Un sitio
web organizado y optimizado es muy importante, no sólo porque el lector puede
encontrar la información que necesita rápidamente, sino también porque de esta
manera su sitio web atraerá más tráfico. Organizar el contenido, añadir
etiquetas y categorías con el fin de hacerlo más fácil de usar es un punto
importante a considerar.
9; Compatibilidad. La
conectividad a través de todos los dispositivos actuales debe ser asegurada,
por lo que es necesario que la página web esté codificada para que pueda ser visto
en todos los dispositivos móviles.
10; Resumir. Los lectores
son más propensos a leer frases cortas, párrafos y artículos escritos de una
manera corta y directa.
lunes, 9 de diciembre de 2013
Suscribirse a:
Entradas (Atom)