26 ago 2016

Diseñando la estructura una página web

Diseñando la estructura

Conociendo las estructuras web más utilizadas, ya podemos empezar a dibujar la estructura específica de nuestra página web, dibujando y posicionando a nuestro gusto los bloques de menús, contenido, gráficos, y los sub-bloques dentro de cada uno de los anteriores.

Cada diseñador tendrá su propio método para plasmar la estructura imaginada de una página web a la pantalla de su ordenador. Aquí transcribimos el método de trabajo específico de un diseñador: “Comienzo por bosquejar algunos posibles diseños sobre papel. Después de unos pocos de estos bocetos, decido cual me gusta más o cual se adapta mejor a los requisitos del cliente y el salto al Photoshop (o freehand), y uso la herramienta de rectángulo para bloquear las áreas que he marcado en mi papel. Una vez que he definido mi diseño, experimento con los colores de fondo y de los rectángulos hasta tener un esquema de color sólido. Y sigo trabajando con píxeles hasta que, finalmente, tengo un borrador para mostrar al cliente.”

Ejemplo de diseño de la estructura:

Ejemplo de diseño para la página: http://www.ginecologiavhebron.com (diseño de Deumonforte y programación Javajan)

Trabajando con bloques rectangulares

La estructura de una página web se sub-divide en bloques rectangulares, dentro de los cuales vamos a posicionar los diferentes elementos de diseño o contenido. Más tarde, al aplicar diseño sobre estos rectángulos podemos enmascararlos eliminando los bordes o utilizando formas curvas, pero es importante conocer que cualquier estructura web está basada en rectángulos horizontales (no en diagonal).

A pesar de todo, el diseño de la estructura web no finaliza al posicionar los diferentes bloques, porque tenemos de definir como se adaptaran y comportaran en función de la resolución de pantalla.

Estructura Estándares de una página web

Estructuras estándares

www.mcfarlanechangemanagement.com.au

Estructura de una página web

Una vez ya tengamos clara como estará estructurada la planta de la casa (sitio web a diseñar), podemos empezar a diseñar la estructura de cada habitación (página web), decidiendo donde pondremos los muebles (contenido) y la decoración (elementos gráficos). Con especial esmero tendremos que estructurar el salón de la casa (página principal), donde recibiremos a todos nuestros invitados (usuarios), para que sea lo más confortable posible (diseño) pero también aporte el máximo de información sobre los anfitriones y sobre los contenidos de las distintas habitaciones (usabilidad).

Para determinar la estructura de cada página web, tendremos que definir (entre otros):

Qué tipo de web quiere el cliente: tipo tarjeta de visita, tipo catálogo, tipo anuncio de revista, tipo juego, una combinación entre las anteriores...
Qué tipo de información desea presentar el cliente: mucha imagen, mucha información escrita...
Qué mensaje debería de recibir el usuario cuando abra la página principal.
Hacía qué secciones del web se debería sentir atraído.
Qué elementos comunes deben presentarse en todas las páginas (por ejemplo sistema de navegación).
Qué contenido específico debería presentarse en cada página.

De todos modos, antes de empezar a diseñar la estructura de una página web, deberíamos conocer las estructuras estándares utilizadas normalmente.

Arquitectura de un sitio web

Algunos dicen que diseñar para web es más parecido a la arquitectura que al diseño gráfico. Como en una casa, antes de escoger los muebles, el color de las cortinas o la iluminación, es importante saber cómo estará estructurada la planta, cómo será el salón, donde estarán las habitaciones, como se accederá a ellas, donde estarán las ventanas... Asimismo en la web, si la estructura no es sólida e intuitiva, el arte de la página no sirve para nada.

Antes de empezar a trabajar en el aspecto puramente estético de las páginas web, imaginando animaciones impresionantes y gráficos atractivos, es indispensables pensar en la estructura del sitio web. Para eso, fundamentalmente, tendremos que:

Definir las secciones y páginas web que debe tener el sitio.
Escoger las secciones o páginas a las que podremos acceder desde la página principal (o de inicio).
Decidir si alguna sección o página tiene que destacar más respecto las demás.
Distribuir el contenido a presentar entre las distintas secciones y páginas.
Concretar las distintas vías de acceso a cada una de páginas web del sitio (es importante ofrecer múltiples maneras de acceder a la misma información).
Especificar el número de idiomas que dispondrá el sitio web.

Para ayudar a concretar la estructura final del sitio web, muchos diseñadores y programadores web recomiendan hacer un esquema a mano alzada, con post-its o con un simple programa de diseño del ordenador, que nos permita realizar cambios fácilmente a medida que redescubrimos mejores estructuras para nuestro sitio web.

