Quiero Crear un Blog

Si estás pensando en crear un blog tienes la oportunidad de hacer uno en blogspot (Blogger) totalmente gratis. En Quierocrearunblog.com vas a encontrar muchísimos consejos, trucos para Blogger, plantillas para Blogger, SEO, diseños, herramientas, menús, gadgets, tutoriales, publicidad para tu blog y muchísimos trucos y consejos más. Ahora ya no tienes más excusas para aprender en donde hacer un blog a tu medida y totalmente gratuito , además de decorarlo y adaptarlo totalmente a tus necesidades y preferencias.Puedes ver una entrevista que me hicieron con 10 Blogger Templates.

30 vídeotutoriales WordPress

KooThemes se ha tomado la molestia de realizar una selección de los mejores 30 vídeotutoriales para WordPress, con los que podremos mejorar el diseño de nuestro blog, así como también la adición de más y mejores herramientas para hacernos la tarea de bloguear mucho más sencilla.

Dichos tutoriales van desde las más sencillas formas de diseñar un blog desde cero o modificar uno existente, hasta la creación de templates.

Además:

No importa si eres un usuario novato o avanzado, esta colección de tutoriales (todos en vídeo) seguramente te resultará más que útil para conocer todos los secretos de WordPress, y así mejorar aún más tu sitio.

Manual Básico HTML – Cap 4 – Imagenes

  • INCLUSIÓN DE IMÁGENES EN HTML

Vamos a aprender a incluir imágenes en nuestro documeto HTML, algo muy sencillo y que guarda cierta similitud con los enlaces en su sintáxis.

La etiqueta que usaremos será <IMG SRC>, la cual no tiene etiqueta de cierre.

Es decir, si queremos incluir en nuestro documento HTML una imagen, por ejemplo, imagen1.gif (de nuevo hago uso de mi excelsa imaginación), la cual se encuentra en el mismo directorio que nuestro documento HTML, la estructura será la siguiente:

<IMG SRC=»imagen1.gif»>

Sencillo, ¿verdad?, pues como ya aprendimos en el tema de los enlaces, si queremos cargar una imagen que esté en otro directorio sólo tendremos que usar la misma estructura que con dichos enlaces, por ejemplo:

  • Queremos cargar una imagen de nombre imagen2.gif que se encuentra en el directorio imagenes dentro del directorio principal:

<IMG SRC=»imagenes/imagen2.gif»>

  • Queremos cargar una imagen de nombre imagen-externa.gif que se encuentra en un sitio web externo al nuestro, en la URL http://ricalco.com

<IMG SRC=»http://ricalco.com/imagen-externa.gif>

Ya lo vamos teniendo más claro… Continuar leyendo «Manual Básico HTML – Cap 4 – Imagenes»

Manual Básico de HTML – Cap 3 – Los enlaces

Tercer Capítulo del Manual HTML – Los enlaces

Como norma general, los enlaces tendrán la siguiente estructura:

<A HREF=»XXX»> YYY </A>

Es decir, XXX es el destino del enlace mientras que YYY es el texto indicativo de dicho enlace, que se mostrará con un color especial y generalmente subrayado, opciones que veremos más adelante.

En principio, vamos a distinguir cuatro tipos de enlaces:

  • Enlaces dentro de la misma página.
  • Enlaces con otra página de nuestro mismo «dominio».
  • Enlaces con una página exterior.
  • Enlaces con un correo electrónico.

Vayamos viéndolos uno por uno:

  • Enlaces dentro de la misma página:

Estos enlaces se utilizan generalmente en documentos muy extensos donde nos puede interesar crear saltos desde una posición de ese documento a otra dentro del mismo documento, un claro ejemplo puede ser la realización de un F.A.Q., donde podemos enlazar las diferentes preguntas con su respuesta dentro del documento.

Para hacer esto necesitaremos dos etiquitas, la primera será la ya nombrada <A HREF>, con la particularidad de escribir el símbolo # en el enlace, y su correspondiente cierre </A>, y la segunda será la etiqueta <A NAME> con su cierre </A>.

Es decir, el lugar desde donde queremos saltar se escribirá así:

<A HREF=»#marca»> YYY </A>

y en el lugar donde queramos ir al pulsar YYY:

<A NAME=»marca»></A>

  • Enlaces con otra página de nuestro mismo «dominio»:

