Manual Desarrollo Web

2. Marcar la opcin exportar

Aplicaciones y Diseo WebDiseo de sitios web

Ficha 1DISEO DE SITIOS WEB

Aspectos estticos a considerar en el diseo de pginas web

Objetivo.Este mdulo tiene como finalidad instruir al participante en el uso y aplicacin de herramientas (PHP, MySQL, HTML) que le permitan disear pginas web interactivas, conectarse a una base de datos y crear formularios que almacenen datos respetando aspectos estticos, que mediante su creatividad le permita realizar diseos de pginas corporativas que respeten los principios bsicos de mercadotecnia.

Colorimetra

Diseo web corporativo

Distribucin de textos e imgenes

COLORIMETRATeora del color en la WebColor: Es producido cuando la luz llega a un objeto y rebota de este hasta llegar a los ojos.

El color se origina de la luz. Luz solar, como es percibida naturalmente, no tiene color. En realidad un arco iris es un testimonio de que todos los colores del espectro estn presentes en la luz blanca.La siguiente ilustracin ejemplifica este fenmeno:1. Todos los colores invisibles de la luz solar llegan a la manzana.2. La superficie de la manzana roja absorbe todos los rayos de colores con excepcin de los correspondientes al rojo, reflejando este color al ojo humano.3. El ojo recibe la luz roja que es reflejada y se enva un mensaje al cerebro

El color es pues un hecho de la visin que resulta de las diferencias de percepciones del ojo a distintas longitudes de onda que componen lo que se denomina el "espectro" de luz blanca reflejada en una hoja de papel l. Estas ondas visibles son aquellas cuya longitud de onda est comprendida entre los 400 y los 700 nanmetros; ms all de estos lmites siguen existiendo radiaciones, pero ya no son percibidos por nuestra vista.

Consultar video: (Luz y color)http://www.youtube.com/watch?v=HdttkxRI-YwConsultar ejemplo:http://www.colorsontheweb.com/colorinformation.asp

Ms all de la mera identificacin o asociacin, el color tambin se puede emplear para crear experiencias. El publicista representa el producto en su anuncio mediante la forma, pero aade las cualidades del color. El color puede llegar a ser la traduccin visual de nuestros sentidos, o despertar stos mediante la gama de colores utilizados. Podremos dar sensacin de fro, de apetecible, de rugoso, de limpio...

El ojo humano puede distinguir entre 10.000 colores. Se pueden adems emplear tres dimensiones fsicas del color para relacionar experiencias de percepcin con propiedades materiales: saturacin, brillantez y tono.

El tono: Es el matiz del color, es decir el color en s mismo, supone su cualidad cromtica, es - simplemente- un sinnimo de color. Es la cualidad que define la mezcla de un color con blanco y negro. Est relacionado con la longitud de onda de su radiacin. Segn su tonalidad se puede decir que un color es rojo, amarillo, verde... Aqu podemos hacer una divisin entre:

Tonos clidos (rojo, amarillo y anaranjados). Aquellos que asociamos con la luz solar, el fuego... Y tonos fros (azul, verde y violeta). Los colores fros son aquellos que asociamos con el agua, la luz de la luna...

La brillantez: Tiene que ver con la intensidad o el nivel de energa. Es la luminosidad de un color (la capacidad de reflejar el blanco), es decir, el brillo. Alude a la claridad u oscuridad de un tono. Es una condicin variable, que puede alterar fundamentalmente la apariencia de un color. La luminosidad puede variar aadiendo negro o blanco a un tono.

En general, con los tonos puros que tienen un valor ms luminoso (amarillo, naranja, verde) se consiguen las mejores variantes claras, mientras que los tonos puros que tienen normalmente un valor normalmente menos luminoso (rojo, azul, violeta) ofrecen las mejores variantes oscuras.

La saturacin: Est relacionada con la pureza cromtica o falta de dilucin con el blanco. Constituye la pureza del color respecto al gris, y depende de la cantidad de blanco presente. Cuanto ms saturado est un color, ms puro es y menos mezcla de gris posee.

Crculo cromticoNos sirve para observar la organizacin bsica y la interrelacin de los colores. Tambin lo podemos emplear como forma para hacer la seleccin de color que nos parezca adecuada a nuestro diseo. Podemos encontrar diversos crculos de color, pero el que aqu vemos est compuesto de 12 colores bsicos.

En este crculo cromtico podemos encontrar: Los colores primarios: rojo, azul y amarillo; Los secundarios: verde, violeta y naranja; Y los terciarios: rojo violceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso, azul verdoso y azul violceo.

Los colores secundarios se obtienen al mezclar partes iguales de dos primarios; los colores terciarios se consiguen al mezclar partes iguales de un color primario y de un secundario adyacente.

Los primarios son colores que se consideran absolutos y que no pueden crearse mediante la mezcla de otros colores.

Cada color tiene un lugar especfico enlaruedadecolores.Adems de ayudarte a mezclar coloreste ayuda a aadir colores a tus creaciones de una manera lgica.Los colores primarios no pueden sercreados por la mezcla deotros colores, por el contrario, la mezcladeestosgeneranlos dems colores.

Los colores primarios son: RojoAmarillo Azul

Consultar video (Prisma de newton):http://www.youtube.com/watch?v=c0XsvzQ1WOw&NR=1

La mezcla de dos colores primarios produce un secundario Rojo + Amarillo = NaranjaAmarillo + Azul = Verde Azul + Rojo = Violeta

Colores Terciarios son creados al mezclar un color primario con un color secundario.

Colores neutrales. Los colores neutrales contienen partes iguales de los colores primarios mezclados en partes iguales(al mezclar los colores primarios, rojo, amarillo y azul, el color obtenido es un gris neutral). Negro, blanco y gris son a veces considerados como neutrales.

Sistemas de coloresDependiendo de qu mbito, podemos encontrar tres juegos de colores primarios:

Los artistas y diseadores parten de un juego formado por el rojo, el amarillo y el azul. Mezclando pigmentos de stos colores pueden obtenerse todos los dems tonos.

El segundo juego de primarios es el del rojo, verde y el azul, conocidos como primarios aditivos. Son los primarios de la luz y se utilizan en el campo de la ciencia o en la formacin de imgenes de monitores. Si se mezclan en distintos tantos por ciento, forman otros colores y si lo hacen en cantidades iguales producen la luz blanca.

El tercer juego se compone de magenta, amarillo y cian. Se tratan de los primarios sustractivos y son los empleados por las impresoras. En imprenta, la separacin de colores se realiza utilizando filtros para restar luz de los primarios aditivos, con lo que se obtienen los colores de impresin por proceso sustractivo.

Colores AditivosColores Substractivos

Los sistemas de colores son una manera de usar la rueda de colores para coordinar diferentes coloresya sea en el arte que creas, combinando tu vestimenta o para decidir el color a usarse para pintar una habitacin. Los siguientes trminos se utilizan para clasificar colores de una manera lgica y til.1. Monocromtico2. Complementario3. Anlogo4. Fro5. Caliente

Monocromtico:

un par opuesto en la r ten viste en colores coMono significa uno, croma significa coloresquemas de valores monocromticos poseen un solo color y sus valores.

Complementario:Los matices complementarios se componen de ueda de colores yproveen un alto contraste (si quieres que te no mplementarios). En este caso si miramos a la lnea recta dibujada en la rueda de colores, podemos notar que el rojo y el verde son opuestos.

Anlogos:El sistema de colores anlogos envuelve de tres a cinco colores adyacentes en la rueda de colores estudiada. Esta combinacin envuelve poco contraste.Este sistema de colores es muy elegante y se puede observar en la naturaleza, por ejemplo en las llamaradas del fuego o en los azules del ocano.

Calientes y Fros:Los trminos "clido" y "fro" se utilizan para calificar a aquellos tonos que connotan dichas cualidades; estos trminos se designan por lo que denominamos "temperatura de color". Las diferencias entre los colores clidos y los fros pueden ser muy sutiles. Por ejemplo, el papel blanco puede parecer ms clido o ms fro por una leve presencia de rojo o azul. Lo mismo ocurre con el gris y el negro.Los colores calientes se encuentran al lado derecho de nuestra rueda de colores. Tambin son los colores asociados con fuego (de ah su nombre) y estos hacen que los objetos de este matiz aparezcan ms cercanos.Los colores fros se encuentran al lado izquierdo de nuestra rueda de colores. Estos colores son el de la nieve y el hielo y estos preceden en marco.