Ejemplo de la estructura de un sitio web en el que se detalla todas las páginas y el recorrido para acceder a ellas.

Normalmente, el contenido de un sitio web se estructura en diferentes páginas web, pero debemos mencionar una tendencia (no muy utilizada ni recomendada), llamada “parallax scrolling”, que estructura todos los contenidos en una solo página web y permite que el usuario acceda a ellos mediante enlaces internos o bajando por la barra de desplazamiento o “scroll”.

Diferencias básicas entre diseño impreso y diseño web

Interactuar en vez de mostrar

El diseño impreso está basado en ver, pero el diseño web está basado en hacer.
La función del diseño tradicional es contar historias, la misión del diseño digital es entablar conversaciones.
El soporte gráfico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales. El diseño impreso es estático, en cambio, la experiencia de un sitio web se define por la interacción del usuario con diseño y contenido. Por ejemplo, un usuario hace clic sobre la navegación o se desplaza hacia abajo para leer una página.
Un buen diseño impreso tiene que entenderse y ser bonito, pero un buen diseño web tiene que entenderse, facilitar la navegación (usabilidad) y ser bonito. Normalmente se recomienda priorizar la usabilidad, después el contenido y si queda tiempo el arte. Aunque esto no implica que el buen diseño se deba sacrificar para ganar usabilidad, en esta guía vamos a explicar cómo hacerlos compatibles.

Espacio y entorno indefinido en vez de definido

El diseño impreso se visualiza en espacio limitado pero el diseño web se tiene que poder visualizar en múltiples espacios, además el diseño web se puede extender fuera de la pantalla (podemos que utilizar barras de desplazamiento o scrolling).
Cuando se diseña para imprimir, el resultado va a ser exactamente igual o muy parecido al original que hemos diseñado y guardado, en cambio, cuando se diseña una web, debemos considerar factores externos de los cuales no tenemos ningún control (el usuario puede tener resoluciones de pantalla diferente o utilizar un navegador web distinto, además de no tener las tipografías utilizadas,…).
El diseño impreso se visualiza igual en cualquier revista, en cambio, los diferentes navegadores web pueden presentar los elementos del diseño con sutiles variaciones.
A veces, el peor dolor de cabeza de un maquetador web es como hacer funcionar una web en Internet Explorer, Firefox, Chrome, smartphones, tablets… sin que alguno muestre errores.

Problema con las tipografías

En el diseño impreso se puede utilizar cualquier tipografía, pero el diseño web normalmente solo muestra las tipografías que el usuario tenga instaladas en su ordenador. Más adelante veremos que existen diversas soluciones a este problema, por ejemplo poniendo el texto con el formato y la tipografía deseada en imágenes, pero tendremos que tener en cuenta las limitaciones.

Pixeles en vez de pulgadas y centímetros

En el diseño impreso se trabaja con pulgadas y centímetros, pero en el diseño web solo se trabaja con pixeles. Así pues, dependiendo de la resolución de la pantalla (pixeles por pulgada o dpi) una misma imagen se puede ver mayor o menor. Las medidas de los diseños web siempre son píxeles, aunque en ocasiones se pueden utilizar porcentajes de pantalla o porcentajes de área (se explica más adelante).
Si les cuesta diseñar con pixeles, pueden utilizar la resolución 72 dpi, que es la resolución estándar de la mayoría de pantallas de ordenador. Diseñando a esta resolución, la mayoría de usuarios verán las imágenes y elementos de su diseño al mismo tamaño que en su pantalla.

Píxel: la menor unidad de medida en la pantalla (un punto de luz). La mayoría de pantallas tienen una resolución de 72 píxeles por pulgada o dpi.

Archivos pequeños en vez de grandes

El diseño impreso se trabaja con altas resoluciones de archivos y se procura mantener la mejor calidad en las imágenes y originales, mientras que en el diseño web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir que el usuario abra la página rápidamente. En diseño web, debemos optimizar las imágenes y animaciones, es decir, bajar la resolución lo más posible sin perder una calidad significativa. El peso (calculado en Kb o Mb) de una página web se calcula como la suma de todos pesos de los documentos que abre una página web (imágenes, archivos flash, animaciones...).
Con las conexiones de internet actual podemos calcular muy orientativamente que por cada incremento de peso de 500Kb a 1Mb, una página tarda un segundo más a descargarse y abrirse.

RGB en vez de CMYK

