Embed Size (px)
DESCRIPTION
Modulo de Computación SECUNDARIA
Citation preview
Prof. NYDSHE SERNAQUÉ GAMARRA
2015
MÓDULO DE COMPUTACIÓN PARA
SECUNDARIA
I.E.P Marista Siglo XXI
MÓDULO DE COMPUTACIÓN PARA
SECUNDARIA
CRONOGRAMA DE CLASES
Unidades Semanas Temas Exámenes
IV BIMESTRE
7ma Unidad (19 de Octubre
- 13 de Noviembre)
29
Photoshop: Convertir Una fotografía en blanco y negro a color, Efecto de fuego en Photoshop.
Del 16 al 20 de Noviembre
30Photoshop: Los pixeles, efecto de texto con nieve en Photoshop
31Photoshop: Aprendiendo a hacer efecto rollo de película.
32Photoshop: Aprendiendo a crear nuestro propio logo, Fotografía digital.
8va Unidad ( 16 de
Noviembre - 15 de
Diciembre)
33
Macromedia Dreamweaver 8 Portable: Introducción, convenciones tipográficas, Aspectos Básicos.
Del 09 al 15 de Diciembre
34
Dreamweaver: Archivos de Dreamweaver, Crear nuevos archivos y guardarlos, Configuración del sitio del proyecto
35
Dreamweaver: Diseño web, html 5, las etiquetas y los archivos en html.
36
Dreamweaver: Creación de un diseño de página basado en tablas y almacenamiento de una página
37Dreamweaver: códigos html
básicos
Clausura y entrega de Informes Viernes 18 de Diciembre
IVTRIMESTRE
Semana 29
PHOTOSHOP: CONVERTIR UNA FOTOGRAFÍA EN BLANCO Y NEGRO A COLOR, EFECTO DE FUEGO EN PHOTOSHOP.
I. Convertir una fotografía en blanco y negro a color:
II. Efecto de fuego en Photoshop
A continuación se explicara cómo hacer un efecto de fuego de forma sencilla en Adobe Photoshop. Para el ejemplo utilizaré letras pero puede aplicarse perfectamente en cualquier figura.
Paso 1
Abrimos un nuevo documento, de un tamaño acorde con el largo de la palabra que se desea escribir, en mi caso las dimensiones fueron de 430 x 120 píxeles. Para mayor comodidad visual, recomiendo trabajar sobre un fondo negro. Con este fin puedes crear un rectángulo negro de las dimensiones del documento, escoger como color de fondo el negro al abrir el documento o simplemente rellenar el fondo
de ese color con la herramienta bote de pintura .
Paso 2
Luego, creamos una capa (ctrl. + shift + N) y escribimos la palabra a la que le aplicaremos el efecto, preferiblemente con una fuente gruesa y grande, como por ejemplo Arial black (en esta ocasión trabajé con Arial simple), y de color naranja fuerte. Ésta representa la parte menos lumínica de la imagen y sobre ella irán las demás capas. Posteriormente, creamos dos capas más, procediendo de la misma forma, pero cambiando cada vez el tamaño (menor que el anterior en 2 píxeles aproximadamente) y el color de la fuente (amarillo y blanco). Así, al final debemos tener 3 capas (sin contar el fondo) con la palabra Xklibur, o la que hayas elegido, en los colores naranja, amarillo y blanco de diferentes tamaños, (cada uno menor que el anterior en ese orden).
Paso 3
Seguidamente, ubicamos las palabras, una encima de la otra, por orden de tamaño (la más grande al fondo y así sucesivamente) y rasterizamos las capas que contienen los textos para poder trabajarlos.
Para esto simplemente seleccionamos la herramienta dedo y tratamos de difuminar la letra. Al hacer esto inmediatamente saldrá este mensaje y elegirás ok para rasterizar el texto.
También puedes ir al menú capa y elegir rasterizar > texto. Otra forma es haciendo clic con el botón derecho del mouse sobre la capa a rasterizar.
Paso 4
Con la herramienta dedo difuminamos los bordes de las letras, de adentro hacia fuera, hasta lograr darles un efecto de rastro de llama refulgente. Hacemos esto con todas las capas rasterizadas. En esta labor debemos tapar cualquier desperfecto originado por la ubicación de las letras difuminando hacia las áreas desiguales para darle un acabado uniforme.
Paso 5
Ajustamos el color según nuestro agrado para otorgarle mayor fuerza a la llama, en el menú imagen > ajustes > equilibrio de color. Igualmente, podemos crear un efecto de reflejo para darle un acabado más atractivo.
Como puedes ver, sólo se requieren 5 sencillos pasos para lograr este práctico efecto de fuego que puede emplearse en cualquier objeto o figura. Básicamente la técnica consiste en difuminar los bordes de un objeto, haciendo movimientos alargados, de adentro hacia afuera, empleando varias capas para controlar la luminosidad. Mientras más capas uses más realista quedará.
Semana 30
PHOTOSHOP: LOS PIXELES, EFECTO DE TEXTO CON NIEVE EN PHOTOSHOP
III. Los píxeles:
Los píxeles son aquellos puntos que forman las imágenes digitales, como por ejemplo, las de la pantalla del computador, o de la imagen que resulta de una impresora. Cada uno de estos puntos se denomina píxel, y al observarlos todos juntos se forma una imagen. La cantidad de puntos o pixeles con que cuente una imagen va a indicar la calidad de su resolución. En términos sencillos son los "puntitos" con los que están hechas las imágenes en el mundo de la computación.
El término píxel proviene del idioma inglés y se forma gracias a la unión de dos palabras, “picture element”. En español, es posible de ser traducido como “elemento de imagen”.
Ampliando lo suficiente una imagen (zoom) en la pantalla de una computadora,
pueden observarse los píxeles que componen la imagen. Los píxeles son los
puntos de color (siendo la escala de grises una gama de color monocromática).
Las imágenes se forman como una sucesión de píxeles. La sucesión marca la
coherencia de la información presentada, siendo su conjunto
una matriz coherente de información para el uso digital. El área donde se
proyectan estas matrices suele ser rectangular. La representación del píxel en
pantalla, al punto de ser accesible a la vista por unidad, forma un área
homogénea en cuanto a la variación del color y densidad por pulgada, siendo
esta variación nula, y definiendo cada punto sobre la base de la densidad, en lo
referente al área.
En las imágenes de mapa de bits, o en los dispositivos gráficos, cada píxel se
codifica mediante un conjunto de bits de longitud determinada (es la llamada
profundidad de color); por ejemplo, puede codificarse un píxel con
un byte (8 bits), de manera que cada píxel admite hasta 256 variaciones de
color (28posibilidades binarias), de 0 a 255. En las imágenes llamadas de color
verdadero, normalmente se usan tres bytes (24 bits) para definir el color de un
píxel; es decir, en total se puede representar un total de 224 colores, esto es 16
777 216 variaciones de color. Una imagen en la que se utilicen 32 bits para
representar un píxel tiene la misma cantidad de colores que la de 24 bits, ya
que los otros 8 bits son usados para efectos de transparencia.
Para poder visualizar, almacenar y procesar la información numérica que se
representa de cada píxel, se debe conocer, además de la profundidad y brillo
del color, el modelo de color que se está utilizando. Por ejemplo, el modelo de
color RGB (Red-Green-Blue) permite crear un color compuesto por los tres
colores primarios según el sistema de mezcla aditiva. De esta forma, en función
de la cantidad de cada uno de ellos que se use en cada píxel será el resultado
del color final del mismo. Por ejemplo, el color magenta se obtiene mezclando
el rojo y el azul, sin componente verde (este byte se pone en cero). Las
distintas tonalidades del mismo color se obtienen variando la proporción en que
intervienen ambas componentes (se altera el valor de esos dos bytes de color
del píxel). En el modelo RGB lo más frecuente es que se usen 8 bits para
representar la proporción de cada una de las tres componentes de color
primarias. De esta forma, cuando una de las componentes vale 0, significa que
ella no interviene en la mezcla y cuando vale 255 (28 – 1) significa que
interviene aportando el máximo de ese tono, valores intermedios proveen la
intensidad correspondiente.
La mayor parte de los dispositivos que se usan con una computadora
(monitor, escáner, etc.) usan el modelo RGB (modelo de reflexión o aditivo),
excepto los que aportan tintes, como las impresoras, que suelen usar el modelo
CMYK (modelo sustractivo).
Profundidad de color
Un píxel, comúnmente, se representa con: 8 bits (28 colores), con 24 bits
(224 colores, 8 bits por canal de color) o con 48 bits (240 colores); en fotografía
avanzaday digitalización de imágenes profesional se utilizan profundidades aún
mayores, expresadas siempre en valores de bits/canal de color en lugar de la
suma de los tres canales. Los primeros son los más utilizados, reservando el
de 8 bits para imágenes de alta calidad pero en tonos de grises, o bien con 256
colores en paleta seleccionada para baja calidad colorimétrica; el de 24 bits es
el más común y de alta calidad, se lo utiliza en la mayoría de las imágenes
fotográficas.
Megapíxel
Un megapíxel o megapíxel (Mpx) equivale a 1 millón de píxeles, a diferencia de
otras medidas usadas en la computación en donde se suele utilizar la base de
1024 para los prefijos, en lugar de 1000, debido a su conveniencia respecto del
uso del sistema binario. Usualmente se utiliza esta unidad para expresar la
resolución de imagen de cámaras digitales; por ejemplo, una cámara que
puede tomar fotografías con una resolución de 2048 × 1536 píxeles se dice que
tiene 3,1 megapíxeles (2048 × 1536 = 3.145.728).
La cantidad de megapíxeles que tenga una cámara digital define el tamaño de
las fotografías que puede tomar y el tamaño de las impresiones que se pueden
realizar; sin embargo, hay que tener en cuenta que la matriz de puntos está
siendo distribuida en un área bidimensional y, por tanto, la diferencia de la
calidad de la imagen no crece proporcionalmente con la cantidad de
megapíxeles que tenga una cámara, al igual que las x de una grabadora de
discos compactos.
Las cámaras digitales usan componentes de electrónica fotosensible, como
los CCD (del inglés Charge-Coupled Device) o sensores CMOS, que graban
niveles de brillo en una base por-píxel. En la mayoría de las cámaras digitales,
el CCD está cubierto con un mosaico de filtros de color, teniendo regiones color
rojo, verde y azul (RGB) organizadas comúnmente según el filtro de Bayer, así
que cada píxel-sensor puede grabar el brillo de un solo color primario. La
cámara interpola la información de color de los píxeles vecinos, mediante un
proceso llamado interpolación cromática, para crear la imagen final.
Dimensiones de imagen según proporción y cantidad de pixeles
Para saber el número total de píxeles de una cámara, basta multiplicar el ancho
de la imagen máxima que puede generar por el alto de la misma -desactivando
previamente el zoom digital-; también es posible dividir el número de píxeles de
ancho entre el número correspondiente al alto, y conocer la proporción de la
imagen obtenida. Aquí se presenta una lista de las resoluciones comunes de
cámaras digitales basándose en esta relación de aspecto:
Megapíxele
sTamaño imagen 3:2 (Píxeles) Tamaño imagen 4:3 (Píxeles)
0,3 671x447 632x474
1 1224x816 1155x866
1,2 1341x894 1265x949
2 1733x1155 1633x1225
3 2121x1414 2000x1500
4 2450x1633 2309x1732
5 2739x1826 2581x1936
5,3 2820x1880 2659x1994
6 3000x2000 2828x2121
6,3 3074x2049 2899x2174
8 3464x2309 3265x2449
10 3873x2582 3652x2739
12 4242x2828 4000x3000
14 4583x3055 4320x3240
15 4743x3162 4472x3354
16 4899x3266 4619x3464
18 5196x3464 4899x3674
20 5477x3651 5164x3873
21 5613x3742 5292x3969
22 5745x3830 5416x4062
24 6000x4000 5657x4243
25 6123x4082 5773x4330
28 6480x4320 6111x4583
30 6708x4472 6324x4743
32 6929x4619 6532x4899
34 7142x4761 6733x5050
35 7245x4830 6831x5123
36 7349x4899 6928x5196
39 7649x5099 7211x5408
40 7746x5164 7303x5477
44 8124x5416 7660x5745
48 8486x5657 8000x6000
50 8661x5774 8165x6124
Gigapíxel
Un giga píxel (Gpx) equivale a un millardo o mil millones de píxeles, utilizando
la base 1000 de los prefijos del sistema internacional, en vez de la base
1024ISO/IEC 80000 o prefijo binario utilizados normalmente en el entorno de
la informática. Usualmente se utiliza esta unidad para expresar la resolución de
imagen de cámaras digitales.
Existen cámaras digitales capaces de realizar fotografías en giga píxeles, como
por ejemplo la ARGUS-IS de la Agencia de Proyectos de Investigación
Avanzados de Defensa (DARPA)2 y la "súper cámara" desarrollada por David
Brady y su equipo de ingenieros de la Universidad de Duke.
IV. Efecto de texto con nieve en Photoshop
Este es un tip muy sencillo pero no por eso menos interesante, la verdad es que queda muy bien.
Lo primero es abrir un archivo nuevo con las siguientes características:
En una capa nueva, con la herramienta de texto escribimos algo:
Luego creamos otra capa por encima del texto y en capa->estilo de capa le damos los siguientes valores:
Para acabar, con un pincel dibujamos la nieve y no q puede quedar algo así:
Semana 31
V. PHOTOSHOP: APRENDIENDO A HACER EFECTO ROLLO DE PELÍCULA.
Dentro de los múltiples fotomontajes que podemos hacer en Photoshop se encuentra también, el efecto rollo de película, el cual es usado en algunas promociones de carteleras en cines.
1. Primero vamos a crear el marco negro que lleva las fotos, hacemos con la herramienta de marco rectangular y trazamos una tira larga en la que aprox, quepan unas cuatro imágenes.
2. Le das clic derecho, selecciona contornear y dale el grosor de 30 pix. (se puso más grueso). Luego para hacer las separaciones haces lo mismo pero le das un contorneado de 5 pix. y ya tienes dividido tu cinta en cuatro partes.
3. Ahora hacemos los agujeros de la cinta con el pincel de cuadros, y vamos a ajustes preestablecidos de pincle. y hacemos el espaciado necesario para que se miren bien los cuadros de color blanco, para no hacer cuadro por cuadro a través de toda la cinta hacemos el primer cuadro, presionas Shift y haces clic en el espacio que quieras que este el último cuadro y veraz que te contorneo toda una línea, haz lo mismo en la otra de abajo.
4. ahora ponemos las imágenes de la película en los cuatro espacios, no importa si se te deforman, da igual porque ese es el efecto. y como te van a salir en capas diferentes las tienes que unir todas.
5. ahora unes la capa de imágenes y la del marco y te vas a Ctrl + T. y te vas al icono de arriba en "modos de transformación libre y deformación" ahí seleccionas la opción de bandera y tu cinta de película se dará con la forma de una bandera. ahí mismo le puedes dar la perspectiva, la distorsionas, la sesgaz, la deformas a tu gusto.
6. Para la sombra de la cinta hay varias opciones yo te enseñare solo una, vamos a sacarle copia a la capa de la cinta y le vamos a bajar toda la luminosidad con Ctrl +U. y le vamos a aplicar un filtro de Desenfoque < desenfoque gaussiano, y lo hará parecer una sombra lo acomodas con la herramienta mover o con las flechitas hasta donde tu consideres que es una sombra.
7. Agrégale efectos Fx (efectos) a la cinta de tu película y todo lo que se desee.
Semana 32
PHOTOSHOP: APRENDIENDO A CREAR NUESTRO PROPIO LOGO
VI. APRENDIENDO A CREAR NUESTRO PROPIO LOGO
Haciendo el logo desde cero con trazados: Lo primero que necesitamos es el contorno u imagen a darle un realzado o extrusión (extrudado), por lo que mediante la herramienta Pluma (en este caso, como ejemplo tenemos el logo de Blender) haremos el dibujo mediante trazados:
Previamente elegido un color frontal para el contorno en este caso naranja, elegimos la herramienta selección de trazado, damos clic sobre el trazado, luego clic derecho y del menú desplegado elegimos Rellenar sub trazado:
En la ventana de rellenar sub trazado agregaremos al contorno el relleno de color elegido:
Repetimos esto con el círculo interior pero con un color frontal en azul, el resultado es el siguiente:
Nos vamos a la ventana trazados y abajo de Trazado de trabajo damos clic en el area grid vacia para deseleccionar el contorno y trabajar con comodidad:
Regresamos y elegimos la capa que llamaremos logo, luego nos vamos al menú Editar » Transformar » Perspectiva:
Moviendo los nodos ajustamos la perspectiva:
Extruir Logo:
Para la extrusión del ejemplo tuve que crear 63 copias del logo original sumadas a este son un total de 64, para realizar el truco, con la capa seleccionada pulsamos CTRL + SHIFT + Una de las teclas direccionales, (Ojo: En caso de no servir la combinación usen ALT + Direccional) para este ejemplo: manteniendo presionadas CTRL + SHIFT pulsando 63 veces la direccional derecha quedando la capa logo copia 63 como la parte superior del objeto y la capa Logo como la base:Así quedará la imagen con el volumen 3D:
Ahora mezclaremos todas las copias intermedios entre la capa logo copia 63 y capa logo.Si queremos seleccionar muchas capas:
1. Damos clic para en logo copia 622. Nos posicionamos sobre la capa logo
copia3. Pulsamos shift sin soltar y pulsamos en
la capa logo copia.4. Todas las copias seleccionadas estarán
sombreadas en azul.
Para mezclar las capas damos clic derecho sobre las capas marcadas en azul y del menú seleccionamos Combinar capas:
Así quedará entonces tres capas, logo copia 63 que es el frente, logo copia 1 a 62 lo extruido y logo, que es el fondo:
Estos son los estilos de capas aplicados; la Sombra paralela es para la capa que hará de fondo, el Satín sirve para dar un relleno variable y volumétrico, puede usarlo en modo de fusión multiplicar para la capa que hace de parte intermedia o en modo normal con diferentes colores en la capa que hace de frente, el Bisel y relieve úselo para los brillos de las esquinas en la capa que hace de frente:
Este es el resultado con los estilos de capa aplicado:
Si metemos todas las capas en una carpeta de grupo podemos rotar el objeto a nuestro gusto, con algunos ajustes en el Satín de la parte intermedia se mejora el efecto de volumen y más un fondo bonito éste es el resultado:
Semana 33
MACROMEDIA DREAMWEAVER 8 PORTABLE:INTRODUCCIÓN, CONVENCIONES TIPOGRÁFICAS, ASPECTOS
BÁSICOS.
I. INTRODUCCIÓN
Macromedia Dreamweaver 8 es un editor HTML profesional para diseñar, codificar y desarrollar sitios, páginas y aplicaciones Web. Tanto si desea controlar manualmente el código HTML como si prefiere trabajar en un entorno de edición visual, Dreamweaver le proporciona útiles herramientas que mejorarán su experiencia de creación Web.
Esta guía es una introducción para utilizar Macromedia Dreamweaver 8 dirigida a los usuarios que no están familiarizados con algún aspecto fundamental de esta aplicación. Los tutoriales de que consta le guían a través del proceso de creación de un sitio Web sencillo pero funcional.
Lo que puede hacer con Dreamweaver 8
Las funciones de edición visual de Dreamweaver permiten crear páginas web de forma rápida, sin escribir una sola línea de código. Puede ver todos los elementos o activos del sitio y arrastrarlos desde un panel fácil de usar directamente hasta un documento. Puede agilizar el flujo de trabajo de desarrollo mediante la creación y edición de imágenes en Macromedia Fireworks o en otra aplicación de gráficos y su posterior importación directa a Dreamweaver. Dreamweaver también contiene herramientas que facilitan la adición de activos de Flash a las páginas web.
Novedades en Dreamweaver 8
Dreamweaver 8 incorpora muchas funciones nuevas que le ayudarán a diseñar páginas Web y aplicaciones con un mínimo de tiempo y esfuerzo. Dreamweaver simplifica las tecnologías más complejas y las hace accesibles, ayudándole a conseguir más en menos tiempo.
Éstas son algunas de las nuevas funciones de Dreamweaver 8:
■ Herramienta Zoom y guías
■ Vinculación de datos visual de XML
■ Nuevo panel de estilos CSS
■ Visualización de diseño CSS
■ Contracción de código
■ Barra de herramientas de codificación
■ Transferencia de archivos en segundo plano
■ Inserción de comando de Flash Video
II. CONVENCIONES TIPOGRÁFICAS
En esta guía se utilizan las convenciones tipográficas siguientes:
■ Los elementos de los menús se muestran en este formato: nombre del menú > nombre del elemento del menú. Los elementos de los sub menús se muestran en este formato: nombre del menú nombre del submenú > nombre del elemento del menú.
■ La fuente de código indica nombres de etiquetas y atributos HTML, así como el texto literal empleado en los ejemplos.
■ La fuente de código en cursiva indica elementos reemplazables (también denominados meta símbolos) en el código.
■ El texto Roman en negrita permite distinguir el texto que debe introducirse literalmente.
III. ASPECTOS BÁSICOS
Para sacar el máximo provecho de Macromedia Dreamweaver 8, deberá conocer cuáles son los conceptos que subyacen al espacio de trabajo de Dreamweaver. En capítulo presenta los elementos más importantes y utilizados del espacio de trabajo y explica cómo realizar algunas tareas básicas con Dreamweaver.
El espacio de trabajo de Dreamweaver permite ver las propiedades de los documentos y los objetos. Además, coloca muchas de las operaciones más frecuentes en barras de herramientas para que pueda realizar cambios en los documentos rápidamente.
En Windows, Dreamweaver proporciona un diseño integrado en una única ventana. En el espacio de trabajo integrado, todas las ventanas y paneles están integrados en una única ventana de la aplicación de mayor tamaño.
Ventana de documento: La ventana de documento muestra el documento actual. Puede elegir entre una de las vistas siguientes:
La vista Diseño: Es un entorno de diseño para el diseño visual de la página, la edición visual y el desarrollo rápido de aplicaciones. En esta vista, Dreamweaver muestra una representación visual del documento completamente editable, similar a la que aparecería en un navegador.
La vista Código: Es un entorno de codificación manual para escribir y editar código HTML, JavaScript, código de lenguaje de servidor, como por ejemplo PHP o ColdFusion Markup Language (CFML), y otros tipos de código. Para más información, consulte Capítulo 20, “Codificación en Dreamweaver” en Utilización de Dreamweaver.
Es posible ver el mismo documento en las dos vistas, Código y Diseño, en una sola ventana de documento. Cuando la ventana de documento tiene una barra de título, ésta muestra el título de la página y, entre paréntesis, el nombre y la ruta del archivo. Si se han realizado cambios que aún no se han guardado, después del nombre del archivo Dreamweaver incluye un asterisco.
Cuando se maximiza la ventana de documento en el diseño integrado de espacio de trabajo (sólo Windows), no aparece la barra de título; en este caso, el título de la página y el nombre y la ruta del archivo aparecen en la barra de título de la ventana principal del espacio de trabajo.
Además, cuando una ventana de documento está maximizada, aparecen fichas en la parte superior de la misma con los nombres de archivo de todos los documentos abiertos. Para cambiar a un documento, haga clic en su ficha.
Barra de herramientas de Documento
La barra de herramientas de Documento contiene botones que permiten alternar entre diferentes vistas del documento rápidamente: vista Código, vista Diseño y una vista dividida que muestra las vistas Código y Diseño.
La barra de herramientas contiene también algunos comandos y opciones relativos a la visualización del documento y a su transferencia entre los sitios local y remoto.
En la barra de herramientas de Documento, aparecen las siguientes opciones:
Mostrar vista de código: Sólo muestra la vista Código en la ventana de documento.
Mostrar vistas de código y diseño: Muestra la vista Código en una parte de la ventana de documento y la vista Diseño en la otra parte. Cuando seleccione esta vista combinada, se encontrará disponible la opción Vista de diseño encima del menú Ver. Utilice esta opción para especificar qué vista debe aparecer en la parte superior de la ventana de documento.
Depuración del servidor: Muestra un informe que le ayudará a depurar la página de ColdFusion actual. El informe contiene los errores de la página, si los hay.
Título del documento: Permite introducir un título para el documento, que aparecerá en la barra de título del navegador. Si el documento ya tiene título, éste aparecerá en dicho campo.
No hay errores de comprobación de navegador permite comprobar la compatibilidad con distintos navegadores.
Validar formato: Permite validar el documento actual o una etiqueta seleccionada.
Administración de archivos: Muestra el menú emergente Administración de archivos.
Vista previa/Depurar en explorador: Permite ver una vista previa del documento o depurarlo en un navegador. Seleccione un navegador en el menú emergente.
Actualizar vista de diseño: Actualiza la vista Diseño tras realizar cambios en la vista Código. Los cambios realizados en la vista Código no aparecerán de forma automática en la vista Diseño hasta que se efectúen determinadas acciones, como guardar el archivo o hacer clic en este botón.
Ver opciones: Permite definir las opciones de las vistas Código y Diseño, y establecer qué vista va a aparecer en la parte superior de la ventana. Las opciones del menú corresponden a la vista actual: la vista Diseño, la vista Código o ambas.
Ayudas visuales: Permite utilizar distintas ayudas visuales para el diseño de las páginas
Barra de estado
La barra de estado, situada en la parte inferior de la ventana de documento, proporciona información adicional sobre el documento que está creando.
El selector de etiquetas: Muestra la jerarquía de etiquetas que rodea a la selección actual. Haga clic en cualquier etiqueta de la jerarquía para seleccionar la etiqueta y todo su contenido. Haga clic en <body> para seleccionar todo el cuerpo del documento. Para definir los atributos class o id para una etiqueta en el selector de etiquetas, haga clic con el botón de derecho del ratón (Windows) o mantenga presionada la tecla Control y haga clic (Macintosh) en la etiqueta y elija una clase o un ID del menú contextual.
El selector de etiquetas es el método más adecuado para seleccionar etiquetas, porque le garantiza que siempre se está seleccionado la etiqueta de manera precisa.
La herramienta Mano: Permite hacer clic en el documento y arrastrarlo hasta la ventana de documento. Haga clic en la herramienta Seleccionar para desactivar la herramienta Mano.
La herramienta Zoom y el menú emergente: Permiten establecer nivel de aumento permiten establecer el nivel de ampliación del documento. Para más información, consulte “Utilización de Acercar y Alejar” en Utilización de Dreamweaver.
El menú emergente Tamaño de ventana: (sólo aparece en la vista Diseño) permite cambiar el tamaño de la ventana de documento para que adopte dimensiones predeterminadas o personalizadas. Para más información, consulte “Cambio del tamaño de la ventana de documento” en Utilización de Dreamweaver.
A la derecha del menú emergente Tamaño de ventana aparecen la estimación del tamaño del documento y del tiempo de descarga de la página, incluidos todos los archivos dependientes, como imágenes y otros archivos multimedia.
Barra Insertar
La barra Insertar contiene botones para la creación e inserción de diversos tipos de objetos, como tablas, capas e imágenes. Al pasar el puntero sobre un botón, aparece una descripción de la herramienta con el nombre del botón.
Los botones están organizados en categorías, a las que puede cambiar en la parte izquierda de la barra Insertar. Si el documento actual contiene código de servidor, como los documentos ASP o CFML, aparecen también otras categorías. Cuando se inicia Dreamweaver, se abre la última categoría con la que ha trabajado.
Algunas categorías tienen botones con menús emergentes. Al seleccionar una opción de un menú emergente, dicha opción se convierte en la acción predeterminada del botón. Por ejemplo, si selecciona Marcador de posición de imagen en el menú emergente del botón Imagen, la siguiente vez que haga clic en el botón Imagen, Dreamweaver insertará un marcador de posición de
imagen. Siempre que seleccione una nueva opción del menú emergente cambiará la acción predeterminada del botón.
La barra Insertar está organizada en las categorías siguientes:
La categoría Común: permite crear e insertar los objetos que se utilizan con más frecuencia, como las imágenes y las tablas.
La categoría Diseño: permite insertar tablas, etiquetas div, capas y marcos.
También puede elegir entre las tres vistas de las tablas: Estándar (valor predeterminado), Tablas expandidas y Diseño. Si se selecciona el modo de diseño, se pueden utilizar las herramientas de diseño de Dreamweaver: Dibujar celda de diseño y Dibujar tabla de diseño.
La categoría Formularios: contiene botones que permiten crear formularios e insertar elementos de formulario.
La categoría Texto: permite insertar diversas etiquetas de formato de texto y listas, como b, em, p, h1 y ul.
La categoría HTML: permite insertar etiquetas HTML para las reglas horizontales, el contenido de la sección head, las tablas, los marcos y los scripts.
Las categorías de código de servidor: Sólo están disponibles para las páginas que emplean un lenguaje de servidor determinado, como ASP, ASP.NET, CFML Basic, CFML Flow, CFML Advanced, JSP y PHP. Cada una de estas categorías contiene objetos de código de servidor que pueden insertarse en la vista Código.
La categoría Aplicación: permite insertar elementos dinámicos como juegos de registros, regiones repetidas y grabar formularios de inserción y actualización.
La categoría Elementos Flash: Permite insertar elementos de Macromedia Flash.
La categoría Favoritos: Le permite agrupar y organizar los botones de la barra Insertar que utiliza con más frecuencia en un lugar común.
Barra de herramientas de Codificación
La barra de herramientas de Codificación contiene botones que le permiten realizar numerosas operaciones de codificación estándar, como ampliar y contraer las selecciones de código, resaltar código no válido, insertar o eliminar comentarios, aplicar sangría al código e insertar fragmentos de código utilizados recientemente. La barra de herramientas
de Codificación sólo está visible en la vista Código y aparece verticalmente en el lado izquierdo de la ventana de documento.
No puede desacoplar ni mover la barra de herramientas de Codificación, pero sí puede ocultarla. Para más información, consulte “Visualización de barras de herramientas” en Utilización de Dreamweaver.
Para más información sobre cómo utilizar la barra de herramientas de Codificación, consulte “Inserción rápida de código con la barra de herramientas Codificación” en Utilización de Dreamweaver.
El Inspector de propiedades
El inspector de propiedades permite examinar y editar las propiedades más comunes del elemento de página seleccionado actualmente, como texto o un objeto insertado. El contenido del inspector de propiedades es distinto en función del elemento seleccionado. Por ejemplo, si selecciona una imagen en la página, el inspector de propiedades cambiará para mostrar las propiedades de la imagen (como la ruta del archivo de imagen, el ancho y alto de la imagen, el borde que la rodea, etc.).
El inspector de propiedades se encuentra en la parte inferior del espacio de trabajo de forma predeterminada, pero puede colocarlo en la parte superior si lo desea. También puede convertirlo en un panel flotante en el espacio de trabajo. Para más información sobre cómo mover el Inspector de propiedades, consulte “Acoplamiento y desacoplamiento de paneles y grupos de paneles” en Utilización de Dreamweaver.
El panel Archivos
El panel Archivos se utiliza para ver y administrar los archivos del sitio deDreamweaver.
Al visualizar sitios, archivos o carpetas en el panel Archivos, puede cambiar el tamaño del área de visualización y expandir o contraer el panel Archivos.
Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto o el servidor de prueba como una lista de archivos. Cuando se expande, muestra el sitio local,
además del sitio remoto o el servidor de prueba. El panel Archivos también puede mostrar un mapa visual del sitio local.
Para sitios de Dreamweaver, también puede personalizar el panel Archivos cambiando la vista (sitio local o sitio remoto) que aparece de forma predeterminada en el panel contraído.
Al visualizar sitios, archivos o carpetas en el panel Archivos, puede cambiar el tamaño del área de visualización y expandir o contraer el panel Archivos.
Cuando el panel Archivos se contrae, muestra el contenido del sitio local, el sitio remoto o el servidor de prueba como una lista de archivos. Cuando se expande, muestra el sitio local, además del sitio remoto o el servidor de prueba.
El panel Archivos también puede mostrar un mapa visual del sitio local. Para sitios de Dreamweaver, también puede personalizar el panel Archivos cambiando la vista (sitio local o sitio remoto) que aparece de forma predeterminada en el panel contraído
El panel Estilos CSS
El panel Estilos CSS le permite supervisar las reglas y propiedades CSS que afectan a un elemento de página actualmente seleccionado el modo Actual o las reglas y propiedades que afectan a todo un documento, con el modo Todo.
Un botón situado en la parte superior del panel Estilos CSS le permite cambiar entre estos dos modos. El panel Estilos CSS también le permite modificar propiedades CSS tanto en modo Todo como en modo Actual.
Puede cambiar el tamaño de cualquiera de los paneles arrastrando los bordes que separan un panel de otro.
En modo Actual, el panel Estilos CSS muestra tres secciones: un resumen del panel Selección que muestra las propiedades de CSS de la selección actual del documento, un panel Reglas que muestra la ubicación de las propiedades seleccionadas (o una cascada de reglas para la etiqueta seleccionada, en función de la selección) y un panel Propiedades que le permite editar las propiedades CSS al definir reglas para la selección.
En modo Todo, el panel Estilos CSS muestra tres secciones: un panel Todas las reglas arriba y un panel Propiedades abajo. El panel Todas las reglas muestra una lista de reglas definidas en el documento actual, así como las reglas definidas en las hojas de estilo adjuntas al documento actual. El panel
Propiedades le permite editar propiedades CSS para cualquier regla seleccionada en el panel Todas las reglas.
Todos los cambios que realice en el panel Propiedades se aplican de forma inmediata; de este modo, puede pre visualizar el trabajo a medida que lo vaya llevando a cabo.
TAREA DE INVESTIGACIÓN
Responde las siguientes preguntas:
1.- ¿Por quién creado Dreamweaver y cuáles son sus versiones?
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
2.- ¿Qué otros programas existen para la creación de página web?
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
3.- ¿Qué significa y que es el lenguaje HTML?
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
4.- ¿Qué significa WWW?
_____________________________________________________________________________________________________________________________________________________________________________________________
5.- ¿Qué significa y cuál es la diferencia entre HTTP y HTTPS?
___________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
Semana34
DREAMWEAVER: ARCHIVOS DE DREAMWEAVER, CREAR NUEVOS ARCHIVOS Y GUARDARLOS, CONFIGURACIÓN DEL SITIO DEL
PROYECTO
V. Archivos de Dreamweaver
En Dreamweaver, puede trabajar con distintos tipos de archivo. El principal tipo de archivo de trabajo es el archivo HTML. Los archivos
HTML: Archivos de lenguaje de formato de hipertexto que incluyen un lenguaje basado en etiquetas que es el responsable de mostrar la página Web a través del navegador. Puede guardar archivos html con las extensiones.html o.htm. Dreamweaver guarda los archivos utilizando por defecto la extensión.html.
En Dreamweaver también se trabaja con los siguientes tipos de archivo:
CSS: Tienen la extensión .css. Se utilizan para dar formato al contenido HTML y para definir la situación de diversos elementos de la página.
GIF: formato GIF es un formato gráfico popular en la Web para cómics, logotipos, gráficos con zonas transparentes y animaciones. Los GIFs tienen un máximo de 256.
JPEG: Tienen la extensión .jpg y suelen ser fotografías o imágenes ricas en color. El formato.
JPEG: Es más adecuado para fotografías digitales o escaneadas, imágenes con texturas, imágenes con gradaciones de color y cualquier imagen que necesite más de 256 colores.
XML: Tienen la extensión.xml. Estos archivos contienen datos en su forma original que se pueden formatear utilizando XSL (Lenguaje de hojas de estilo ampliable).
VI. Crear nuevos archivos con Dreamweaver
En esta sección se explica cómo crear un nuevo documento en blanco con
Dreamweaver. También puede crear nuevos documentos con Dreamweaver basándose en un archivo de diseño de Dreamweaver o en una plantilla ya existente.
Para crear un documento nuevo en blanco:
1. Seleccione Archivo> Nuevo. Aparecerá el cuadro de diálogo Nuevo documento. La ficha General ya aparece seleccionada.
2. En la lista Categoría, seleccione Página básica, Página dinámica, Página de plantilla, Otro o Conjuntos de marcos. A continuación, en la lista de la derecha, seleccione el tipo de documento que desea crear.
Por ejemplo, seleccione Página básica para crear un documento HTML o elija Página dinámica para crear un documento ColdFusion o ASP, etc.
Para más información sobre las opciones de este cuadro de diálogo, haga clic en el botón Ayuda del mismo.
3. Haga clic en el botón Crear. El documento nuevo se abrirá en la ventana del documento.
VII. Guardar archivos con Dreamweaver
Al crear un documento nuevo, es necesario guardarlo. Para guardar un documento nuevo:
1. Seleccione Archivo > Guardar.
2. En el cuadro de diálogo que aparece a continuación, vaya hasta la carpeta en la que desea guardar el archivo.
3. En el cuadro de texto Nombre de archivo, introduzca un nombre para el archivo.
Evite utilizar espacios y caracteres especiales en los nombres de archivos y carpetas. Asimismo, no comience los nombres de los archivos con números. En concreto, no utilice caracteres especiales (como é, ç o ¥) ni signos de puntuación (como dos puntos, barras inclinadas o puntos) en los nombres de archivos que desee colocar en un servidor remoto; muchos servidores cambian estos caracteres durante la carga, lo que provoca que se rompan los vínculos existentes con los archivos.
4. Haga clic en Guardar.
VIII. Configuración del sitio del proyecto
En Dreamweaver, el término SITIO se emplea para referirse tanto a un sitio Web como a una ubicación de almacenamiento local de los documentos que pertenecen a un sitio Web. Esto último es lo que tiene que establecer antes de comenzar a crear su sitio Web. Un sitio de Dreamweaver organiza todos los documentos asociados a su sitio Web y le permite controlar y mantener vínculos, administrar y compartir archivos, y transferir los archivos del sitio a un servidor Web.
La carpeta local: Es el directorio de trabajo. En Dreamweaver esta carpeta se conoce como sitio local. La carpeta local suele ser una carpeta situada en su disco duro.
En la carpeta remota: Se almacenan los archivos, según el entorno, para fines de prueba, producción, colaboración y publicación. En Dreamweaver esta carpeta se conoce como sitio remoto. La carpeta remota es una carpeta situada en el equipo donde se ejecuta el servidor Web. El equipo donde reside el servidor Web suele ser (aunque no siempre) el sistema que permite que su sitio web esté disponible públicamente en la Web.
La carpeta para páginas dinámicas (carpeta del servidor de prueba): Es la carpeta donde Dreamweaver procesa las páginas dinámicas. Esta carpeta suele coincidir con la carpeta remota. Sólo tendrá que preocuparse por esta carpeta si desarrolla una aplicación Web. Para más información sobre cómo utilizar la carpeta del servidor de prueba, consulte “Especificación de dónde pueden procesarse las páginas dinámicas” en Utilización de Dreamweaver.
TAREA DE INVESTIGACIÓN
A continuación se te muestra una lista de formatos, Averiguar qué es y para qué sirve cada uno de ellos.
1.- CSS:
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
2.- GIF:
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
3.- JPEG:
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
4.- XML
____________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________
IMPORTANTE: ESTUDIAR PARA EL EXAMEN ORAL, PRÓXIMA SEMANA.
Semana 35
DREAMWEAVER: DISEÑO WEB, HTML 5, LAS ETIQUETAS Y LOS ARCHIVOS EN HTML.
IX. El diseño web: Es una actividad que consiste en la planificación, diseño e implementación de sitios web. No es simplemente una aplicación de diseño convencional, ya que requiere tener en cuenta la navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen, enlaces y video.
La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de la web como canal de comunicación e intercambio de datos, que brinda posibilidades como el contacto directo entre el productor y el consumidor de contenidos.
El diseño web ha visto amplia aplicación en los sectores comerciales de Internet especialmente en la World Wide Web. A menudo la web se utiliza como medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet un medio más para ofrecer sus producciones y utilizarlas como un canal más de difusión de su obra.
El diseño web Aplicado:
El diseño de páginas web se trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computador, en papel, en un teléfono móvil, etc).
Estos documentos o páginas web pueden ser creadas: creando archivos de texto en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby.
utilizando un programa visual WYSIWYG o WYSIWYM de creación de páginas.
utilizando lenguajes de programación del lado servidor, para generar la página web.
Etapas
Para el diseño de páginas web debemos tener en cuenta tres etapas:
1. El diseño visual de la información que se desea editar. En esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un boceto o prediseño sobre el papel. Esto facilitará tener un orden claro sobre el diseño.
2. Estructura y relación jerárquica de las páginas del sitio web. Una vez que se tiene el boceto se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen subrayados en este documento y otros de Wikipedia son ejemplos de hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con información relacionada. La importancia de la estructura y arborescencia web radica en que los visitantes no siempre
entran por la página principal o inicial y en ese caso el sitio debe darle la respuesta a lo que busca rápido, además permitirle navegar por el sitio.
3. Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura del contenido para mejorar la posición en que aparece la página en determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque a diferencia del texto, aún para el año 2014 no se pueden tener nuevos resultados en los buscadores con sitios muy gráficos.
El HTML consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de textos (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm ). Aprender HTML es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta era la única manera de generarlas hasta que aparecieron, a mediados de 1996, algunos editores visuales de HTML, como MS FrontPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque sí aconsejable), con lo cual el desarrollador se concentra en lo más importante, el diseño del documento.
Todo esto teniendo en cuenta el nivel de programación en el diseño de las aplicaciones y del impacto visual que se quiere generar en el usuario.
Fundamentos
Un correcto diseño web implica conocer cómo se deben utilizar cada uno de los elementos permitidos en el HTML, es decir, hacer un uso correcto de este lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la web semántica. Debido a la permisibilidad de algunos navegadores web como Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este navegador permite que no sea necesario cerrar las etiquetas del marcado, utiliza código propietario, etc. Esto impide que ese documento web sea universal e independiente del medio que se utilice para ser mostrado.
La web semántica, por otra parte, aboga por un uso lógico de los elementos según el significado para el que fueron concebidas. Por ejemplo se utilizará el elemento <P> para marcar párrafos, y <TABLE> para tabular datos (nunca para disponer de manera visual los diferentes elementos del documento). En su última instancia, esto ha supuesto una auténtica revolución en el diseño web puesto que apuesta por separar totalmente el contenido del documento de la visualización.
De esta forma se utiliza el documento HTML únicamente para contener, organizar y estructurar la información y las hojas de estilo CSS para indicar como se mostrará dicha información en los diferentes medios (como por ejemplo, una monitor de computadora, un teléfono móvil, impreso en papel, leída por unsintetizador de voz, etc.). Por lógica, esta metodología beneficia enormemente la accesibilidad del documento.
También existen páginas dinámicas, las cuales permiten interacción entre la web y el visitante, proporcionándole herramientas tales como buscadores, chat, foros, sistemas de encuestas, etc. y poseen de un panel de control de administración de contenidos. Este permite crear, actualizar y administrar cantidades ilimitadas de contenido en la misma.
Accesibilidad
El diseño web debe seguir unos requerimientos mínimos de accesibilidad web que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor número de personas. Para conseguir estos objetivos de accesibilidad se han desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido Web 1.0 WCAG.
HTML 5
La última versión de este lenguaje básico corresponde al HTML5, donde se introducen nuevos elementos que mejoran la navegación y la usabilidad de los sitios web en los distintos navegadores, como por ejemplo el uso de <canvas>, <video> o <footer>.
Esta nueva versión no se trata solamente de cambiar y eliminar etiquetas. Va mucho más allá.
En todo sitio web hay elementos que se utilizan. El encabezado (header), barras laterales (sidebars), el pie de página (footer), los menús de navegación, se utilizarán en esta nueva versión como etiquetas ya establecidas, brindando una mejora en la intuición para el desarrollo.
Así mismo una de las mayores mejoras es la utilización de "Canvas" o marcos de trabajo, que sirven para utilizar animaciones sin necesidad de instalar plugins ni usar un reproductor Adobe Flash para videos web, estándar considerado de facto. Esta opción es un gran avance, ya que Flash tiene grandes desventajas en los gráficos web, como que los motores de búsqueda no puedan leer el texto dentro, que pesan mucho y tardan en cargar. Al implementarse con canvas, se usará únicamente código Javascript, aligerando el peso de la página.
También quedan obsoletos algunos elementos del HTML 4, razón por la cual es conveniente repasar acerca de las novedades que incluye HTML5, cuyo lenguaje es regulado por W3C.
Significado y origen del HTML
HTML es uno de esos acrónimos que con el correr del tiempo casi han perdido
su totalidad. Si le preguntamos a muchas personas qué significa en realidad
HTML, pues no sabrían respondernos con exactitud. HTML es Hyper Text
Markup Language (o lenguaje de marcas de hipertexto) y no debe confundirse
con un lenguaje de programación. Se trata más bien de una forma semántica
de organizar una estructura, ya sea páginas web o aplicaciones, a través
de marcas de sentido. Las marcas de sentido son otorgadas por
las etiquetas, de las cuales hablaremos en algunas líneas.
Así como tenemos que agradecerle la creación de internet, también fue Sir Tim
Berners-Lee el responsable, en parte, de la creación del HTML. En la década
del ’80, cuando se encontraba trabajando para el CERN, el físico ideó un
lenguaje de hipertexto que facilitaría compartir documentos con sus colegas.
Aunque el sistema de hipertexto ya había sido desarrollado un tiempo antes,
fue Berners-Lee quien lo perfeccionó y lo presentó para ser usado en internet.
Junto con Robert Cailliau, presentaron la propuesta WorldWideWeb (W3).
Durante la década del ’90 se fueron presentando otras versiones. Hoy en día,
el lenguaje HTML puro y duro ha sido reemplazado por el XHTML, más
completo, y últimamente por el HTML5, que se corresponde con los tiempos
que corren.
Hoy estaremos hablando del lenguaje transicional, el XHTML, que aún se sigue
implementando en una gran mayoría de sitios web, aunque lentamente se está
dejando lugar al HTML5 y sus amplias ventajas.
XI. Las etiquetas
Decíamos anteriormente que el HTML funciona a través de marcas de sentido
llamadas etiquetas. Estas etiquetas son interpretadas por el navegador:
así es como podemos ver imágenes, texto, párrafos, en definitiva, estructuras,
en una página web, y no el simple código. Por eso hablamos además
de marcas de sentido. Sin HTML, no tendríamos la posibilidad de disfrutar
internet hoy en día. Básicamente, los navegadores como Chrome o Firefox son
“traductores” de HTML que digieren todo este código y lo convierten en algo
visible para nosotros.
Etiquetas, marcas de sentido… ¿qué son verdaderamente? Cada etiqueta tiene
un nombre y encierra en ella –literalmente, como veremos ahora- un
determinado significado. Las etiquetas se escriben con los signos mayor y
menor a. Por eso cuando abrimos un documento HTML veremos esto:
<html> <head> <title>Bienvenidos a Bitelia</title> </head> <body>
Por supuesto este es un comienzo de HTML muy burdo, pero se entiende la
idea. La etiqueta <html> en este caso está indicando el inicio de un documento
HTML, y esta información es leída por el navegador. Por otra parte, tenemos la
etiqueta <head>, la cual merece su propio apartado por la importancia, y
luego<body>, que contendrá todas las cosas que nosotros como usuarios
podemos ver en pantalla.
Las etiquetas funcionan por partes, que se denominan etiquetas de apertura y
etiquetas de cierre. Las etiquetas de apertura le indican al navegador dónde
comenzar a interpretar algo de determinada forma, y las de cierre le indican
dónde terminarlo. Por eso es fundamental que se cierren todas las etiquetas
que se abren en un determinado documento: aunque se vea bien, nos puede
traer problemas a largo plazo. La prolijidad nunca está de más.
Al ser un lenguaje de etiquetas, el HTML es por ende muy fácil de leer.
Cualquiera puede aprender HTML, no requiere ser un genio, sino nada más
tener algo de organización. En la segunda parte de este curso hablaremos
sobre la estructura básica de un documento HTML, algo fundamental, además
de las etiquetas más importantes y básicas que necesitamos saber. Por el resto
de esta entrega, nos dedicaremos a entender otros datos importantes de HTML
y, finalmente, por qué tenemos que saberlo si no nos dedicamos al diseño o
programación web.
XII. Los archivos en HTML
Los documentos HTML pueden incluir archivos como imágenes y animaciones
en Flash que estarán alojados en el mismo servidor, para que el usuario pueda
verlos. Pero para poder ser interpretados de forma correcta, la nomenclatura
de estos archivos tiene que ser exacta. Es algo que es muy valorado por
elW3 Consortium –entidad encargada de hacer las normas que deben seguir
los diseñadores- y que no está de más saber.
Los archivos HTML y otros archivos que usemos en nuestra página tienen que
estar nombrados de forma particular. Hay una serie de reglas básicas que
compartiremos con ustedes, que sirven como puntapié inicial:
Los nombres de los archivos deben estar en minúsculas, para poder ser
compatibles en todos los navegadores.
El archivo principal será index.html, dado que será el primer archivo que
el navegador buscará cuando ingrese en nuestro servidor a través de la
dirección IP. No se puede tener el archivo de la home llamado de forma
diferente, tiene que sí o sí llamarse index.
No se pueden usar caracteres no válidos para la nomenclatura del
archivo, por ejemplo, la letra ñ. Solamente se pueden usar el guión (-) y el
guión bajo (_).
No importa si es una imagen o un archivo HTML, todos los
documentostienen que seguir estas reglas para poder ser interpretados
de forma correcta por el navegador.
Por ejemplo, aunque nos veamos tentados de llamar Foto 22/08.jpg a un
archivo, la nomenclatura correcta sería foto_22-08.jpg.
¿Por qué aprender HTML?
Si no somos diseñadores web, y por ejemplo tenemos un empleo relacionado
con la comunicación, en algún momento nos hemos topado con el HTML.
Aprenderlo nunca está de más, dado que es una habilidad que puede ser
apreciada en el ámbito laboral.
Para los Community Managers, es una excelente posibilidad dado que permite
jugar con las herramientas que nos proporciona, por ejemplo Facebook, para
crear tabs personalizadas en las fanpages. Se puede crear algo básico e
interesante con un conocimiento mínimo de HTML gracias a los iframes (de los
cuales hablaremos en otra entrega, pero que permiten insertar una página web
dentro de otra).
Para los periodistas y bloggers, saber de HTML nos permite poder jugar más
con las plataformas y darle un formato diferente a nuestros textos. Además,
nos permite resolver problemas de formato que muchas veces surgen en las
plataformas más populares de blogging del mundo (no tengan miedo de entrar
a la vista HTML a corregir, nos da una visión más clara de qué es lo que
estamos haciendo).
Comprender HTML es comprender el idioma en el que se maneja internet.
Cuando sabemos sus conceptos básicos, es como entender las primeras
palabras cuando estamos mirando una película en otro idioma, un idioma que
estamos estudiando.
Semana 36
DREAMWEAVER: CREACIÓN DE UN DISEÑO DE PÁGINA BASADO EN TABLAS Y ALMACENAMIENTO DE UNA
PÁGINA
XIII. Creación de un diseño de página basado en tablas
Un diseño de página determina cómo va a aparecer la página en el navegador, mostrando, por ejemplo, la situación de los menús, las imágenes, y el contenido de Macromedia Flash.
Las tablas constituyen una herramienta muy eficaz para presentar datos de tabla y establecer el diseño de texto y gráficos en una página HTML. Puede utilizar las tablas para crear su propio diseño de un modo rápido y sencillo.
En este tutorial, va a crear varias tablas en un nuevo documento de Dreamweaver. Las filas y celas de las tablas sirven de cuadros contenedores para el contenido que añadirá posteriormente.
Maqueta de diseño
Lo habitual no es empezar a construir un sitio Web iniciando Dreamweaver y creando páginas directamente. Los primeros pasos para crear un sitio Web debe darlos sobre una hoja de papel, o en una aplicación de edición gráfica como Macromedia Fireworks.
Los diseñadores gráficos suelen crear un boceto artístico general del sitio Web (también conocido como “maqueta”), con el fin de mostrárselo al cliente y asegurarse de que la idea inicial para el sitio Web recibe la aprobación del cliente.
Una maqueta está FORMADA por una cantidad indeterminada de elementos de páginas que el cliente ha solicitado para su sitio Web. Por ejemplo, el cliente podría haber dicho: "quiero un logotipo en la parte superior de la página, una zona de navegación que enlace con estas otras páginas, una sección para una tienda online y una parte donde pueda insertar videoclips.” A partir de esto, el diseñador comienza a planificar el diseño de la página y realiza bocetos de páginas de muestra que cumplen los requisitos del cliente.
IX. Creación y almacenamiento de una página
Después de crear un sitio nuevo y examinar los comps, ya puede empezar a crear páginas Web. Comience creando una página nueva y guardándola en la carpeta raíz local (donde queremos guardarla).
1. En Dreamweaver, Seleccione Archivo > Nuevo.
2. En la ficha General del cuadro de diálogo Nuevo documento, seleccione
Página básica en la lista Categoría, seleccione HTML en la lista Página básica y haga clic en Crear.
3. Seleccione Archivo > Guardar como.
4. En el cuadro de diálogo Guardar como, busque y abra carpeta donde está su página de inicio.
5. Escriba index.html en el cuadro de texto Nombre de archivo y haga clic en Guardar. El nombre de archivo aparecerá ahora en la barra de título en la parte superior de la ventana de la aplicación (Estos pasos se repiten para cada nueva página que deseemos crear).
6. En el cuadro de texto Título del documento en la parte superior del nuevo documento, escriba el nombre de su página, por ejemplo Cafe Townsend.
Éste es el título de la página (distinto al nombre de archivo). Los visitantes del sitio verán este título en la barra del título del navegador cuando accedan a ella a través de su navegador Web.
7. Seleccione Archivo > Guardar para guardar la página.
Inserción de tablas
A continuación, vamos a introducir una tabla que incluirá texto, gráficos y activos de Macromedia Flash.
1. Haga clic una vez en la página para colocar el punto de inserción en la esquina superior izquierda de la página.
2. Seleccione Insertar> Tabla.
3. En el cuadro de diálogo Tabla, siga este procedimiento:
■ Escriba 3 en el cuadro de texto Filas.■ Escriba 1 en el cuadro de texto Columnas.■ Escriba 700 en el cuadro de texto Ancho de tabla.■ Seleccione Píxeles en el menú emergente Ancho de tabla.■ Escriba 0 en el cuadro de texto Grosor del borde.■ Escriba 0 en el cuadro de texto Relleno de celda.■ Escriba 0 en el cuadro de texto Espacio entre celdas.
4. Haga clic en Aceptar. Aparece en su documento una tabla con tres filas y una columna. La tabla tiene 700 píxeles de ancho, sin bordes, relleno de celda ni espacio entre celdas.
5. Haga clic una vez a la derecha de la tabla para anular la selección.
6. Seleccione Insertar> Tabla para insertar otra tabla.
7. En el cuadro de diálogo Insertar tabla, siga este procedimiento para la segunda tabla:
■ Escriba 1 en el cuadro de texto Filas.■ Escriba 3 en el cuadro de texto Columnas.■ Escriba 700 en el cuadro de texto Ancho de tabla.■ Seleccione Píxeles en el menú emergente Ancho de tabla.■ Escriba 0 en el cuadro de texto Grosor del borde.■ Escriba 0 en el cuadro de texto Relleno de celda.■ Escriba 0 en el cuadro de texto Espacio entre celdas.
8. Haga clic en Aceptar. Aparece una segunda tabla con una fila y tres columnas debajo de la primera tabla.
9. Haga clic a la derecha de la tabla para anular la selección.
10. Inserte una tercera tabla seleccionando Insertar > tabla e introduciendo
los siguientes valores en el cuadro de diálogo Insertar tabla:■ Escriba 1 en el cuadro de texto Filas.■ Escriba 1 en el cuadro de texto Columnas.■ Escriba 700 en el cuadro de texto Ancho de tabla.■ Seleccione Píxeles en el menú emergente Ancho de tabla.■ Escriba 0 en el cuadro de texto Grosor del borde.■ Escriba 0 en el cuadro de texto Relleno de celda.■ Escriba 0 en el cuadro de texto Espacio entre celdas.
11. Haga clic en Aceptar. Aparece una tercera tabla con una fila y una columna debajo de la segunda tabla.
Haga clic a la derecha de la tabla para anular la selección. La página creada debe ser parecida a la siguiente:
Semana 37
DREAMWEAVER: CODIGOS HTML BASICOS, FUNCIONAMIENTO DE SITIOS WEB, VERSIONES DE HTML Y CSS
Etiquetas Básicas
Etiquetas Descripción Ej
<h1>...<h6> Títulos de diferentes tamaños.
<p> Escribir un párrafo.
<!--> Poner un comentario en el código.
<br> Para hacer un salto de línea.
<hr> Dibujar una línea horizontal.
Formatos de texto
Etiquetas Descripción Ej
<b> Texto en negrita.
<big> Texto grande.
<em> Texto enfatizado.
<i> Texto en itálica.
<small> Texto pequeño.
<strong> Texto fuerte.
<sub> Texto por debajo.
<sup> Texto por encima.
<ins> Texto subrayado.
<del> Texto tachado.
<tt> Texto teletipo.
Enlaces – Links
Etiquetas Descripción Ej
<a> Crear un vínculo simple.
Marcapáginas de un documento.
Abrir un vínculo en una nueva ventana.
Abrir un vínculo en el frameset padre.
Abrir un vínculo en el mismo frame.
Abrir un vínculo en una ventana de tamaño completo.
Formularios
Etiquetas Descripción Ej
<form> Crear un formulario simple.
La respuesta al formulario se abrirá en una nueva ventana.
La respuesta al formulario se abrirá en el mismo frame del formulario.
La respuesta al formulario se abrirá en el frameset padre.
La respuesta al formulario se abrirá en una ventana de tamaño completo.
<input> Usar un botón gráfico para mandar los formularios.
Un formulario tipo checkbox.
Un formulario para subir archivos.
Un formulario con datos ocultos.
Un formulario con un botón personalizado con una imagen.
Un formulario con ingreso de password.
Un formulario del tipo radio.
<fieldset> Dibujar un recuadro alrededor del formulario con un título.
<select> Menú desplegable.
<optgroup> Poner subtítulos dentro del menú desplegable.
Imágenes
Etiquetas Descripción Ej
<img> Colocar una imagen en el documento.
Modificar las medidas de una imagen.
Crear un mapa de una imagen.
Frames – Marcos
Etiquetas Descripción Ej
<frameset> Definir marcos verticales.
Definir marcos horizontales.
<frame> División de marcos sin bordes.
Uso de márgenes dentro de los marcos.
Marcos fijos que no permiten cambiar su tamaño.
Uso de la barra de desplazamiento dentro de los marcos.
<noframes> En caso que el navegador del usuario no soporte marcos.
<iframe> Alinéamos un iframe a la derecha de la página.
Mostrar un iframe sín los bordes.
Definir la altura del iframe a nuestro gusto.
Definir el ancho del iframe.
Mostrar un iframe sín las barras de desplazamiento.
Tablas
Etiquetas Descripción Ej
<table> Definir el espesor del borde de una tabla.
Tamaño del relleno de cada celda de la tabla.
Separación entre celdas de una tabla.
Especificar los bordes que serán visibles de la tabla.
Visualizar solo las líneas horizontales de una tabla.
Especificar el ancho de la tabla.
<tr> Alinear horizontalmente el contenido de las celdas de una fila.
Alinear verticalmente el contenido de las celdas de una fila.
<td> Alinear horizontalmente el contenido de una celda.
Alinear verticalmente el contenido de una celda.
Agrupamos un número de celdas horizontalmente.
Agrupamos un número de celdas verticalmente.
Listas
Etiquetas Descripción Ej
<ol> Hacer una lista ordenada.
<ul> Hacer una lista sín orden alguno.
<dl> Hacer una lista descriptiva.
Funcionamiento de sitios web
¿Cómo funcionan los sitios web? No tengas miedo de hacer preguntas, incluso
si piensas que son absurdas. Es muy importante hablar un poco antes de
entrar de lleno en el diseño del sitio.
Estoy seguro de que visitas sitios web a diario. Para ello, se ejecuta un
programa llamado navegador web, (Chrome, Firefox, Opera, etc) haciendo clic
en uno de los iconos que se muestran en la siguiente figura y que es habitual
que estén disponibles en la mayoría de ordenadores.
Con el navegador, se puede visitar cualquier sitio web. Por ejemplo, un
explorador muestra sitios como Wikipedia, un periódico de la ciudad en que
resido, etc. Has oído hablar de HTML y CSS, ¿tiene esto que ver con el funcionamiento de sitios web? ¡Por supuesto! Estos son los lenguajes de programación que permiten crear sitios web. Todos los sitios web se basan en estos lenguajes, que son la base de los sitios de internet. HTML fue inventado por Tim BernersLee en 1991, quien todavía sigue de cerca la evolución de la Web.
Creó el World Wide Web Consortium (W3C), que define las nuevas versiones de internet relacionadas con los lenguajes de programación También ha creado más recientemente, la Fundación World Wide Web, que hace el seguimiento y análisis de la evolución de la Web.
Mucha gente confunde (erróneamente) internet y la Web. Debes saber que la Web es parte de internet. Es un gran paquete que incluye, entre otros: la Web, correos electrónicos, mensajería instantánea, etc. Tim BernersLee no es el inventor de internet, es "solo" inventor de la Web.
HTML y CSS son la base del funcionamiento de casi todos los sitios web. Cuando visitas un sitio mediante un navegador, debes saber que, detrás de las escenas, las “ruedas” se activan para permitir que el sitio web se muestre. El ordenador se basa en lo que se indica en HTML y CSS para saber lo que ha de mostrar, la figura siguiente indica parte del código de la página mostrada previamente.
Versiones de HTML y CSS
Con el tiempo, HTML y CSS han evolucionado. La primera versión de HTML (HTML 1.0) ni siquiera ofrecía la posibilidad de mostrar las imágenes.
Una muy breve historia de estos lenguajes para conocimiento general:
HTML 1: es la primera versión creada por Tim BernersLee en 1991. HTML 2: la segunda versión de HTML apareció en 1994 y se terminó en 1996 con la aparición de HTML 3.0, esta es la versión que en realidad plantea las bases de las siguientes versiones de HTML. Las reglas y el funcionamiento de esta versión están dadas por el W3C (mientras que la primera versión fue creada por una persona).
HTML 3: apareció en 1996, esta nueva versión de HTML, añade muchas posibilidades al lenguaje como tablas, applets, scripts, posicionamiento de texto alrededor de imágenes, etc.
HTML 4: Esta es la versión más común de HTML (en concreto, es HTML 4.01). Apareció por primera vez en 1998 y propone el uso de marcos (que dividen una página web en varias partes), tablas más complejas, mejoras en las formas, etc. Más importante aún, esta versión permite por primera vez utilizar hojas de estilo del famoso CSS.
HTML 5: es la última versión. Aún no está muy extendida, llama mucho la atención porque trae muchas mejoras como la posibilidad de incluir fácilmente vídeos, mejorar el contenido, nuevas características para los formularios, etc. Esta es la versión que vamos a describir en esta documentación. EL estándar estará completado en el año 2014.
CSS 1: en 1996, apareció la primera versión de CSS. En ella se establecen las bases de este lenguaje que permiten mejoras de presentación en páginas web, tales como colores, márgenes, fuentes, etc.
CSS 2: apareció en 1999 y fue completado por CSS 2.1, esta nueva versión de CSS, añade numerosas opciones. Ahora se pueden utilizar técnicas de posicionamiento muy precisas que permiten ver los elementos en el lugar deseado en la página.
CSS 3: esta es la última versión, que agrega características muy esperadas, tales como bordes redondeados, degradados, sombras, etc.
De HTML5 y CSS3 aún no se han finalizado totalmente las versiones estandarizadas de W3C.
Sin embargo, incluso si puede haber cambios menores en estos lenguajes, te recomiendo que comiences ahora con estas nuevas versiones. Sus contribuciones son muchas y vale la pena.
Además, muchos sitios web profesionales se construyen hoy en día en las versiones recientes.
