En el pasado, hice algo de codificación HTML, CSS y PHP, pero solo trabajé en cosas que ya estaban "terminadas" y nunca comencé un sitio web desde cero. Sin embargo, recientemente compré un dominio y alojamiento por poco dinero, y espero mejorar mis habilidades de HTML, CSS y Javascript para que pueda ser un poco más comercializable como desarrollador web / webmaster.

Por lo general, ¿qué proceso utiliza para iniciar un sitio web? ¿Dibujas el diseño en papel y luego haces el código? ¿O simplemente comienza a codificar y ajustar la salida a su gusto?

Mi proceso generalmente se parece un poco a esto:

1. Características . Con lápiz y papel, diseñe las distintas características / páginas que compondrán el sitio. Esto llega a las preguntas generales: ¿está creando una información simple y un sitio gráfico para su madre? ¿Una solución de comercio electrónico para una pequeña empresa? ¿Un blog / galería para un amigo fotógrafo? Su respuesta determinará mucho sobre la ruta de compilación que deberá seguir. Esta etapa también puede implicar una discusión considerable con un cliente o con quien maneja el barco (si no es usted)

2. Estructura metálica . Con todas las características necesarias establecidas, trabaje una estructura alámbrica. Ya sea en papel o con una herramienta como fuegos artificiales que te permitirá construir una funcionalidad de navegación muy simple. Si está trabajando con un CMS como WordPress, ¿cómo se manejará su contenido estático? Este también podría ser un buen momento para comenzar a pensar en la estructura de archivos. Si su proyecto necesitará una base de datos personalizada, ahora también es el momento de comenzar a planificar su diseño e implementación. Esta es una etapa crítica, ya que la planificación inteligente ahorrará una gran cantidad de retrocesos y reelaboraciones, en caso de que se cometan errores o se produzca el avance del proyecto.

3. Tecnología . Una vez que la etapa de planificación esté relativamente resuelta, elija sus tecnologías. ¿Estás haciendo html directo? un php cms en un ambiente de lámpara? .net tienda de mvc? Estas preguntas pueden influir en el entorno de alojamiento que se requerirá, así como los costos para ejecutarlo. Si está haciendo un escaparate, la seguridad es una preocupación principal aquí (SSL y cumplimiento de PCI, por ejemplo). Asegúrese de tener establecido un excelente entorno de prueba (localhost u otro).

4. Diseño / diseño . Cuando su lista de características y estructura de alambre está bastante bien determinada, puede comenzar a pensar en el diseño del sitio. Saber lo que va a llenar las páginas es, obviamente, un requisito previo. Me gusta trabajar en Photoshop y hacer un uso intensivo de las carpetas como análogo a su estructura de marcado. Voy tan lejos como para nombrarlos con el marcado previsto y los identificadores CSS. Aunque probablemente sea sabio hacer un dibujo de forma libre antes de que te pongas realmente detallado. Tiendo a usar archivos de "diseño" de los que extraeré elementos y los colocaré en archivos de "proceso", archivos que utilizo para generar gráficos de producción.

5. Marcado / CSS . Una vez que se resuelve un diseño bastante limpio (dado que ciertamente se flexionará un poco, a medida que ingresa al modo de producción) puede comenzar a escribir el marcado. En general, me gusta tener un diseño estándar que tenga en cuenta todo el contenido del sitio. Entonces, limpio y flexible debería ser el punto clave aquí. El marcado de diseño debe estar bastante completo antes de comenzar a escribir CSS, pero creo que hacen mucho para informarse entre sí. También hará una gran cantidad de optimización SEO en esta etapa (denominación adecuada de imágenes o etiquetas A, metainformación, doctypes, etc.). Sea exhaustivo.

5.1 Gestión del tema . Si está trabajando con un CMS, y su diseño se empleará como un tema personalizado, encuentre algunos tutoriales sobre cómo hacer exactamente eso para su aplicación prevista. Francamente, esto puede ser desalentador;) Siempre construiré un diseño de marcado estático con CSS bastante completo antes de dividirlo en elementos de tema.

6. Comportamiento . Cuando su marcado y css se ve bastante completo, y tal vez su tema está en su lugar, puede comenzar a desarrollar comportamientos (rollovers, etc.) JavaScript discreto es importante, a menos que esté utilizando funciones que lo requieren absolutamente (un ajax-heavy galería o contenido flash basado en datos). La regla general es: si alguien visita su sitio con JavaScript desactivado, ¿qué va a ver? A veces elimino elementos estáticos y los reemplazo con versiones interactivas en tiempo de ejecución.

7. Contenido . A menos que el diseño dependa del contenido (las imágenes a veces son contenido, por ejemplo) = generalmente uso texto / gráficos de marcador de posición hasta que el diseño y el comportamiento estén bastante bien establecidos. Evite trabajar más de una vez. Si está completando datos del producto, se requerirá una cuidadosa verificación de errores y pruebas.