En el diseño impreso se trabaja colores substractivos o CMYK, en cambio en el diseño web solo se trabaja con colores aditivos o RGB.
El color es un error común de los diseñadores gráficos cuando quieren diseñar para web. En la escuela de diseño te enseñan a utilizar siempre CMYK para que la impresión quede bien, pero en el mundo web, es todo lo contrario, las pantallas emiten luz únicamente interpretan datos RGB o aditivos.

Posible editar después de publicar

El diseño impreso no se puede modificar después de la impresión. Por suerte el diseño web se puede modificar después de la publicación, se pueden corregir errores, completar contenido no introducido inicialmente, o mantener actualizada la información. En este sentido, es mejor evitar diseños que no sean flexibles, para que en el futuro el diseño se pueda adaptar a diferentes tamaños de los contenidos, sin perjudicar la estética del conjunto.

18 mar 2016

Su primera página con PHP

Comience por crear un fichero llamado hola.php y póngalo en el directorio raíz de su servidor web (DOCUMENT_ROOT) con el siguiente contenido:

Ejemplo #1 Nuestro primer script de PHP: hola.php

<html>
 <head>
  <title>Prueba de PHP</title>
 </head>
 <body>
 <?php echo '<p>Hola Mundo</p>'; ?> </body>
</html>

Utilice su navegador web para acceder al fichero con el URL de su servidor, finalizado con la referencia al fichero /hola.php. Si está programando localmente, este URL será algo parecido a http://localhost/hola.php o http://127.0.0.1/hola.php, pero esto depende de la configuración de su servidor web. Si todo está configurado correctamente, el fichero será analizado por PHP y se enviará el siguiente contenido a su navegador:

<html>
 <head>
  <title>Prueba de PHP</title>
 </head>
 <body>
 <p>Hola mundo</p>
 </body>
</html>

Este programa es extremadamente simple y realmente no es necesario utilizar PHP para crear una página como esta. Lo único que muestra es: Hola mundo empleando la sentencia echo de PHP. Observe que el fichero no necesita ser ejecutable o especial de ninguna forma. El servidor reconoce que este fichero necesita ser interpretado por PHP debido al empleo de la extensión ".php", ya que el servidor está configurado para enviarlo a PHP. Piense como si fuera un fichero HTML normal que tiene una serie de etiquetas especiales disponibles con las que puede hacer muchas cosas interesantes.

Si intentó usar este ejemplo y no produjo ningún resultado, se le preguntó si deseaba descargar el fichero, o se mostró todo el fichero como texto, lo más seguro es que PHP no se encuentre habilitado en su servidor o no esté configurado adecuadamente. Pídale a su administrador que lo habilite utilizando el capítulo Instalación del manual. Si está trabajando localmente, lea también el capítulo dedicado a la instalación para asegurarse de que todo esté configurado adecuadamente. Asegúrese de que está accediendo al fichero mediante http y que el servidor muestre el resultado. Si está abriendo el fichero desde el sistema de ficheros, probablemente no será analizado por PHP. Si el problema persiste, no dude en usar alguna de las múltiples opciones del » Soporte para PHP.

El objetivo de este ejemplo es el formato de las etiquetas especiales de PHP. En este ejemplo utilizamos <?php para indicar el inicio de una etiqueta de PHP. Después ponemos la sentencia y abandonamos el modo PHP añadiendo la etiqueta de cierre ?>. De esta manera, se puede entrar y salir del modo PHP en un fichero HTML cada vez que se quiera. Para más información, lea la sección del manual titulada Sintaxis básica de PHP.

Nota: Una observación sobre los avances de línea

Los avances de línea tienen poco sentido en HTML, aunque sigue siendo buena idea hacer que el código HTML se vea limpio y claro poniendo avances de línea. PHP automáticamente eliminará los avances de línea que estén después de una etiqueta de cierre ?>. Esto puede ser muy útil al poner muchos bloques de PHP o incluir ficheros que contienen PHP y que se supone que no deben mostrar nada. Al mismo tiempo, puede resultar un poco confuso. Se puede poner un espacio después de la etiqueta de cierre ?> para mostrar forzosamente un espacio y un avance de línea, o se puede poner un avance de línea explícito en el último echo/print dentro del bloque de PHP.

Nota: Una observación sobre los editores de texto

Hay muchos editores de texto y Entornos de Desarrollo Integrados (IDE por sus siglas en Inglés) que se pueden emplear para crear, editar, y gestionar ficheros de PHP. Se puede encontrar una lista parcial de estos en » Lista de editores de PHP. Si desea recomendar un editor, por favor visite la página mencionada anteriormente y pregunte al mantenedor de la página para que lo incluya en la lista. Contar con un editor que resalte la sintaxis puede ser de mucha ayuda.

Nota: Una observación sobre los procesadores de texto

