Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

PROGRAMACION WEB Y CSS

No description
by

jairo jarvio

on 19 May 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of PROGRAMACION WEB Y CSS

PROGRAMACION WEB Y CSS
2.2 LISTAS Y CSS
Es posible insertar texto a modo de lista. A su vez, la lista puede ser numerada o con viñetas.

Para que un texto que ya ha sido introducido en el documento se convierta en una lista, simplemente hay que seleccionarlo y pulsar sobre la opción de lista correspondiente, ya sea a través del inspector de propiedades, o a través del menú Formato.

La lista con viñetas (sin ordenar) se selecciona a través del botón , mientras que la lista numerada (ordenada) se selecciona a través del botón .
IMÁGENES
Las imágenes son un aspecto muy importante de la web. Ya sea como complementos a la información o parte del diseño, la hacen mucho más atractiva a ojos del visitante. No obstante, no conviene abusar, ya que aumentarán mucho el tamaño final de la web.

Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.
FORMULARIOS Y CSS
Los formularios se utilizan para recoger datos de los usuarios. Nos pueden servir para realizar un pedido en una tienda virtual, crear una encuesta, conocer las opiniones de los usuarios, recibir preguntas, etc.

Una vez el usuario rellena los datos y pulsa el botón para enviar el formulario se arrancará un programa que recibirá los datos y hará el tratamiento correspondiente.
2.1 TEXTO Y CSS
Las características del texto seleccionado pueden ser definidas a través del menú Formato, y a través del inspector de propiedades. Vamos a ver las posibilidades que se nos ofrecen a través del inspector de propiedades, que están clasificadas en dos categorías HTML y CSS.
ESTILO DE LETRA
Estilo:
El botón B encierra el texto en una etiqueta <strong></strong>, que por defecto se muestra en negrita. El botón I, lo encierra entre <em></em>, que por defecto se ve en cursiva.
Estas son las etiquetas de resaltado más habituales, pero existen otras que encontramos a través del menú Texto. Por ejemplo, subrayar el texto. Esta opción no aparece en el panel de Propiedades ya que de normal no suele utilizarse, debido a que los vínculos aparecen subrayados y el subrayar texto normal podría hacer que el usuario pensara que se trata de un vínculo. Además, emplea etiquetas que están en desuso.
COLOR
ANCHURA DE LETRA
TAMAÑO
TIPO DE LETRA
ESTILO ALT. DE LETRA
TIPOGRAFIA
Dreamweaver presenta algunas herramientas que facilitan el manejo de las fuentes por parte de los diseñadores, haciendo la tarea mucho más sencilla. Para comprender como funcionan las herramientas de fuentes de Dreamweaver, haremos una breve descripción de algunos conceptos básicos del manejo de fuentes con CSS y HTML.
ESTILOS BÁSICOS
VIÑETAS PERSONALIZADAS
Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una viñeta formada por un pequeño círculo de color negro. Los elementos de las listas ordenadas se muestran por defecto con la numeración decimal utilizada en la mayoría de países.

No obstante, CSS define varias propiedades para controlar el tipo de viñeta que muestran las listas, además de poder controlar la posición de la propia viñeta. La propiedad básica es la que controla el tipo de viñeta que se muestra y que se denomina list-style-type.
MENÚ VERTICAL SENCILLO
MENÚ VERTICAL AVANZADO
ESTILOS AVANZADOS
MENÚ HORIZONTAL BSICO
Partiendo de la misma lista de elementos del menú vertical, resulta muy sencillo crear un menú de navegación horizontal. La clave reside en modificar el posicionamiento original de los elementos de la lista.
MENÚ HORIZONTAL CON PESTAÑAS
Modificando los estilos de cada elemento del menú y utilizando imágenes de fondo y las pseudo-clases :hover y :active, se pueden crear menús horizontales complejos, incluso con el aspecto de un menú de solapas o pestañas
MENÚ HORIZONTAL AVANZADO
Modificando los estilos de cada elemento del menú y utilizando imágenes de fondo y las pseudo-clases :hover y :active, se pueden crear menús horizontales complejos, incluso con el aspecto de un menú de solapas o pestañas:
ESTABLECER LA ANCHURA Y ALTURA DE IMAGENES
Utilizando las propiedades width y height, es posible mostrar las imágenes con cualquier altura/anchura, independientemente de su altura/anchura real:

