paginas nombres mega introducción gratis editores domestika diseño desde descargar desarrollo curso con completo codigo cero css

css - nombres - Herramientas gratuitas para acelerar el desarrollo web



introducción al desarrollo web responsive con html y css domestika mega (16)

Como un pequeño proyecto paralelo, estoy comenzando a construir un nuevo sitio web para una cierta organización a la que estoy afiliado, cuyo sitio actual simplemente está desactualizado.

Soy regularmente un desarrollador de Java, y la última vez que realicé algo de desarrollo web fue a finales de los 90, cuando <p> era aún más popular que <div> y Javascript era tecnología de vanguardia (JQuery es para vagos perezosos en estos días :)).

De todos modos, me siento muy desactualizado. El sitio web básicamente va a ser:

  • Django basado
  • en su mayoría sirven páginas de información estática
  • tendrá una página dinámica de noticias y actualizaciones (basada en las capacidades de administración de Django)
  • y algunas aplicaciones básicas que desarrollaré yo mismo (encuestas, pequeña aplicación de registro, etc.)

Mi problema es diseñar todo. Encontré algunos buenos generadores de diseño de CSS basados ​​en la web que me ayudaron, pero todavía siento que estoy perdiendo el tiempo para alisar los archivos CSS y alinear <div> s.

¿Hay alguna herramienta, cuanto más simple y rápida, mejor, que recomiende puedo usar para acelerar la parte de diseño del sitio para que pueda concentrarme en el trabajo real ?

No necesito nada sofisticado, solo un bonito diseño y diseño que pueda modificar un poco para que el sitio se vea presentable.

En mi empleo anterior, creé docenas de plantillas para sitios web.
Lo más útil que he descubierto es la barra de herramientas para desarrolladores web de Firefox.
Tiene una gran cantidad de pequeñas herramientas útiles. Mi característica favorita es la capacidad de editar el CSS y ver los resultados en tiempo real. Esto ahorra todo el ciclo de edición, carga y actualización. ¡Cuidado con las inconsistencias de CSS, sin embargo! Fuera de mi cabeza, estos son los problemas más importantes.

error de margen doble [google: error de margen doble]
modelo de caja incorrecto (pero más intuitivo) [google: modelo de caja]
incorrecto (pero más intuitivo) float clearing [google: clearfix]

FireBug es otro plugin de Firefox realmente útil para un análisis más profundo.

Hay un consejo que ahorra más tiempo que cualquier otro cuando se trata de un rápido desarrollo de sitios de estilo CSS y eso es MANTENGALO SIMPLE

Utilice un diseño simple y atractivo que no requiera la perfección del píxel y que pueda degradarse con ''gracia'' en navegadores menos compatibles (IE6). Minimice la cantidad de CSS y solucione los errores básicos mencionados anteriormente. Luego concéntrese en el contenido y la funcionalidad ... el trabajo real

No tiene idea de lo que va a ser el sitio, pero ¿ha pensado en usar un CMS preconstruido como Drupal, Joomla, etc.? A continuación, puede modificar plantillas, etc., en lugar de preocuparse por hacerlo desde cero.

Un colega mío ha estado tratando de convencerme durante toda la semana de que Dreamweaver , 5 años después de que me obligaron a usarlo a punta de pistola, ahora vale la pena para derribar un diseño de forma rápida y sin problemas, y ahora también es competente para producir el HTML para ese diseño.

Me niego a invertir los 10 minutos que tardaría en averiguar en función de mis experiencias previas, pero es posible que desee dar un vistazo rápido a la demostración en la cuadra :)

¿Has mirado en cualquier marco de CSS ? Si eres lo suficientemente competente con CSS, algo así como un marco podría ayudar a acelerar las cosas.

Recomiendo encontrar un paquete CMS, ya que estás usando Django, mira en django-cms . Tiene soporte TinyMCE y Markdown por lo que la actualización de sus páginas debe ser fácil. También django-cms se integra bien con la interfaz de administración de Django.

No te mentiré. Este sitio web no es el mejor lugar para ir si está buscando un asesoramiento confiable sobre Diseño Web. es una comunidad de programación y los programadores rara vez saben algo sobre diseño. Si desea obtener algún consejo real, le recomiendo encarecidamente los principales foros de Diseño / Desarrollo Web en Internet, especialmente SitePoint .

Dicho esto, como ex Diseñador / Desarrollador Web independiente, ofreceré mi opinión sobre el tema. No es que debas valorarlo, por supuesto. Después de todo, este es un sitio web de programación.

¡NUNCA NUNCA DIGA EL GENERADOR DE DISPOSICIÓN DE CSS OTRA VEZ! Si vas a dedicarte seriamente al diseño de páginas web, primero debes aprender XHTML y CSS semántico. Si bien muchas personas pregonan W3Schools como el recurso definitivo, lo veo como una respuesta de los programadores (es decir, no muy buena) y preferiría que leyeras sobre el tema usando ... Google. Hay innumerables ejemplos de sitios web geniales para retomar los conceptos básicos del Diseño / Desarrollo Web de que Google es probablemente el mejor sitio web para el trabajo. Además, con una plétora de nuevos sitios web que ofrecen esta información, usted sabe que va a mejorarse más que W3Schools. En serio querrá ponerse al tanto al escribir su diseño porque será mucho más difícil arreglarlo más adelante en el proyecto.