Lo normal es que nuestro sistema disponga de varias páginas enlazadas normalmente con una página inicial o también llamada principal así como entre ellas mismas.

Supongamos que tenemos dos páginas, pagina1.html y pagina2.html (que original ¿verdad?), y queremos colocar un enlace en pagina1.html que nos lleve a pagina2.html, pues la estructura sería la siguiente:

<A HREF=»pagina2.html»> Ir a la pagina 2 </A>

En este ejemplo suponemos que ambas páginas se encuentran en el mismo directorio, pero puede ocurrir que pagina1.html se encuentre en el directorio principal y pagina2.html se encuentre en otro, pongamos por ejemplo, el directorio subdir en otro alarde de originalidad por mi parte, tendríamos que hacer lo siguiente:

<A HREF=»subdir/pagina2.html»> Ir a la pagina 2 </A>

Pero también nos puede ocurrir a la inversa y encontrarnos en pagina2.html, dentro del directorio subdir y queremos enlazar con pagina1.html, ¿como podríamos hacerlo?, pues poniendo «../«, es decir, nuestro enlace quedaría tal que así:

<A HREF=»../pagina1.html> Ir a la pagina 1 </A>

  • Enlaces con una pagina exterior:

En muchas ocasiones tendremos la necesidad de enlazar con una página que se encuentre fuera de nuestro sistema, para ello, será necesario conocer su dirección completa o URL (Uniform Resource Locator).

Conociendo este URL, sólo necesitaremos sustituir el XXX de nuestro destino de enlace por éste URL, por ejemplo, si queremos enlazar con google deberíamos poner lo siguiente:

<A HREF=»http://www.google.com«> Pulsa para ir a Google </A>

Fácil, ¿verdad?

  • Enlaces con una dirección de correo electrónico:

Si queremos enlazar con una dirección de correo electrónico debemos sustituir XXX (nuestro destino de enlace) por mailto seguido de la dirección de correo electrónico de la siguiente manera:

<A HREF=»mailto: dirección de email»> Mandame un email </A>

Con esto ya hemos tocado por encima los tipos de enlace en lenguaje HTML, sin embargo, más adelante volveremos a tocar los enlaces y nos adentraremos más en ellos puesto que abarcan mucho más de lo que se ha explicado en este capítulo.

Manual básico HTML – Práctica Cap 2.1

Primera Practica del curso básico de HTML

Vamos a poner en práctica todo lo aprendido hasta ahora.

Escribir en vuestro notepad lo siguiente:
[source language=’html’]

Mi primera pagina en HTML


Esta sera la primera practica del curso HTML



Vamos a ir comprobando lo que hace cada etiqueta



Este sera un texto normal, sin tocar nada.


Ahora lo ponemos en negrita


Y ahora en cursiva






Hemos dejado varios espacios para mostrar este
texto preformateado que
respeta los espacios y los
retornos del carro.





Y esta vez volvemos a dejar espacios
para mostrar un texto preformateado que no
respeta los espacios ni los saltos de
carro

Por ahora no sabemos hacer muchas cosas mas pero seguro que iremos aprendiendo.


[/source]

Ahora sólo teneis que guardarlo como extensión HTML y, posteriormente, cuando lo abrais pulsando sobre el se os desplegará en vuestro explorador algo así:

¿Os ha salido bien?

¡¡¡Enhorabuena!!!!, ¡¡¡ya habéis creado vuestro primer documento HTML!!!!

Manual HTML Cap 2.1 – Dando Formato al Texto

Manual HTML Capitulo 2.1 – Dando Formato al Texto

Vamos a empezar a meternos un poco más en el lenguaje HTML una vez vista la estructura básica que debemos respetar al trabajar con este lenguaje, este segundo capítulo constará de dos entregas, una primera donde conoceremos los formatos básicos que podemos darle  a nuestro texto, y una segunda donde trataremos las listas (desordenadas, ordenadas y de definición).

Y empezaremos con los textos, elemento imprescindible de cualquier web y que debemos saber tratar al menos de una manera básica si queremos que nuestros diseños sean, como poco, decentes.