En ese punto, siempre parece haber un período de reelaboración, reparación y pulido. Pero, esencialmente, es hora de hacerlo vivir. Entonces ve a comer algo.

Hmmm Supongo que eso es más que solo "cómo comenzar". Pero tal vez ayude, de todos modos. ¡Buena suerte!

Cuando diseño un sitio web, empiezo preguntando por qué.

La primera parte de mi flujo de trabajo es ¿POR QUÉ? Si estoy trabajando con un cliente, necesito asegurarme de que tenga una visión clara y definida de lo que quiere que logre el sitio web.

1. Las preguntas de por qué.

• Cuéntame un poco sobre ti y por qué estás haciendo esto.

• ¿Quiénes son los clientes? ¿Cuál es su necesidad / dolor específico? Puede proporcionarme, con algunos ejemplos específicos de diferentes tipos de clientes, lo que necesitan, lo que el sitio web hará por ellos.

• Cuéntame sobre el negocio. ¿Qué es lo que haces exactamente?

• ¿Qué te hace mejor que el próximo chico?

• Si estuviera buscando el servicio que brinda su empresa, ¿qué escribiría USTED en Google para encontrarlo?

Si está construyendo el sitio para usted, es mejor que sepa cuáles son estas respuestas.

Si determina, basándose en las respuestas a las preguntas anteriores, que estas personas son serias y realmente tienen una buena idea. Luego, proceda (recuerde que todavía no le pagan pero que es mejor que les quite los calcetines si quiere que lo contraten).

2. La investigación.

Pase un tiempo investigando al cliente y su negocio Descubra sus éxitos pasados ​​y cualquier problema que hayan encontrado. ¿Eres el tercer desarrollador que han contratado? ¿Qué pasó con los otros 2 chicos?

Descubra lo que necesita el cliente. ¿Para quién va a construir este sitio? ¿Es el cliente un veterano retirado de 60 años o un niño de 16 años con cara de granos que juega Farmville en Facebook todo el día.

Descubre quiénes son los competidores. Puede que ni siquiera lo sepan. Haga un análisis competitivo de 5 a 10 competidores y descubra quién es el trasero que necesitamos para lanzar los Serps. Esta es la etapa en la que necesita saber cuál es el objetivo de la palabra clave. Más tarde y ya estás fallando.

2b La propuesta

Sorpréndalos con su conocimiento de su negocio y obtenga un acuerdo / propuesta de sitio web y esté listo con su contrato una vez que estén de acuerdo. Obtenga el contrato firmado y un depósito del 50% y luego continúe con el paso 3.

3. La misión: tener uno

Aquí hay un tema común: en todos estos casos, la misión no se trata del producto como tal. La misión es "simplemente" algo que, si realmente te tomas en serio, requiere que el producto se vuelva absolutamente increíble, para que puedas lograrlo. Si lo prefiere: estas misiones son la respuesta, ¿por qué acabamos de agregar esa nueva característica ?, no, ¿qué nueva característica estamos agregando? - Benjamin Pollack.

La línea de tiempo debe establecerse para que todos tengan sus expectativas en perspectiva.

4. El flujo de trabajo

Aquí es donde comienza la mayoría de las personas, así que explicaré mi proceso, pero tendrá que decidir qué flujo de trabajo es el mejor para su situación, equipo, cliente, etc.

1. Para mí, el contenido es lo primero. Me aseguro de que el cliente haga la mayoría antes de que se escriba ningún código. No estamos hablando de la edición de prueba de borrador final, sino más o menos las palabras de texto que estarán en las páginas. Si un equipo de marketing está involucrado, esto podría llevar un tiempo.

2. Ya debería tener una idea de cómo se verá el sitio. Deberías tener el contenido. Ahora debe trabajar en el diseño y los principios generales de diseño que lograrán el objetivo que se le ocurrió en el paso 3.

   ODIO los wireframes pero entiendo que son necesarios. Solo porque sabe cómo se ve el sitio, es posible que su cliente no lo haga. Esto es para su protección y para los clientes. Cuando todos estén contentos, haga que firmen algo que diga "Esto es lo que le estamos pagando por construir".

3. Desarrollo frontend e interfaz de usuario: HTML, CSS y DISEÑO EN EL NAVEGADOR , la técnica Hardboiled de Andy Clarke. Estoy cansado de perder tanto tiempo en Photoshop cuando sé que puedo demostrar una maqueta más rápida y realista que también me da una ventaja en el desarrollo.

4b. La base de código