Los procesadores de texto como StarOffice Writer, Microsoft Word y Abiword no son buenas opciones para editar ficheros de PHP. Si desea utilizar uno de estos programas para probar este script, asegúrese de guardar el documento como texto sin formato, o de lo contrario, PHP no será capaz de leerlo y ejecutarlo.

Nota: Una observación sobre el Bloc de Notas de Windows

Si escribe sus scripts de PHP usando el Bloc de Notas de Windows, debe asegurarse de que sus ficheros sean guardados con la extensión.php. (El Bloc de Notas automáticamente añade la extensión .txt a los ficheros a menos que siga los siguientes pasos para prevenirlo). Cuando guarde el fichero y el programa le pregunte qué nombre desea dar al fichero, entrecomille el nombre (es decir, "hola.php"). Una alternativa es hacer clic en el menú desplegable "Documentos de Texto (*.txt)" del cuadro de diálogo "Guardar como", y cambiar a la opción "Todos los archivos (*.*)". Aquí puede escribir el nombre del fichero sin las comillas.

Ahora que ha creado un pequeño script de PHP que funciona correctamente, es hora de crear el script de PHP más famoso: hacer una llamada a la función phpinfo() para obtener mucha información útil acerca de su sistema y configuración, como las variables predefinidasdisponibles, los módulos de PHP cargados, y los ajustes de configuración. Tómese algo de tiempo para revisar esta importante información.

Ejemplo #2 Obtener la información del sistema desde PHP

<?php phpinfo(); ?>

Note on Line Feeds

These are 2 alternative ways to add a line feed after a php block.

---
1. Echo a "\n" at the end of the block.

<?php
    echo "Hello World";
    echo "\n";?>
Alternatively you can also concatenate "\n" to the last echo/print in the block.

<?php
    echo "Hello World" . "\n";?>
Note: the string "\n" must be inside double quotes; using single quotes will output the literal string.

---
2. Add two line feeds after the closing ?> tag.

By explicitly adding two line feeds after the closing ?> tag, the first one will be removed by php, and the second one will appear in the output.

11 mar 2016

Blogilo; maneja tu WordPress desde Linux

WordPress nos ofrece una plataforma web para escribir, gestionar y trabajar nuestros blogs, pero también existen aplicaciones móviles y programas no oficiales que hacen más sencillo y cómodo su uso.

Si utilizas Linux, específicamente Ubuntu, hay un cliente de WordPress para ti. Su nombre es Blogilo y te permite trabajar, organizar y gestionar varias cuentas a la vez desde servicios como Blogger ywordpress.org, entre otras.

Blogilo; útil y lleno de funciones

Este programa, que es completamente gratuito, tiene funciones similares a las de Windows Live Writer, la aplicación nativa para blogs de Windows. Con una agradable interfaz intuitiva, es realmente simple de utilizar.

La facilidad de uso no hacen que Blogilo sea un programa básico, al revés, nos permite hacer casi de todo: Desde componer post a añadir imágenes, vídeos, configurar aspectos específicos de cada entrada, acceder a un editor HTML y, por supuesto, manejar nuestros posts una vez listos.

A la hora de escribir, podemos hacerlo sin necesidad de conexión a Internet y, una vez que tengamos acceso a la red, subirlos directamente sin mayor trámite.

Lo bueno que tiene Blogilo, es que puede ser utilizado por usuarios básicos, medios y avanzados, ya que hay funciones para todos, no importa el nivel de conocimientos.

Qué tiene de especial Blogilo

¿Por qué utilizar Blogilo y no la plataforma online de WordPress? La primera razón sería la comodidad en su procesador de texto, el cual tiene pestañas que te permite ir desde la zona de escritura a la de HTML y vista previa sin tener que usar otra ventana.

A la hora de añadir extras a nuestro WordPress, tenemos la posibilidad de agregarlos fácilmente desde plataformas como YouTube, trabajar bien las imágenes que irán en tu post, usar categorías, añadir etiquetas y, si tienes más de un blog, mantenerlos de forma separada, pudiendo cambiar de uno a otros sin mayor dificultad.

Blogilo es de código abierto, agradable a la vista, fácil de usar y, si bien está en inglés, el lenguaje de WordPress es casi universal.

Puedes descargar Blogilo desde su sitio oficial, desde donde también puedes acceder a su SDK y código.

Crear post de WordPress desde Google Drive con Google Docs to WordPress

Ya no es necesario tener instalado un procesador de texto para redactar nuestros posts, sólo basta con tener un navegador y acceso a Internet, eso gracias a Google Drive, antes llamado Google Docs, que nos entrega una completa suite de ofimática online.

