Este artículo ha sido contribuido por PSDtoWP.net

Quizás sería mejor comenzar aquí con el por qué. Alrededor de una cuarta parte de todos los sitios web se ejecutan en WordPress, la plataforma de blogs en línea. Esto lo convierte en uno de los sistemas de gestión de contenido de código abierto más populares del planeta.

La gran mayoría de los diseñadores web todavía usan Photoshop para diseñar un sitio web, aunque hay alternativas. Esto significa que muchos diseñadores de sitios web necesitan encontrar formas de convertir archivos PSD a un tema de WordPress sensible.

Ahora, esto puede parecer bastante sencillo. Sin embargo, convertir un archivo PSD en un sitio web de WordPress no es exactamente fácil. ¡Requiere mucho más que solo habilidades de Photoshop! Para convertir su archivo PSD en un tema sensible que se puede usar en WordPress, necesitará conocimientos sobre lenguajes de desarrollo web front-end como HTML, CSS y JavaScript, así como el lenguaje de programación back-end PHP.

Ahora que el por qué está fuera del camino, ¡es hora de proceder al cómo! Aunque el cómo ciertamente no es fácil, todavía se puede lograr en cinco pasos bastante simples de entender.

Paso Uno: Crear el diseño web

Vaya al paso dos si ya ha diseñado su sitio.

Hacer un sitio web es mucho más que simplemente crear un logotipo y poner un menú, una barra lateral, un pie de página y el contenido juntos. Las piezas de este rompecabezas necesitan ser creadas en primer lugar, y el proceso de esta creación es algo que no todos pueden hacer tan fácilmente.

El diseño web que cree debe ser el equilibrio perfecto entre forma y función, un diseño web que satisfaga una gran experiencia de usuario.

Investigación

Para crear un diseño web que cumpla con éxito los criterios de apariencia y funcionalidad, deberá realizar una investigación seria. En primer lugar, ¿quién es su público objetivo y qué quiere su público objetivo? Obviamente, estos son aspectos clave de su investigación.

Aprende de los Demás

Otro aspecto del diseño web que necesitas investigar son las técnicas que tus competidores han aplicado. Es muy probable que estos competidores estén mejor establecidos que usted, por lo que seguramente podrá aprender mucho del diseño que usan. Una vez que hayas hecho tu investigación y tengas una buena idea sobre cómo debería verse tu sitio web, deberías empezar a pensar en la funcionalidad. ¿Qué funciones quieres que posea tu diseño web?

Estructura de alambre

Una vez que tenga todo resuelto, póngalo en papel. Dibuja & ¡dibuja cómo imaginas que se vea tu sitio para tener una ayuda visual a medida que avanzas!

Diseño

Una vez que haya terminado de hacer los bocetos físicos / esquemas, estará listo para subirse a la silla del capitán y encender Photoshop. Lo primero que debe hacer antes de comenzar en serio es asegurarse de que está utilizando una cuadrícula basada en columnas como XXgrid. Esto hará que su diseño se ven realmente ordenado y alineado! Esto no es solo por estética. El uso de una cuadrícula basada en columnas para crear un diseño alineado hará que sea más fácil para usted o su desarrollador de front end, que desarrollará el HTML y CSS para crear un diseño optimizado y receptivo para tabletas y teléfonos inteligentes.

Antes de pasar al siguiente paso, recuerde que debe mantener sus archivos de diseño PSD organizados en capas, es decir, ¡cada sección debe tener su propia carpeta con los títulos correspondientes!

Paso Dos: Cortar el PSD

Una vez que haya creado un diseño web con el que esté completamente satisfecho, es el momento de la crisis. Básicamente lo que necesitas hacer ahora es el proceso de PSD a WordPress.

Los sitios web de hoy en día se crean utilizando HTML5 y CSS3. Estos son mucho mejores que XHTML y CSS2, porque en lugar de todos los botones, bordes, degradados, bordes redondeados y todas las otras características que se crean utilizando imágenes, se crean como partes funcionales de la codificación CSS3. Por lo tanto, cortar el archivo PSD básicamente ahora solo implicará cortar las imágenes de fondo del PSD.

Para hacer esto, deberá abrir el archivo en Photoshop o Illustrator, dependiendo del software que haya utilizado para crear el diseño. Si el diseñador hubiera hecho bien su trabajo, habría creado un archivo de diseño bien estructurado con carpetas y capas, lo que le facilitaría encontrar lo que necesita. Estudia el diseño de la web y busca las imágenes que creas que necesitarían ser cortadas. Se trata básicamente de cualquier imagen que no se pueda crear con CSS3, por lo general el logotipo y las imágenes de fondo. Lea cómo cortar imágenes aquí.

