Aprende Web Design - Ebook Gratis!

Pgina
Qu incluye el ebook?
Qu necesitas para crear tu pgina? A travs de esta gua conocers los componentes que necesitas para poder crear tu pgina web (Curso Introductorio). Hosting y Domain Te ensearemos qu es un Hosting y un Domain. Adems, te proveeremos un enlace para que pueda comprar ambos servicios con una compaa que tiene apoyo tcnico 24/7 a travs del telfono, email y chat. Manejador de Contenido Joomla! Te ensearemos a instalar y configurar este sistema que te ayudar a crear y actualizar tu pgina web. Templates Pre-diseados Te proveeremos un enlace donde podrs bajar 1 template (plantilla) para comenzar a crear tu pgina. Cada mes aadiremos un nuevo Template Pre-diseado y usted podr bajarlo si desea.
Por qu surge este ebook?

Aprende Web Design nace para beneficiar a todas aquellas personas que necesitan crear una pgina web personal o para su negocio, pero que no desean invertir tanto en la creacin de la misma. A travs de esta gua usted no necesitar ningn conocimiento en html o algn otro lenguaje de creacin de pginas web. De forma ilustrada, paso a paso, usted podr completar su pgina web en tan slo un da, si sigue todos los pasos que este ebook ilustra. Este ebook ser actualizado mensualmente y usted recibir libre de costos cada actualizacin con nuevas funciones y pasos ms avanzados para actualizar su pgina y optimizarla.
All rights reserved 2013 / Copyright 2013. Aprende Web Design. Joomla! name is used under a limited license from Open Source Matters in the United States and other countries. Aprende Web Design is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
Pgina
Tabla de Contenido
Captulo 1 Trminos y Definiciones Conceptos Bsicos Captulo 2 Paso 1: Qu necesitas? Paso 2: Comencemos! Captulo 3 Paso 3: Templates Pre-diseados Paso 4: Instalar Joomla! Captulo 4 Paso 5: Modificando nuestra Pgina Paso 6: Contenido de la Pgina Paso 7: Aadiendo enlaces al Men Paso 8: Formulario de Contacto 46 52 57 63 24 27 10 11 Prxima Actualizacin (dentro de un mes) - Aadir a Buscadores (search engines) - Dar a conocer nuestra pgina (mercadeo) - Cmo instalar nuevos Mdulos y Componentes - Modificando nuestra pgina para vender productos o servicios *Usted recibir cada actualizacin de este ebook libre de costos en su correo electrnico. 5 7 Captulo 5 Paso 9: Mdulos Paso 10: Componentes Paso 11: Logo y algunos retoques 72 85 87
Pgina
Pgina
Trminos y Definiciones
A continuacin les presentamos una serie de trminos y definiciones importantes para la creacin de la pgina web. 1. Website - un website es un conjunto de contenidos interactivos que pueden incluir: texto, imgenes, videos, etc. En el mismo se presentan los servicios de un negocio, formas de contacto, biografas, etc. 2. Hosting - es el lugar donde se alojan todos los archivos del website. Este servicio lo ofrecen diferentes compaas en diferentes partes del mundo. 3. Domain - el domain es el nombre de internet que va a tener nuestra pgina web (ej. www.nuestronegocio.com). El dominio es la puerta para entrar a nuestra pgina web. Cuando las personas entran la direccin en el navegador, la misma dirige a nuestros visitantes a nuestra pgina.
4. Content Management System - en espaol podemos definirlo como un Sistema Manejador de Contenido. A mediados de la primera dcada del 2000, surgieron estos Manejadores de Contenido para que se crearan pginas web a travs de estos sistemas. Ayudan a que cualquier persona sin ningn tipo de conocimiento en lenguajes de programacin de pginas web, puedan administrar y actualizar sus pginas en cualquier momento, desde cualquier parte del mundo con acceso a internet. 5. Joomla! - es uno de los Manejadores de Contenido ms conocido y usado en el mundo. Joomla! es usado por millones de personas, gobiernos, negocios, etc. en el mundo entero. 6. Open Source - El software OpenSource se define por la licencia que lo acompaa, que garantiza a cualquier persona el derecho de usar, modificar y redistribuir el cdigo libremente.
Pgina
7. Frontend - es la parte de la pgina web que todas las personas ven. Podramos decir que es la parte de al frente. 8. Backend - es la parte que slo los administradores (usted) de la pgina web pueden ver. Podramos llamarlo como la parte privada de su website. En esta rea usted va a realizar los cambios necesarios de su pgina, como cambiar el texto, imgenes, videos, etc. 9. Components - los componentes son aplicaciones especficas que se pueden instalar en nuestra pgina para que aada valor a la misma. Un componente puede ser un manejador de clasificados, un manejador de propiedades, un manejador de videos, un manejador de msica, un manejador de imgenes (galera de fotos), etc. 10. Modules - los mdulos son unas reas especficas que ayudan a dividir nuestra pgina. Los mdulos al igual que los componentes se pueden instalar en nuestra pgina.
11. Menu - el men es el rea principal de navegacin en nuestra pgina. Este men contiene los enlaces que van a definir las pginas de contenido en nuestra web. Por ejemplo, Inicio, Nosotros, Servicios, Noticias, Contacto, etc. 12. Artculos - el sistema que vamos a utilizar para crear nuestra pgina web, llama a todo el contenido que tiene que ver con texto Artculos. Por ejemplo, el rea de la Introduccin de la pgina, el de Nosotros, Servicios, Noticias, etc. son artculos. 13. Administrator - es como Joomla! llama a la persona que est a cargo de administrar la pgina, cambiar contenido, etc. Esta persona tiene unos privilegios; quin nico puede entrar al Backend de la pgina. 14. Media Manager - es el rea donde subimos las imgenes, videos, etc. que vamos a utilizar en nuestra pgina web.