#destacada {
width: 120px;
height: 250px;
}

<img id="destacada" src="imagen.png" />
No obstante, si se utilizan alturas/anchuras diferentes de las reales, el navegador deforma las imágenes y el resultado estético es muy desagradable.
ELIMINAR EL BORDE DE LAS IMÁGENES CON ENLACE
Cuando una imagen forma parte de un enlace, los navegadores muestran por defecto un borde azul grueso alrededor de las imágenes. Por tanto, una de las reglas más utilizadas en los archivos CSS es la que elimina los bordes de las imágenes con enlaces:

img {
border: none;
}
ESTILOS BÁSICOS
ESTILOS AVANZADOS
SOMBRA:
La mayoría de aplicaciones de diseño gráfico permiten añadir una sombra (llamada drop shadow en inglés) a las imágenes. CSS no incluye propiedades que permitan mostrar de forma sencilla sombras en los elementos.

No obstante, existen varias técnicas sencillas y otras más avanzadas que permiten crear sombras que se adapten a cualquier imagen o elemento. A continuación se muestra una técnica sencilla para añadir sombra a las imágenes.
ESTILOS AVANZADOS.
MOSTRAR BOTÓN COMO ENLACE
Como ya se vio anteriormente, el estilo por defecto de los enlaces se puede modificar para que se muestren como botones de formulario. Ahora, los botones de formulario también se pueden modificar para que parezcan enlaces.
MEJORAS EN LOS CAMPOS DE TEXTO
Por defecto, los campos de texto de los formularios no incluyen ningún espacio de relleno, por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro de texto.

Añadiendo un pequeño padding a cada elemento <input>, se mejora notablemente el aspecto del formulario
LABELS ALINEADOS Y FORMATEADOS
Los elementos <input> y <label> de los formularios son elementos en línea, por lo que el aspecto que muestran los formularios por defecto,
ESTILOS AVANZADOS
FORMULARIO EN VARIAS COLUMNAS
Los formularios complejos con decenas de campos pueden ocupar mucho espacio en la ventana del navegador. Además del uso de pestañas para agrupar los campos relacionados en un formulario, también es posible mostrar el formulario a dos columnas, para aprovechar mejor el espacio.
RESALTAR EL CAMPO SELECCIONADO
Una de las mejoras más útiles para los formularios HTML consiste en resaltar de alguna forma especial el campo en el que el usuario está introduciendo datos. Para ello, CSS define la pseudo-clase :focus, que permite aplicar estilos especiales al elemento que en ese momento tiene el foco o atención del usuario.
MULTIMEDIA
Puede cambiar el color predeterminado de todo el texto de una página o bien el color del texto seleccionado en la página.
Seleccione Modificar > Propiedades de la página > Apariencia (HTML) o Vínculos (HTML) y, a continuación, seleccione colores para las opciones Color del texto, Color de los vínculos, Vínculos visitados y Vínculos activos.
Seleccione el texto. Si no hay texto seleccionado, la opción se aplicará al texto que escriba a continuación.
Elija entre las opciones siguientes:
Para cambiar la fuente, seleccione una combinación de fuentes del submenú Formato > Fuente. Seleccione Predeterminada para quitar los tipos de fuente aplicados anteriormente y aplicar la fuente predeterminada al texto seleccionado (la fuente predeterminada por el navegador o la fuente asignada a la etiqueta en la hoja de estilos CSS).

Para cambiar el estilo de fuente, seleccione un estilo de fuente (Negrita, Cursiva, Subrayado, etc.) del submenú Formato > Estilo.
Puede utilizar HTML para aplicar formato de texto a una letra o a párrafos y bloques de texto enteros de un sitio. Utilice el menú Formato para establecer o cambiar las características de fuente para el texto seleccionado. Puede establecer el tipo, estilo (negrita, cursiva) y el tamaño de la fuente.
La anchura del texto se define segun sea el uso que se le dara a el texto que estamos usando, puede ser mas ancho para tituos, subtitulos o para resaltar algo importante.
El tamaño se define como lo grande que sera el texto, al agual que la anchura puede variar segun su uso
Los sitios web correctamente diseñados emplean las listas de elementos para crear todos sus menús de navegación. Utilizando la etiqueta <ul> de HTML se agrupan todas las opciones del menú y haciendo uso de CSS se modifica su aspecto para mostrar un menú horizontal o vertical.