Una vez que reemplace estas imágenes de fondo usando CSS, verá una enorme caída en los tiempos de carga. Esto atraería a muchos usuarios a su sitio, ¡porque el usuario promedio de Internet no puede soportar largos tiempos de carga!

Paso tres: Crear HTML, CSS3 y JavaScript (jQuery)

Una vez que haya cortado las imágenes de su archivo PSD, es hora de crear HTML5 y CSS3. Lo primero que debe hacer es crear una nueva carpeta en la que cree el índice.html y estilo.css. Además, cree una subcarpeta llamada imágenes o img (lo que prefiera) y coloque las imágenes que haya extraído en esta carpeta. Cree otra carpeta llamada JavaScript o js. Esto es para más adelante, para que pueda almacenar todos los archivos JavaScript y jQuery en una ubicación bien marcada. Una vez que haya terminado de crear todas las carpetas, archivos y subcarpetas, es hora de comenzar a compilar HTML5 y CSS3.

HTML5

HTML5 es un lenguaje relativamente nuevo que posee tanto funcionalidades XHTML como HTML. Este lenguaje se utiliza esencialmente para crear la estructura básica del documento, así como para designar todos los elementos de la página. HTML5 tiene elementos separados para las diferentes secciones de su sitio web, como el encabezado <>, el elemento <nav>, el elemento <aparte>, así como los elementos <pie de página> (y mucho más), que le permiten crear un documento ordenado y bien estructurado que sea legible universalmente. Estos son algunos recursos excelentes que puede usar para aprender o refrescar su memoria sobre HTML5.

Recursos HTML

W3Schools es el sitio web número uno para aprender los conceptos básicos de HTML5. Cada elemento y atributo de este idioma se explica y se enseña mediante demos, lo que facilita el aprendizaje.

Sección de Desarrolladores de Mozilla – La gente detrás del popular navegador Mozilla Firefox tiene una sección de desarrolladores en su sitio web. Puede usar esta sección para aprender mucho sobre HTML5 a través de los tutoriales que tienen allí, ya sea que sea un principiante o un codificador avanzado.

Tuts de diseño web: Este sitio web tiene muchos tutoriales HTML5 diferentes, algunos de los cuales son gratuitos y otros de pago.

W3-Este sitio web es responsable del desarrollo de todos los estándares web abiertos que se han creado para garantizar la longevidad de la web. Aquí puede encontrar información detallada sobre HTML5, así como todos sus últimos desarrollos.

Validador W3 – Una vez que haya completado su HTML5, póngalo a través de este validador. ¡Le dirá si su HTML5 cumple con los estándares web abiertos w3!

CSS3

CSS se refiere a Hojas de estilo en cascada, y CSS3 es la última versión de este lenguaje de interfaz. CSS3 se utiliza para tomar los huesos desnudos de los elementos creados con HTML5 y darles forma, posición y estilo. Esto le permite crear un diseño web consistente en el que todos los elementos se confirman con el diseño general del sitio. Una vez que haya utilizado CSS3, encontrará que su HTML5 será mucho más limpio y bien estructurado, lo que a su vez le permitirá cargar mucho más rápido, así como permitir que los motores de búsqueda lo indexen más rápido. A continuación se muestran algunos recursos para ayudarlo a aprender o refrescar su memoria sobre CSS3:

Recursos CSS

W3 CSS – W3 se encuentra en los recursos más conocidos y reconocidos para tutoriales de CSS3 y ejemplos de los diversos selectores, propiedades y valores de CSS3. La mejor parte de esto es que cada tutorial tiene una página de ‘pruébalo tú mismo’, que te permite aplicar lo que has aprendido.

Learn CSS3-Mozilla no es solo el creador del navegador Firefox. También es un excelente lugar para familiarizarse con CSS3, así como para actualizar sus conocimientos sobre el idioma.

Tuts de diseño web CSS: Este sitio web contiene toda una cornucopia de tutoriales que puede consultar. Algunos de estos tutoriales deben pagarse, pero otros aún son completamente gratuitos y pueden enseñarle mucho sobre los selectores, propiedades y valores de CSS3.

W3 CSS – Este sitio web es un gran lugar para mantenerse actualizado con las últimas noticias de CSS3, porque esta es la misma comunidad que desarrolla los estándares web de CSS3. También es un gran lugar para obtener información técnica sobre el idioma.

Validador CSS: Este es el validador a través del cual debe ejecutar todo su CSS3 antes de hacer público el sitio web. ¡Esto es para asegurarse de que su CSS3 cumpla con los estándares web establecidos por W3!

Diseño responsivo