Finalmente puedes divertirte un poco. Para el beneficio suyo y de los clientes, configure el CONTROL DE VERSIÓN antes de comenzar. Dado que está haciendo el control de versiones, debe continuar y configurar BUG TRACKING mientras lo hace.

4c. Edición de copia

¿Recuerdas ese contenido que tenemos? Ahora es cuando tiene que ser editado. Apesta esto, así que trato de contratar a alguien más o me aseguro de que mucha gente lo lea. Verifique y asegúrese de que las palabras clave de las que hablamos en el paso 2 estén optimizadas para SEO. Si nuestro contenido es excelente y en realidad se trata de esas palabras clave, esto debería ser algo natural.

5. Pruebas Beta y UI

Obtenga algunos seres humanos que respiren y se sienten en frente de su sitio y comience a usarlo. Me gusta reclutar a mi madre que a veces llama y quiere saber por qué su impresora no imprime (El enchufe mamá, tiene que enchufarse primero). Este tipo de usuarios deben poder navegar por su sitio a menos que, por supuesto, estuvieran usando el ejemplo de niño de 16 años con cara de espinilla anterior.

6. Mantenimiento y Plan SEO

Asegúrese de que todos sepan quién está a cargo de luchar contra las bestias del servidor .

En un mes, consulte el análisis competitivo que hicimos y compare nuestro sitio con los que analizamos. Utilice estos datos para crear su plan de SEO y NO, no estoy hablando del SEO del aceite de serpiente, estoy hablando de asegurarme de que aún genera contenido relevante, los sitios están naturalmente vinculados a usted (porque es tan increíble) y sus etiquetas de título coincide con el texto del cuerpo. El SEO es un proceso largo a menos que su Stack Overflow y tenga un ejército de 14.1 millones de usuarios para generar contenido de calidad para usted.

Hay una gran diferencia entre el contenido de calidad y las cosas que encuentras en "el sitio con guiones", que no vincularé. (Para evitar que el jugo sin seguimiento incluso gotee sobre ellos).

7. Lanzamiento

¿Todo funciona? ¿Se logró la misión de construir asombro? Tenga un plan de lanzamiento y ejecútelo.

Si has hecho todo bien en los pasos 1 - 6 de su puesta en marcha será una brisa sin huelga que es posible que usted tendrá problemas. Solo prepárate para ellos y corrige cualquier error.

Envíe la factura, enjuague y repita.

Me gusta empezar con <!DOCTYPE html>

En serio, aunque ... primeras prioridades:

1. Descubra lo que quiere el cliente. Dibuje un boceto aproximado para el diseño básico, haga una combinación de colores, etc.
2. Realice una maqueta básica de navegación y diseño (estática) y trabaje con el cliente para refinarla.
3. Produccion actual. Obtenga CMS y / o contenido estático en su lugar. Consulte nuevamente con el cliente para asegurarse de que sea lo que está buscando y que pueda manejar el CMS / el CMS puede manejar sus necesidades.
4. Refinar y repetir 3 hasta que el cliente esté contento.
5. ????
6. ¡Lucro!

En primer lugar, dibujaría el diseño básico y lo diseñaría en papel antes de comenzar la codificación. Después de completar el diseño básico en papel, es fácil codificarlo de forma modular. Por supuesto, php & css sería la mejor manera de personalizarlo.

Siempre me gusta comenzar haciendo una maqueta utilizando algún tipo de software de Photoshop para que pueda incorporar todas y cada una de las imágenes en su sitio.

La mayoría de las respuestas ya son profundas, permítanme agregar que deben usar un marco o plantillas para no perder el tiempo reescribiendo los conceptos básicos.

Hay muchos framework PHP disponibles ( Kohana es mi favorito personal) o muchas personas usan Wordpress como base. También podría usar un marco CSS, nuevamente hay muchos, uno de los más populares es el sistema de cuadrícula 960

Al diseñar un sitio web, ¿cómo sueles empezar ?

Como usted, encontré la necesidad de comercializarme como desarrollador / diseñador web hace unos años. Encontré mi punto de partida para entender en mi propia mente, ¿qué información, imagen y mensaje quiero ofrecer a los visitantes que visitan mi sitio web? y lo que quería que el usuario lograra / hiciera mientras visitaba mi sitio web .

Una vez que obtuve esa comprensión, el proceso de diseño se volvió mucho más claro. Me permitió escribir los elementos de mi página de inicio y las páginas posteriores que comunicarían esos elementos.

Por ejemplo, estaba muy interesado en hacer que mi CV fuera fácilmente localizable y descargable. Entonces, al diseñar mi sitio, me aseguré de que la información sobre mi CV y ​​dónde se pudiera encontrar estuviera disponible.

La moraleja de la historia es ser relevante. Todo en su sitio web debe cumplir un propósito, de lo contrario es solo ruido innecesario.