Una etiqueta importante será la <P>, que no tiene etiqueta de cierre y que servirá para separar los distintos párrafos entre sí dejando una línea en blanco entre ellos. Si queremos separar los párrafos sin dejar una línea en blanco entre ellos nuestra etiqueta será <BR> (break o romper), que tampoco tiene etiqueta de cierre, y, por último, si entre los párrafos deseamos dejar varias líneas en blanco, no bastará con repetir la etiqueta <P>, sino que habrá que combinarla con <BR>, es decir, que para dejar 3 líneas en blanco pondríamos:

<P><BR>
<P><BR>
<P><BR>

Otra etiqueta que nos puede venir bien para las prácticas será la etiqueta <HR> (Horizontal Rule), que introducirá una raya horizontal tan ancha como la pantalla que nos servirá como separador.

Por último, si dejamos varios espacios en blanco entre dos palabras observaremos que el navegador sólo reconoce uno de ellos, por lo que si queremos forzarle a que reconozca estos espácios de más debemos usar el código &nbsp (Non breaking Space).

Y una vez aclarado estos puntos, empecemos de lleno con los textos que es lo que de verdad nos interesa en este capítulo.

Para empezar, los textos pueden tener unas cabeceras, comprendidas entre las etiquetas <H1> a <H6>, con sus correspondientes etiquetas de cierre </H1> hasta </H6>, dichas etiquetas indican el tamaño del texto y están ordenadas de mayor (H1) a menor (H6).

Las etiquetas para destacar algo en negrita será <B> con su correspondiente </B>, y para la letra tipo cursiva <I> con su etiqueta de cierre </I>.

Estas son las principales etiquetas para el texto, pero a continuación os expongo algunas más:

<CENTER> y </CENTER> centrará nuestro texto en la pantalla.

<PRE> y </PRE> — Estas etiquetas preformatearan el texto que se encuentren entre ellas como si hubieras sido escrito con una máquina de escribir, con una fuete de espaciado fijo y que respetará los retornos del carro y los espacios en blanco. Algo que ya vimos que no pasaba normalmente.

<TT> y </TT>, también conseguiremos que el texto tenga la apariencia de haber sido realizado mediante una máquina de escribir, pero, a diferencia de las etiquetas anteriores, este no preformateara el texto, sólo cambiará su apariencia.

<BLOCKQUOTE> y </BLOCKQUOTE> destacará una cita textual dentro del texto general.

<SUP> y </SUP> escribirá un índice, por ejemplo para escribir m2.
<SUB> y </SUB> escribirá un subíndice, por ejemplo para vx

Con esto damos por finalizada la primera parte de este segundo capítulo, dejaremos para la segunda parte las listas, ya sean desordenadas, ordenadas o de definición.

Introducción al Manual Básico de HTML

Introducción del manual básico de HTML

Banner Cursos y Manuales

MANUAL BÁSICO DE HTML

¿Qué es eso de HTML?

HTML son las siglas de Hypertext Markup Language (Lenguaje de macas de Hipertexto), un lenguaje mediante el cual se construyen las páginas web, el lenguaje con el que se escriben los millones de documentos que hoy existen en la World Wide Web (WWW).

Cuando accedemos a uno de estos documentos, el cliente (ya sea Netscape, Mozilla, IE…) los interpretan y los despliega, por eso, el lenguaje HTML es un estándar reconocido en todo el mundo y, como define W3C (World Wide Web Consortim -es el organismo que define las reglas del HTML), el HTML es un un lenguaje reconocido universalmente y que permite publicar información de forma global.

Un poco de historia
Continuar leyendo «Introducción al Manual Básico de HTML»

Presentación manuales básicos

Presentación de los manuales y cursos de zonamasters.com, en principio seran tres manuales basicos, uno de HTML, uno de PHP y otro de CSS

Banner Cursos y Manuales

Viendo que este blog está un poco abandonado, vamos a tratar de revivirlo con una serie de cursillos básicos que seguro que le resultarán de utilidad a todos aquellos que se acercan por primera vez al mundo de la creación web.

Para empezar, ya se que para algunos al principio se haran algo pesados para los que tienen una base ya que empezaremos por un nivel muy muy básico, pero seguro que con el tiempo también le sacareis provecho a estos manuales.

En principio, publicaré 3 manuales que se alargarán bastante en el tiempo, por lo que no seais muy impacientes, el primero de ellos será un Manual Básico de HTML, posteriormente, un Manual Básico de PHP y, para terminar, un Manual Básico de CSS.