Internet ha recorrido un largo camino desde su creación. Esto se debe en parte a la llegada de los teléfonos inteligentes y las tabletas, y la proliferación de este tipo de tecnología en nuestra vida cotidiana. Como resultado de la inmensa popularidad de estos dispositivos, una parte significativa del total de usuarios de Internet mira sitios web en pantallas significativamente más pequeñas que la computadora portátil promedio. Además, interactúan con estos sitios web no usando cursores, sino usando sus dedos. Por lo tanto, el sitio web moderno debe ser capaz de adaptarse a los diversos tipos de dispositivos que existen. Aquí es donde entra en juego el diseño responsivo. Mediante el diseño responsivo, los diseñadores pueden crear un sitio web que pueda ajustar todo su diseño en función del tipo de dispositivo en el que se está visualizando.

Es una buena idea decidir de antemano si desea que su nuevo sitio web tenga un diseño adaptable o no antes de comenzar a crear HTML5 y CSS3. Esto se debe a que cuando codifica la parte receptiva del diseño de su sitio web, necesitará trabajar con consultas de medios CSS3. Con estas consultas de medios, puede definir diferentes texturas y estilos para diferentes resoluciones de pantalla.

Recuerde nunca usar anchos fijos, use porcentajes en su lugar. Esto se conoce como diseño de diseño fluido o líquido, que le permite optimizar su sitio web no solo para las resoluciones definidas dentro de sus consultas de medios, sino también para todas las resoluciones entre ellas. Esta es una gran ventaja para su sitio web, ya que los teléfonos inteligentes, tabletas y computadoras que salen hoy en día tienen muchos tamaños diferentes y, por lo tanto, resoluciones, y debe acomodarlos a todos.

Recursos responsivos

Aquí hay algunos excelentes recursos que puede usar para refrescar su memoria o aprender sobre el diseño responsivo y toda la codificación relacionada:

Google Responsive: Este es un gran recurso para aquellos de ustedes que son nuevos en el diseño responsivo utilizando consultas multimedia CSS3.

Principios del diseño web adaptable: Lea este artículo para comprender la diferencia entre el diseño web adaptable y el diseño web adaptable. ¡Tiene algunos grandes ejemplos para ayudarte a entender las cosas en detalle!

Rejillas de fluidos: Puede usar este excelente artículo de Ethan Marcotte para aprender sobre las rejillas de fluidos y cómo usarlas. ¡Intente usar los ejemplos proporcionados en el artículo usted mismo!

Marco de interfaz receptivo

Si no está dispuesto a aprender las reglas en lo que respecta a las consultas de medios CSS3, o tal vez simplemente no tiene tiempo suficiente para ello, intente usar un marco de interfaz receptivo en su lugar. Si decide usar un framework de cuadrícula, tenga en cuenta que necesita aplicar el mismo framework a CSS y al HTML, ya que trabajará con clases e ID predefinidos para conectar el framework creado usando HTML5 a CSS3. El uso de un marco de interfaz receptivo sin duda le permitirá desarrollar su sitio web mucho más rápido, pero el lado negativo también ralentizará los tiempos de carga de su sitio web debido a la gran cantidad de código que no usará.

Algunos de los frameworks front-end más populares son:

Bootstrap: Este marco responsivo es bastante fácil de implementar, y una ventaja adicional es que utiliza una CDN para reducir el impacto de las velocidades de carga de su sitio web también.

MENOS: Este es un marco de cuadrícula CSS adaptativo en lugar de uno adaptable que le permite crear un diseño adaptable.

Foundation: Este es un marco de cuadrícula front-end con un tamaño de archivo absolutamente pequeño para minimizar el impacto que tendrá en la velocidad de carga de su sitio web.

JavaScript (vs CSS3)

JavaScript es uno de los lenguajes de programación más populares en el mundo actualmente. Esto se debe al hecho de que es compatible con una amplia gama de navegadores y también al hecho de que contiene bibliotecas como jQuery y sistemas backend como Node.js, así como frameworks como AngularJS. ¡No es de extrañar que tantos desarrolladores juren por este lenguaje de programación! Sin embargo, en los últimos tiempos JavaScript ha comenzado a quedar obsoleto, ya que muchas de sus funciones han comenzado a ser asumidas por animaciones CSS3, que le permiten animar transiciones entre estilos.

Recursos de Javascript

W3-Este es un excelente lugar para comenzar si es nuevo en JavaScript, gracias al excelente tutorial que está disponible en este sitio web.

jQuery-Una vez que tenga algo de experiencia con JavaScript, puede comenzar a usar bibliotecas como esta para programar mucho más fácilmente. jQuery es la biblioteca JavaScript más popular por una milla.

NodeJS – Si prefieres los sistemas backend pero al mismo tiempo amas JavaScript, echa un vistazo a este sitio web.

AngularJS: Combine las formidables fuerzas de HTML y Java mediante el uso de este marco y obtenga algunas vistas dinámicas.

