Tutoriales en la Web

Haciendo websites de cero con Stiqr

Posteado el 02. Apr, 2010 por Webi in Desarrollo Web, Wordpress

La mayoría de usuarios de WordPress sabemos lo que cuesta personalizar los temas del blog. Y si lo hacemos debemos irnos a los códigos fuentes y en muchas ocasiones saber códigos de HTML, PHP y CSS.

Sin embargo eso está por cambiar con la herramienta que les traemos a presentar.

El plugin se llama Stiqr y aunque todavía se encuentra en su fase Beta los diseñadores gráficos lo encontrarán sumamente útil para concentrarse ahora sí en sus diseños y no en códigos.

Pero empecemos a ver como funciona esta herramienta para WordPress. Es un plugin WYSIWYG, lo que significa en inglés What You See is What U Get o traducido, Lo que ves eso recibes. Es un editor que con unos sencillos pasos podrás instalar en tu blog. Como te puedes dar cuenta fucniona para WordPress, Blogger y Tumblr

Y todo está pensando para sea usado como una aplicación de desarrollo web aunque no tengas el conocimiento

Webpages desde cero con Stiqr

Webpages desde cero con Stiqr

Configuración

Si siempre quisiste diseñar tu propia website pero todos los términos técnicos te asustaban ahora es el momento perfecto de iniciar. Visita Stiqr e inicia tu experiencia

Webpages desde cero con Stiqr

Claro que debes hacer algunos pasos para poder iniciar como registrarte. Una vez que te hayan enviado el código guardalo ya que te servirá para más adelante en el proceso.

Website de cero

Una vez que tengas el codigo ingresa al admin de tu WordPress

Website de cero

En la barra de navegación a la derecha ve a Apariencia / Editor.

Website de cero

Ahora busca el footer.php y presiona el link para editarlo.

Website de cero

Inserta el codigo como se muestra en la captura y dale update file o actualizar

Website de cero

Ahora visita tu sitio.

Eso concluye la preparación

Haciendo websites de cero con Stiqr

Haremos un ejemplo de cómo convertir tu blog como un álbum de recorte de estampitas

En el front page de tu WordPress presiona las teclas shift+F2 para iniciar con Stiqr. Como es tu primera vez tendrás que registrarte ingresando tu correo

Haciendo websites de cero con Stiqr

Ahora continua seleccionando un password

Haciendo websites de cero con Stiqr

Si el registro fue exitoso te aparecerá una ventana como esta espera que la pagina se refresque y presiona una vez más shift+f2

Haciendo websites de cero con Stiqr

Se te pedirá que ingreses tu password para iniciar. Algunos pensarán que este paso es inecesario pero de veras necesita protegerte sino cualquier persona tendrá acceso. No querrás que cualquiera ingrese a tu blog de WordPress

Haciendo websites de cero con Stiqr

Una vez ingreses una barra de edición aparecerá en la parte de debajo de tu sitio. Puedes empezar usando la herramienta y dejar que tu creatividad fluya

Haciendo websites de cero con Stiqr

Claramente existen controversias de si usar esta herramienta sin embargo abrió la posibilidad para los diseñadores gráfico impresionantemente con sus opciones de WYSIWYG.

Preparando un canvas en blanco

Antes de iniciar necesitamos un canvas donde “pintar”

Primero crea el documento en blanco y puedes simplemente copier y pegar el codigo fuente HTML de este sitio web

http://html.comsci.us/examples/blank.html

Ahora cambia el titulo e inserta el código de stiqr como lo mostramos en la captura

Haciendo websites de cero con Stiqr

Ahora salva el document como html

Haciendo websites de cero con Stiqr

Dependiendo del editor que uses para crear el html te preguntará si deseas salvar el documento como html dile que si.

Haciendo websites de cero con Stiqr

Lo siguiente es subir el index.html a tu website utilizando alguna aplicación de FTP. Si estas haciendo un blog de cero no pongas ese archivo en el root. Crear mejor una carpeta y ponlo allí.

Haciendo websites de cero con Stiqr

Luego apunta tu navegador al url donde pusiste tu archivo

Ahora presiona shift+f2 y registrate para este sitio. Stiqr siempre solicitará que te registres por cada website que hagas.

Cuando la pagina se refresque oprime shift+f2 una vez más e ingres.

Asegúrate en esta fase ya tener claro el diseño gráfico que desees hacer.

Personalizando el area de dibujo

Si no eres especialista en dibujo te convendrá personalizar el area de grid. En este caso lo hicimos como aparece la captura

Haciendo websites de cero con Stiqr

Aparecerá la confirmación del cambio que acabamos de hacer

Haciendo websites de cero con Stiqr

El siguiente paso es el fondo

Haciendo websites de cero con Stiqr

Puedes utilizar imagenes de la web o de tu disco local y también puedes personalizar colores.

Hacer un website de cero

Presiona el boton de “stick it” para aplicar los cambios. Usa esto cada vez que efectúes un cambio.

Haciendo websites de cero con Stiqr

Luego seguirá lo demás que puedes personalizar a tu gusto.

Haciendo websites de cero con Stiqr

En nuestro caso seleccionamos fotos del area donde dice free images que son gratuitas y las puedes seleccionar de alli mismo del panel.

Haciendo websites de cero con Stiqr

Ahora selecciona el texto y como un editor puedes personalizar el tamaño, color etc.

Haciendo websites de cero con Stiqr

Al darle click derecho al element se desplegarán mas opciones incluyendo poder editar.

Haciendo websites de cero con Stiqr

Stiqr también tiene su area de HTML/CSS si prefieres utilizar codigos

Haciendo websites de cero con Stiqr

Para una rapida edición luego puedes solamente presionar donde dice “manage my stickers” y listo

Haciendo websites de cero con Stiqr

Y bueno esto es una introducción de lo que se puede hacer.

Visita la pagina de showcase para que veas lo que puedes hacer con esta herramienta. Esperamos te sirva para personalizar tus blogs

http://www.stiqr.com/showcase

AQUI TE DEJAMOS TAMBIÉN ESTE VIDEO QUE ESPERAMOS TE SIRVA

Articulos relacionados:

Tags: Wordpress