Si vas a diseñar páginas web, sería una buena idea aprender lo que realmente hace un buen diseño. Eche un vistazo a CSS Vault para obtener un recurso fantástico de algunas de las páginas web mejor diseñadas, por supuesto, con todo el código fuente intacto para que pueda jugar con su código y ver cómo han logrado algunos de los maravillosos efectos que tienen. he producido Aprendí más de una o dos cosas de los sitios web que se presentaron en CSS Vault. Además de eso, debe leer en Diseño Web desde los grandes sitios de Diseño / Desarrollo Web. Dos de mis favoritos son SitePoint y A List Apart , dos nombres que recordará una y otra vez cuando escucha a personas hablar de recursos. Navegue por esos sitios web, consulte sus foros, vea lo que REAL Web Designer / Developers están usando, no lo que los programadores están usando.

Sobre el tema de CSS Frameworks; ¡ellos ayudan! El problema con su uso es que a menudo pasará tanto tiempo buscando un marco valioso que podría haber terminado la mayor parte del CSS para su sitio web. Los querrás o los odiarás, pero muchas personas dirán que no son necesarios.

Una vez que tenga su mente puesta en cómo se ve un buen diseño y usted tiene los recursos que necesita para hacer algo de valor, ¡le sugiero que se ponga a trabajar! En realidad, cuando estás diseñando una página web, todo lo que realmente necesitas es un editor de texto con una función de guardar, un programa de manipulación de imágenes, una ventana del navegador y FireBug . Un IDE ayuda a muchas personas, pero si usa uno, definitivamente querrá trabajar en su modo de texto. Uso NotePad ++ o Emacs en exclusiva, pero a mucha gente le gusta usar Aptana Studio, por lo que puede valer la pena echarle un vistazo.

Cuando estés construyendo realmente el código detrás de tu sitio web, no podrás ir mucho peor que tu IDE / editor de texto favorito y una herramienta de control de código fuente. Como programador Java, usted es más adecuado para hablar sobre programación, por lo que no le daré lecciones sobre un tema que ya conozca.

Al final, el Diseño Web tomará tiempo y muchas de las herramientas que elegimos usar que, según afirmamos, "ahorrarán tiempo", ahorrarán muy poco en la realidad. Si no es un gurú del diseño, le llevará una cantidad sustancial de tiempo crear un sitio web atractivo. Es un hecho de la vida. Llámame anticuado (una palabra divertida de alguien de 21 años) pero sigo pensando que la manera más rápida es dibujar un diseño en un papel (un programa de imagen si es realmente necesario) y simplemente salir y hacer la maldita cosa! Una vez más, tendré que tomar esta búsqueda de la mentalidad de bala de plata como un rasgo de programador, uno que realmente no ayudará mucho cuando se diseña, porque diseñar una página web es muy diferente a escribir un programa Java.

En resumen, ignora todo lo que lees aquí, lee lo que los diseñadores REAL están haciendo y ¡haz la maldita cosa!

  • Un pedazo de papel para esbozar su diseño
  • Un editor de texto (preferiblemente configurado para guardar directamente en un servidor de desarrollo local o de otro modo) para escribir el HTML / CSS inicial
  • FireBug / IEDeveloperToolbar para inspeccionar cada elemento que se ve mal y editar su CSS directamente en el navegador hasta que se vea bien, seguido de confirmaciones con el editor de texto

Si está haciendo algún desarrollo de JavaScript, use un editor avanzado que destaque los errores y las advertencias mientras escribe. Hasta hace poco, este tipo de funcionalidad solo era competencia de los editores de lenguaje estático, pero el NetBeans 6 gratuito logra esta increíble hazaña. Tradicionalmente, descubriste errores tipográficos y errores simples en JavaScript al cargar por primera vez la página principal en un navegador. La aceleración que obtiene al poder acortar estas iteraciones es profunda.

NetBeans 6 también destaca los errores de CSS y es un editor más que capaz para la mayoría de los lenguajes que un desarrollador web probablemente utilizará en estos días.

Esta pregunta es bastante antigua, pero dado que estamos en 2012, es correcto que responda a mi propia pregunta con lo que estaba buscando, en 2009.

Twitter Bootstrap

También puede usar www.zbugs.com , lo ayudará a acelerar un proceso de compresión y compresión de sus archivos CSS y Javascript.

Apoyo la sugerencia de Brandon de usar un marco CSS. No le dará 100% de libertad para diseñar lo que quiera, pero puede acelerar su proceso de diseño en gran medida y liberar sus manos para hacer la codificación que realmente desea.

Sugerencias Actualizado en julio de 2013 :

Soy el segundo de la lista de marcos de CSS de Jens Roland .

Pero también sugiero que eche un vistazo a sitios web como Smashing Magazine . Puede encontrar este artículo de interés, entre muchos otros. Tienden a hacer muchas combinaciones agradables y largas para los desarrolladores web que al menos te darán inspiración, si no una solución directa.