Pgina
Conceptos Bsicos

internet y los potenciales clientes. Algunos de estos puntos son los siguientes: Contenido definido - que el texto que escribamos en nuestra pgina web no tenga repeticiones y que se defina bien quines somos, nuestros servicios, nuestra localizacin, informacin de contacto, etc. Un diseo claro y bonito - segn estadsticas que se han hecho, tenemos slo 8 segundos para impactar o llamar la atencin de la persona que entra a nuestra pgina web, para invitarles a que continen navegando en la misma. Un buen diseo que sea claro y bonito, va a ayudar en este reto. Comunicacin efectiva - la mayora de las personas que estn buscando servicios en el internet, desean encontrar lo que buscan de manera rpida. Por lo tanto, tenemos que ser efectivos en presentar cules son nuestros ofrecimientos en la pgina principal, para que tan pronto el
El conocimiento que hoy les proveo a travs de este ebook (libro en pdf) es basado en la experiencia de 7 aos trabajando en el mundo del diseo web. El internet ha cambiado la forma en que nos comunicamos y compartimos la informacin. Es por esto que la forma tradicional de promocionar una marca o negocio, aunque sigue siendo efectiva, es costosa, aqu es donde surgen los medios modernos de hacerlo, como lo es tener presencia en la web. Crear una pgina de internet es esencial para un negocio que ofrece servicios, ya que puede llegar ms de cerca a las personas a las cuales le ofrece servicios o potenciales clientes que podrn conocerle a travs de su pgina web. Hay varios puntos importantes para que nuestra pgina web sea efectiva y produzca frutos. De esto va a depender cun visible sea nuestra pgina web ante los buscadores en
Pgina
usuario entre, pueda decir esto es lo que yo estoy buscando. Visualizacin en muchos dispositivos han nacido nuevas tecnologas hoy da que nos permiten crear pginas web que con tan slo un diseo, la forma de visualizacin de nuestra pgina va a ajustarse al tamao de la pantalla desde donde se est viendo la misma. Esto es importante, ya que segn estadsticas, la mayora de las personas que se conectan al internet diariamente, lo hacen a travs de un dispositivo mvil (telfonos inteligentes o tabletas). Promocin - disear una pgina web y no darle promocin es como si no hubisemos hecho nada. Hay varias formas de cmo podemos promocionar nuestra pgina web, pero actualmente las ms efectivas y costo efectivas (gratis) son a travs de las Redes Sociales. Comparte tu pgina con tus amigos, familia y/o conocidos. Ellos te ayudarn a dar a conocer tu pgina web. De la
promocin estaremos hablando con ms detalles en nuestro ltimo captulo. Anlisis - saber cuntas personas estn entrando diariamente a nuestra pgina y de dnde lo estn haciendo es muy importante, ya que esto nos ayudar a poder medir si estamos siendo efectivos en la promocin y qu debemos mejorar. Para esto, nosotros le ensearemos en el ltimo captulo de este ebook, a utilizar la herramienta de Google Analytics.
Pgina
Pgina 10
Paso 1: Qu necesitas?
Muchas personas piensan que para tener una pgina en internet slo necesitan tener el diseo. La respuesta a este pensamiento es NO. Para tener una pgina de internet necesitas tener tres (3) componentes: 1. Diseo - el diseo es un aspecto importante como lo hemos ya discutido. Esto es lo que las personas pueden ver cuando entran a su pgina web. 2. Hosting - el hosting (hospedaje) es un aspecto importante tambin, ya que este servicio es el que permite alojar todos los archivos de nuestra pgina (Ej. imgenes, contenidos, etc.). 3. Domain - el domain (dominio) es la puerta de entrada a nuestra pgina. Si no se tiene un domain, no podemos acceder a nuestra pgina web (Ej. www.minegocio.com).
Lo primero que vamos a hacer es comprar el hosting y el dominio. Basado en nuestra experiencia con diferentes compaas que ofrecen estos servicios en internet, la que hoy le vamos a recomendar es una de las mejores que ofrecen este servicio a un buen precio. Esta compaa se llama HostGator. Ellos ofrecen servicio tcnico 24 horas al da y 7 das a la semana, a travs del telfono, email y chat en vivo. Despus que hemos comprado el Hosting y el Domain, que ambos tienen un costo aproximado de $80.00 (dlares), procedemos a instalar el Manejador de Contenido Joomla! Al completar estos primeros dos pasos, ya habremos recorrido un 25% de todo el trayecto.
Pgina 11
Paso 2: Comencemos!
S que posiblemente alguna de las personas que est leyendo este ebook haya dicho ya era hora! Como dijimos anteriormente, lo primero que necesitamos es comprar el hosting y el dominio. Haga un click en la siguiente imagen para ir a comprar el Hosting y el Domain.
Una vez hemos hecho un click en el banner (imagen) anterior a este texto, va a salir la pgina de HostGator, ms o menos como esta a continuacin.
Pgina 12
Cuando entramos a la pgina, vamos a hacer un click en el botn que dice: View Web Hosting Plans que queda en el centro de la pgina. Al hacer click en este botn, nos va a llevar a ver
las opciones que tiene esta compaa en cuanto al Hosting se refiere, usted entonces ver una pgina como sta a continuacin.
Pgina 13
El Plan que mejor se ajusta para usted que est comenzando su primera pgina de internet es el primero a mano izquierda llamado Hatchling Plan. Este plan de Hosting incluye: espacio ilimitado para los archivos de su pgina web, capacidad ilimitada para que mltiples personas puedan ver la pgina a la misma vez y adems tiene capacidad para un domain dentro de la misma cuenta. La promo del banner a la que usted hizo click dice que el costo es de $4.95 mensual, esto es si se paga por dos aos, pero nuestra recomendacin es que lo compre por un ao, que entonces saldra a $5.95 mensual, que a 12 meses saldra en total el hosting a $71.40 + el registro del domain $12.95, estamos hablando de aproximadamente $85.00 en total. A este total le restamos un 20% de promocin que tienen disponible. *No aseguramos que cuando usted vaya a comprar el servicio est al mismo precio, podra estar ms econmico o un poco ms alto. El costo que pague, le aseguramos por experiencia que ser recompensado en un buen servicio disponible todo el ao.
En la imagen anterior, despus que ha seleccionado el Plan, haga click en el botn amarillo de ORDER NOW, cuando hace click en dicho botn, va a abrir la pgina donde se ingresan nuestros datos para comprar dicho plan. En la prxima pgina vamos a presentar dicha pgina para que pueda ver las anotaciones que hemos hecho.
Pgina 14
La primera imagen que vemos es para escribir el nombre que deseamos para nuestro Domain. Donde dice Enter Your Domain Here:, ah vamos a escribir el nombre deseado. Si est disponible, va a decir el mensaje a la parte de
abajo Congratulations!, si no est disponible va a salir el mensaje de Not available!.
Pgina 15
En esta parte de la pgina vamos a ver primero para confirmar cul es el Plan que estamos comprando y el trmino a renovar dicho Plan. Luego ingresamos el username (nombre de usuario) que deseamos para accesar a la
cuenta) y un cdigo de seguridad (4 a 8 caracteres). Luego va a escribir la informacin para hacer el pago, y escoge el mtodo de pago (Tarjeta de Crdito o Paypal). Recordar que esto es slo una vez al ao.
Pgina 16
En esta siguiente imagen de la misma pgina, la compaa le va a ofrecer si desea unos servicios adicionales. Le recomendamos que se asegure que los cuadritos de donde se hacen los checkmarks, no estn seleccionados,
porque sino en el carrito de compra van a aparecer dichos servicios adicionales, aumentando el costo anual del hosting y domain.
Pgina 17
En esta imagen final de esta pgina, vamos a ver el Cupn de descuento del 20% y despus el resumen de lo que le van a cobrar en total en esta factura. Asegrese que ese es el total
de lo que est comprando. Al final haga click en el botn amarillo CREATE ACCOUNT. Si la transaccin fue satisfactoria, en la prxima pgina lo notificarn, adems le va a llegar un
Pgina 18
correo electrnico con toda la informacin de acceso al servicio del Hosting y Domain. A continuacin les presentamos una imagen de ejemplo.
Pgina 19
Ya que hemos comprado el Hosting y el Domain, vamos a accesar al Panel de Control del Hosting para ver cmo se ve. Para accesar al mismo, escriba el siguiente enlace en el Navegador de su preferencia. Enlace: www.domainquecompro.com/cpanel Cuando entra esta direccin, va a salir una pgina para ingresar los datos que nos enviaron en el email de compra. Primero vamos a escribir el username y luego el password (contrasea) y hacemos click en el botn de Log in. Veamos la imagen a continuacin.
Pgina 20
Hosting Control Panel Despus que hemos accedido con nuestro username y password, vamos a encontrar una pgina como la siguiente. Este es el Panel de Control principal de nuestro Hosting. El Panel
de Control tiene muchas funciones pero nosotros hemos sealado slo las ms importantes y que usted va a utilizar en algn momento dado. Esta es la primera imagen de esta pgina.
Pgina 21
Pgina 22
Pgina 23
Pgina 24
Paso 3: Templates Pre-diseados

