¿Cómo organizar mi contenido web?

Question

¿Cuál es la forma más común de organizar el contenido web, es decir, HTML, JS y CSS?

generalmente estoy haciendo esto para pequeños proyectos:

• index.html
• style.css
• script.js

Creo que esto es bastante estándar. ¿Pero cómo lo haces para proyectos con más de un archivo HTML/JS? Mi enfoque es:

• index.html
• foobar.html
• style.css
• js
  • core.js
  • foobar.js

¿Es esta una forma común de hacer ing it? ¿Debo mover CSS a un directorio "css" separado, incluso si solo hay un archivo? ¿Cómo se suele llamar a este archivo CSS central? "style.css" o "base.css" o algo más? ¿Es común mover archivos HTML a un directorio separado?

Answer 1

Eso es más o menos una cuestión de gusto.

Sin embargo, es muy común poner todas sus js/css e imágenes estáticas en una sola carpeta como/static o/media. Entonces, por ejemplo /media/css/style.css. El punto aquí es que a menudo desarrollará páginas dinámicas usando un servidor de aplicaciones (Ruby on Rails, Django) y desea servir el contenido estático usando un servidor web de peso liviano como nginx.

Es posible que desee echar un vistazo a http://html5boilerplate.com/ que contiene la mayoría de las mejores prácticas actuales.

Answer 2

Me gusta la organización de Rails. Los archivos públicos estáticos que se sirven a los usuarios están en /public. Luego, los archivos JavaScript y CSS se almacenan bajo public/javascripts y public/stylesheets respectivamente. Los archivos estáticos html se almacenan en /public.

En cuanto al nombre de archivo central de CSS, es realmente su preferencia. Puede ponerle un nombre a su sitio web (por ejemplo, twitter.css), o puede darle un nombre general como base.css, all.css. etc.

Guardaría su html en la carpeta public, pero también puede crear una carpeta public/html.

Answer 3

Le sugiero que mueva: imágenes a otro directorio (por supuesto), css si tiene más de un archivo en otro directorio, js si hay más de un archivo en otro directorio. Y recuerde que el nombre de los archivos es una de las cosas más importantes. no llame a estilos (si hay más de uno) como style1 o style2 pero las diferencias entre ellos, especificaciones breves como light_gray.css o dark_black.css. Lo mismo ocurre con los scripts si usa scripts js más grandes y agréguelos a un directorio separado.

Answer 4

hago esto:

index.html 
styles/ 
    main.css # Main CSS 
    i/  # CSS images dir. Its name is short because: background:url(i/my_image.png); 
    f/  # CSS fonts dir. 
scripts/ 
    main.js # Main JS 
images/  # Content images 

Answer 5

La estructura más común que me encuentro es:

• index.html
• foobar.html
• imágenes
  • some_image.jpg
• hojas de estilo
  • default.css (application.css o style.css también es común)
• js (o javascripts)
  • application.js
  • hello_world.js

Así es como generalmente se hace en rieles y una umber de otros marcos.

A medida que su proyecto se expande, es probable que tenga varias hojas de estilo/scripts, por lo que poner las cosas en carpetas para empezar le ahorrará tiempo/esfuerzo más adelante.

Answer 6

En proyectos grandes, diferenciar entre archivos estáticos y dinámicos, es decir, archivos, que se analizan y ejecutan como PHP y archivos, que se envían al cliente tal como están. Muchos marcos PHP sugieren una variación de los siguientes:

index.php  # single starting point 
admin.php  # *or* 
admin/index.php # admin area, separated from frontend 
lib/   # contains executables, that are not directly called 
static/   # contains CSS, JS, images and so on, that come from developers 
assets/   # static content, that is uploaded by the user 

Este enfoque tiene varias ventajas. En primer lugar, no mezcle cargas de usuarios con sus hojas de estilo. A continuación, puede configurar fácilmente su servidor web para enviar los encabezados de caducidad y de caché apropiados con material encontrado en static y assets.

La carpeta lib está prohibida para los clientes de alguna manera, por lo que no envía código al cliente, solo para incrustación.

Después de todo, sin embargo, es una cuestión de lo que le gusta y lo que necesita.

Answer 7

La configuración predeterminada para formularios web ASP.NET es index.html y foobar.html van con archivos públicos en el directorio raíz. Luego están los directorios Scripts y Styles debajo de eso. Si tiene archivos restringidos, estos van en un directorio Account. No estoy diciendo que esta sea la mejor manera, pero es una forma común de hacerlo en el lado de Microsoft.