semanticas - ¿Cuál es la mejor manera de pasar de una maqueta de Photoshop a semántica HTML y CSS?

semantica html5 ejemplos

Question

Generalmente utilizo un proceso manual:

1. Mire la página, descubra los elementos semánticos y construya el HTML
2. Recorte las imágenes que creo necesitaré
3. Comience a escribir CSS
4. Ajustar y repetir diferentes pasos según sea necesario

¿Tienes un mejor enfoque o una herramienta?

Answer 1

Algunos de los diseñadores que conozco usualmente usan Illustrator para hacer los elementos de diseño.

Answer 2

No hay atajos :) pero todos trabajan de forma ligeramente diferente.

Este tutorial que apareció en mi lector de noticias ayer muestra el proceso de principio a fin y podría ayudar a las personas que nunca lo han hecho antes, pero como eres viejo, solo se trata de simplificar tus propios métodos.

EDITAR: El enlace de listapart ciertamente es más automatizado para diseños ''planos'' donde tanto imágenes como fuegos artificiales han tenido un apoyo bastante bueno desde el primer día y tiene mejor y más semántica con cada lanzamiento, pero si tienes un diseño más complejo son los bits hacer que el diseño sea lo que es y que esto deba hacerse a mano.

Answer 3

Esta página muestra cómo hacerlo un poco más automatizado.

Answer 4

Tengo una forma bastante natural de codificación. La clave es tratar la página como un documento o un artículo. Si lo piensas así, lo siguiente se vuelve lógicamente claro:

1. El título de la página es un encabezado de nivel superior

   • Ya sea que haga el título del sitio o el título real de la página, la h1 depende de usted; personalmente yo haría About h1 en lugar de .

2. La navegación es una tabla de contenido y, por lo tanto, una lista ordenada ; también puede usar un ol sobre un ul.

3. Los encabezados de sección son h2, las secciones dentro de esas secciones son h3s, etc. Apúntalos.

4. Usa blockquotes y quotes cuando sea posible. No solo rodearlo con ".

5. No use b y yo. Usa strong y em. Esto es porque HTML es estructural en lugar de marcado de presentación. Deben usarse etiquetas fuertes y em phasis donde pondría énfasis en la palabra.

6. <label> sus elementos de formulario.

7. Use <acronym> sy <abbr> s donde sea posible, pero solo en la primera instancia.

8. Lo más fácil: siempre, siempre dale a tus imágenes algún texto alternativo.

9. Hay muchas etiquetas HTML que podría usar que probablemente no tenga: dirección de direcciones postales, salida de código de pantalla. Echa un vistazo a HTML Dog para algunos, es mi referencia favorita.

Son solo algunos consejos, estoy seguro de que podría pensar en más.

Ah, y si quieres un desafío escribe tu XHTML primero, luego escribe el CSS. Cuando CSS-ing no tiene permitido tocar el HTML. En realidad es más difícil de lo que crees (pero he descubierto que me ha hecho más rápido).

Answer 5

Solo pensé que valía la pena señalar que, además de los excelentes consejos que has recibido hasta ahora, te recomendaría obtener una versión impresa del diseño, usando un bolígrafo rojo para marcar todos los elementos del bloque en el diseño que creas puede detectar y sentarse con el diseñador durante media hora y hablar sobre cómo imaginaron su diseño trabajando para los casos de uso que no se ajustan al diseño estático.

• ¿Qué sucede cuando se coloca más texto en la navegación?
• ¿Este ancho es fijo o fluido?
• ¿Este panel de contenido está a la altura o fluido correctos? Si es fluido, ¿por qué pusiste un fondo que no se puede repetir?
• Tiene un borde que se extiende hacia abajo en la página que rompe dos elementos conectados de otra manera. Visualmente tiene sentido, pero semánticamente no puedo usar un li para albergar ambos elementos. ¿Qué crees que es más importante?

También te ayudará a detectar problemas potenciales que de otra manera no habrías comprendido que iban a haber problemas hasta que te hayas metido en el css.

No solo le facilitará el trabajo después de algunas veces, su diseñador tendrá una idea mucho más clara de lo que implica marcar su trabajo: algunos diseñadores tienen verdaderos problemas para comprender por qué algo que piensan que se ve visualmente muy simple tomará algunos días de ajustes CSS para hacer el trabajo.

Answer 6

Además, conozca la función "Layer Comps". Lo uso para cambiar los estados de los botones.

1. Crea capas comp para normal, hover y activo.
2. En cada uno de estos, configure las superposiciones de efectos / colores y las capas visibles que pertenecen a ese estado.
3. Guardar para web: vaya a una carpeta diferente para cada estado, a menos que sea más fácil cambiar el nombre de cada sector (de lo contrario, las secciones de los botones del cursor sobreescribirán sus segmentos regulares).

Answer 7

Básicamente hago lo mismo que Jon, pero aquí hay algunas otras ideas:

1. Use Guías en Photoshop (y bloquéelas). Calcule todas sus dimensiones para cada caja / región antes de tiempo.

2. Reúna todas sus dimensiones y valores hexadecimales de color en un archivo de información (utilizo un archivo txt) al que puede hacer referencia fácilmente. Esto reducirá su impuesto alt-pestaña y la selección de colores en Photoshop varias veces.

3. Después de que todas mis Guías estén en su lugar, recorto todo el sitio web en mi carpeta de imágenes, comenzando con fotos y elementos agrupados, y terminando con los diversos mosaicos / imágenes de fondo, en caso de que existan. (Sugerencia: use ctrl -click en la vista previa de la capa para seleccionar el contenido de esa capa).

Notas sobre el uso de Photoshop:

• Use Guías o la Grilla.
• Use la función Notas para cualquier información pertinente
• Utilice siempre grupos de capas para elementos similares. Necesitamos poder desactivar regiones enteras con un solo clic. Pon todo el contenido ''encabezado'' en un grupo de capas.
• Siempre nombra tus capas.
• Puede colocar cada plantilla de página en un archivo PSD y usar grupos de capas anidados para organizarlos. De esta forma, no tenemos que configurar todas nuestras guías y notas para cada plantilla de página en un sitio.

Answer 8

Bueno, cuando construyo un sitio web tiendo a tratar de olvidarme por completo del diseño mientras escribo el HTML. Lo hago así que no terminaré con ningún marcado específico del diseño y entonces puedo centrarme en el significado semántico de los elementos.

Algunos consejos sobre cómo marcar cosas:

• menú: use el elemento UL (lista desordenada), ya que eso es exactamente lo que es un menú. una lista desordenada de opciones. ejemplo:

  <ul id="menu">
      <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
      <li id="about"><a href="/about" title="More about us">About</a></li>
  </ul>

  si quieres un menú horizontal, puedes hacer esto:

  #menu li {
      display: block;
      float: left;
  }

• Logotipo: use un elemento H1 (encabezado) para el logotipo en lugar de una imagen. Ejemplo:

  <div id="header">
      <h1>My website</h1>
  </div>

  Y el CSS (la misma técnica se puede aplicar al menú de arriba si desea un menú con elementos gráficos):

  #header h1 {
      display: block;
      text-indent: -9999em;
      width: 200px;
      height: 100px;
      background: transparent url(images/logo.png) no-repeat;
  }

• ID y clases: use ID para identificar elementos de los que solo tiene una instancia. Usa la clase para identificar elementos de los que obtuviste varias instancias.

• Use un navegador de texto (por ejemplo, lynx). Si tiene sentido navegar de esta manera, lo ha hecho bien en lo que respecta a la accesibilidad.

Espero que esto ayude :)