A continuacin les presentamos la forma de
poder bajar un (1) template pre-diseado que es totalmente gratis para su uso, personal o comercial. En su navegador, vaya a este enlace: http://aprendewebdesign.com/templates-predisenados/
Pgina 25
En la imagen anterior presentamos la pgina donde se encuentra el template pre-diseado para verlo y bajarlo. La pgina est protegida por un Password. El password es: download-templates Tan pronto usted escribe el Password en el encasillado, va a hacer click en el botn de Submit. Al entrar va a poder ver templates disponibles para descargar. Es importante recordar que ahora tenemos 1 template, pero mensualmente estaremos aadiendo uno nuevo. A mano derecha presentamos el template que vamos a utilizar para la demostracin de este Curso Introductorio para crear nuestra pgina web. En la siguiente pgina vamos a ver un ejemplo de la pgina donde estn disponibles los 3 templates para descargar. Cada uno de estos templates contiene el sistema Joomla!, lo que conocemos como un Quickstart, que instalando Joomla!, instalamos a la vez el Template que deseamos.
Pgina 26
Pgina 27
Paso 4: InstalarJoomla!
Anteriormente ya hemos hablado de Joomla!, el Manejador de Contenido ms utilizado en el mundo por individuos, instituciones sin fines de lucro, gobiernos, empresas y negocios. Aqu les presentamos el logo de Joomla!
internet. La plataforma como tal, Joomla! al ser de cdigo abierto (Open Source) es gratis, uno puede entrar a la pgina web de dicha plataforma y bajarla. Esta es la pgina web del proyecto Joomla! www.joomla.org En dicha pgina podemos encontrar mucha informacin valiosa para nosotros y adems un rea exclusiva de extensiones. Las extensiones son los Componentes y mdulos que podemos instalar en nuestra pgina para aadirle valor y diferentes funcionalidades a la misma. Estas extensiones muchas de ellas son totalmente gratis y otras son comerciales. En este Paso 3 vamos a entrar al Panel de Control de Hosting para hacer la instalacin de la plataforma de Joomla!, que es el instrumento principal para la creacin de nuestra pgina web. Utilicemos los pasos mostrados en el Captulo 2 para accesar al Panel de Control de Hosting.
Anteriormente tambin dijimos que Joomla! es Open Source, lo que significa que es de cdigo abierto, cualquier persona puede modificarlo. Hay toda una comunidad de desarrolladores web en el mundo que programan para Joomla, lo que ha hecho que haya muchos componentes y mdulos que se pueden instalar en esta plataforma. Joomla! ayuda a que nosotros podamos administrar nuestra pgina desde cualquier parte del mundo que tengamos acceso a
Pgina 28
Ya que hemos accesado al Panel de Control de Hosting vamos a ir a donde dice Databases y ah vamos a hacer un Click en MySQL Database Wizard. A continuacin una imagen de ejemplo de esa rea.
Este procedimiento es para crear una Base de Datos en MySQL, la cual servir para alojar la informacin de la instalacin de Joomla! En la prxima pgina vamos a ver cmo es el proceso despus de haber hecho Click en MySQL Database Wizard.
Pgina 29
A continuacin una imagen que nos muestra el primer paso para crear la Base de Datos.
Escribimos el nombre para la base de datos. Siga las instrucciones en rojo.
Pgina 30
Pgina 31
Pgina 32
Ya hemos creado satisfactoriamente la base de datos que vamos a utilizar para Joomla! Ahora hacemos un click en Return Home, para regresar al Panel de Control del Hosting. Es
importante acordarnos del nombre de la Base de Datos, del Username y del Password, los vamos a utilizar al instalar Joomla!
Pgina 33
Ya que hemos regresado al Panel de Control principal del Hosting, vamos a buscar el cono llamado File Manager, para subir nuestro template e instalarlo junto con Joomla! Veamos una imagen de ejemplo de esa rea del File Manager.
Hacemos un click en el cono de File Manager, se va a abrir una ventana pequea como la vamos a presentar en la prxima imagen. Siga los pasos que provee la misma.
Pgina 34
Pgina 35
Haga Click en Upload, segn presenta la siguiente imagen.
Pgina 36
Siga los pasos que se proveen en la siguiente imagen.
Pgina 37
Ahora vamos a esperar que suba nuestro archivo del template y Joomla!, hasta que diga en la parte de abajo, mano derecha Complete 100%.
Cerramos la pgina anterior y volvemos a la pgina que dimos como ejemplo en la imagen que est en la pgina 35. En este momento ahora contiene el archivo comprimido del Template y Joomla!
Pgina 38
Segn las instrucciones que damos en la imagen que est en la pgina 37, vamos a hacer un click sobre el archivo que subimos y hacemos un click sobre el cono llamado Extract, para descomprimir el archivo y poder
ver todos los documentos que contiene el mismo. Al hacer click en el botn de Extract, se va abrir una ventana como muestra la imagen a continuacin.
Pgina 39
Cuando ha terminado de descomprimir, va hacer click en el botn de Close, y seguir las
instrucciones de la imagen.
Pgina 40
Ahora que ya hemos descomprimido Joomla! y nuestro Template, vamos a hacer el proceso formal de instalacin. Vamos a escribir en el URL del navegador (browser) la direccin de nuestro domain (dominio), por ejemplo: www.nuestrapgina.com Va a aparecer una pgina como la imagen que mostramos en la pgina siguiente, y comenzaremos la instalacin de Joomla! Siga las instrucciones que estn en rojo en las siguientes imgenes.
Pgina 41
Pgina 42
Pgina 43
En esta imagen va a escoger Default English y asegurarse que en Overview, diga Yes en Email Configuration. Luego haga click en Install.
Pgina 44
Pgina 45
Pgina 46
Paso 5: Modificando nuestra pgina

