viernes, 13 de junio de 2014
martes, 13 de mayo de 2014
TERMINOLOGÍA BÁSICA DEL SOFTWARE PARA DISEÑAR PAGINAS WEB
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.
CSS
CSS, Es Una Tecnología Que Nos
Permite Crear Páginas Web De Una Manera Más Exacta. Gracias A Las CSS Somos
Mucho Más Dueños De Los Resultados Finales De La Página, Pudiendo Hacer Muchas
Cosas Que No Se Podía Hacer Utilizando Solamente HTML, Como Incluir Márgenes,
Tipos De Letra, Fondos, Colores....
CSS Son Las Siglas De Cascading Style
Sheets, En Español Hojas De Estilo En Cascada.
Pantalle En Dreamweaver
Al Arrancar Dreamweaver Aparece Una Pantalla
Inicial Como Ésta, Vamos A Ver Sus Componentes Fundamentales. La Pantalla Que Se Muestra A
Continuación Puede No Coincidir Exactamente Con La Que Ves En Tu Ordenador, Ya
Que Cada Usuario Puede Decidir Qué Elementos Quiere Que Se Vean En Cada Momento
Y Dónde.
Contenedor En Dreamweaver
Comportamientos En Dreamweaver
Los Comportamientos Son Acciones Que Suceden
Cuando Los Usuarios Realizan Algún Evento Sobre Un Objeto, Como
Puede Ser Mover El Ratón Sobre Una Imagen, Pulsar Sobre Un Texto, Hacer Doble
Clic Sobre Un Mapa De Imagen, Etc.
Sitio Local
Un Sitio Web Es Un Conjunto De Archivos Y
Carpetas, Relacionados Entre Sí, Con Un Diseño Similar O Un
Objetivo Común. Es Necesario Diseñar Y Planificar El Sitio Web Antes De Crear
Las Páginas Que Va A Contener.
Sitio dinámico
En Dreamweaver, el término “sitio” se emplea para referirse a
una ubicación de almacenamiento local o remota de los documentos que pertenecen
a un sitio Web. Un sitio de Dreamweaver permite organizar y administrar todos
los documentos Web, cargar el sitio en un servidor Web, controlar y mantener
vínculos y administrar y compartir archivos. Para aprovechar al máximo las
funciones de Dreamweaver, debe definir un sitio.
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.Son interactivos los foros, los blogs, los comentarios de los usuarios, y todas aquellas aplicaciones en las que el usuario puede interactuar con otros usuarios o con los administradores del sitio.
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.
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.
Etiqueta div
Son divisiones que se pueden hacer en una pagina, para permitir
aplicarle formato distinto por ejemplo. Entonces las Div son capas, tal como la
etiqueta Layer, pero que son aceptadas por todos los navegadores.
Tablas
Las tablas sirven para organizar datos e imágenes en un archivo
HTML.
Consisten de tres elementos básicos: filas, columnas y celdas (que surgen de la intersección de una fila con columna). Para crear una tabla debemos hacer clic sobre el botón Insertar tabla (Insert Table) de la paleta de Objetos.
Consisten de tres elementos básicos: filas, columnas y celdas (que surgen de la intersección de una fila con columna). Para crear una tabla debemos hacer clic sobre el botón Insertar tabla (Insert Table) de la paleta de Objetos.
Formularios
Los formularios permiten interactuar con los visitantes del
sitio o recopilar información de ellos. Por ejemplo, puede solicitar el nombre
y la dirección de correo electrónico de un usuario o hacer que los visitantes
respondan a una encuesta o proporcionen comentarios acerca del sitio.
Formulario de contactos
Formulario de contacto sirve para ayudar a los clientes a pagar
un mensaje a través de su sitio web.
martes, 11 de febrero de 2014
1.3 ASARELEMENTOS BASICOS DE THM
1- blog de notas:
Bloc de
notas (en inglés llamado notepad) es un editor
de texto simple incluido en los sistemas operativos de Microsoft desde 1985.
Su funcionalidad es muy sencilla. Algunas características propias son:
· Inserción de hora y fecha actual
pulsando F5, en formato "HH:MM DD/MM/AA".
· Inserción de hora y fecha actual
automática si el documento comienza por ".LOG".
· Ajuste de línea.
2- buscador: Un buscador
es una página web en la que se ofrece consultar una base de datos en la cual se
relacionan direcciones de páginas web con su contenido. Su uso facilita
enormemente la obtención de un listado de páginas web que contienen información
sobre el tema que nos interesa.
3- compartible:
1 Que puede existir,
ocurrir o hacerse al mismo tiempo que otra cosa o de manera conjunta: escuchar
música es compatible con estudiar. incompatible.
2 Se aplica al programa
informático que puede funcionar en un ordenador o conjuntamente con otros
programas sin necesidad de hacer ninguna modificación: este procesador
de texto es compatible con cualquier software del mercado.
— s. m.
3 Ordenador capaz de
ejecutar los mismos programas que otros ordenadores de un mismo equipo.
NOTA También ordenador
compatible.
4- estructura de página web: La estructura
básica de una página web es la siguiente:
|
<html>
<head></head> <body> </body> </html> |
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.
La primera <head></head>
es la cabecera de la página. Aquí irán cierta información que no es
directamente el contenido de la página. Aquí se pone el título de la página,
los metadatos, estilos, código javascript (todo esto se estudiará en capítulos
venideros). La primera que se suele estudiar es <title></title>,
que indica el título de la página (lo que el navegador pone en la parte
superior izquierda).
La segunda parte es
<body></body>. Aquí va propiamente el contenido de la página:
fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de
la página anterior, el
siguiente código
|
<html>
<head> <title>Esto es el título de la página.</title> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html> |
generará el siguiente resultado
(abre la página en otra ventana, dale al botón derecho => ver código fuente,
y verás así el código HTML de la página):
Observad el título en la parte
superior izquierda de la página. Además, dentro de <body></body>
distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
5- etiquet:
· Etiqueta o tag,
lenguaje informático de marcado utilizado, por ejemplo, para construir páginas
con HTML.
· Etiqueta o tag,
palabras clave que describen un documento informático.
6- híper texto:
El hipertexto es
una herramienta de software con estructura no secuencial que permite
crear, agregar, enlazar y compartir información de diversas fuentes por medio
de enlaces asociativos.
La forma más
habitual de hipertexto en informática es la de hipervínculos o
referencias cruzadas automáticas que van a otros documentos (lexías).
7- lenguajes html:
El lenguaje HTML basa su filosofía
de desarrollo en la referenciación. Para añadir un elemento externo a la página
(imagen, vídeo, script, etc.), este no se incrusta directamente en el código de
la página, sino que se hace una referencia a la ubicación de dicho elemento mediante
texto.
8- marcas (tag):
Las marcas (tags) les
permiten a los estudiantes y maestros describir sus intereses en una forma que
es fácil para que la gente con intereses similares los encuentre. Elperfil del
usuario tiene un lugar en donde se pueden poner los intereses, llo que creará o
añadirá al usuario a una marca (tag) existente.
9-navegador:
· Un navegador web, aplicación
que opera a través de Internet, interpretando la información de archivos y
sitios web para que éstos puedan ser vistos.
10- pagina web:
Una página web (o página
electrónica, según el término recomendado por la Real Academia Española)
es un documento o información electrónica capaz de contener
texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras
cosas, adaptada para la llamada World Wide Web, y que puede ser accedida
mediante un navegador.
11- plataforma:
Una plataforma es
un tablero horizontal, descubierto y elevado sobre el suelo, donde se colocan
personas o cosas. Por extensión, ha ido adquiriendo nuevos significados. Entre
ellos:
· en astronáutica, una plataforma
de lanzamiento se utiliza para el despegue de naves espaciales
· una plataforma petrolífera es
una estructura para la extracción de petróleo del subsuelo marino
· en geología, la plataforma
continental es la zona de poca profundidad cercana al continente
· en informática y tecnología, plataforma se
refiere al sistema operativo o a sistemas complejos que a su vez sirven para
crear programas, como las plataformas de desarrollo
· un tipo de videojuegos, los videojuegos
de plataformas
· en moda, plataforma o pasarela es
el lugar por el que desfilan los modelos
· un tipo de zapatos alzados
· un conjunto de personas agrupadas
con una finalidad concreta, como una organización o sociedad
· en deportes
acuáticos, plataforma es una modalidad de saltos
· en aviación, la plataforma es
el espacio del aeropuerto donde estacionan las aeronaves
· en tráfico, la zona que abarca calzada, arcén, mediana, berma,
etcétera
· en los automóviles, la plataforma es
la base de la carrocería
· en política, la plataforma
política es un movimiento social
12- sitio web:
Un 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. Una página web es un documento HTML/XHTML que
es accesible generalmente mediante el protocolo HTTP de
Internet.
13- servidor web:
Un servidor
web o servidor HTTP es un programa informático que
procesa una aplicación del lado del servidor, realizando conexiones
bidireccionales y/o unidireccionales ysíncronas o asíncronas con el
cliente y generando o cediendo una respuesta en cualquier lenguaje o Aplicación
del lado del cliente. El código recibido por el cliente suele sercompilado y
ejecutado por un navegador web.
14- vínculos }
Es una unión,
relación o atadura de una persona o cosa con otra. Por lo tanto, dos personas u
objetos vinculados están unidos, encadenados, emparentados o atados, ya sea de
forma física o simbólica.
Practica 1.2 introducción del HTML
Que entiende por HTML?
Es un estándar que sirve de referencia para
la elaboración de páginas web en sus diferentes versiones, define una
estructura básica y un código (denominado código HTML) para la definición de
contenido de una página web, como texto, imágenes, etc.
Define cada una de las letras que
conforman la palabra HTML?
H: Hyper
T: Text
M: Markup
L: Language
es.wikipedia.org/wiki/HTML
Quien invento el HTML?
En el año 1989 Tim Berners Lee creó la web, y
junto con ella el lenguaje HTML.
Cual era el objetivo al crear el lenguaje HTML?
Permite
confeccionar archivos de texto mostrándolo de forma estructurada y atractiva,
con enlaces (hyperlinks) que hacen referencia a otros documentos o fuentes de
información relacionada, y que permite incorporar archivos multimedia como
gráficos, sonidos, imágenes, videos, etc.
Menciona 4 características del lenguaje HTML?
Elementos
Cada elemento de un documento HTML consta de una marca de comienzo, un
bloque de texto y una marca de fin. <MARCA>bloque de texto</MARCA>.
Por ejemplo, <H1>Titular de nivel 1</H1>
Estos elementos se denominan contenedores , porque contienen un bloque
de texto entre las dos marcas. También existen elementos vacíos , que no
afectan a bloques de texto y, por tanto, no contienen marca de fin.
Por ejemplo, línea 1 <BR> línea 2
Por ejemplo, línea 1 <BR> línea 2
Atributos
Muchos elementos tienen atributos que definen propiedades del elemento:
<MARCA ATRIBUTO="VALOR"> bloque de texto </MARCA>. Por
ejemplo, <H1 ALIGN="CENTER">Titular de nivel 1
centrado</H1>
Es recomendable encerrar los valores de los atributos entre comillas
dobles. En algunos casos es además obligatorio (por ejemplo, si contienen
espacios en blanco).
Distinción entre mayúsculas y
minúsculas
HTML no distingue entre mayúsculas y minúsculas. Cuando es importante
hacerlo, cosa que puede ocurrir con los valores de algunos atributos (por
ejemplo, nombres de ficheros), es preciso encerrar el valor entre comillas
dobles. Por ejemplo, <IMG ALT=""
SRC="BolaRoja.gif">
Comentarios
Los comentarios se escriben en HTML de la siguiente forma: <!-- Esto es un
comentario -- >. Los caracteres de inicio del comentario, <!-- deben ir juntos, pero
se permiten espacios entre los -- y el > del final. Los comentarios pueden
expandirse varias líneas, aunque no es conveniente porque algunos
visualizadores pueden no interpretarlos.
Interpretación de espacios,
tabulaciones y retornos de carro
Los espacios, tabulaciones, líneas en blanco y retornos de carro del
documento HTML se ignoran, tomándose como un único espacio en blanco. Esto
permite añadir espacios para aumentar la claridad del documento. Cuando se
quiere forzar un espacio en blanco, se hace de la siguiente forma:
Estructuración
HTML es un lenguaje estructurado. Existen unas reglas estructurales
sobre dónde pueden y no pueden ir los elementos. Por ejemplo,
- Ciertos elementos no pueden
contener otros elementos. Por ejemplo, no es correcto colocar un titular
dentro de otro. Además, tampoco tiene sentido hacerlo. <H1><H2>Texto</H2></H1>
- Los elementos no se pueden
solapar. No es correcto escribir <EM><H1>Texto</EM></H1>
Menciona 7 reglas
básicas que debes seguir para el diseño de una pagina web?
1- Los
visitantes no quieren desplazarse de forma horizontal.
Como
experiencia personal, me resulta muy molesto tener que desplazarme por la
página hacia la derecha para ser capaz de leer todo el contenido de la página.
La gente no quiere tener que coger el ratón y mover la página web a
la derecha con el fin de ver qué se esconde allí.
2- No
debe tener más de tres pantallas completas de información.
Tener que
desplazarse horizontalmente para poder ver el resto de la información es
molesto, pero tampoco es muy divertido tener que desplazarse hacia abajo por la
página durante mucho tiempo para ser capaz de obtener toda la
información.
La regla: una
página web no debería requerir a un usuario bajar la página más de
tres pantallas. Pero también se debe considerar que la gente definitivamente se
desplazará si el contenido que ofreces es de buena calidad. Por lo tanto lo más
importante es un equilibrio entre la calidad del contenido y las molestias que
puede suponer al visitante acceder a este.
3- Una
página web no debe pesar más de 50k.
Sería
bonito tener una página web que no necesite tiempo de descarga, que cargue toda
la web instantáneamente. Se calcula que sólo se tarda unos siete segundos en
crear una primera impresión de un sitio web.
Sin
embargo, hay ocasiones en que usted realmente necesita poner gráficos de gran
tamaño e imágenes pesadas. Esto es especialmente habitual para los fotógrafos.
Ellos necesitan tener grandes imágenes y fotografías en sus páginas para poder
convencer a los espectadores de sus capacidades. Sólo un consejo: no inflar sus páginas
web sin necesidad.
4- No
fuerce a los espectadores para que descarguen plugins.
Esto es
otra cosa que me molesta, aparte del desplazamiento horizontal. Tener que
descargar un plugin para ser capaz de ver aquello que te interesa es realmente
molesto.
Es cierto
que los plugins pueden dar ese extra a su sitio web. Pero siempre recuerde que
no todos tienen los plugins, aunque estemos en la era de la tecnología. Para
adaptarse a todos sus clientes potenciales, piensa en crear una alternativa
HTML.
viernes, 7 de febrero de 2014
Suscribirse a:
Comentarios (Atom)