094 JPG vs. GIF Ww Codificacion de caracteres 095 _Propiedades de las imagenes CSS (Cascading Style Sheets) 097 encss 112 {Como aplicar CSS a nuestras paginas? 098 _—-~Propiedades CSS 12 Sintaxis de atributos CSS sprites m4 y propiedades en CSS 100 Qué son los sprites de imagenes? 114 Selectores 100 {Como se utilizan Selector universal 100 los sprites de imagenes? 15 Selector de tipo 0 etiqueta 101 Ventajas de esta técnica 115 Selector descendente 102 Mapa de imagenes 117 Selector de clase 102 Multiple choice 120 Selector de ID 103 104 CAPITULO 6 ENLACES 121 CAPITULO 5 > IMAGEN 105 122 Origen del concepto de hipertexto 122 Imagenes en HTML 106 Enlaces basicos 123 Atributos obligatorios Enlaces relativos y absolutos 125 dela etiqueta 106_ Enlaces en Dreamweaver 127 Atributos opcionales 107 __Unidades de medida 131 Tipos de imagenes 109 —_Unidades relativas 131 ar 709 —-Porcentajes 133 PG 110 —_Unidades absolutas 134 PNG 110 Recomendaciones 135 Propiedades de tamafio 135 Ancho (width) 135. iC iS Ss Alto (height) 135 Layout liquidos 137 Enlaces basicos y avanzados 138 . Propiedades en los estados del enlace 139 Multiple choice 140 RedUSERS\\ XN Céntenidie del CAPITULO 7 Checkbox o caja LISTAS 141 de seleccién 0 validacién 1 Botén Submit o Listas: definicién 142_—_ de envio de formulario 1 Tres motivos para utilizar listas 143 Botén Reset o Listas ordenadas y no ordenadas 144 de borrado de formulario 1 Listas ordenadas 145 —_Boton File o de archivos adjuntos 1 Listas no ordenadas 146_ Campo hidden o datos ocultos 1 Listas anidadas 147_—_Botén Image 1 zDénde utilizamos listas? 148_—_‘Type Button o botén comin 1 Listas estandar 148 —_Etiqueta para texto largo 1 Listas con imagenes 148 _Lista de opciones 1 Listas en menu de navegacion 151 Bloques de elementos 1 Personalizar listas 152_ Etiquetas Fieldset y Legend 1 Creacién de meniisdenavegacion _155_—_—Etiqueta label 1 Creacion de un mend Introduccién a PHP 1 de navegacién vertical 156___Lenguajes de servidor 1 Creacién de un ment Lenguajes de cliente 1 de navegacion horizontal 157 Proceso de ejecucién en PHP 1 Crear un mend de navegacién 158 Variables 1 Multiple choice 164 Variables definidas 1 Estructuras de control 1 Includes 1 Vectores 1 CAPITULO 8 Funciones 1 FORMULARIOS 165 Variables entre paginas 1 Concatenar 1 Formularios 166 Multiple choice 1 Captcha 168 Composicion de un formulario 168 XForm: 169 El cliente y el servidor 169 SERVICIOS Elementos de los formularios 169 AL LECTOR 1 Etiqueta input 71 Texto oculto 172_ Indice tematico 1 Etiqueta radio 0 bot6n radio 172_ Catalogo 1 RedUSERS!Introduccion a Disefio web con HTML y CSS Como sabemos, la era digital generd nuevas y fas- cinantes oportunidades de trabajo. Esta obra es la puerta de acceso a una de las reas que més posibi- lidades y satisfacciones brindan en el ambito web: el desarrollo de sitios. En este libro, los mejores conse- jOs y contenidos son expuestos al lector, junto a los fundamentos de este arte y, al mismo tiempo, todos los secretos para que triunfemos ante cualquier de- safio que nos toque encarar, convirtiéndonos en ex- celentes profesionales de la Web. ‘través de cada uno de sus capitulos, podremos co- nocer y dominar HTML, asi como también las princi- pales tecnologias relacionadas. En sus paginas en- contraremos un recortido por todos los elementos teéricos fundamentales en esta profesin y veremos la forma de llevar estos conceptos a la practica ayu- dados por detalladas explicaciones paso a paso. Sin dudas, este sedis ree ies oa y Los contenidos expuestos en esta obra estan di dos a todos aquellos que quieran desarrollar si incluso a quienes no cuentan con educacién fo previa en la materia. Por un lado, los desarrolladores web aumentara oferta de servicios, y se convertiran en profesi: les con conocimientos avanzados de HTML. Por parte, los estudiantes de Disefio Grafico seran bajadores mucho mas completos cuando final sus estudios, ya que lograrn implementar sitios buen disefo, alta funcionalidad y cédigos optin dos. Finalmente, los aficionados a la Web tendré posibilidad de participar en ella de forma activa diante la creacién de sus propios sitios, y seran ci ces de disefiarlos también para terceros, con lo transformaran el objeto de su devocion en una t rentable y productiva, En suma, el material i delante a ust s ‘nena jible para jenas manos.EE” Capitulo 1 Primeros pasos Aqui analizaremos los primeros pasos para iniciarnos en el desarrollo de sitios web utilizando HTML. RedUSERSD1. Primeros pasos El disenador web Actualmente, es imposible referirse a un solo tipo de perfil de disefiador web, y mucho menos, a un solo tipo de persona. La creacién de sitios web se ha con- vertido en una disciplina en la que se plantean pro- yectos que requieren de una conjuncién de conoci- mientos técnicos (como lenguajes de programacién y servidores, entre otros), conceptuales (usabilidad y accesibilidad, entre otros) y también estéticos (como percepcién y legibilidad) ‘Atras quedé la época en la que para realizar un sitio web completo alcanzaba con tener un minimo co- nocimiento de HTML y del tratamiento de imagenes. Ahora es importante que un disefiador sepa como planificar un sitio web y que tenga presentes los as- pectos técnicos de diagramacién y de estructura al momento de ponerse a disefiar. LAS HERRAMIENTAS DE TRABAJO Para realizar su trabajo, un profesional del disefio y el desarrollo de sitios web necesita contar con herra- mientas de software, que debe utilizar con criterio para sacar el maximo provecho de ellas, ademas de conocer los fundamentos de su tarea. FIGURA 1. La suite de programas mas famosos para disefiar sitios, Adobe CSS. esté disponible para Windows y para Mac OSX. > Debe ser un usuario intermedio de PC 0 Mac, utili zar los navegadores web y el corteo electrénico, yes tar al tanto de la existencia y el funcionamiento di las redes sociales. Si bien existen muchas herramientas de disefio en € mercado, lo cierto es que hay un esténdar bien de finido de lo que se usa. Basta con echar una mirad: a las solicitudes de trabajo que aparecen en los me dios para saber qué es lo que se pretende hoy en di de un disefiador web, Un disefiador web tiene que saber HTML y CSS, : tiene que trabajar con Dreamweaver para arma los sitios en forma correcta. Debe utilizar las herra mientas principales de disefio, como Photoshop Illustrator y Fireworks, que permiten trabajar et forma profesional y con la mejor calidad. Ademas resultan importantes los conocimientos de disefio animacién con Flash, asi como también la programa cién en ActionScript 3. RedUSERSEl disehador LAS HABILIDADES DEL DISENADOR ‘Aunque es posible decir que un buen disefiador web 5 aquel que sabe utilizar las herramientas con las que desarrolla sus proyectos, este es solo un aspecto técnico que no resulta fundamental para tener éxi- to. La buena fortuna de un disefiador web depen- de, en gran medida, de sus conocimientos estéticos y conceptuales. También tiene que estar inmerso en el mundo virtual de Internet, y conocer las ltimas tendencias y tec- nologias aunque no las aplique por si mismo, ya que asi podré comunicarse para solicitar su implementa- ci6n e interactuar con otros profesionales. Como vemos, la tarea mas dificil de un buen dise- jiador web no radica en aprender a utilizar una apli- cacién, sino en saber utilzarla con criterio y estar al tanto de todo lo que influye en su medio de traba- jo, como la aparicién de nuevas técnicas de disefio, cambios en las tendencias y en los estilos, o nuevos dispositivos y utlidades que simplifiquen su trabajo. El éxito de un disefador web depende de sus conocimientos técnicos, estéticos y conceptuales. En este sentido, debe saber utilizar los progra mas conocidos de disefio pero, sobre todo, sabe terminar en qué momento conviene aplicar ur otra herramienta segun lo que requieran los pro tos web en los que esté involucrado. TAREAS DEL DISENADOR Para definir de forma mas clara el perfil del dis: dor web, podemos realizar una divisién de sus ta sobre la base de las diferentes etapas en las qu podria ver involucrado dentro de la realizacion d proyecto web. Si pensamos en la concepcién del disefio de ul tio, es inevitable que sea capaz de realizar un men o brief de trabajo en donde pueda deterrr FIGURA 2. Es muy importante que visitemos sitios donde encontremos informacién sobre las tltima tendencias y novedades.las necesidades estéticas y técnicas del proyecto, y segiin esto, comenzar a disefiar. En este momento, sera preciso que disponga de herramientas para con- feccionar el disefio. Si el sitio es HTML, puede traba- jar con una aplicacién como Photoshop, Illustrator Fireworks, que ya mencionamos. En cambio, si el si- tio es en Flash, debera determinar la mejor forma de rear un disefio optimizado, utilizar las herramientas graficas del programa y conocer su lenguaje de pro- gramacién, ActionScript. Para las etapas posteriores al diseio de los sitios, es necesario que sepa maquetar en HTML y utilizar CSS, y para estas tareas, Dreamweaver resulta una herra- mmienta esencial. Por Ultimo, es importante que tenga conocimien- tos sobre la forma de alojar un sitio en un servidor, ya sea por medio de Dreamweaver o mediante un programa especial para FTP (File Transfer Protocol), como, por ejemplo, FileZilla. Un disefiador necesita contar con muchos conoci- mientos para poder crear un sitio de calidad. En esta ‘obra, veremos todas esas herramientas e, incluso, obtendremos los mejores consejos que nos brinda la experiencia de los expertos que investigaron y escri- bieron sobre este tema. “ Evolucion del diseho web Como usuarios de Internet, navegamos decena: de sitios por dia con el objetivo de revisar nuestr correo, informarnos, compartir imagenes, compra productos, contar lo que estamos haciendo o, sim plemente, divertirnos. Hemos aprendido a utiliza estos sitios casi sin darnos cuenta, haciendo ust de interfaces que, en general, podemos entender » dominar sin grandes dosis de esfuerzo o atencién. Los elementos que hoy componen una pagina wet y su disefio han evolucionado a través del tiempo En sus comienzos, surgieron gracias al uso de me ‘taforas basadas en el cine, la television, los libros « las galerias de arte, del mismo modo en que ante riormente los sistemas operativos tomaron la meta fora del escritorio. El uso de estos recursos ayudk a los usuarios a familiarizarse con las funcionalida des de estos productos interactivos y marcé el ini cio de una disciplina que, tiempo més tarde, se con vertira en un trabajo interdisciplinatio, frenético » leno de inventiva. UN RECORRIDO POR LA HISTORIA DEL DISENO WEB El disefio web comenzé a dar sus primeros pasos et la década del 90, y hoy, a casi 20 afios de su na cimiento, podemos decir que es una disciplina qui ha tenido un crecimiento agitado, colmado de cam bios, posibilidades, bisquedas e innovaciones. Esti metamorfosis fue la respuesta al ritmo vertiginos« de las necesidades y las tendencias que fueron mos trando los usuarios de Internet y a la evolucién dé RedUSERSa“ Capitulo 2 Del diseno al HTML RedUSERS:2. Del disefio al HTML Herramientas para desarrollar HTML El proceso de crear paginas se denomina, en la jer- ga, maquetacién, y da como resultado tener nues- tto disefio convertido en un sitio navegable. Luego, en caso de que el proyecto lo requiera fltard la adi- cién de cédigo JavaScript, AIAX, ASP o PHP para ha- cer que las paginas dindmicas obtengan contenido de las bases de datos. Un problema que suele presentarse al desarrollar HTML es lograr que el disefio sea visualizado de igual forma en la mayoria de los navegadores de Internet. Este inconveniente se debe, principalmen- te, a que algunos fabricantes no han incorporado en ‘sus productos los estandares que determinan la es- tructura de la Web. En consecuencia, tendremos que aplicar parches en el cédigo CSS y HTML para que Ja maqueta sea compatible con los navegadores mas frecuentes: Internet Explorer 6, 7 y 8; Mozilla Firefox 35 y 3.6; Chrome 5.0 y Safari 4.0. Esta practica se denomina cross-browsing. Es importante distinguir entre las distintas versio- nes de cada navegador, ya que cada uno interpreta La maquetacion sera exitosa si el codigo respeta los estandares CSS de la WSC sin alterar el disefio original 36 el cédigo de forma diferente. Si nos aseguramos dk que nuestro sitio sea compatible con los siete na vegadores mencionados, el 96% de los usuarios di Intemet podrd ver sin problemas el trabajo que es tamos desarrollando, HERRAMIENTAS PARA GENERAR CODIGO HTML Y CSS La aplicacién mas potente del mercado para gene tar cédigo HTML es Adobe Dreamweaver CS5, que comenzaremos a estudiar en las proximas paginas Sin embargo, ademas de ella, existen otras que po demos utilizar para redactar y generar codigo CSS» HTML para nuestros sitios. Si bien es cierto que cualquier editor de texto pla no, como el Bloc de notas de Windows, es su ficiente para redactar cédigo HTML y CSS, no convendra recurrir a programas disefiados espe cialmente para tal fin, ya que en ellos tendremo ayudas visuales (como el uso de distintos colo res para el texto) que nos orientardn en la tarea’ simplificardn el trabajo. NOTEPAD++ Notepad++ (http://notepad-plus-plus.org) & una aplicacién que bien podriamos definir com una versién muy mejorada del editor de texto el Bloc de notas incluido en todos los sistema Windows. Si no estamos acostumbrados a redac tar cédigo de programacién web a ciegas, no ser: conveniente utilizarlo, ya que su principal desven taja es que no cuenta con un preview incorporade De todas maneras, desde un simple atajo de tecla do, podemos visualizar el HTML en los navegadore de Internet que tengamos instalados. RedUSERSEntre los principales puntos a favor de esta aplica- ci6n encontramos los siguientes: * Es gratuita, * Sintaxis coloreada. * Numeracién de linea. © Muy liviana, consume pocos recursos del sistema. * Cédigo autocompletable en diferentes lenguajes. © Es posible abrir y gestionar archivos de texto RedUSERS' FIGURA |. Interfaz de Notepad+- donde verios como ejemplo el cédigo de una pagina escrita en F pesados (por ejemplo, logs de acceso a servidc sin perder estabilidad. TOPSTYLE PRO TopStyle Pro (www-topstyled.com) es uno de mejores editores de cédigo CSS y, en general, e comendable utilizarlo como complemento del tor de HTML principal que empleemos para trab Entre sus principales ventajas podemos mencior FIGURA 2. Area de trabajo de TopStyle Pro. El panel CSS Pale Editor, ubicado a la izquierda, muestra los colores utilizados e ‘nuestra hoja de estilos y cudnta veces aparece cada uno.D2. Del disefio al HTML * Preview del cédigo escrito en tiempo real * Validador de estilos CSS. * Sintaxis autocompletable del cédigo que estamos escribiendo. éPOR QUE DREAMWEAVER? La elecci6n de Adobe Dreamweaver como principal herramienta de trabajo se debe a que es una aplica- cién muy potente para desarrollar sitios web respe- tando los estandares CSS y HTML. Con ella, pode- mos disefiar sitios de forma visual o directamente sobre el cédigo, y tenemos la posibilidad de traba: jar con distintos entornos de programacién, como XHTML, CSS, XML, JavaScript, AJAX, PHP y ASP. FIGURA 3. Dreamweaver es la aplicacién de la sui- te Adobe Web Premium especialmente desarrolla- da para la creacién de sitios web. 38 Dreamweaver nos permite configurat sitios y, de esti manera, definir un ambito de desarrollo y testeo par los disefios y aplicaciones web que generemos, sit necesidad de usar un programa externo para tal fin Ademés, esta nueva versin de la herramienta (CSS cuenta con una funcionalidad muy destacable: e asistente de codificacién inteligente. Su funcién & optimizar la velocidad de escritura de codigo, dad que el programa reconoce y sugiere strings de cédi go en diferentes lenguajes de programacién. Esta: sugerencias aparecen tanto en funciones predefini das del lenguaje como en otras personalizadas qui hayamos usado en el mismo desarrollo. Por otro ado, con Adobe Dreamweaver tenemos un: ventaja simple pero fundamental sobre otros edito res de HTML: podemos insertar tags corriendo sola mente un comando del programa, como Insertar, Imagen. Adobe Dreamweaver CS5 La flexibilidad es una de las cualidades mas destaca das de Dreamweaver. Esta aplicacién puede ser usa da por aquellas personas que tengan poca experien cia en el armado de una pagina HTML, porque @ insertar elementos desde los meni, el programa st encarga de redactar a la perfeccién el cédigo HTMI y CSS. También es util para usuarios avanzados, yc que permite manipular manualmente los tags cot asistencias de edicién excepcionales, que aceleran e proceso de redaccién de cédigo. RedUSERSa“ Capitulo 3 Estructura del sitio RedUSERS:D3. Estructura del sitio Tendencias en el diseno de fondos El fondo de un sitio puede darle un toque distintivo y actuar como contexto de la informacién. Trabajado de manera apropiada, podrd reflejar una determina da época, representar el concepto de minimalismo 0, simplemente, dar aire al disefio, Podemos categorizar los fondos segin su aspecto Visual, es decir el tratamiento gréfico que se aplique; © segiin su relacién con el resto de los elementos de la interfaz. Veamos las opciones del primer grupo. * Colores plenos: son fondos sencillos que transmi- ten orden y claridad visual. Son pertinentes en los si- tios que necesitan priorizar los contenidos, como los de fotografias 0 tipografias. La aplicacién de estos fondos es sencilla, ya que podemos crearlos con la declaracién de la propiedad background-color en el elemento body de la hoja de estilos. * Gradientes: otorgan mayor profundidad al dise- jioy se convierten en un detalle que eleva su calidad FIGURA 1. En los sitios con fondos de color pleno se destaca el contenido por ‘sobre el contexto. como vemos en www.davidfooks.com, 62 visual. Para aplicarlos, es aconsejable repetir una pe quefia imagen a modo de patrén, utilizando las pro piedades background-image y background-re peat. La direccién del gradiente debe ser vertical horizontal, no diagonal + Texturas: son apropiadas para aquellos disefios er Jos que queremos representar una metafora o trans mmitir una cierta atmésfera. Por ejemplo, el uso de pa peles viejos denotard el paso del tiempo, mientra que la eleccién de una textura de acero transmiti ra conceptos como asepsia, modernidad o volumen Las texturas suelen ser aplicadas como una grat imagen de fondo, utilizando la propiedad back: ground-image, y también es posible hacerlo com patrén, repitiendo una pequefia imagen El fondo puede ser un condimento especial para dar un toque distintivo y contexto para la informacion del sitio RedUSERS“gyrase gma at COe C= 606 Sa ‘WIA UR CUR 6 LNT CL a er * Fotografias: si encontramos una fotografia apro- piada, podemos lograr un ambiente muy realista al utilizarla como fondo. Habitualmente, la foto utili- zada recibe un importante retoque y se aplica de manera fija a través de la propiedad background- attachment. Los contenidos quedaran por encima de ella y, al hacer scroll, se deslizardn independien- ‘temente del fondo. Recordemos que no es aconseja- ble aplicar una fotografia a modo de patron, porque ‘su repeticién genera saltos visuales. RedUSERS! = coy at one FIGURA 2. Eluso de texturas enriquece el lenguaje grafico. transmitiendo diferentes conceptos o ideas. En foam www.gomammoth.co.uk encontramos un ejemplo de uso de textura. * llustraciones: los fondos creados a partir de traciones suelen tener un toque de personalid: originalidad. Sin embargo, esta técnica en gi ral transmite un espiritu algo infantil, que no si pre resulta apropiado. Como sabemos, las ilu: ciones pueden aplicarse como patrones y tam como imagenes de fondo y, a diferencia de la: tografias, estan compuestas por pocos colores, lo que pueden ser optimizadas con formato 6 PNG, de peso reducido. FIGURA 3. Las fotografias crean un entorno realista. dificil de lograr mediante otras técnicas. Encontram tun gran ejemplo en www.alexarts.ru/en.