Veamos nuestra pgina web instalada. Accesamos a nuestro domain (ej. www.nuestrapagina.com). Como vemos, tenemos mucha informacin que no deseamos ver y que tenemos que sustituir por la que nosotros vamos a utilizar. En la pgina siguiente vamos a entrar al rea del Administrador para comenzar a modificar nuestra pgina web.
Pgina 47
Ya que tenemos Joomla! instalado, procedemos ahora a entrar al rea del Administrador, para conocer y familiarizarnos con el mismo. Para acceder, vamos a utilizar la direccin o domain que compramos y algo adicional. Ej. www.supaginaweb.com/administrator Va a sustituir la parte que est en rojo del ejemplo con el domain que usted compr junto con el servicio del Hosting. Cuando pone esta direccin en el rea de escribir los URL en su navegador y le da enter, va a aparecer la pgina de Login del Administrador de Joomla! En esta rea usted va a escribir el username y password que el sistema le provey cuando instal Joomla!, segn aparece en la imagen anterior como ejemplo. *Es importante que la informacin de acceso (usernames y passwords) tanto del Panel de Control del Hosting como los del rea del Administrador de su pgina web en Joomla!,
los mantenga seguros y guardados, para que no se le olvide la informacin de acceso. En la prxima pgina de este ebook presentamos una imagen de ejemplo de la pgina del Login del Administrador de Joomla!
Pgina 48
Pgina 49
A continuacin te presentamos una imagen de ejemplo de la pgina principal del
Administrador.
Pgina 50
Ahora procederemos a eliminar los enlaces del Men que no vamos a utilizar para reemplazarlos por los nuestros. Vayamos al
Men Principal (segn imagen anterior), y hagamos click en Menus, luego click en Main Menu.
Pgina 51
Luego que hemos borrado los mens que no vamos a usar vamos a ver la misma rea de la
siguiente forma.
Pgina 52
Paso 6: Contenido de la pgina
Segn las instrucciones de la imagen anterior, vamos a ir al rea de Contenido para eliminar el Contenido que no deseamos y comenzar a crear nuevo contenido para aadir a la pgina.
Pgina 53
Ir al Men Principal y hacer click en el enlace llamado Content luego hacer click en Article Manager. Ya que hemos borrado todo el contenido que no necesitamos, vamos a ver la pgina de esta
forma. Luego hacemos click en el botn verde de New (arriba, mano izquierda), para comenzar a aadir nuevo contenido. Primero aadiremos informacin al rea del Home. Aadiendo el Contenido. Vea la imagen a continuacin.
Pgina 54
Pgina 55
Despus que hemos aadido el Contenido del Home, vamos a hacer click en el botn de Save & Close. Al hacer click en el botn de Save & Close, vamos a regresar nuevamente a donde est el listado de los contenidos disponibles, ahora con slo un contenido, el que acabamos de crear. Ahora procedemos a crear ms contenido, por ejemplo Sobre Nosotros, Servicios, Ofertas, Noticias, etc., todos haciendo el mismo procedimiento que hicimos para aadir el contenido del Home, con la nica diferencia que en estos Contenidos no se va a seleccionar la opcin de Feature, segn se presenta en la imagen anterior, en la parte central, mano derecha, ah debe decir No. La opcin de Feature slo se va a utilizar con Yes, cuando sea un contenido para el enlace del Men del Home (pgina principal). En la prxima pgina vamos a presentar una imagen de cmo se vera la pgina del listado de Contenidos disponibles, despus de haber
aadido los contenidos de las diferentes reas de la pgina.
Pgina 56
Pgina 57
Paso 7: Aadiendo enlaces al Men

