¿Qué herramientas CSS (framework, grids system, IDE, ...) necesito para comenzar el diseño web?

StackOverflow https://stackoverflow.com/questions/1612398

  •  06-07-2019
  •  | 
  •  

Pregunta

Estoy construyendo un nuevo sitio web basado en la tecnología Grails.

En lo que respecta al diseño gráfico de mi sitio web, planeo usar los servicios de un diseñador web profesional, pero mientras tanto, necesito hacer un diseño gráfico básico para tener un "usuario fácil de usar". versión beta.

He leído el sitio stackoverflow.com pero no pude decidirme. Esto es lo que he descubierto: how-do-you-Choose-a-css-framework what-is-the-best-css-grid-framework < css-framework what-is-the-best- css-framework-and-are-they-worth-the-esfuerzo-

Pero desafortunadamente hay muchas respuestas contradictorias. Primero, algunos dicen que el uso del marco CSS es la creación hacia atrás y no es algo bueno. Otros aconsejan YUI Grids, BluePrint, 960 gs, YAML ... Y muchos dicen que Compass permite desarrollar diseños CSS fácilmente y reutilizables.

Entonces considerando que:

  • Soy nuevo en el mundo CSS y no pretendo ser un diseñador web
  • Mi diseño debe ser fácil de usar (pero no es necesario, impresionante L & amp; F)
  • Debe ser mantenible y fácilmente mejorable (por un diseñador web profesional)
  • Fácil de implementar (para tener algo rápidamente)

¿Qué me aconseja para comenzar con el diseño web de mi sitio?

Gracias por tus consejos.

Fabien

¿Fue útil?

Solución

Primero, si no pretendes ser un diseñador web, sugeriría subcontratar tu CSS. Hay varios sitios web donde puede suministrar HTML o un diseño de Photoshop y hacer que se codifique para bien bajo un gran (1k). O obtenga diseños HTML / CSS gratis .

Luego hay una cosa que debes saber y otra dos que necesitas resolver:

  1. todo HTML debe escribirse de manera semántica y válida: semántica = encabezados, listas, sin divs excesivos, etc .; válido = pasará las pruebas de validación WC3. Nada de esto es ciencia de cohetes, pero sigue siendo una habilidad que debe aprenderse. Transcending CSS de Andy Clarke es un gran libro sobre HTML / CSS semántico. Para facilitar el mantenimiento, el HTML y CSS deben estar ordenados y con sangría constante, etc.

  2. necesita determinar si necesitará un administrador y una base de datos para administrar el contenido, o si está creando un sitio que consta de páginas estáticas (es decir, archivos html y css, imágenes y otros medios, etc.) .). Si es lo primero, esa es otra curva de aprendizaje :-)

  3. ¿Cuáles son tus mejores habilidades? Si eres un buen diseñador, haz que otras personas escriban HTML / CSS, o usa una plantilla ya hecha (hay muchas en la web) y personalízala. Aquí está un buen comienzo para diseños de varias columnas . Si eres programador, aprende a usar un marco como Django (Python), Titanium (Perl), algo más pequeño en Ruby (porque Ruby on Rails es un poco grande para comenzar) o en tu idioma favorito.

El buen CSS es un oficio, y la simplicidad es la esencia, pero si quieres aprender lo suficiente para comenzar, mi consejo sería:

  1. entienda la herencia (la 'cascada' en CSS) y el hecho de que cualquier cosa puede ser un 'bloque', así que no use muchos divs anidados solo para aplicar un estilo. En su lugar, aplique el estilo al elemento HTML en sí, o al elemento solo cuando aparezca en un bloque principal (como una lista de menús no ordenada contenida en una barra lateral div);

  2. aprenda sobre bloque y elementos en línea ( Web Design from Scratch es un gran recurso de aprendizaje y me gustaría lo recomiendo), y que CSS puede cambiar este comportamiento;

  3. prueba en Firefox, luego prueba en Internet Explorer. > = IE7 no es tan malo (pero busque HasLayout ). Lo que no puede modificar para obtener resultados en IE, use comentarios condicionales para agregar CSS que solo IE puede ver - nunca usa hacks CSS - .htc archivos que agrega la funcionalidad faltante de IE (por ejemplo, los estilos de reinversión en cualquier elemento) están disponibles;

  4. aprenda sobre posicionamiento CSS , y use 'arreglado' con moderación;

  5. ponga todo su CSS en un archivo (para empezar), y no use CSS en línea en el HTML;

  6. formas de estilo y los campos de formulario son casi una habilidad separada :-)

Use imágenes de fondo para agregar estilo, pero también entienda que puede compensar y superponer imágenes usando posicionamiento. Sin embargo, necesitarás usar PNG para una buena transparencia. Oh sí, y opacity se ve bien, pero requiere CSS no estándar por ahora. aunque el método más flexible rgba (a = alpha) es ampliamente compatible. Al igual que esquinas redondeadas , pero vale la pena usar ambas.

Por ahora, evitaría los marcos de trabajo y los restablecimientos de CSS: complicarán las cosas en esta etapa al agregar otro DSL para aprender (pero lea los argumentos y pros y contras ). Para evitar los molestos márgenes predeterminados y el relleno, siempre reinicio todo haciendo html *, body * {margin: 0; padding 0;} luego vuelva a crear el relleno y los márgenes donde sea necesario, nunca ha sido un problema hasta ahora :-)

Otros consejos

  

¿Qué me aconseja para comenzar con el diseño web de mi sitio?

Obtenga el Firebug para Firefox ahora!

Usos primarios de CSS:

  • Vea qué reglas de CSS se aplican
  • Cambie CSS en tiempo real y vea el efecto
  • Inspecciona otros sitios web para ver cómo hacen las cosas

No podría desarrollar CSS (y otras tecnologías relacionadas con la web) sin esta herramienta

Echa un vistazo a YUI CSS reset / base / font / grid

http://developer.yahoo.com/yui/3/cssreset/

Y Grid 960 también tiene algunos diseños agradables (busca su sitio en google)

No sé qué sistema operativo está ejecutando, pero si es usuario de Mac, le sugiero una excelente herramienta gratuita para CSS: Xyle Scope . No es un editor sino un visor / escáner de CSS, le permite navegar fácilmente el código CSS de cualquier página web para que pueda aprender mejor cómo funciona css y analizar cualquier diseño bien hecho en la web.

CSSEdit (solo para Mac) es una buena solución para escribir hojas de Cascade, fácil de usar, no es costoso , y alcance de las características.

Fireworks: ¡Creo que es un excelente software para redactar tus diseños y hacer algunos buenos trabajos gráficos!

Dreamweaver: es una solución todo en uno para el desarrollo web ... es una herramienta realmente genial para mantener sincronizada fácilmente su versión remota del sitio web con la local.

Coda (solo para Mac) es una muy buena alternativa a Dreamweaver, incluso si no te deja ¡Administra y edita los archivos .htaccess!

Para codificar su sitio web, sugiero Dreamweaver o Coda, pero otra buena alternativa es BBEdit (Mac Sólo).

Bootstrap, es el mejor framework css que puedo sugerir, también existe otra llamada cimientos, pero prefiero bootstrap más, ya que es popular entre los desarrolladores y es extensible. Hay algunos otros marcos adicionales, escribí un blog sobre eso, aquí Léelo también si quieres http://www.andwecode.com/freebies/5-responsive-css-frameworks :)

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top