Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Crear Páginas y Tu Sitio Web Usando Plantillas Prediseñadas

    Загружено:

    Jose Daniel Bravo Baque
    147 просмотров11 страниц

    Оригинальное название

    Crear páginas y tu sitio web usando plantillas prediseñadas

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    147 просмотров11 страниц

    Crear Páginas y Tu Sitio Web Usando Plantillas Prediseñadas

    Загружено:

    Jose Daniel Bravo Baque

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 11

    Crear pginas y tu sitio web usando plantillas prediseadas

    Descargar gratis y conocer cmo usar y editar las plantillas web prediseadas, tutorial paso por paso para hacer de forma sencilla una pgina o un sitio, con un acabado casi profesional. Como subir a un servidor web en internet las pginas creadas. Consejos y recomendaciones para crear tu sitio web.

    Una de las formas ms sencillas de crear pginas web con un acabado casi profesional, es usando plantillas prediseadas. Como su nombre indica no son ms que diferentes prototipos de pginas hechas para ser editadas, es decir solo es necesario introducir nuestros datos y ya tendremos nuestra pgina con un bello acabado lista para subirla a la red.

    Requisitos para crear tu primera pgina web.


    Antes de comenzar la edicin es necesario que tengas preparado de antemano en un documento o archivo de texto el contenido que tendr tu pgina, es decir: El ttulo, la estructura que tendr, como estar dividido el contenido, los subttulos, las paginas a las cuales crears vnculos, las imgenes si usars algunas, etc. Si no posees un programas de edicin web instalado en el equipo similar a Dreamweaver, podrs editar la plantilla usando el sencillo Bloc de notas de Windows o un editor de texto plano que ofrece ms

    posibilidades, puedes usar para ese fin Notepad+ que es una minscula aplicacin gratis, puedes acceder a su pgina de descarga en el siguiente link:Descargar Notepad. Notepad+ al igual que otras aplicaciones similares, dan la ventaja al que no tiene conocimientos en la edicin web, que muestra con colores diferentes el cdigo HTML de la plantilla y el texto que se puede reemplazar, sin afectar el cdigo de la pgina. Tener la plantilla que te interese en el equipo, puedes descargar de esta misma pgina algunas plantillas sencillas y de un hermoso acabado.

    Plantillas de pginas web para descargar gratis


    Para mostrarlas solo presiona el siguiente botn: Da un clic en la que tenga el estilo deseado para descargarla a tu equipo. El archivo que descargues descomprmelo, en su interior estn todos los archivos necesarios para crear tu pgina.

    Descargar todas las plantillas

    Archivos que contienen las plantillas


    La plantilla es una carpeta que contiene en su interior una pgina web como tal y otros archivos auxiliares: index.html. Es el archivo principal de la pgina web, dando dos clics en l vers el estilo y aspecto de la pgina. images. Subcarpeta que contiene las imgenes que utiliza la pgina. Los archivos style.css o default.css son archivos del estilo. Si no posees conocimiento de edicin, solo te ser necesario para crear tu pgina modificar el archivo index.html, los otros no ser necesario tocarlos.

    Comenzar a editar la plantilla


    Abre el archivo index.html con al programa con el que vas a editarlo. Todas las pginas web se dividen en dos secciones: El rea del HEAD que es todo lo que se encuentre entre las etiquetas <head> y </head>, solo contiene informacin propia de la pgina para el navegador, nada de lo que se encuentre dentro de esa rea se mostrar al usuario. En esa rea solo es necesario reemplazar el contenido del ttulo, el texto entre las etiquetas: <title> y </title>.

    La otra seccin es el rea del BODY, es todo lo que se encuentre entre las etiquetas <body> y </body>, contiene toda la informacin que se muestra en el navegador. En esta rea ser donde introduzcas toda la informacin que tienes preparada. El rea del body est dividida en varias secciones segn la estructura de la pgina, el comienzo y final de cada una est sealada por comentarios.

    Que son los comentarios en las pginas web?


    Los comentarios son lneas que tienen el siguiente formato: <!esto es un comentario --> Se usan como indicacin, no se muestran en el navegador. Los ms usados en las plantillas significan lo siguiente: Logo = rea del logotipo de la pagina Men = Barra de men con vnculos a otras pginas. Search = Cuadro de bsquedas. Content = rea de contenido en la columna principal. Sidebar = Barra lateral, algunas plantillas la tren a la derecha, otras a la

    izquierda. Footer = El pie de pgina.

    Insertar el texto en la plantilla


    Todas las reas de texto en las plantillas, para diferenciarlas fcilmente aparecen en el idioma latn, te dars de cuenta rpidamente. Sustituye cada una por el texto que tienes preparado de antemano. Las platillas estn en ingls, por lo que tambin tendrs que sustituir los nombres predeterminados de los vnculos como Home (Inicio), Contact (Contacto), etc.

    Como editar y crear los vnculos en la plantilla


    Los vnculos en todas las pginas web tienen el siguiente formato:
    <a href="#">Texto del vnculo</a>

    El caracter: # = Sustityelo por la direccin URL de la pgina donde ser enviado el usuario al dar un clic en el vnculo, hay dos opciones: El vnculo conduce a otra pgina en la misma carpeta o directorio del sitio. En ese caso solo es necesario reflejar el nombre de archivo de la pgina, por ejemplo:
    <a href="otrapagina.html">Texto del vnculo</a>

    El nombre de la pgina no puede contener espacios y tiene que incluir la extensin de archivo .html. El vnculo conduce a una pgina externa en internet. En ese caso solo es necesario reflejar la direccin URL de dicha pgina, puede obtenerse fcilmente accediendo a ella con el navegador y copiando la direccin que aparece en la barra de direcciones, un ejemplo es:
    <a href="http://norfipc.com/index.html">Texto del vnculo</a>

    Texto del vnculo = Es el vnculo que aparece en la pgina web, generalmente es de color azul y al dar un clic con el ratn conduce a la pgina de referencia.

    Cmo insertar imgenes en la pgina?

    Puedes agregar imgenes para que se muestren en la pgina, para eso primero cpialas a la carpeta imagen y dales un nombre adecuado. Para mostrar las imgenes es necesario insertar en el lugar donde se desean que aparezca la siguiente etiqueta:
    <img src="images/nombreimagen.jpg" width="940" height="255" alt="Descripcion de la imagen" />

    Sustituye en cada caso los siguientes valores: src="images/nombreimagen.jpg" Es la ruta a la ubicacin de la imagen. width="940" Ancho de la imagen en pixeles. height="255" Altura de la imagen en pixels. alt="Descripcion de la imagen" Las medidas de la imagen puedes conocerla fcilmente ya que aparecen en la ficha Propiedades al dar un clic derecho con el ratn en cada una.

    Cuadro de bsqueda para buscar con Google en Internet


    Los cuadros de bsquedas que poseen las plantillas ninguno es funcional, puedes reemplazarlos por el siguiente que permite buscar cualquier trmino usando Google.
    <form action="http://www.google.com/search"> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" name="" value="Buscar" /> </form>

    Cmo crear varias pginas web con la misma plantilla?


    Un sitio web de solo una pgina no es funcional, lo ideal es que tenga varias, aunque sea para comenzar 4 o 5 paginas. Si ya creaste la primera y comprobaste que no queda mal, puedes proseguir y crear otras con diferente contenido. Un sitio web elemental puede tener las siguientes pginas (es solo un ejemplo):

    La pgina index que posee el nombre del sitio con su descripcin y


    vnculos a las otras pginas. La pgina About (Acerca de) Contiene informacin del propietario y una foto. La pgina Contact, contiene informacin de cmo comunicarse con el autor. Otras pginas de acuerdo al contenido del sitio. Puede crearse mltiples copias del archivo index.html y renombrarlas siempre respetando la extensin html, cada copia es una pgina diferente que usar los mismos archivos auxiliares. Pueden vincularse unas con otras para permitir la navegacin interna, es opcional, pero si es necesario que la pgina index, es decir la pgina principal posea vnculos para acceder a todas las otras pginas, en ese caso tendrs hecho lo que se conoce como un sitio web completo y funcional. Para finalizar solo es necesario subir todos los archivos creados a un servidor web, para acceder a dicho sitio se escribir su nombre en un navegador y este abrir la pgina index automticamente.

    Dnde subir y publicar las pginas web o el sitio creado?


    En internet hay varias compaas que prestan servicios de Hosting o Alojamiento Web, es decir poseen poderosas computadoras llamadas servidores, que en sus discos duros pueden ofrecer espacio y albergar los archivos de miles de pginas web de distintos clientes, ya sean grandes o pequeas empresas o simples usuarios poseedores de una sola pgina; estos servidores funcionan las 24 horas permitiendo acceder a ellos desde cualquier parte del mundo sin importar la zona horaria. Prestan diversos servicios al propietario de los archivos como bases de datos, servicios de email, etc. Muchos de ellos ofrecen servicio de hosting gratuitos a pequeos sitios, por supuesto con limitaciones de espacio y de trfico de datos, pero aun as es una opcin ideal para dar tus primeros pasos y subir tu pgina. Tambin los hay que inclusive te ofrecen un subdominio, es decir una direccin web para poder acceder a tu sitio. Mi primer sitio lo hice usando los servicios de: byethost.com.

    Qu servicio de hosting o alojamiento web utilizar?


    Cada cual debe recomendar solo lo que conoce y tiene experiencia, por lo que yo sugiero a los lectores el hosting que utiliza mi sitio web del que no tengo quejas, Byethost.com. Es la compaa que ms soporte gratis ofrece en la red, sin incluir publicidad, lo s por experiencia ya que mi primer sitio utiliz el servicio gratis. No obstante, al que lo pueda pagar, la mejor opcin es usar el servicio Premium, en el paquete anual incluye un nombre de dominio con espacio ilimitado y otras opciones, en todos los tramites est disponible el idioma espaol. Adicionalmente se puede usar sin costo alguno el servicio en la nube de CloudFlare, lo que permite ms rapidez en la carga de las paginas desde cualquier regin geogrfica. Usa el siguiente vinculo y regstrate para que pruebes el servicio. Byethost.com Despus que te registres y decidas que servicio utilizar, si el gratis o el Premium, te darn los datos de tu cuenta que son: tu direccin o nombre de dominio, nombre de usuario, contrasea y la direccin ftp, esta es la necesaria para que puedas subir los archivos a tu sitio.

    Diferentes tipos de servicios de hosting o alojamiento web en internet


    Los servicios de alojamiento web de pago, lgicamente son los recomendados cuando se piensa en crear un sitio con un objetivo ms profesional o aunque as no lo sea, cuando se necesita ms fiabilidad y calidad. Si tu propsito, como lo fue el mo cuando comenc, es crear un sitio donde compartir tus ideas y conocimiento con los dems, pero al mismo tiempo tener ingresos, es necesario pagar por el servicio de hosting. Existen tres tipos de alojamiento principales:

    Servicio de alojamiento compartido (share hosting)


    Consiste en una computadora que funciona como un servidor web, mediante una direccin IP, presta el servicio de alojamiento a varios sitios web (hasta 500) de forma simultnea. Se nombra compartido porque se comparte todo, la direccin IP y los recursos de

    hardware del equipo, por lo que en momentos de mucho trfico algunos de los sitios alojados pueden ser que no respondan. Al mismo tiempo, si la direccin IP que se utiliza es baneada (sancionada) por alguna razn, se perjudicarn todos los dems sitios que la comparten. Este servicio aunque es el ms barato y accesible, como ves tiene sus desventajas.

    Servicio VPS (Virtual Private Server)


    El servicio de un servidor virtual al igual que en el compartido, varios sitios comparten el mismo equipo, pero divididos en mquinas virtuales, en este caso cada uno de ellos posee una direccin IP diferente. Aunque se utilizan los recursos de hardware de un nico equipo, cada sitio posee su cuota de espacio en disco, ancho de banda y hasta de memoria RAM, por lo que no deben perjudicarse unos a otros. Es la opcin ideal para sitios de mediano presupuesto.

    Servidores dedicados (Dedicated Servers)


    Es la solucin perfecta, cada sitio dispone totalmente de todos los recursos de un equipo, as como varias direcciones IP. Se tiene la opcin de administrar totalmente el servidor. Es la opcin ms cara, pero la ms profesional.

    Como subir las paginas o el sitio creado al servidor web?


    La carpeta a la que debes subir tus archivos puede ser nombrada: httpdocs, www o tambien public_html depende cual sea el servidor. Usando el mismo navegador web puedes subirlos si son pocos elementos, pero si hay varios archivos multimedia como imgenes, msica, etc. lo ideal es instalar un software cliente FTP, te recomiendo FileZilla, es gratuito, libre y de cdigo abierto, descrgalo en el siguiente link: Descargar FileZilla. En todos los casos al otorgarte el servicio de hosting, te facilitarn toda la informacin necesaria.

    Validar las paginas para comprobar que no poseen errores


    Despus de comprobar que el sitio funciona correctamente se impondr un requisito (opcional), la validacin. Validar las paginas permite comprobar si estas poseen errores y si los hay

    cuales son, esto puede realizarse utilizando servicios en la red gratis como el de W3C.

    Por qu validar las pginas?


    Si deseas que las pginas que has creado u otras que vayas a subir, sean visitadas por diferentes usuarios y as compartir su contenido, necesitars que Google y otros buscadores promocione tu sitio y te enve los visitantes. Para eso es fundamental que tus pginas estn validadas correctamente, esto significa que se muestran perfectamente en cualquier navegador web.

    Cmo validar las pginas web?


    Para validar una pgina puede acceder directamente al sitio del Validador HTML del W3C en: validator.w3.org y en el formulario introducir la direccin de la pgina necesaria. En el informe que te devolver el validador vers el resultado, en caso de que existan errores mostrar el error y la lnea de la pgina donde se encuentra. Tambin puedes usar el siguiente Bookmarklet que facilita dicha tarea.

    Validar HTML
    Permite validar el cdigo fuente o HTML de una pgina, usando el servicio del W3C.

    Plantillas de pginas web en HTML5


    Las plantillas que se ofrecen en esta pgina usan la especificacin de HTML XHTML. Actualmente comienza a ganar en popularidad un nuevo lenguaje con una sintaxis mucho ms sencilla llamado HTML5. Las pginas escritas en HTML5 permiten nuevas funcionalidades como son insertar directamente video, msica y casi cualquier elemento. Adems todos los scripts o widgets que proporcionan las redes sociales como Facebook, Twitter, Google+ y Pinterest, para insertar botones y contadores, usan este lenguaje. Si estas interesado en conocer ms las caractersticas y usos prcticos de este lenguaje, lee otra pgina de nuestro sitio:HTML5, ventajas y caractersticas

    Dnde descargar gratis plantillas de pginas web en HTML5?


    Debido a la creciente popularidad de HTML5, varios servicios de internet ofrecen plantillas para crear sitios web en este lenguaje. Entre ellos destaca HTML5 Up!

    Todas las plantillas que se pueden descargar son gratis. Cada archivo que se descarga esta comprimido en ZIP y en su interior puede encontrarse distintas versiones en HTML de una pgina. Un archivo con la barra lateral a la izquierda, otra a la derecha y una sin barra lateral. Incluyen archivos de estilo CSS que usan el diseo adaptable o sea que ajustan automticamente el ancho de la pgina a la pantalla del dispositivo donde se carguen ya sea en un navegador de una PC de escritorio, un telfono celular o una tableta.

    Вам также может понравиться