Ahora, vamos a hacer este Contenido visible en nuestra pgina. Cmo lo hacemos? Lo hacemos aadiendo los enlaces del Men. En el
Men Principal (arriba, mano izquierda), vaya al enlace Menus y luego haga click en Main Menu. Al igual como en el rea de Contenidos, vamos a hacer Click en el botn verde de New (arriba, mano izquierda) y el primer men que vamos a crear va a ser el de Sobre Nosotros, por ej.
Pgina 58
Cuando hemos hecho click en el botn verde de New, abre una pgina como la imagen anterior y luego vamos a hacer un click en el
botn azul, para seleccionar qu tipo de enlace de Men queremos crear y sale una pantalla como en la imagen siguiente.
Pgina 59
Ahora, siguiendo la imagen anterior, vamos a hacer click en la segunda opcin llamada Articles. Luego que abre las opciones, vamos a
hacer click en Single Article, como lo presenta la siguiente imagen.
Pgina 60
Luego que hemos hecho click en Single Article, vamos a seleccionar el Contenido que hemos creado de Sobre Nosotros. Sigamos la imagen a continuacin. Hacemos Click en
Select y vamos a ver la imagen de la prxima pgina, los ttulos de los contenidos que hemos creado. Hacemos un click sobre el ttulo para seleccionarlo.
Pgina 61
Pgina 62
Ya que hemos seleccionado el Contendido, volvemos al rea de crear el men. Escribimos el ttulo del Men y luego hacemos click en el
botn de Save & Close para volver al rea del listado de los enlaces del men. Veamos la imagen de ejemplo a continuacin.
Pgina 63
Paso 8: Formulario de Contacto