Todos ellos tendran como objetivo capacitarnos para entender de una manera básica los comandos y sentencias que hay a nuestra disposición, lo que nos resultará sumamente útil al configurar nuestro Blog bajo WordPress por ejemplo.

Y como el más inmediato va a ser el Manual de HTML, voy a presentar cómo se estructurará el mismo:

Constará de unos 10 capítulos (puede variar en función de lo extenso que se me hagan algunos), que en principio serán los siguientes:

  1. Estructura de un documento HTML
  2. Dar forma al texto
  3. Enlaces
  4. Inserción de imágenes
  5. Inseción de caracteres especiales.
  6. Selección de fondos
  7. Tablas
  8. Formularios
  9. Trabajar con Frames
  10. Inserción de sonidos

Espero que estos manuales os sirvan de utilidad y que juntos animemos zonamasters.com

Por cierto, si quereis cualquier otro manual o teneis alguna duda en los capítulos que posteo, ¡¡¡¡no dudeis en escribir un comentario!!!!.

 

Nuevo Blog de Diseño en Archivados

Hemos dejado un poco abandonado a ZonaMasters, pero no ha sido porque hemos querido, sino porque pasamos estas semanas intentando concretar un proyecto que por suerte a salido. Se trata de un nuevo blog de la Red Archivados llamado 1001Photoshop.

Como su nombre lo sugiere, se trata de una página donde podéis disfrutar de varios tutoriales para aprender a usar esta poderosa herramienta de Adobe. Dichos tutoriales, además de estar detalladamente explicados paso a paso, también vienen acompañados (en su gran mayoría) por vídeos en alta resolución (1024×768), alojados en el servidor Rapidshare, para que os despeje cualquier duda que podáis tener al finalizar la lectura.

Como sabemos, el desarrollo Web va de la mano con el diseño, creación y manipulación de imágenes, es por esto que en el equipo estamos seguros que este nuevo blog os va a ser de mucha utilidad.

De hecho, al día de hoy ya hay algunos tutos interesantes, donde aprendimos a utilizar las herramientas correspondientes para lograr el retoque fotográfico, la creación de pinceles etc. Además, vamos a ir añadiendo descargas de pinceles, plugins y demás utilidades que podrían convertirse en elementos necesarios para acelerar los trabajos que realicemos.

Dicho esto, os esperamos en este nuevo blog que va haciendo crecer aún más a la Red Archivados.

Cambiar el Header de un tema WordPress

Tener un blog no necesariamente quiere decir que seamos WebMasters y estemos inundados de conocimientos de PHP o HTML, por lo tanto no todos pueden crear sus propios temas para Blogs. Es por esto que existen temas prontos para la descarga y así hacernos la vida más fácil al momento de crear un Blog.

Temas para WordPress hay cientos, se pueden descargar todos desde esta página. Pero no siempre los temas de adecuan a nuestros intereses, ya sea por el nombre o los colores.

En este sencillo pero efectivo tutorial vamos a modificar el Header de nuestro blog para que sea acorde a la idea que tengamos en mente para el mismo.

Para este ejemplo, utilicé el tema «Activate«, creado por Brian Gardner para WordPress.

Lo primero que deberemos hacer es descargar el tema desde aquí. Una vez hecho esto descomprimimos la carpeta dentro del directorio ‘wordpress/wp-content/themes’ dentro de nuestro servidor. Luego activaremos dicho tema yendo al panel del blog y seleccionando ‘Presentación‘ (Presentation), aparecerá una lista de los temas habilitados, entre los que figura el que acabamos de descargar. Con sólo hacer un clic sobre él ya estará activado.

En este caso haremos un header para ZonaMasters.Com, lo que nos obligará a cambiar el nombre Activate por el de nuestro Blog:

  1. Dentro de la página principal del blog, le damos clic derecho sobre la imagen (header) y seleccionamos «ver imagen«, se nos abrirá otra ventana con sólo la imagen que queremos cambiar.
  2. La misma imagen la guardaremos, mediante clic derecho y seleccionando ‘Guardar Imagen como…’ en el disco duro de nuestro PC, sin cambiarle el nombre ni el formato, esto es muy importante para que luego el PHP reconozca la nueva imagen como el Header original. Puede pasar que el formato de la imagen sea Gif, lo que no nos permitirá agregarle capas en la edición con Photoshop, si este es el caso, cambiaremos el modo de la imagen (Imagen/Modo/Color RGB), pero deberemos recordar volver al formato original cuando hayamos terminado la edición, guardándola como archivo Gif.