Consultar herramienta en lnea:

http://colorschemedesigner.com/

Psicologa del color1La psicologa de los colores fue ampliamente estudiada por Goethe, que examin el efecto del color sobre los individuos.

La psicologa del color es un campo de estudio que est dirigido a analizar el efecto del color en la percepcin y la conducta humana. Desde el punto de vista estrictamente mdico, todava es una ciencia inmadura en la corriente principal de la psicologa contempornea, teniendo en cuenta que muchas tcnicas adscritas a este campo pueden categorizarse dentro del mbito de la medicina alternativa.

Sin embargo, en un sentido ms amplio, el estudio de la percepcin de los colores constituye una consideracin habitual en el diseo arquitectnico, la moda, la sealtica y el arte publicitario.2

"El lenguaje de los colores" significa que stos no slo se supeditan a representar la realidad en imagen, sino que tambin pueden hablar. Cada color es un signo que posee su propio significado.

El factor psicolgico est formado por las diferentes impresiones que emanan del ambiente creado por el color, que pueden ser de calma, de recogimiento, de plenitud, de alegra, opresin, violencia...etc.

Colores clidosEl ardiente remite al rojo de mxima saturacin en el crculo cromtico; es el rojo en su estado ms intenso.

Los colores ardientes se proyectan hacia fuera y atraen la atencin. Por esta razn, a menudo se usa el rojo en letreros y el diseo grfico. Los colores ardientes son fuertes y agresivos, y parecen vibrar dentro de su espacio propio. El poder de los colores ardientes afecta a la gente de muchas maneras, tales como el aumento de la presin sangunea y la estimulacin del sistema nervioso.

Colores fros El fro remite al azul en su mxima saturacin. En su estado ms brillante es dominante y fuerte. Los colores fros nos recuerdan el hielo y la nieve. Los sentimientos generados por

1 A. Moles y L. Janiszewski.2 Wikipedia. http://www.wikipedia.com

los colores fros azul, verde y verde azulado son opuestos a los generados por los colores ardientes; el azul fro aminora el metabolismo y aumenta nuestra sensacin de calma.

Colores claros Los colores claros son los pasteles ms plidos. Toman su claridad de una ausencia de color visible en su composicin, son casi transparentes. Los colores claros descubren los alrededores y sugieren liviandad, descanso, suavidad y fluidez. Se parecen a las cortinas transparentes de una ventana, y envan un mensaje de distensin. Son el color marfil, rosa, celeste, beige...

Colores oscuros Los colores oscuros son tonos que contienen negro en su composicin. Encierran el espacio y lo hacen parecer ms pequeo. Los colores oscuros son concentrados y serios en su efecto. En cuanto a las estaciones, sugieren el otoo y el invierno. Combinar juntos los claros y los oscuros es una manera comn y dramtica de representar los opuestos de la naturaleza, tales como el da y la noche.

Colores brillantes La claridad de los colores brillantes se logra por la omisin del gris o el negro. Los colores azules, rojos, amarillos y naranjas son colores de brillo pleno. Los colores brillantes son vvidos y atraen la atencin. Un bus escolar amarillo, un racimo de globos de colores, el rojo de la nariz de un payaso nunca pasan inadvertidos. Estimulantes y alegres, los colores brillantes son colores perfectos para ser utilizados en envases, moda y publicidad

1. El blanco: como el negro, se hallan en los extremos de la gama de los grises. Tienen un valor lmite, frecuentemente extremos de brillo y de saturacin, y tambin un valor neutro (ausencia de color).

Tambin es un valor latente capaz de potenciar los otros colores vecinos. El blanco puede expresar paz, soleado, feliz, activo, puro e inocente; crea una impresin

luminosa de vaco positivo y de infinito. El blanco es el fondo universal de la comunicacin grfica.

2. El negro: es el smbolo del silencio, del misterio y, en ocasiones, puede significar impuro y maligno. Confiere nobleza y elegancia, sobre todo cuando es brillante.

3. El gris: es el centro de todo, pero es un centro neutro y pasivo, que simboliza la indecisin y la ausencia de energa, expresa duda y melancola.

Simblicamente, el blanco y el negro, con sus gradaciones de gris, son del color de la lgica y de lo esencial: la forma. Por otra parte, el blanco y el negro junto con el oro y plata, son los colores del prestigio.

Los colores metlicos tienen una imagen lustrosa, adoptando las cualidades de los metales que representan. Dan impresin de frialdad metlica, pero tambin dan sensacin de brillantez, lujo, elegancia, por su asociacin con la opulencia y los metales preciosos.Ver: http://10steps.sg/articles/featured-articles/40-black-and-white-stylish-websites/

El amarillo: es el color ms luminoso, ms clido, ardiente y expansivo. Es el color del sol, de la luz y del oro, y como tal es violento, intenso y agudo. Suelen interpretarse como animados, joviales, excitantes, afectivos e impulsivos. Est tambin relacionado con la naturaleza.Ver: http://webdesignledger.com/inspiration/50-yellow-web-designs-to-inspire-you

El naranja: ms que el rojo, posee una fuerza activa, radiante y expansiva. Tiene un carcter acogedor, clido, estimulante y una cualidad dinmica muy positiva y energtica.Ver: http://www.photoshopytutoriales.com/22-disenos-anaranjados/

El rojo: significa la vitalidad, es el color de la sangre, de la pasin, de la fuerza bruta y del fuego. Color fundamental, ligado al principio de la vida, expresa la sensualidad, la virilidad, la energa; es exultante y agresivo. El rojo es el smbolo de la pasin ardiente y desbordada, de la sexualidad y el erotismo. En general los rojos suelen ser percibidos como osados, sociables, excitantes, potentes y protectores. Este color puede significar clera y agresividad. Asimismo se puede relacionar con la guerra, la sangre, la pasin, el amor, el peligro, la fuerza, la energa... Estamos hablando de un color clido, asociado con el sol, el calor, de tal manera que es posible sentirse ms acalorado en un ambiente pintado de rojo, aunque objetivamente la temperatura no haya variado.Ver: http://www.zmogo.com/design/45-beautiful-red-websites-for-design-inspiration/

El azul: es el smbolo de la profundidad. Inmaterial y fro, suscita una predisposicin favorable. La sensacin de placidez que provoca el azul es distinta de la calma o reposo terrestres, propios del verde. Es un color reservado y entra dentro de los colores fros. Expresa armona, amistad, fidelidad, serenidad, sosiego... y posee la virtud de crear la ilusin ptica de retroceder. Este color se asocia con el cielo, el mar y el aire. El azul claro puede sugerir optimismo. Cuanto ms se clarifica ms pierde atraccin y se vuelve indiferente y vaco. Cuanto ms se oscurece ms atrae hacia el infinito.Ver: http://www.webdesign.fm/60-awesome-blue-websites/

El violeta: (mezcla del rojo y azul) es el color de la templanza, de la lucidez y de la reflexin. Es mstico, melanclico y podra representar tambin la introversin. Cuando el violeta deriva en lila o morado, se aplana y pierde su potencial de concentracin positiva. Cuando tiende al prpura proyecta una sensacin de majestad.Ver: http://webdesignledger.com/inspiration/35-purple-web-designs-to-inspire-you

El verde: es el color ms tranquilo y sedante. Evoca la vegetacin, el frescor y la naturaleza. Es el color de la calma indiferente: no transmite alegra, tristeza o pasin. Cuando algo reverdece suscita la esperanza de una vida renovada. El verde que tiende al amarillo, cobra fuerza activa y soleada; si en l predomina el azul resulta ms sobrio y sofisticado.Ver: http://www.1stwebdesigner.com/inspiration/fresh-green-websites-inspiration/

