PSD a Wordpress conversión: explicado de la A la Z (3 / 5 paso)

Paso 3: Paso 3: crear el HTML, CSS3 y JavaScript (jQuery)

Una vez haya completado el segundo paso de este proceso PSD a WordPress conversión por cortar el archivo PSD de tu sitio web, usted necesita para empezar en la codificación mediante el uso de HTML5 y CSS3. En primer lugar, crear una nueva carpeta y crear dos archivos dentro de esta carpeta, es decir index.html y style.css. También, crear una subcarpeta dentro de esta carpeta. Esta carpeta es lo que va a utilizar para almacenar todas las imágenes que vas a extraer el archivo PSD. Crear otra subcarpeta que usará para almacenar todos los archivos de jQuery. Recuerde el nombre y etiqueta todas las carpetas y sub carpetas correctamente!

HTML5
HTML5 es el nombre de un idioma de la interfaz todavía un poco incipiente, uno cuyo uso está muy extendido gracias a su facilidad de uso y versatilidad. Esta versatilidad se deriva principalmente del hecho de que este idioma de la interfaz contiene funcionalidades de HTML y XHTML. Utilizando este lenguaje de interfaz para crear los huesos desnudos de su diseño de sitio web final, incluyendo algunos elementos claves de su sitio web como el encabezado y el pie de página. Utilizando HTML5 facilitará la creación de un diseño general que es agradable de mirar y compatible con todos los navegadores. Los siguientes son algunos recursos que puede utilizar si usted está interesado en aprender sobre HTML5 o si quiere refrescar su memoria acerca de este idioma de la interfaz:

1. http://www.w3schools.com/html/
   Este sitio web puede ser considerado fácilmente el sitio arriba para aprender sobre los fundamentos de HTML5. Cada aspecto de este lenguaje de front-end se imparte completamente a través de demostraciones, lo que para una manos en experiencia de aprendizaje.
2. https://developer.mozilla.org/en-US/Learn/HTML Mozilla Firefox es famoso por ser el navegador líder mundial. Además, la gente de Mozilla sobre es grande lenguas de front-end de teahing a los programadores a través algunos tutoriales interesantes!
3. http://Webdesign.tutsplus.com/categories/HTML Usted puede encontrar un montón de diferentes tutoriales de HTML5 aquí. Algunos de ellos requieren que usted pague, pero muchos son gratis para que usted pueda echar un vistazo.
4. http://www.w3.org/TR/HTML5/ W3 es un verdadero iconoclasta de la internet. Prácticamente cada web de código abierto estándar, estándares de la world wide web corre prácticamente, proceden de este sitio Web. Utilizar este recurso para obtener información sobre HTML5, así como aprender acerca de las actualizaciones recientes con respecto a la lengua de extremo delantero!
5. https://validator.w3.org/ Una vez que haya completado todo el código HTML5 para su sitio web, se aconseja poner mediante este validador. Ya contarás si el código cumple la W3 abres estándares web!

CSS3
CSS es un lenguaje popular interfaz, la forma completa que es hojas de estilo en cascada. La última versión de este lenguaje de la interfaz se llama CSS3 que es lo que va a utilizar para la forma, posición, estilo y construir sobre la base de la estructura de lo creado utilizando HTML5. Esto resulta en un diseño web general final que es ordenado, limpio y lo más importante siempre sigue un estilo único. Usted notará una enorme caída en la carga de tiempos después de añadir CSS3 a su sitio web, y hará más fácil para los motores de búsqueda indexar así! Aquí está una lista de recursos relacionados con CSS3:

1. http://www.w3schools.com/CSS/ W3 es mencionado aquí una vez más gracias a sus excelentes recursos que te enseñan sobre CSS3 y sus varios selectores, propiedades y valores.
2. https://developer.mozilla.org/en-US/Learn/CSS Mozilla también se menciona una segunda vez gracias al cuidado y preocupación que proporcionan a los desarrolladores, lo que les permite aprender sobre CSS3 y mantenerse hasta la fecha con las últimas noticias relativas a la lengua de la parte delantera.
3. http://Webdesign.tutsplus.com/categories/CSS Usted puede ir a través de la larga lista de tutoriales que posee este sitio web y encuentra mucho que le ayudarán. Algunos tutoriales tendrán que pagarse, pero otros pueden utilizarse gratuitamente.
4. http://www.w3.org/Style/CSS/ Este sitio web es un recurso excelente que se puede utilizar para profundizar sus conocimientos de CSS3. Todas las normas de la web de código abierto CSS3 se originan desde aquí!
5. https://Jigsaw.w3.org/CSS-Validator/ Sería una buena idea usar este validador, una vez que termines codificación CSS3 para este sitio Web. Esto le ayudará a ver si el código cumple con los estándares web establecidos por W3

Diseño
La utilización de internet para ser absolutamente constante hace mucho tiempo. Todo el mundo que utilizan internet vieron la misma cosa, porque todo el mundo estaba usando más o menos el mismo tipo de pantalla. Este no es el caso hoy. Con la llegada y proliferación de la tecnología de smartphone así como la llegada de los tablets junto con ordenadores portátiles de tamaño diferentes, ha ocurrido un cambio notable en el diseño web. Simplemente no es conveniente utilizar en un smartphone, por lo que los diseñadores web han respondido a esto inventando diseño un sitio web que es conveniente para un ordenador portátil. Diseño es una técnica por el que un diseñador web aplica un conjunto de consultas de los medios de comunicación en el código CSS3 que permiten que el sitio web para detectar el tipo de pantalla se está visualizando en y ajustarse en consecuencia.