Despus que hemos aadido satisfactoriamente el enlace del men de Sobre Nosotros, vamos a realizar los mismos pasos para aadir los otros Contenidos a los enlaces del men. Ahora vamos a crear el enlace de Contctanos para el Men, pero antes necesitamos crear la informacin de Contacto. Para esto vamos a ir al Men Principal al enlace Components y hacemos click en el mismo, luego hacemos click en Contacts, se abre una pestaa y hacemos click nuevamente a Contacts. Veamos la imagen en la prxima pgina y sigamos las instrucciones.
Pgina 64
Veamos la imagen a continuacin
Pgina 65
Ahora veamos a continuacin la siguiente imagen.
Pgina 66
Pgina 67
Despus que hemos escrito toda la informacin para el rea de Contctanos, vamos a hacer click en Save & Close. Ahora vamos a ir al Men Principal, al enlace Menus, y luego hacemos click en Main Menu. Ahora vamos a hacer el procedimiento de aadir la informacin de contctanos al enlace del men que vamos a crear. Tan pronto llegamos al listado de los enlaces del men que ya tenemos disponibles, vamos a hacer el procedimiento de aadir un enlace al men, haciendo click en el botn verde (arriba, mano izquierda) llamado New. En la prxima pgina vamos a presentar una imagen de ejemplo, siga las instrucciones en rojo.
Pgina 68
Pgina 69
Pgina 70
Pgina 71
Luego que ya hemos seleccionado el Contacto, regresar al rea de crear el enlace del Men, luego, hacemos click en Save & Close.
Ya que hemos creado nuestro Men Principal, vamos a ver como se ve nuestra pgina. Imagen de la parte superior de la pgina.
Pgina 72
Pgina 73
Paso 9: Mdulos
Qu son los Mdulos? Una buena definicin la da el site www.edujoomla.es en un artculo preparado el 23 de noviembre de 2009, y la definicin es la siguiente: Los mdulos son extensiones o complementos de Joomla! que nos permiten aadir bloques de informacin secundaria en diferentes posiciones o zonas de la plantilla, normalmente en la zona perifrica: columnas laterales, encabezamiento y pie de pgina. Prcticamente nuestros templates se basan en mdulos, en reas especficas. A mano derecha les presentamos el template que hemos instalado y que estamos personalizando, con recuadros en rojo, sealando qu reas son mdulos.
Pgina 74
Para ver todos los mdulos que tenemos disponibles, vamos a ir al Men Principal, al enlace llamado Extensions, luego hacer click en la segunda opcin llamada Module Manager. Una vez que hemos hecho click en Module Manager, vamos a ver todos los mdulos instalados en Joomla! Ahora, no todos los mdulos que estn instalados en Joomla, necesariamente estn publicados para verse en nuestra pgina. Nosotros decidimos si queremos que sean publicados y dnde queremos publicarlos (qu rea de la pgina). En la prxima pgina vamos a presentar una imagen de ejemplo del rea de Module Manager. Queremos definir los aspectos importantes del rea del Module Manager. Status - el trmino status va a definir si nuestro mdulo est publicado o no. Si tiene un checkmark (color verde), significa que est publicado. Si tiene una x (color roja) significa que no est publicado.
Title - esta rea es donde est el nombre del mdulo. Position - esta rea va a definir en qu parte est ubicado nuestro mdulo. Type - va a definir qu tipo de mdulo es el que tenemos instalado. Pages - nos dice si est publicado en todos (All) los enlaces del men que tenemos disponible en nuestra pgina, o si es slo en algunas en especfico (Selected Only). Access - en esta opcin nosotros podemos decidir si nuestro mdulo est visible a todo el pblico o si queremos que slo lo puedan ver ciertas personas a quienes le demos ciertos privilegios en la pgina.
Pgina 75
Definiendo las reas importantes de Module Manager.
Pgina 76
Ya que sabemos dnde podemos modificar los mdulos existentes de nuestra pgina, vamos a conocer en qu posicin especfica estn ubicados esos mdulos en nuestra pgina. Para esto, vamos a ir al Men Principal, al enlace
Extensions, luego hacemos click en Template Manager para ver una pgina como la siguiente imagen. Siga las instrucciones en color rojo.
Pgina 77
Pgina 78
Ahora veamos cmo se ve nuestra pgina mostrando los nombres de los mdulos y sus
posiciones (instrucciones en imagen pgina 76 y 77).
Pgina 79
Los recuadros en ambas imgenes podemos ver que dicen Position: right, etc. definiendo que ese mdulo est ubicado en la parte derecha de la pgina, as sucesivamente con los dems mdulos.
Pgina 80
Ahora volvamos al rea de Module Manager, para modificar uno de nuestros mdulos. Para esto, vamos al Men principal llamado Extension Manager, luego hacemos click en Module Manager. Cuando ya estamos en esa rea, vamos a hacer click en el nombre del Mdulo llamado Frontpage Feature. Este mdulo es quien define el texto que tenemos en el Slideshow de la pgina principal (Home). Tan pronto hacemos click, vamos a ver algo como la imagen a continuacin en la prxima pgina y sigamos las instrucciones en color rojo.
Pgina 81
Pgina 82
Pgina 83
Ahora veamos cmo se ve la pgina con el texto del Slideshow modificado.
Pgina 84
El proceso para editar todos los mdulos es el mismo. Nosotros decidimos qu informacin queremos colocar en cada mdulo o si queremos que ese mdulo est publicado o no.
Pgina 85
Paso 10: Componentes