10. El marrn: es un color masculino, severo, confortable. Es evocador del ambiente otoal y da la impresin de gravedad y equilibrio. Es el color realista, tal vez porque es el color de la tierra que pisamos.Ver: http://webdesignledger.com/inspiration/50-beautifully-brown-web-designs

Importancia del color

El color es uno de los medios ms subjetivos con el que cuenta el diseador.

Tiene mucho poder de atraccin o rechazo dependiendo del uso que se le d.

Los colores tambin dan sensacin de movimiento.

Las emociones, sensaciones, y en definitiva todo lo que los colores pueden llegar a expresar y hacer sentir al espectador formar parte fundamental de la base de un buen diseo.

El color, como elemento claramente evidenciado de nuestro diseo, puede ser la clave de nuestro xito. Tanto si pensamos como si no, si nos damos cuenta o no de ello, estamos cargando de significados cuando elegimos un color.

Un sitio web corporativo te permite trasladar tu imagen de empresa a Internet, transmitiendo un mensaje claro, conciso y directo a travs de un diseo visual elegante y dinmico.

Un sitio web corporativo deber servir a diferentes grupos de inters: clientes, consumidores, inversores, los medios de prensa, postulantes y la sociedad en general.Su diseo y construccin debern estar fuertemente alineados a la compaa, priorizando en particular la usabilidad y la comunicacin, para que sea posible la creacin de caminos de informacin lgicos capaces de responder a las preguntas propias de los procesos ms habituales.

Mercadotecnia en la web3La mercadotecnia en Internet es el estudio de las tcnicas del uso de Internet para publicitar y vender productos y servicios. Incluye la publicidad por clic, los avisos en pginas web, los envos de correo masivos, la mercadotecnia en buscadores (incluyendo la optimizacin en buscadores), la utilizacin de redes sociales y la mercadotecnia de bitcoras o blogs.

Las 4 F's del Marketing Online

Como comenta Paul Fleming en Hablemos de la Mercadotecnia Interactiva, las 4 F's de la mercadotecnia en Internet seran:

Flujo: Segn Fleming, flujo es el estado mental en que entra un usuario de Internet al sumergirse en una web que le ofrece una experiencia llena de interactividad y valor aadido

Funcionalidad: Si el cliente ha entrado en estado de flujo, est en camino de ser captado, pero para que el flujo de la relacin no se rompa, queda dotar a la presencia on-line de funcionalidad, es decir, construir pginas teniendo en cuenta las limitaciones de la tecnologa. Se refiere a una homepage atractiva, con navegacin clara y til para el usuario.

Feedback: La relacin se ha comenzado a construir. El usuario est en estado de flujo y adems no se exaspera en su navegacin. Ha llegado el momento de seguir dialogando y sacar partido de la informacin a travs del conocimiento del usuario. Internet da la oportunidad de preguntar al cliente qu le gusta y qu le gustara mejorar. En definitiva, dialogar con el cliente para conocerlo mejor y construir una relacin basada en sus necesidades para personalizar en funcin de esto la pgina despus de cada contacto.

Fidelizacin: Internet ofrece la creacin de comunidades de usuarios que aporten contenidos de manera que se establezca un dilogo personalizado con los clientes, quienes podrn ser as ms fieles.

Posicionamiento webLograr un adecuado posicionamiento de un sitio web resulta un complemento esencial para aumentar la visibilidad y generar mayores ventas, muchas veces lo relacionamos con trminos usuales como tengo un buen producto, con un buen embalaje pero para potenciar las posibilidades de venta deseo estar en punta de gndola en el punto de venta.

3 Wikipedia

Un pensamiento similar sucede con la posibilidad de lograr una adecuada presencia en la web, cuando alguien nos quiere encontrar y recurre a los buscadores u a otros medios de bsqueda. Recuerde que si su presencia no es la adecuada, su competidor puede conseguir una mejor presencia con su empresa e incrementar las ventas sobre la suya.

Ver: https://www.youtube.com/watch?v=ntJhrM7CU5I&feature=player_embedded

Aspectos a considerar en el diseo de imagen del sitio webEl diseo de una pgina Web consiste en una actividad que necesita una planificacin, diseo e implementacin. No se trata de desarrollar una aplicacin y ya. Es necesario tener en consideracin cuestiones como la navegabilidad, interactividad con el usuario, estructura de la informacin, interaccin multimedia y accesibilidad. El diseo Web est considerado dentro del diseo multimedial. Dentro del diseo Web, los expertos sugieren tres etapas a considerar:

1. El diseo visual de la informacin que se desea mostrar en la pgina Web. Esta etapa consta de la distribucin del texto, la ubicacin de los grficos, los vnculos a otros documentos, los objetos multimedia que se vayan a incluir. Es necesario que antes de sentarte a programar en la computadora, se haga un bosquejo en papel sobre cmo ser la pgina Web. Esto le permitir tener una perspectiva ms amplia sobre cmo va a editar su pgina Web.

2. Estructura y relacin jerrquica de las pginas del sitio web. En esta etapa es donde se pueden establecer los hipervnculos, que son los enlaces que tpicamente aparecen subrayados de azul en las pginas Web y le permiten ingresar a otra ubicacin en la pgina Web o abrir una nueva pgina Web. Fundamentalmente para manejar los vnculos entre documentos, se cre el lenguaje de marcacin de hipertexto o HTML.

3. Esta ltima etapa consta de posicionarse en los buscadores. Es necesario aqu optimizar el contenido y su estructura para poder mejorar la posicin que obtenga en un buscador. Es necesario tambin pensar en las palabras clave que utilizara. Un truco que puede hacer es visitar pginas similares para ver que palabras estn utilizando y en que posiciones aparecen en los buscadores.

Principios de diseo webContraste: Elementos que no son lo mismo, deben de ser diferentes, hacindolos ligeramente diferentes solo llevan a la confusin de relacionarlos inconscientemente entre ellos. Contrastando fuertemente los elementos, conseguiremos que el usuario se desplace de un elemento a otro acertadamente hasta el final de la pgina, evitando as un mar de similitud resultando muy aburrida.Repeticin: Repite el estilo de tu pgina durante toda ella, creando consistencia. Si relacionas elementos de una determinada manera en un rea, repite esta tendencia en otras reas.

Alineacin: Todo en la pgina necesita estar visualmente conectado con alguna otra cosa, nada debera estar fuera de su lugar o distinto para todos los dems elementos de diseo.

Proximidad: La proximidad crea una relacin de significados, elementos relacionados deberan agruparse, y entre elementos diferentes debera haber el suficiente espacio entre ellos para que se apreciara esa diferenciacin.

Balance: Se refiere al equilibrio que guardan los elementos que componen la pgina. La forma en que se disponen los elementos de la pgina influye notoriamente en el estilo y el carcter de la pgina.

nfasis: El nfasis es uno de los mtodos ms adecuados para conseguir el necesario resaltado de algunos elementos de un grupo de elementos homogneos. Pero tambin la tendencia a dar nfasis a demasiados elementos de la pgina web es un error muy comn, sobre todo de diseadores web inexpertos.

Ver presentacin:

https://skydrive.live.com/?cid=F394CC29B9119BF3&id=F394CC29B9119BF3%2 12719

DISTRIBUCIN DE ELEMENTOS

Distribucin de textos e imgenes en la pgina web

La mayor parte de la informacin disponible en la WWW consiste en pequeas piezas de informacin que se leen de forma no secuencial; especialmente en websites de tipoacadmico,corporativo,gubernamentalesydeOrganizaciones que ofrecen informacin que hace algunos aos hubiera sido distribuida en papel.

Los autores de manuales y material tcnico descubrieron mucho antes de que la web se inventase, que los usuarios prefieren pequeas piezas de informacin que se pueden hojear y localizar rpidamente.

Esta manera de organizar la informacin es especialmente vlida para la WWW por los siguientes motivos:1. Los usuarios no leen las pginas en pantalla, las miran por encima. Si son largas, las guardarn o las imprimirn.

2. Las pequeas piezas de informacin son perfectas para los enlaces. Quien pulsa un enlace espera encontrar informacin especfica relacionada con el tema que estaba viendo, no un libro entero de informacin que filtrar.