Asegúrese de consultar los siguientes recursos antes de comenzar a usar JavaScript para animar elementos en su sitio web, mientras que probablemente también pueda usar CSS3:

Animaciones CSS3 – Una vez más, recurrimos a w3schools para nuestros tutoriales CSS3. Lea detenidamente las demos disponibles en este sitio web para comprender todas las diferentes animaciones de CSS3.

Animaciones de Mozilla-Amplíe su conocimiento de las animaciones de CSS3 con las nueve muestras y ejemplos que Mozilla ha proporcionado.

Paso cuatro: Construya los archivos de temas de WordPress

Ahora que ha convertido con éxito sus diseños PSD en HTML5, CSS3 y JavaScript, es hora de la conversión principal: convertir su HTML en un tema de WordPress con respuesta completa. Recuerde seguir la jerarquía de plantillas de WordPress para asegurarse de que sus temas realmente funcionen. El orden general es comenzar con el encabezado.php, seguido de index.php, pie de página.php y estilo.css. Utilizarás estas cuatro plantillas en todas las páginas de tu sitio web.

Una vez que tenga una comprensión completa de cómo funciona la jerarquía de plantillas, debe comenzar a dividir los archivos HTML en pedazos. Puede comenzar creando una carpeta en la carpeta temas que puede encontrar en su instalación de WordPress, cuya dirección es / wp-content / themes/. Cree el encabezado del archivo.php en esta carpeta. Este archivo es el que usará para declarar el tipo de documento, así como todos los elementos que pertenecen al encabezado de su página, como los metas, el título, las hojas de estilo, los scripts java, etc. Una vez que haya terminado con esto, cree pie de página.php y pegue todos los elementos del pie de página en su documento HTML. Si el diseño de tu sitio web incluye una barra lateral, crea un archivo llamado barra lateral.php también e incluir toda la codificación pertinente dentro de este archivo.

Una vez que haya completado la creación de todos los elementos de su sitio web en estos archivos, debe comenzar a crear su página de inicio. Hay varias maneras de hacer esto. Por ejemplo, simplemente puede crear un índice.php, portada.php o página de inicio.php, cualquiera de estos archivos será adecuado para lo que está tratando de hacer, por lo que la elección final depende completamente de usted. Ahora que ha terminado de crear una de las tres plantillas para su página de inicio, incluya todas las .archivos php que acaba de crear. Ahora que tiene su parte superior, inferior y lateral listos, pegue el HTML5 de su página de inicio en el medio y habrá creado con éxito la página de inicio de su sitio web. Simplemente siga el mismo proceso para todas las páginas de su sitio web y podrá pasar al siguiente y último paso.

Paso Cinco: Utilice las etiquetas y funciones incorporadas de WordPress

Una vez que haya creado con éxito el tema para su WordPress, ahora debe asegurarse de que puede editar su sitio web desde el panel de administración en lugar de tener que alterar el archivo del tema cada vez que desee cambiar algo. Posiblemente las funciones de WordPress más populares para hacer que todo su contenido sea editable a través del panel de administración es agregando la función add_meta_box. Simplemente configure meta boxes para el contenido de cada página y ¡estará listo!

Crear las funcionalidades básicas de su sitio web es bastante fácil usando WordPress. Por ejemplo, la visualización de información, como enlaces en sus sitios web, se puede hacer fácilmente utilizando las funciones de WordPress. Simplemente revise la página de referencia de funciones de WordPress para ver todas las funciones disponibles.

De manera similar, WordPress también ofrece etiquetas de plantilla. Estas son esencialmente funciones en sí mismas, con la única diferencia de que fueron creadas específicamente para temas específicos que las hacen más eficientes.

Menú de WordPress

Cuando inicie sesión en el panel de administración de su sitio web, probablemente desee cambiar los elementos de menú en los menús y la Apariencia para que no tenga que editarlo usando el panel de administración. Esto es bastante fácil gracias al hecho de que está utilizando WordPress, todo lo que necesita hacer es reemplazar la lista de menús del archivo de plantilla con una línea de PHP, después de lo cual simplemente puede comenzar a agregar elementos de menú.

Puede haber situaciones en las que una página interior tenga un encabezado o pie de página diferente. Para agregar esta funcionalidad a su sitio web, todo lo que necesita hacer es agregar etiquetas condicionales. Estos le permiten aplicar código diferente para páginas o publicaciones seleccionadas.

Una vez que su sitio web de WordPress esté en funcionamiento en su servidor de desarrollo, todo lo que necesita hacer es obtenerlo en su servidor en vivo. Aquí hay un artículo donde se explica con gran detalle cómo mover un sitio de WordPress, paso a paso. Simplemente siga los seis pasos proporcionados y tendrá su sitio web en funcionamiento en un servidor en vivo en poco tiempo.