Conversion de PSD a HTML a partir 159 dolares por pagina


He aqui un link para quien ya tiene su diseño en Photoshop pero no sabe como pasarla a HTML valido y agregarle algunas funicones en Javascript, PHP, etc… es un ejemplo de como en paises anglosajones se hacen buenas cosas y que en Mexico debemos de ver los precios de lo que cuesta realmente un trabajo como este. Las empresas de Jalisco y el resto del mundo deberian apreciar el trabajo de los diseñadores mexicanos que es muy bueno y que por el momento es mas accesible que este sitio que les muestro: https://www.psd2html.com/order-now.html

Anuncios

Explorer 9 seria mejor que Firefox 3.6.9

Puedes checar tus browser a ver que tal se desempeñan en el acid test 3 aqui: http://acid3.acidtests.org/ este test hace algunas pruebas de como el browser hace la representacion del codigo y nos da una base para poder opinar que tan efectivo es al trabajar con codigo y representarlo tal y cual se planeo.

El Explorer 9 tendria un buen desempeño con CSS3 que tanto revuelo ha causado y promete ser mejor que los anteriores Explorer y marcar un cambio drastico en la historia de Windows Explorer.

Yo uso mac y me gustaria que hubiera un version para mac para poder hacer la comprobacion de mis paginas web en mi maquina directamente en lugar de tener que encender mi vieja y polvosa PC.

Se ve interesante y en la grafica comparativa se ve el Explorer 9 mucho mejor que el Firefox 3. Espero que si haya una version de mac y tambien que muchas personas actualizen su explorer ya que eso nos beneficia a todos y hace de la web un lugar mas estandar y accesible.

Como introducirse al diseño web – Parte III

Como empieza una pagina web

Pues desde la idea ya sea del diseñador o del cliente. Sin embargo la pagina web debe de pasar por pasos basicos de estructuracion y aprobacion para que pueda terminarse como lo acordado entre el cliente y el diseñador.
Ciertamente algunos clientes abusan y creen que se pueden hacer cambios en cualquiern etapa del diseño y aun mejor para ellos: que esto no suba ni el costo de produccion ni los tiempos de entrega.

Hay que establecer pues unas etapas basicas que ayudaran a evitar esto y a llevar el negocio a mejores practicas.

1.- El sketch

El sketch es el que se hace cuando el cliente te esta platicando su idea de como debe ser o como cree el que debe ser. Es donde se anotan las caracteristicas deseadas de la paginas web. Donde se nota si el menu debe ir arriba o a la izquierda, si el logo aparece y en que parte, donde aparecen links o tros contenidos.

El sketch se hace varias veces, se hace uno con el cliente de manera rapida pero tambien al llegar a tu estudio y sentarte a pensar como resolver esa pagina web. Se hacen varios sketches ya que son rapidos y ayudan a visualizar no solo los acomodos sino tambien ayudan a preveer pasos tecnicos para la hora de programar el armado de la pagina web. Un diseñador web con experiencia ya puede visualizar como hara su codigo CSS y su estructura de DIVs con solo crear y ver como va el sketch.

Un paso muy importante seria refinarlo y mostrarselo al cliente. Pedirle su firma y autorizacion para ir al siguiente paso: El wireframe. (dejar en claro que retroceder o hacer cambios a lo previamente utorizado tiene un costo)

2.- Wireframe

El wireframe es el Sketch o boceto pasado en limpio y el cual se llena con los textos a usar en la pagina web. Es una manera formal de que el cliente vea al acomodo de la informacion real de su web pero que nos da la ventaja de que apruebe el acomodo de la informacion antes de meterle mano al diseño y apariencia del sitio web.

El cliente debe aprobar el acomodo o pedir los ajuses pertinentes y luego firma. De esta manera ya el diseñador se concentra en la apariencia del sitio ya que la informacion, acomodo de menus y objetos ya esta definido!

3.- Diseño FINAL

En las imagenes adjuntas podemos ver como el diseño se apego a lo especificado y autorizado en el wireframe. De esta manera evitaremos prensentar un diseño que luego el cliente nos diga los clasicos:

“Si me gusta pero ponle mi logo al otro lado” , “muy bien, pero cambialo todo de lugar…”

Ya si el cliente decide contradecirse sabra que el te ha firmado en la aprobacion del SKETCH y en la del WIREFRAME y estara bajo aviso que el costo es mayor y el tiempo de entrega mas largo.
paginas web, web sketching, web wireframe, web design
paginas web, web sketching, web wireframe, web design

Como introducirse al diseño web – Parte II

Como introducirse al diseño web – Parte II

El usar CSS es un metodo muy usado hoy dia, ademas que permite dar el formato a un documento HTML de maneera mas controlada. Aunque, siendo realistas hay que decir que si tiene su curva de aprendizaje. Sin embargo una vez que empiezas a comprender como funciona, puedes empezar a ver el codigo de otras pagina y aprender por ejemplos practicos. Esta es la forma en la que he encontrado muchas aplicaciones muy creativas de CSS que luego utilizarlo en algun sitio.

En lo personal les voy a recomendar un addon de firefox es el WEB DEVELOPER 1.1.6, con este plugin puedes hacer click derecho sobre paginas web para que puedas ver su codigo HTML y mas importante su CSS y el arreglo que DIVs que usaron para armar el sitio.

Web Developer 1.1.6 un complemento (addon) para Firefox

Este addon creado por Chris Pederick es muy util, ya que sirve tanto para expertos como para novatos ya que al poder ver en otras ventanas la part tecnica de un diseño web te da nuevas ideas y te sirve como herramienta de aprendizaje. Podras descargarlo aqui Descargar Web Developer 1.1.6 para Firefox

Web Developer 1.1.6
Web Developer 1.1.6

Como usar Web Developer para aprender CSS

Pues es muy sencillo, abres una pagina web que tenga algun CSS que desees saber como lo lograron y seleccionas.
WEB DEVELOPER > CSS > VIEW CSS (con esto abres el CSS adjunto al archivo)
o
WEB DEVELOPER > CSS > VIEW STYLE INFORMATION Esta es la verdadera hermosura de este addon, ya que te permitira ver el acomodo de DIVs para que luego lo compares con el CSS adjunto y con ello podras darte idea de como estrucutraron el sitio. Estructurar un sitio es a veces la tarea mas dificil y tal vez lo hayan intentado con tablas de HTML. con DIVs y CSS es mas facil, aun asi es bueno que tomen nota de como otros lo logran.

Muy bien ¿y ahora donde veo sitios con buen CSS?

Pues si ya instalaron el Web Developer 1.1.6 es tiempo de navegar por sitios con CSS, abrir tu editor de HTML y hacer muchas pruebas. (muchas, ya que la practica sera lo mejor)
He aqui un sitio donde pueden ver varias paginas web con un buen diseño en CSS para que aprendan viendo ejemplos.
http://cssmania.com
css_mania1

Otros articulos relacionados con Introduccion al diseño

https://sdgestudio.wordpress.com/2008/09/29/como-introducirse-al-diseno-web-parte-i/

Plantillas para paginas web

Aqui podran ver el catalogo, escoger y comprar un plantilla web

Son bastante economicas y muy rapidas de implementar. Mas informacion en: www.sdgestudio.com/blog/?page_id=5 o pueden checar el catalogo directamente en: http://www.sdgestudio.com/plantillas_pagina_web/

SDG Estudio Creativo : Plantillas web economicas

Nicolas Copernico 4131-3
Fracc Arboledas
Zapopan Jalisco.
Tel/fax (33)3634-7516

creacion_paginas_web
creacion_paginas_web