3. Un formato uniforme para organizar y presentar la informacin permite a los usuarios aplicar su experiencia anterior con el Site a la hora de explorarlo y buscar informacin, permitindoles en cierta manera, adivinar como est organizada la informacin.

4. Las piezas de informacin pequea y concisa se adaptan mejor a la visualizacin en pantalla que slo permite ver una pequea parte de documentos grandes.

5. Las pginas muy largas tienden a desorientar al usuario, puesto que al avanzar a lo largo del documento el usuario se ve obligado a recordar la situacin de elementos que ya no se pueden ver en pantalla (por ejemplo una barra de navegacin en la parte superior).

Ficha 2

Elementos bsicos de HTML

Especificaciones W3C

Hojas de Estilo en Cascada (CSS)

DHTML (Interaccin HTML y PHP)

Planeacin y Administracin del sitio Web

ELEMENTOS BSICOS DE HTML

Qu es HTML?4El lenguaje HTML es un estndar reconocido en todo el mundo y cuyas normas define un organismo sin nimo de lucro llamado World Wide Web Consortium (http://www.w3.org/), ms conocido como W3C. Como se trata de un estndar reconocido por todas las empresas relacionadas con el mundo de Internet, una misma pgina HTML se visualiza de forma muy similar en cualquier navegador de cualquier sistema operativo.

Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseo, es muy fcil de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText Markup Language (Lenguaje de Marcas de HiperTexto).

HTML y XHTMLDe forma paralela a su actividad con HTML, W3C ha continuado con la estandarizacin de XHTML, una versin avanzada de HTML y basada en XML. La primera versin de XHTML se denomina XHTML 1.0 y se public el 26 de Enero de 2000.

El lenguaje XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es ms que una adaptacin de HTML al lenguaje XML. Tcnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML (que a su vez, tambin es descendiente de SGML).

Figura. Esquema de la evolucin de HTML y XHTML

Las pginas y documentos creados con XHTML son muy similares a las pginas y documentos HTML. Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el mbito de la creacin de contenidos web, aunque no existe una conclusin ampliamente aceptada.

Caractersticas bsicas

4 www.librosweb.es

Uno de los retos iniciales a los que se tuvo que enfrentar la informtica fue el de cmo almacenar la informacin en los archivos digitales. Como los primeros archivos slo contenan texto sin formato, la solucin utilizada era muy sencilla: se codificaban las letras del alfabeto y se transformaban en nmeros.De esta forma, para almacenar un contenido de texto en un archivo electrnico, se utiliza una tabla de conversin que transforma cada carcter en un nmero. Una vez almacenada la secuencia de nmeros, el contenido del archivo se puede recuperar realizando el procesoInverso.

Figura. Ejemplo sencillo de codificacin de caracteres

El proceso de transformacin de caracteres en secuencias de nmeros se denomina codificacin de caracteres y cada una de las tablas que se han definido para realizar la transformacin se conoce con el nombre de pginas de cdigo. Una de las codificaciones ms conocidas (y una de las primeras que se publicaron) es la codificacin ASCII

Una vez resuelto el problema de almacenar el texto simple, se presenta el reto de almacenar los contenidos de texto con formato. En otras palabras, cmo se almacena un texto en negrita? y un texto de color rojo? y otro texto azul, en negrita y subrayado?

Utilizar una tabla de conversin similar a las que se utilizan para textos sin formato no es posible, ya que existen infinitos posibles estilos para aplicar al texto. Una solucin tcnicamente viable consiste en almacenar la informacin sobre el formato del texto en una zona especial reservada dentro del propio archivo. En esta zona se podra indicar dnde comienza y dnde termina cada formato.

No obstante, la solucin que realmente se emplea para guardar la informacin con formato es mucho ms sencilla: el archivo electrnico almacena tanto los contenidos como la informacin sobre el formato de esos contenidos. Si por ejemplo se quiere dividir el texto en prrafos y se desea dar especial importancia a algunas palabras, se podra indicar de la siguiente manera:

Contenido de texto con algunas palabras resaltadas de forma especial.

El principio de un prrafo se indica mediante la palabra y el final de un prrafo se indica mediante la palabra . De la misma manera, para asignar ms importancia a ciertas palabras del texto, se encierran entre e.El proceso de indicar las diferentes partes que componen la informacin se denomina marcar(markup en ingls). Cada una de las palabras que se emplean para marcar el inicio y el final de una seccin se denominan etiquetas.

Aunque existen algunas excepciones, en general las etiquetas se indican por pares y se forman de la siguiente manera: Etiqueta de apertura: carcter Etiqueta de cierre: carcter

As, la estructura tpica de las etiquetas HTML es:

A continuacin se muestra el cdigo HTML de una pgina web muy sencilla:

El primer documento HTML

El lenguaje HTML es tan sencillo que prcticamente se entiende sin estudiar el significadode sus etiquetas principales.

Volviendo al cdigo HTML del primer ejemplo, es importante conocer las tres etiquetas principales de un documento HTML (, , ):

: indica el comienzo y el final de un documento HTML. Ninguna etiqueta o contenido puede colocarse antes o despus de la etiqueta . En el interior de la etiqueta se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta se ignora.

: delimita la parte de la cabecera del documento. La cabecera contiene informacin sobre el propio documento HTML, como por ejemplo su ttulo y el idioma de la pgina. Los contenidos indicados en la cabecera no son visibles para el usuario, con la excepcin de la etiqueta , que se utiliza para indicar el ttulo del documento y que los navegadores lo visualizan en la parte superior izquierda de la ventana del navegador

(si no te has fijado anteriormente, vuelve a abrir el primer ejemplo en cualquier navegador y observa dnde se muestra el ttulo de la pgina).

: delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (prrafos de texto, imgenes, tablas). En general, el de un documento contiene cientos de etiquetas HTML, mientras que el no contiene ms que unas pocas.

EtiquetasHTML define 91 etiquetas que los diseadores pueden utilizar para marcar los diferentes elementos que componen una pgina:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var.

De todas las etiquetas disponibles, las siguientes se consideran obsoletas y no se pueden utilizar: applet, basefont, center, dir, font, isindex, menu, s, strike, u.

Por otra parte, el lenguaje HTML clasifica a todos los elementos en dos grupos: elementos en lnea (inline elements en ingls) y elementos de bloque (block elements en ingls).La principal diferencia entre los dos tipos de elementos es la forma en la que ocupan el espacio disponible en la pgina. Los elementos de bloque siempre empiezan en una nueva lnea y ocupan todo el espacio disponible hasta el final de la lnea, aunque sus contenidos no lleguen hasta el final de la lnea. Por su parte, los elementos en lnea slo ocupan el espacio necesario para mostrar sus contenidos.

Etiquetas de texto

EtiquetaSignificadoTipo de elementoDescripcin

PrrafoBloqueDescripcin Delimita el contenido de un prrafo de texto

Seccin (titular)de nivel 1BloqueDefine los ttulos de las secciones de mayor importancia de la pgina.

nfasisEn lneaRealza la importancia del texto que

encierra

nfasis ms acentuadoEn lneaRealza con la mxima importancia el texto que encierra

InsercinBloque y en lneaSe emplea para marcar una modificacin en los contenidos originales consistente en la insercin de un nuevo contenido

BorradoBloque y en lneaSe emplea para marcar una modificacin en los contenidos originales consistente en el borrado de cierto contenido

CitasBloqueSe emplea para indicar que el texto que encierra es una cita textual de otro texto externo

Abreviaturas

En lneaSe emplea para marcar las abreviaturas del texto y proporcionar el significado de esasabreviaturas

Acrnimos o siglasEn lneaSe emplea para marcar las siglas o acrnimos del texto y proporcionar el significado de esas siglas

DefinicinEn lneaSe emplea para marcar las definiciones de ciertos trminos y proporcionar el significado de esos trminos

CitaEn lneaSe emplea para marcar una cita o una referencia a otras fuentes

Nueva lneaEn lnea y etiqueta vacaFuerza al navegador a insertar una nueva lnea

Texto preformateadoBloqueMuestra el texto que encierra tal y como est escrito (respetando los espacios en blanco)

Etiquetas de enlaceLos enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayora de enlaces relacionan pginas web, tambin es posible enlazar otros recursos como imgenes, documentos y archivos.Una caracterstica que no se suele tener en cuenta en los enlaces es que estn formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman "anchors" en ingls, que se puede traducir literalmente como "anclas".

El acrnimo URL (del ingls Uniform Resource Locator) hace referencia al identificador nico de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero tambin se utilizan en otros elementos HTML como las imgenes y los formularios.

La URL de un recurso tiene dos objetivos principales: Identificar de forma nica a ese recurso. Permitir localizar de forma eficiente ese recurso. Las partes que componen la son: Protocolo (http://): El mecanismo que debe utilizar el navegador para acceder a ese recurso. Todas las pginas web utilizan http://. Las pginas web seguras (por ejemplo las de los bancos y las de los servicios de email) utilizan https:// (se aade una letra s).

Servidor (www.upemor.edu.mx): simplificando mucho su explicacin, se trata de la computadora en la que se encuentra guardada la pgina que se quiere acceder. Los navegadores son capaces de obtener la direccin de cada servidor a partir de su nombre.

Ruta (/posgrado/index.html): camino que se debe seguir, una vez que se ha llegado al servidor, para localizar el recurso especfico que se quiere acceder.

Enlaces relativos y absolutos

Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita ms informacin para obtener el recurso enlazado.Las URL relativas prescinden de algunas partes de las URL para hacerlas ms breves. Como se trata de URL incompletas, es necesario disponer de informacin adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea til es imprescindible conocer la URL del origen del enlace.

Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL relativas pueden ser difciles de entender para los que comienzan con HTML, son tan tiles que todos los sitios web las utilizan.

Considerando de nuevo el ejemplo anterior, la URL a la que se quiere enlazar utiliza el mismo protocolo y se encuentra en el mismo servidor que la pgina origen, por lo que la URL relativa puede prescindir de esas partes:

URL absoluta: http://www.upemor.edu.mx/posgrado/index.html URL relativa: /posgrado/index.html

Enlaces bsicosLos enlaces en HTML se crean mediante la etiqueta (su nombre viene del ingls "anchor", literalmente traducido como "ancla").

EnlacesEn lneaSe emplea para enlazar todo tipo de recursos

El atributo ms importante de la etiqueta es href, que se utiliza para indicar la URL a la que apunta el enlace. Cuando el usuario pincha sobre un enlace, el navegador se dirige a la URL del recurso indicado mediante href.

Con la definicin anterior, para crear un enlace que apunte a la pgina principal de Google solamente habra que incluir lo siguiente en un documento HTML:

Pgina principal de Google

El siguiente link hace referencia a una imagen que promueve la maestra en tecnologas de la informacin de la UPEMOR:

Ver Maestra en TI

El siguiente link vuelve a la pgina inicial de un sitio web:

Inicio

El siguiente enlace hace referencia a una direccin de correo electrnico:

Solicita ms informacin

El siguiente enlace hace referencia a un archivo ftp:

Descarga un ZIP con todos los contenidos

Enlace a una hoja de estilo CSS:

Enlace al favicon:

El favicon o icono para favoritos es el pequeo icono que muestran las pginas en varias partes del navegador. Dependiendo del navegador que se utilice, este icono se muestra en la barra de direcciones, en la barra de ttulo del navegador y/o en el men de favoritos/marcadores.

Listas no ordenadasLas listas no ordenadas son las ms sencillas y las que ms se utilizan. Una lista no ordenada es un conjunto de elementos relacionados entre s pero para los que no se indica un orden o secuencia determinados. La etiqueta

encierra todos los elementos de la lista y la etiqueta

cada uno de sus elementos.


Lista no ordenadaBloqueSe emplea para definir listas no ordenadas


Elemento de una listaBloqueSe emplea para definir los elementos de una lista (ordenadas y no ordenadas)

Ejemplo:

El siguiente cdigo HTML muestra un ejemplo sencillo de lista no ordenada:

Ejemplo de etiqueta UL

Men

Inicio

Noticias

Artculos

Contacto

Listas ordenadasLas listas ordenadas son casi idnticas a las listas no ordenadas, salvo que en este caso los elementos relacionados se muestran siguiendo un orden determinado. Cuando se crea por ejemplo una lista con las instrucciones de un producto, es importante el orden en el que serealiza cada paso.

En estos casos, la lista ms adecuada es la lista ordenada, que se define mediante la etiqueta

. Los elementos de la lista se definen mediante la etiqueta

, la misma que se utiliza en las listas no ordenadas.


Lista ordenadaBloqueSe emplea para definir listas ordenadas


Elemento de una listaBloqueSe emplea para definir los elementos de una lista (ordenadas y no ordenadas)

Ejemplo:

Ejemplo de etiqueta OL

Instrucciones

Enchufar correctamente

Comprobar conexiones

Encender el aparato

ImgenesLas imgenes son uno de los elementos ms importantes de las pginas web. De hecho, prcticamente todas las pginas web contienen alguna imagen y la mayora incluyen decenas de imgenes.

A continuacin se muestra la definicin de la etiqueta , utilizada para incluir las imgenes en las pginas HTML:


ImagenEn lnea y etiqueta vacaSe emplea para incluir imgenes en los documentos

Los dos atributos requeridos son src y alt. El atributo src es similar al atributo href de los enlaces, ya que establece la URL de la imagen que se va a mostrar en la pgina. Las URL indicadas pueden ser absolutas o relativas. El atributo alt permite describir el contenido de la imagen mediante un texto breve. Las descripciones deben tener una longitud inferior a 1024 caracteres y son tiles para las personas y dispositivos discapacitados que no pueden acceder a las imgenes.

Ejemplo sencillo para incluir una imagen:

Los atributos width y height se utilizan para indicar la anchura y altura con la que se muestran las imgenes.

Ejemplo:

Tablas bsicasLas tablas ms sencillas de HTML se definen con tres etiquetas: para crear la tabla, para crear cada fila y para crear cada columna.

La etiqueta encierra todas las filas y columnas de la tabla. Las etiquetas (del ingls "table row") definen cada fila de la tabla y encierran todas las columnas. Por ltimo, la etiqueta (del ingls "table data cell") define cada una de las columnas de las filas, aunque realmente HTML no define columnas sino celdas de datos.

Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuacin en las columnas. El motivo es que HTML procesa primero las filas y por eso las etiquetas aparecen antes que las etiquetas .


TablaBloqueSe emplea para definir tablas de datos

Fila de la tablaBloqueSe emplea para definir fila de la tabla de datos

Celda de la tabla

BloqueSe emplea para definir cada una de las celdas que forman las filas de una tabla, esdecir, las columnas de la tabla

Normalmente, algunas de las celdas de la tabla se utilizan como cabecera de las dems celdas de la fila o de la columna. En este caso, HTML define la etiqueta (del ingls "table header cell") para indicar que una celda es cabecera de otras celdas.


Celda cabecera de tablaBloqueSe emplea para definir las celdas que son cabecera de una fila o de una columna de la tabla

Por otra parte, HTML define la etiqueta para establecer la leyenda o ttulo de una tabla. La etiqueta debe colocarse inmediatamente despus de la etiqueta y cada tabla slo puede incluir una etiqueta .


Leyenda o ttulo de tablaEn lneaSe emplea para definir el ttulo o leyenda de la tabla

A continuacin se muestra el cdigo HTML de una tabla sencilla:

Ejemplo de tabla sencilla

Listado de cursos

CursoHorasHorario

CSS2016:00 - 20:00

HTML

2016:00 - 20:00

Dreamweaver6016:00 - 20:00

Formularios

Los formularios ms sencillos se pueden crear utilizando solamente dos etiquetas: y . Si se considera el formulario que muestra la siguiente imagen:

La etiqueta encierra todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta permite definir varios tipos diferentes de elementos (botones y cuadros de texto).


FormularioBloqueSe emplea para insertar un formulario en la pgina

La mayora de formularios utilizan slo los atributos action y method. El atributo action indica la URL de la aplicacin del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicacin tambin se encarga de generar la respuesta que muestra el navegador.El atributo method establece la forma en la que se envan los datos del formulario al servidor.Este atributo hace referencia al mtodo HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method="get" o el atributo method="post".

Al margen de otras diferencias tcnicas, el mtodo POST permite el envo de mucha ms informacin que el mtodo GET. En general, el mtodo GET admite como mximo el envo de unos 500 bytes de informacin. Adems, los datos enviados mediante GET se ven en la barra de direcciones del navegador (se aaden al final de la URL de la pgina), mientras que los datos enviados mediante POST no se pueden ver tan fcilmente.

Existe una regla general que dice que el mtodo GET se debe utilizar en los formularios que no modifican la informacin (por ejemplo en un formulario de bsqueda). Por su

parte, el mtodo POST se debera utilizar cuando el formulario modifica la informacin original (insertar, modificar o borrar alguna informacin).

Elementos de formularioLos elementos de formulario como botones y cuadros de texto tambin se denominan "campos de formulario" y "controles de formulario". La mayora de controles se crean con la etiqueta , por lo que su definicin formal y su lista de atributos es muy extensa:


Control de un formularioEn lnea y etiqueta vacaSe emplea para insertar un control en un formulario

A continuacin se muestran ejemplos para los diez controles que se pueden crear con la etiqueta .

Cuadro de textoSe trata del elemento ms utilizado en los formularios. En el caso ms sencillo, se muestra un cuadro de texto vaco en el que el usuario puede escribir cualquier texto:

Figura. Ejemplo de etiqueta input (type=text)

A continuacin se muestra el cdigo HTML correspondiente al ejemplo anterior:Nombre

El atributo type diferencia a cada uno de los diez controles que se pueden crear con la etiqueta . Para los cuadros de texto, su valor es text. El atributo name es el ms importante en los campos del formulario. De hecho, si un campo no incluye el atributo name, sus datos no se envan al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicacin del servidor para obtener el valor de este campo de formulario.Cuando el usuario pulsa el botn de envo del formulario, el navegador enva los datos a una aplicacin del servidor para que procese la informacin y genere una respuesta adecuada.

En el servidor, la aplicacin que procesa los datos debe obtener en primer lugar toda la informacin introducida por el usuario. Para ello, utiliza el valor del atributo name para obtener los datos de cada control del formulario.

El atributo value se emplea para establecer el valor inicial del cuadro de texto. Si se crea un formulario para insertar datos, los cuadros de texto deberan estar vacos. Por lo tanto, o no se aade el atributo value o se incluye con un valor vaco value="". Si por el contrario se crea un formulario para modificar datos, lo lgico es que se muestren inicialmente los datos guardados en el sistema. En este caso, el atributo value incluir el valor que se desea mostrar:

Si no se especifica un tamao, el navegador muestra el cuadro de texto con un tamao predeterminado. El atributo size permite establecer el tamao, en caracteres, con el que se muestra el cuadro de texto. Su uso es imprescindible en muchos formularios, en los que algunos campos como la direccin deben mostrar ms caracteres de lo normal (

Pgina con estilos Bienvenidos...Siento ser tan simplista, pero esto es un ejemplo sin ms importancia

Estilo definido para todo un sitio webUna de las caractersticas ms potentes de la programacin con hojas de estilos consiste en que, de una vez, podemos definir los estilos de todo un sitio web. Esto se consigue creando un archivo donde tan slo colocamos las declaraciones de estilos de la pgina y enlazando todas las pginas del sitio con ese archivo. De este modo, todas las pginas comparten una misma declaracin de estilos y, por tanto, si la cambiamos, cambiarn todas las pginas. Con las ventajas aadidas de que se ahorra en lneas de cdigo HTML (lo que reduce el peso del documento) y se evita la molestia de definir una y otra vez los estilos con el HTML, tal como se coment anteriormente.

Veamos ahora cmo el proceso para incluir estilos con un fichero externo.

1. Creamos el fichero con la declaracin de estilos:

Es un fichero de texto normal, que puede tener cualquier extensin, aunque le podemos asignar la extensin .css para aclararnos qu tipo de archivo es. El texto que debemos incluir debe ser escrito exclusivamente en sintaxis CSS, es decir, sera errneo incluir cdigo HTML en el: etiquetas y dems.Podemos ver un ejemplo a continuacin.P {font-size : 12pt;font-family : arial,helvetica; font-weight : normal;}H1 {font-size : 36pt;font-family : verdana,arial; text-decoration : underline; text-align : center; background-color : Teal;}TD {font-size : 10pt;font-family : verdana,arial; text-align : center; background-color : 666666;} BODY {background-color : #006600; font-family : arial;color : White;}

2. Enlazamos la pgina web con la hoja de estilos

Para ello, vamos a colocar la etiqueta con los atributos: rel="STYLESHEET" indicando que el enlace es con una hoja de estilos type="text/css" porque ela archivo es de texto, en sintaxis CSS href="estilos.css" indica el nombre del fichero fuente de los estilos

Veamos una pgina web entera que enlaza con la declaracin de estilos anterior:

Pgina que lee estilos

Pgina que lee estilosEsta pgina tiene en la cabecera la etiqueta necesaria para enlazar con la hoja de estilos. Es muy fcil.

Esto est dentro de un TD, luego tiene estilo propio, declarado en el fichero externo

La segunda fila del TD

Definir estilos utilizando clasesLas clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces.Una clase se puede definir entre las etiquetas (en la cabecera del documento), o en un archivo externo a la pgina. Para definirlas utilizamos la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaves los atributos de estilos deseados. De esta manera:.nombredelaclase {atributo: valor;atributo2:valor2; ...}

Una vez tenemos una clase, podemos utilizarla en cualquier etiqueta HTML. Para ello utilizaremos el atributo class, ponindole como valor el nombre de la clase, de esta forma:

Ejemplo de la utilizacin de clases

Ejemplo de la utilizacin de clases

.fondonegroletrasblancas {background-color:black;color:white;font- size:12;font-family:arial}.letrasverdes {color:#009900}

Titulo 1Titulo 2

Esto es un prrafo con estilo de letras verdes

Esto es un prrafo con estilo de fondo negro y las letras blancas. Es todo!

Sintaxis CSS

Reglas bsicas sobre la sintaxis CSS: Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma.

Ejemplo:font-size: 10pt; text-decoration: underline; color: black; (el ltimo punto y coma de la lista de atributos es opcional).

Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves.Ejemplo:H1{text-align: center; color:black} Los valores que se pueden asignar a los atributos de estilo se pueden ver en la siguiente tabla:

Muchos de estos valores son unidades de medida (Unidades CSS), por ejemplo, el valor del tamao de un margen o el tamao de la fuente. Las unidades de medida CSS se pueden clasificar en dos grupos, las relativas y las absolutas.

Relativas: Se llaman as porque son unidades relativas al medio o soporte sobre el que se est viendo la pgina web, que dependiendo de cada usuario puede ser distinto, puesto que existen muchos dispositivos que pueden acceder a la web, como ordenadores o

telfonos mviles. En principio las unidades relativas son ms aconsejables, porque se ajustarn mejor al medio con el que el usuario est accediendo a nuestra web. Son las siguientes:

Fuente actual: emLa unidad em es relativa a la fuente actual con la que se est trabajando por defecto en el sistema del usuario. Por ejemplo si un visitante tiene configurada la fuente por defecto en 12 puntos, 1em ser igual a 12 puntos y 2em ser igual a 24 puntos.

Altura de la letra: ex1ex ser igual a la altura de la letra x, segn la fuente actual del usuario. La altura de la letra x generalmente es la mitad de la de la fuente normal.

Pxeles: pxUn pixel es un punto en la pantalla del dispositivo. Dependiendo de la resolucin de la pantalla, un pxel puede ser mayor o menor.

Absolutas: Las unidades absolutas son medidas fijas, que deberan verse igual en todos los dispositivos. Como los centmetros, que son una convencin de medida internacional. Pese a que en principio pueden parecer ms tiles, puesto que se veran en todos los sistemas igual, tienen el problema de adaptarse menos a las distintas particularidades de los dispositivos que pueden acceder a una web y restan accesibilidad a nuestro web. Puede que en tu computadora 1 centmetro sea una medida razonable, pero en un mvil puede ser un espacio exageradamente grande, puesto que la pantalla es mucho menor. Se aconseja utilizar, por tanto, medidas relativas.

Puntos: ptUn punto es 1/72 pulgadas Pulgadas: inCentmetros: cm

Milmetros: mm

Picas: pcUna pica son 12 puntos.

Porcentaje: El porcentaje se utiliza para definir una unidad en funcin de la que est definida en un momento dado. Imaginemos que estamos trabajando en 12pt y definimos una unidad como 150%. Esto sera igual al 150% de los 12pt actuales, que equivale a 18pt.

Porcentaje: %Por ejemplo 120% es el 120 por cien de la unidad que estuviera anteriormente.

Notacin de colores:Notacin hexadecimal RGBEsta notacin es la que ya conocemos. Se especifican los tres valores de color (rojo, verde y azul) con valores en hexadecimal entre 00 y FF.background-color: #ff8800;

Notacin hexadecimal abreviadaEsta notacin es muy parecida a la anterior, pero permite abreviar un poco la declaracin del color, indicando slo un nmero para cada valor rojo, verde y azul. Por ejemplo, para especificar el color de antes (#ff8800) podramos haber escrito:background-color: #f80;

Nombre del colorTambin podemos definir un color por su nombre. Los nombres de colores son en ingls, los mismos que sirven para especificar colores con HTML.color: red;border-color: Lime;

Color transparentePara finalizar, podemos comentar que tambin existe el color transparente, que no es ningn color, sino que especfica que el elemento debe tener el mismo color que el fondo donde est. Este valor, transparent, sustituye al color. Podemos indicarlo en principio slo para fondos de elementos, es decir, para el atributo background-color.background-color: transparent;

Atributos de las hojas de estilo

Sirve para indicar el tamao de las fuentes de manera ms rgida y con mayor exactitud.

font-familyserif 1 sans-serif 1 cursive 1 fantasy 1 monospace Todas las fuentes habituales

font-family:arial,helvetica ; font-family: fa ntasy;

Con este atributo indicamos la familia de tipografia del texto. Los primeros valores son genricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.Tambin se pueden definir con tipografas normales, como ocurra en html. Si el nombre de una fuente tiene espacios se utiliza n comillas para que se entienda bien.

font-weightnormal 1 bold 1 bolder 1 lighter 1 100 1 200 1 300 1400 1 500 1 600 1 700 1 800 1 900

font-weight:bold; font-weight: 200;

Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400 son el mismo valor, as como bold y 700.

font-style11normal italic obliquefont-style :norma l; font-style : italic;

Es el estilo de la fuente, que puede ser normal, itlica u oblicua. El estilo oblique es similar al italic.

PRRAFOS - TEXT

line-heightnormal y unidades CSSline-height: 12px; line-height: normal;

El alto de una lnea,y por tanto, el espaciado entre lneas. Es una de esas caractersticas que no se podian mofificar utilizandoHTML.

text-decorati onnone 1 [ underline 1 1 overline 1 1 line-through ]text-decoration : none;text-decorat ion : underline;

Para establecer la decoracin de un texto, es decir, si est subrayado , sobrerayado o tachado.

text-a lign: center;text-alignleft 1 right 1 center 1 justifytext-a lign: right;

Sirve para indicar la alineacin del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por que funcionar en todos los sistemas.

text-indent: 2in;text-indentUnidades csstext-indent: Opx;

Un atributo que sirve para hacer sangrado o mrgenes en las pginas. Muy til y novedosa .

text-tra nsform1capitalize 1 uppercase 1 lowercase nonetext-transform: none;text-transform: capitalize;

Nos permite transformar el texto, haciendo que tenga la primera letra en maysculas de todas las palabrs, todo en maysculas o minsculas.

FONDO - BACKGROUND

Background-colorUn color, con su nombre o su va lor RGBbackground-color: green;background-color: #000055;

Sirve para indicar el color de fondo de un elemento de la pgina.

absolutoBackground-imageEl nombre de la imagen con su camino relativo o

background-image: url(mrmol.gif) ; background-image:url(http ://www .x.com/fondo .gif)

Colocamos con este atributo una imagen de fondo en cualquier elemento de la pgina, se puede ver una pgina de ejemp lo

BOX - CAJA

Margin-leftUnidades CSSmargin-left: cm;margin-left: 0,5in;

Indicamos con este atributo el tamao del margen a la izquierda

Margin-rightUnidades CSSmargin-right: 5%;margin-right: in;

Se utiliza para definir el tamao del margen a la derecha

Margin-topUnidades CSSmargin-top: Opx;margin-top: 10px;

Indicamos con este atributo el tamao del margen arriba de la pgina

Margin-bottomUnidades CSSmargin-bottom: Opt;margin-top: 1px;

Con el se indica el tamao del margen en la parte de abajo de la pgina

Padding-leftUnidades CSSpadding-left: O.Sin;padding-left: 1px;

Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.

Padding-rightUnidades CSSpadding-right: O.Scm;padding-right : 1pt;

Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y el contenido de este. Es parecido a el atributo cellpadding de las tablas.El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.

Padding-topUnidades CSSpadding-top: 10pt;padding-top: Spx;

Indica el espacio insertado, por arriba,entre el borde del elemento-continente y el contenido de este.

Padding-bottomUnidades CSSpadding-right: O.Scm; padding-right: 1pt;Indica el espac io insertado,en este caso por abajo, entre el borde del elemento-continente y el contenido de este.

Border-colorcolor RGB y nombre de colorborder-color: red; border-color : #ffccff;

Para indicar el color del borde del elemento de la pgina al que se lo aplicamos. Se puede poner colores por separado con los atr ibutos border-top-color, border-right-color, border-bottom-colo r, border-left-color.

Border-stylenone 1 dotted 1 solid 1 double 1 groove 1 ridge 1inset 1 outset

border-style: solid; border-style: double;

El estilo del borde,los valores significa n: none= ningun borde, dotted=punteado (no parece funcionar),solid=solido, double=doble borde, y desde groove hasta outset son bordes con va rios efectos 30.

border-width: O.Sin;border-widthUnidades CSSborder-width: 10px;

DHTML (INTERACCIN HTML Y PHP)

Pginas Web dinmicasPara crear una pgina dinmica no basta con programar en HTML, ya que este lenguaje, como hemos visto, es muy limitado. Es necesario combinar HTML con otros lenguajes, como Perl, PHP, JSP, ASP.NET, JavaScript, Java, etc.

La generacin del contenido dinmico puede suceder en el servidor o en el cliente, emplendose por lo general lenguajes distintos en cada caso, si bien hay lenguajes que pueden trabajar segn ambos paradigmas. Cada lenguaje tiene unas reglas de programacin y un funcionamiento distinto. A la combinacin de estos elementos se le conoce como HTML dinmico o DHTML (Dynamic HTML).

Las pginas Web pueden generarse dinmicamente mediante varias secuencias de comandos en el servidor. Una vez que el navegador las recibe, las trata como pginas HTML normales y simplemente las despliega. Por ejemplo, cuando un usuario rellena los distintos campos de un formulario y hace clic en el botn de envo, se enva un mensaje al servidor con toda esta informacin.

Ahora esta informacin deber ser entregada a un programa o a una secuencia de comandos para que los procesen. Por lo general, el procesamiento implica el uso de la informacin proporcionada por el usuario para buscar un registro en una base de datos del disco del servidor y generar una pgina HTML personalizada para regresarla al cliente.

En una pgina Web dinmica en el servidor, la base de datos almacena y suministra la informacin que se le presentar al usuario, con la gran ventaja de que la informacin puede variar segn el usuario, horario, etc. Una vez tengamos claro que nos interesa un sitio Web dinmico, deberemos definir qu tecnologa usar y qu base de datos. Existen varias opciones para elegir el gestor de la base de datos: Oracle, PostgreSQL, Microsoft SQL Server, MySQL, etc. Todos ellos pueden usarse para pginas Web dinmicas, aunque dependiendo de la plataforma del servidor Web (Apache, IIS, Tomcat, etc.) y del lenguaje de programacin Web utilizado (Perl, PHP, JSP, etc.), se usa ms una u otra.

Existe una multitud de lenguajes concebidos o no para Internet. Cada uno de ellos explota ms a fondo ciertas caractersticas que lo hacen ms o menos tiles para desarrollar distintas aplicaciones.

La versatilidad de un lenguaje est ntimamente relacionada con su complejidad. Un lenguaje complicado en su aprendizaje permite en general el realizar un espectro de tareas ms amplio y ms profundamente. Es por ello que a la hora de elegir el lenguaje que queremos utilizar tenemos que saber claramente qu es lo que queremos hacer y si el lenguaje en cuestin nos lo permite o no.

En el dominio de la red, los lenguajes de lado servidor ms ampliamente utilizados para el desarrollo de pginas dinmicas son el ASP, PHP y PERL.

El ASP (Active Server Pages) es un lenguaje derivado del Visual Basic desarrollado por Microsoft. Evidentemente su empleo se realiza sobre plataformas funcionando bajo sistema Windows NT.

El PHP podra ser considerado como el lenguaje anlogo al ASP utilizado en plataformas Unix y Linux.

Estos dos lenguajes resultan bastante tiles para la explotacin de bases de datos y su aprendizaje resulta accesible para una persona profana de la programacin. Cualquiera de ellos resultara la opcin ideal a la hora de hacer evolucionar un sitio web realizado en HTML.

Por otra parte, el PERL es un lenguaje ms rpido y potente que requiere un aprendizaje ms largo y resulta ms reservado para personas ya familiarizadas con la programacin.

PLANEACIN Y ADMINISTRACINDE UN SITIO WEB

Planeacin de un Proyecto WebEs importante en un proyecto definir el mbito y los hitos o puntos clave de los procesos que se deben evaluar antes de empezar a crear un proyecto web.Posteriormente se deber identificar los objetivos del cliente e identificar la audiencia objetivo como procesos del diseo del proyecto.

Adems los clientes deben considerar el presupuesto del proyecto y las necesidades de la audiencia.Como parte de la planeacin de un proyecto web se encuentra el guin grfico el cual incluye diversos aspectos importantes como ayudar a obtener la representacin grfica de un proceso visual deseado e Identificar las secuencias de las escenas y las interfaces de nuestro proyecto.

Algunos de los propsitos para el desarrollo de un guin grfico son: Poder visualizar las secuencias grficas e interfaces de usuario La descripcin del contenido de cada escena del proyecto, La vinculacin entre los objetos y escenas, as como; El comunicar el diseo a los programadores.

La administracin de un proyecto de sitio Web queda ejemplificada en una serie de fases que son descritas a continuacin:

1. Planificacin y definicin del sitio2. Estructura de la informacin disponible3. Diseo4. Construccin5. Mercadeo6. Evaluacin y mantenimiento

Esquema

D1e.sDaerrfoinlliacriunndpellan de trabajo Desarrollode un sitio1. Definicindel proyecto

AnlisisRecopilar informaci

Conocer la audiencia

Analizar sitios web

Seleccionar el grupode trabajo

PlanificacinPresupuesto

Establecer competencias y distribucin de tareas y tiempos

Planificar pruebas

Objetivos

Determinar objetivos especficos

Determinar funcionalidades

Determinar objetivos generales

Crear cronologa

or parte delclienteAceptacin p

de la2. DesarrolloPlanificar contenido

sitioestructura del

Sitio web

Esquema

1. Definicin del proyecto2. Desarrollo de la estructura del sitio

Desarrollo de un sitio web

ContenidoEstablecer contenido

Hacer un mapa desitio

Comprobar la organizacin

Establecer niveles

Detectar interactividad

3. DiseoVisual

Determinar navegacinPgina HTMLEstablecer plantillaso capas

Comprobar lanavegacin

Esquema

Diseo grfico

parte delAceptaci n por

cliente

3. Diseo Visual

2. Desarrollo de la estructura del sitio

Implementar contenidos


1. Definicin del proyectoCreacin

Revisar contenidos

3. Diseo visual

Desarrollar conceptos

diseosImplementParredsiseentaorslosConfirmacinCrear el sitio web Crear pginas HTML

Establecer enlaces

Establecer interactividad

Establecer navegacin

Preproducci n

Establecer plantillas o capas

Crear estilosCSS

Diseo grfico

4.Produccin

2. Desarrollo de la estructura del sitio

Programar

Analizar las fallas

Solventar las Fallas

Crear un plan de calidad

Crear pginas del sitioEsquema4. Produccin


Pruebas

1. ctoDefinicin del proye

PreparacinCrear directricesControl evaluativo delestado del proyecto

Construccin

Establecer laestructura de archivos

Crear pginas platillas HTML

Fragmentar y optimizar

Automatizacin de tareas

BASES DE DATOS CON MYSQL

Una base de datos es una coleccin estructurada de datos. Puede ser cualquier cosa, desde una simple lista de compra a una galera de pintura o las ms vastas cantidades de informacin en una red corporativa.Para aadir, acceder, y procesar los datos almacenados en una base de datos, necesita un sistema de gestin de base de datos como MySQL Server. Al ser las computadoras muy buenas en tratar grandes cantidades de datos, los sistemas de gestin de bases de datos juegan un papel central en computacin, como aplicaciones autnomas o como parte de otras aplicaciones.

MySQL es un sistema de gestin de bases de datos relacionalesUna base de datos relacional almacena datos en tablas separadas en lugar de poner todos los datos en un gran almacn. Esto aade velocidad y flexibilidad. La parte SQL de "MySQL"se refiere a "Structured Query Language". SQL es el lenguaje estandarizado ms comn para acceder a bases de datos y est definido por el estndar ANSI/ISO SQL.

Tupla: Es una fila en una tabla. Atributo: Es una columna de una tabla.Dominio: Conjunto de valores de los cuales los atributos obtienen sus valores. Llave: Es un atributo con una caracterstica de relevancia para identificar la tupla.Llave primaria: Es una llave con valores nicos, es decir no ocurren ms de una vez en el atributo.

Cardinalidad: Nmero de tuplas de una tabla. Grado: Es el nmero de atributos de una tabla.Relacin: Es aquel que se corresponde con una tabla.

Sistema Manejador de Bases de Datos (DBMS)

Un Sistema Manejador de Bases de Datos (DBMS por sus siglas en ingls) tiene las siguientes funciones: Almacenar la informacin fsicamente. Garantizar la consistencia de los datos. Garantizar la integridad de la informacin. Atomicidad transaccional Y Manejar vistas de la informacin

En este caso MySQL es el sistema de gestin de bases de datos SQL Open Source ms popular, y para poder utilizarlo debes tener instalado el software el cual puede ser descargado desde su pgina oficial (http://www.mysql.com/).

Creacin de una base de datos:

1. Ingresar al localhost (Abrir un navegador web y escribir: 127.0.0.1/phpmyadmin)

2. Escribir el nombre de usuario y contrasea (Regularmente el usuario es: root y contrasea: admin)

3. Escribir el nombre de la base de datos a crear (ejemplo: muebleria), evita utilizar espacios en blanco o caracteres especiales como @,,+,etc.

Eliminacin de una base de datos:

1. Ir al Home de localhost/ Bases de datos.

2. Marcar la base de datos a eliminar (librera en este caso) y presionar la casilla marcada con una X(equis en color rojo)

Modificacin de una base de datos:1. Ir a la base de datos a modificar en estructura.

Exportar una base de datos:

1. Ir al Home de localhost/ Bases de datos.

2. seleccionar la opcin de estructura.

3. Seleccionar de la lista, la base de datos a exportar.

4. Copiar el cdigo generado a un bloq de notas y guardar el archivo.

Nota. Para extraer la base de datos se deber realizar la accin inversa con Importar y posteriormente seleccionar el archivo que contiene los elementos de la base de datos.

Manual Desarrollo Web

Documents

Transcript of Manual Desarrollo Web