Si utilizas Google Drive para redactar tus posts y, luego abres tu WordPress, creas una nueva entrada y copias el texto, estás perdiendo tiempo, ya que existe una aplicación web que nos facilita todo.

Su nombre es Google Docs to WordPress y, lo que hace es exportar documentos de texto que hemos creado en Google Drive directamente a WordPress quedando en forma de entrada. Incluso mantiene el formato que le hemos dado en el procesador de texto.Google Docs to WordPress; Publicar nunca fue tan fácil.Esta aplicación web, que se instala en el navegador Google Chrome, sólo requiere que tengas una cuenta en Google y un acceso a WordPress con los permisos necesarios. Con una configuración simple, ya estás listo para trabajar.

Para empezar, crea una documento de texto en Google Drive y escribe tu entrada o post para WordPress. Una vez listo, guárdalo y dirígete a tu listado de archivos.

Ahora, selecciona el recuadro al lado del archivo de texto que quieres enviar a WordPress y, haciendo clic con el botón derecho del mouse, vas a Abrir con y le das clic a Google Docs to WordPress.

A continuación, tendrás que ingresar la dirección del blog de WordPress al que deseas subir la imagen, así como también tu nombre de usuario y contraseña. Una vez listo, el archivo se subirá automáticamente en forma de entrada.

La primera vez que lo uses, tendrás que dar los permisos respectivos a la aplicación, de allí en adelante no te lo pedirá.
Beneficios de Google Docs to WordPress

Si Google Drive es tu procesador de texto usual, con esta aplicación online te salvas la tarea de tener que entrar a tu blog de WordPress, crear una entrada, pegar el texto, darle formato y añadir las imágenes, ya que todo eso lo haces en el documento online.

Publica directamente desde Google Drive

Los posts que crees en Google Drive y subas con Google Docs to WordPress, puedes incluir imagenes, las que se subirán junto al post, enlaces y un completo formato de texto, por lo que, literalmente, quedan listos para publicar.

Si lo deseas, al subir el post puedes marcar la opción que te permite publicarlo de inmediato, sin necesidad de ir a WordPress y hacerlo manualmente.

Puedes instalar Google Docs to WordPress desde la Chrome Web Store y es completamente gratuita.

Respalda tu blog en Dropbox con un simple plugin

Es importante tener un completo respaldo de nuestro blog y todos sus contenidos y, no basta con esté sólo en nuestro servidores, sino que siempre es mejor tener más de una copia.

¿Dónde almaceno mi respaldo extra? Si bien hay varias alternativas, una excelente es Dropbox, un servicio que seguramente conoces y usas para guardar fotos y archivos y, que ahora servirá para almacenar tu respaldo de WordPress.

¿Cómo lo hago? La magia se hace sola con el plugin WordPress Backup to Dropbox.

Respalda tu WordPress en Dropbox

El nombre del plugin nos dice todo. WordPress Backup to Dropbox es un plugin gratuito que te permitealmacenar una copia de tu respaldo de tu blog directamente en la nube, utilizando el servicio de Dropbox.

Esto funciona muy bien si tu blog no es extremadamente pesado, ya que Dropbox nos entrega una buena cantidad de espacio gratuito que podemos ampliar con ciertas acciones simples, por lo que fácilmente conseguirás más de diez gigas. Te recomiendo crear una cuenta exclusiva para el respaldo.

Para empezar a trabajar, hay que descargar e instalar WordPress Backup to Dropbox en nuestro blog.

Una vez instalado, llega la hora de configurar. Eso lo haces en la barra de herramientas de WordPress, donde al final verás WPB2D. Selecciona la opción Backup Settings. Añade tus credenciales de Dropbox y entrega al plugin el permiso para acceder a tu cuenta.

Asimismo, puedes elegir que carpetas se van a respaldar y, configurar respaldos automáticos, aunque también puedes hacerlos de forma manual. La cantidad de tiempo que demore el respaldo dependerá del tamaño de éste.

WordPress Backup to Dropbox nunca tiene acceso a tu contraseña de Dropbox, lo que te entrega un extra de seguridad y, tampoco puede modificar la estructura o archivos de tu WordPress, lo que es importante.

WordPress Backup to Dropbox es gratuito, pero puedes pagar por opciones Premium como por ejemplo que el respaldo quede dentro de un Zip u otras funciones que no cambian el objetivo del plugin, por lo que no son necesarias.

Te recomiendo utilizar este plugin. Si te falta espacio en Dropbox, puedes suscribirte para obtener gigas extra pagando una cantidad mensual que no es alta, pero si se trata de un blog común de WordPress, el espacio gratuito debería ser suficiente.