A continuación se muestra la transformación de una lista sencilla de enlaces en un menú vertical de navegación.
parecido al menú vertical simple que os mostré, aunque un poco más sencillo. Todos los valores de este menú pueden cambiarse. Con un poco de imaginación podremos crear resultados muy buenos.
INCORPORAR SONIDO
INCORPORAR VIDEO
En ocasiones puede interesar incluir algún vídeo en una página web, pero hay que tener en cuenta que los vídeos suelen ocupar mucho espacio en disco, y por lo tanto, precisan de mucho tiempo para descargarse.

En este apartado nos referimos a insertar vídeo de un archivo alojado en nuestro sitio. No a mostrar vídeos de sitios especializados, como youTube.

Para insertar un archivo de vídeo en un documento puedes hacerlo de dos formas, con la nueva etiqueta <video > o mediante un plug-in.
INCORPORAR IMAGENES
Para insertar una imagen hay que dirigirse al menú Insertar, a la opción Imagen. Después de esto, ya es posible seleccionar una imagen a través de la nueva ventana. Cuando te acostumbres, te será más cómodo acceder con la combinación de teclas Ctrl + Alt + I.
INCORPORAR ELEMENTOS FLASH
Las películas Flash son animaciones, cuyo archivo tiene la extensión SWF. Es frecuente verlas en las páginas iniciales de los sitios web, a modo de presentación hacia los usuarios, como banners publicitarios, como botones... Flash todavia es uno de los elementos multimedia más empleados en las páginas web, aunque su uso está decreciendo con la llegada de HTML 5 y el vídeo en mp4.

Estas películas pueden crearse mediante el programa Flash también de Adobe. Para poder ser visualizado en el navegador, y necesitan que el usuario tenga instalado el plug-in de Flash Player. Su instalación es muy sencilla y normalmente ya viene con el navegador. Sin embargo en los teléfonos móviles y tabletas no ocurre lo mismo ya que Android y Apple no lo incluyen.
Hasta hace poco la única forma de insertar audio en una página web era mediante plug-in pero desde que apareció HTML5 los navegadores compatibles son capaces de interpretar la etiqueta <audio> que reproduce sonido de una forma estándar sin necesidad de plug-in.

La etiqueta <audio> sólo funcionará en los navegadores compatibles con HTML 5, IE a partir de la versión 9 y las versiones de Firefox 3.5, Chrome 3.0 y Safari 3.0, además de algunos otros.

Si tienes acceso Creative Cloud podrás insertar el tag <audio> desde Insertar, Común, Media, opción HTML 5 Audio, en otro caso debes hacerlo en la vista de código. En la unidad 12 explicaremos con más detalle cómo escribir código HTML desde la vista código.
REQUISITOS
1.- Un Nombre , es decir su nombre en internet
llamado dominio y comienza con www
ejemplos: www.nutriologo.com.mx o www.tupropiodominio.com

Es un uso de dominio o tenedor de una licencia, se contrata anualmente a las autoridades que rigen el internet a nivel mundial.

Terminaciones disponibles de dominios:

.com
.net
.org
.com.mx

..entre otras…
Recomendamos siempre la mas sencilla, corta y fácil de recordar.
Siempre sujetos a disponibilidad.
DISEÑO DEL SITIO
2.- Diseño gráfico y web del sitio – es la parte gráfica y artística de la pagina

Parte visual incluye layout, logotipos, fotografía e imágenes
Programación, código y columna vertebral del sitio – parte no visible al usuario.

Tipos de sitios:
a. Transaccionales de venta o venta directa
b. Servicio al cliente
c. Educativos, informativos, como hacer
d. Demostración de producto
e. Imagen, promocionales, posicionamiento
f. Campañas promocionales
g. Catalogo en linea
SUBIR Y PROBAR EL SITIO
Es la transmisión del sitio en internet desde un servidor dedicado que trabaja constantemente, publicando la pagina de internet a todo usuario.

Con el hospedaje y el dominio activado se pueden utilizar los correos electronicos del dominio es decir, si mi dominio es www.bioxnet.com yo puedo crear correos para es dominio
SUBIR PAGINA A UN SITIO
Full transcript