Figura 1-Seleccionar imagen

Figura 2-Guardar imagen

Ya está lista la imagen para editarla en nuestro Photoshop. Yo utilizaré la versión CS3, pero los pasos que verán están también disponibles en todas las versiones Photoshop.

  1. Una vez abierta la imagen en el Photoshop, procederemos a rellenar su contenido con el color de nuestro agrado, en este caso utilizaré el color del Header original de ZonaMasters (082334) y presionando ‘Alt+Supr‘ o seleccionando la herramienta ‘Bote de Pintura‘ (Herramienta bote de pintura) y haciendo clic sobre la imagen.
  2. Luego añadiremos algunos efectos al fondo para que no se vea tan plano. Vamos a la ventana ‘Capas’ y le damos doble clic a la capa ‘Fondo‘, pulsamos Ok a la ventana que aparece y volvemos a darle doble clic a la capa (que ahora se llama ‘Capa 0‘). Se nos abrirá la ventana ‘Estilo de Capa‘.
  3. Le añadimos el efecto ‘Resplandor Exterior‘ donde seleccionaremos un color un poco más claro que el del fondo y configuraremos de la siguiente manera:

Modo de fusión = Normal
Opacidad = 95%
Ruido = 0%
Color de Resplandor = 40a0b8
Técnica = Más Suavizado
Origen = Borde
Retraer = 0%
Tamaño = 10 Px

Figura 3-Estilo de capa para el fondo

Figura 4-Resultado del fondo

Ahora seleccionaremos una fuente de nuestro agrado para colocar el nombre de nuestro Blog en el Header.

  1. Luego de seleccionada nuestra fuente, seleccionamos la herramienta ‘Texto‘ (Herramienta texto) y posicionaremos el cursor en el centro de la imagen. Escribimos el nombre. Si el texto no se ve, es porque está del mismo color del fondo. Lo que deberemos hacer es ir a la ventana ‘Carácter‘ (Ventana/Carácter) y, con el texto seleccionado, cambiamos el color y lo posicionamos donde más nos agrade.
  2. Ahora llega el momento de agregarle algunos efectos al texto. Doble clic a la capa del texto y se nos abrira otra vez la ventana ‘Estilo de Capa‘ y seleccionaremos el efecto ‘Resplandor Exterior‘ con esta configuración:

►Modo de Fusión = Color más Claro
►Opacidad = 75%
►Ruido = 0%
►Color de Resplandor = befff4
►Técnica = Más Suavizado
►Extender = 0%
►Tamaño = 10 Px
Figura 5-Estilo de capa para el texto
Figura 6-Resultado del texto

Ahora sólo resta agregarle algunos «adornos» para hacer nuestro Header más vistoso. Lo que recomiendo a partir de ahora es investigar sin miedo todas las posibilidades que nos da esta poderosa herramienta llamada Photoshop, que son infinitas y muy sencillas de utilizar. Otra cosa que recomiendo es que no toméis este tutorial al pie de la letra, ya que es sólo una sencilla guía de las cosas que podréis hacer en poco tiempo.

Figura 7-Banner terminado

Luego que tengamos pronto nuestro nuevo Header, deberemos optimizarlo para la Web, de manera que no quede muy pesado y haga demorar la carga de nuestro Blog. Para eso presionaremos las teclas Ctrl+Shift+Alt+S y se nos abrirá la ventana ‘Guardar para Web y Dispositivos‘ donde configuraremos las siguientes opciones:

Figura 8-

Configuracion para la exportacion

De más está decir que deberemos guardar el archivo resultante con el mismo nombre y formato del original (en este caso es header.gif)

Ya tenemos pronto nuestro Header, ahora sólo falta subirlo a nuestro servidor y reemplazar el existente. Para eso deberemos ir a la ruta del tema (wordpress/wp-content/themes/carpeta del tema/images) y reemplazar la imagen.
Figura 9-Banner ya cambiado

Como siempre decimos, si tenéis alguna duda, sólo hace falta explayarla en los comentarios y a la brevedad os ayudaremos.

Más adelante volveremos con más tutoriales para seguir personalizando nuestros temas WordPress.