Desde la incorporación del diseño a una página web requiere planificación desde el momento en que el primer bit del código está escrito, que realmente necesita para decidir antes de la codificación proceso comienza en serio si desea incorporar diseño en diseño general de su sitio web o no. Si desea incluirlo, usted necesitará agregar ciertas consultas de medios de comunicación de CSS3. En estas consultas de los medios de comunicación, vas a establecer ciertos parámetros para su sitio web de. Va a establecer ciertas reglas por el que si el sitio web es visto en un dispositivo de cierto tamaño, cambiará su tamaño, forma y formato general para que sea utilizable en el dispositivo que es de ese tamaño. Además, se recomienda que incorporar diseño líquido en su sitio de Internet, por el que el tema sensible se aplicará a las resoluciones entre los establecidos por parámetros así. Esto hará que su sitio de Internet más universal, como smartphones y tablets estos días vienen en muchas diversos formas y tamaños.

He aquí algunos recursos excelentes que se pueden utilizar para conocer toda la información referente a todos los aspectos de diseño, o se puede utilizar para refrescar su memoria, si sabes de diseño, pero necesita algo como estas para ayudar a refrescar su memoria:

1. https://developers.Google.com/web/Fundamentals/la... Utilizar este recurso para aprender acerca de cómo utilizar consultas de medios de comunicación de CSS3.
2. http://blog.froont.com/9-Basic-Principles-of-resp... Use este artículo para conocer las diferencias entre diseño y diseño adaptativo. Esto le ayudará a comprender mucho mejor diseño.
3. http://alistapart.com/article/fluidgrids Este excelente blog es, en particular, un gran recurso porque habla de un aspecto muy importante de diseño que es el uso de las redes de fluido.

Respuesta marco front-end
Si quieres ahorrar el tiempo pero con la funcionalidad del diseño, lo mejor que puedes hacer es tomar un poco de un acceso directo e incorporan lo que se denomina un marco de respuesta interfaz en su lugar. Esto le permitirá ahorrar tiempo, como aplicar un frontend framework es menos desperdiciador de tiempo de incorporación de diseño en su sitio de Internet. Sin embargo, tenga en cuenta que utilizando un marco frontal sensible en lugar de una incorporación de diseño completa en el código de su sitio web es un acceso directo y vienen todos del acceso directo a un precio. En este caso, el precio es un tiempo de carga de tu sitio Web. Además, recuerde que usted tendrá que aplicar el mismo marco de rejilla para CSS3, así como HTML5.

Éstos son algunos de los frameworks más populares de front-end:

1. http://getbootstrap.com Bueno para los principiantes, ya que es fácil de usar. Utiliza un CDN que ayuda a reducir su impacto en el sitio web de carga velocidades!
2. http://lessframework.com/ Proporciona diseño adaptativo como un elternative a diseño.
3. http://Foundation.zurb.com/ Un marco de rejilla frontal sensible con un tamaño de archivo pequeño, facilitando mejores tiempos de carga.

JavaScript (vs CSS3)
De todos los lenguajes de programación y codificación en el mundo, uno de los más populares es un lenguaje conocido como JavaScript. JavaScript debe su renombre ante todo al hecho de que es tan fácil de usar. Además, es casi universalmente legible, otro punto que trabaja en su favor. Sin embargo, en los últimos tiempos JavaScript ha visto su predominio amenazado por la llegada de CSS3, que le permite crear transiciones animadas entre estilos.

Lo que sigue es una lista de recursos que puede utilizar para aprender acerca de JavaScript, o para refrescar tu memoria si se enteraron pero absolutamente no saben aplicar su conocimiento:

1. http://www.w3schools.com/JS/ Ideal para principiantes que desean para aprender sobre JavaScript.
2. https://jQuery.com/ Para los ahora tienen cierta experiencia en cuanto a JavaScript y desea empezar a utilizar código con librerías como jQuery.
3. https://NodeJS.org/ Para los amor back-end de programación pero también quieren incorporar JavaScript en su trabajo.
4. https://angularjs.org/ Una excelente manera de combinar las fuerzas de HTML y JavaScript, lo que le permite tomar ventaja de ambos idiomas de interfaz para hacer algo diferente, nuevo y emocionante.

Compruebe los recursos de seguir antes de empezar a usar CSS3 para animar los elementos de su sitio web usando

JavaScript:

1. http://www.w3schools.com/CSS/css3_animations.asp
   Como siempre, en una lista de recursos que le ayudarán a aprender sobre lenguajes de programación, W3 escuelas simplemente tiene que hacer el corte sin razón de lo que es el mejor recurso para ayudarle a aprender sobre programación y sus lenguajes diversos, especialmente de CSS3.
2. https://developer.mozilla.org/en-US/docs/web/GUID... Nueve muestras que se pueden aplicar en su propia web diseños!