Una buena definicin de lo que son los Componentes de Joomla! es la que da la pgina www.edujoomla.es en su artculo preparado el 25 de noviembre de 2009. Los componentes son pequeas aplicaciones independientes entre s que gestionan la informacin dentro de Joomla! Son, junto con los mdulos y los plugins, extensiones o complementos del sistema que aaden distintas funcionalidades a nuestro gestor de contenidos y lo convierten en mucho ms que una web de artculos o noticias. Pero, a diferencia de lo que ocurre con los mdulos, los componentes se cargan en la zona central de la plantilla. Adems del componente que nos sirve para gestionar artculos de noticias y organizarlos en secciones y categoras, Joomla! incorpora en su distribucin bsica otros que nos sirven para manejar otros tipos de informacin como anuncios o banners publicitarios, encuestas,
directorios de enlaces web, formularios de contacto, etc. Pero tambin existen otros muchos componentes desarrollados por la comunidad de usuarios de Joomla! que podemos instalar en nuestro sitio para aadir otras muchas funcionalidades como, por ejemplo, un repositorio de documentos para descargar, una galera de fotos, un foro de debate, una seccin de anuncios clasificados, una tienda online, etc. Los componentes estn ubicados en el Men Principal, el enlace llamado Components. Tan pronto usted seala el enlace Components, usted va a poder ver los Componentes que estn instalados en la pgina. Por ejemplo, uno de esos componentes es el que utilizamos para crear el Formulario de Contacto. Existen miles de Componentes que la comunidad de programadores de Joomla! en el mundo entero han creado, muchos de ellos son gratis, otros son comerciales (hay que pagar por ellos). Unos componentes pueden
Pgina 86
ser Galeras de Fotos, Manejadores de Propiedades para Real Estate (Bienes Races), Clasificados, Formularios, Sistemas de Reservaciones para Hoteles, Carritos de Compra para crear una tienda en lnea, Calendarios de Eventos, Directorios, Integracin de Mapas, etc. En la pgina de Joomla! puede haber decenas de categoras donde se ubican tanto componentes como mdulos, que usted puede bajar e instalar en Joomla! Esta es la direccin del rea de Extensiones de la pgina de Joomla! http://extensions.joomla.org En la prxima actualizacin que le enviaremos de este ebook (totalmente gratis para usted), vamos a ensearle cmo instalar nuevos componentes y mdulos para crear diferentes reas especficas en nuestra pgina, como por ejemplo, una pgina para vender productos.
Pgina 87
Paso 11: Logo y algunos retoques

Para cambiar el Logo de la pgina por el nuestro, vamos a ir al Men Principal, el enlace llamado Extensions, luego hacemos click en el enlace Template Manager. Cuando ya estamos en Template Manager, vamos a hacer click en el nombre del template que tenemos instalado, que en esta ocasin el nombre es shaper helix II. Una vez que hemos hecho click en el nombre del template, vamos a ver una pgina como la imagen que veremos a continuacin. Sigamos las instrucciones que aparecen en la imagen en color rojo.
Pgina 88
Pgina 89
Pgina 90
Pgina 91
Ya que hemos cambiado nuestro Logo, vamos a ver qu otras opciones tenemos para cambiar colores en este template. En la misma rea que estbamos, vamos a hacer un click en el tab de
Presets. Vamos a ver una pgina como la imagen a continuacin y seguimos las instrucciones en color rojo.
Pgina 92
Ya que hemos modificado nuestra pgina, vamos a ver cmo se ve.
Pgina 93
Hemos concluido el Curso Bsico Introductorio para crear nuestra pgina web. Para preguntas puede escribirnos a: preguntas@aprendewebdesign.com Estaremos ofreciendo apoyo durante una semana, luego de la semana si usted necesita nuestra ayuda, se comunica con nosotros y puede comprar diferentes paquetes de apoyo tcnico o si desea, podemos ayudarle con problemas que enfrente en el camino. *Recuerde que mensualmente estaremos actualizando este ebook y usted recibir en su correo electrnico dichas actualizaciones libre de costo. Estas actualizaciones incluirn nuevos templates, guas y pasos ms avanzados, recursos adicionales para optimizar su pgina web y consejos tiles para tener una buena presencia en la web. Felicidades ha completado el ebook!

Aprende Web Design - Ebook Gratis!

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aprende Web Design - Ebook Gratis!

Uploaded by

Copyright:

Available Formats

Pgina

Por qu surge este ebook?

abajo Congratulations!, si no est disponible va a salir el mensaje de Not available!.

Paso 3: Templates Pre-diseados

Escribimos el nombre para la base de datos. Siga las instrucciones en rojo.

Haga Click en Upload, segn presenta la siguiente imagen.

Siga los pasos que se proveen en la siguiente imagen.

Cuando ha terminado de descomprimir, va hacer click en el botn de Close, y seguir las

Paso 5: Modificando nuestra pgina

A continuacin te presentamos una imagen de ejemplo de la pgina principal del

Paso 6: Contenido de la pgina

aadido los contenidos de las diferentes reas de la pgina.

Paso 7: Aadiendo enlaces al Men

hacer click en Single Article, como lo presenta la siguiente imagen.

Paso 8: Formulario de Contacto

Veamos la imagen a continuacin

Ahora veamos a continuacin la siguiente imagen.

Definiendo las reas importantes de Module Manager.

posiciones (instrucciones en imagen pgina 76 y 77).

Ahora veamos cmo se ve la pgina con el texto del Slideshow modificado.

Paso 10: Componentes

Paso 11: Logo y algunos retoques

Ya que hemos modificado nuestra pgina, vamos a ver cmo se ve.

You might also like