sitio para imagenes estructura ejemplos efectos carpetas animaciones javascript jquery html css jquery-ui

javascript - para - estructura de carpetas de un sitio web



La mejor práctica para organizar la biblioteca Javascript y la estructura de carpetas CSS (2)

Cómo organizar tus archivos HTML, CSS y Javascript

Esbozaré una estructura recomendada para organizar archivos en su aplicación HTML5. Esto no es un intento de crear ningún tipo de estándar. En cambio, haré sugerencias sobre cómo agrupar y nombrar archivos de una manera lógica y conveniente.

Tu proyecto

Supongamos que está creando una aplicación HTML5. En algunos casos, puede usar la raíz de su servidor como el contenedor principal, pero a los fines de este artículo asumiré que la aplicación HTML5 está contenida en una carpeta. Dentro de esta carpeta debe crear su archivo de índice de aplicación o punto de entrada principal.

  • proyecto de appcropolis
    • my-index.html

En general, su aplicación estará compuesta por HTML, CSS, imágenes y archivos Javascript. Algunos de esos archivos serán específicos para su aplicación y otros se pueden usar en varias aplicaciones. Esta es una distinción muy importante. Para hacer una agrupación efectiva de sus archivos, debe comenzar por separar los archivos de propósito general de los recursos específicos de la aplicación.

lleno ">
  • proyecto de appcropolis
    • recursos
    • vendedores
    • my-index.html

Esta separación simple hace que navegar por sus archivos sea mucho más fácil. Una vez que coloca las bibliotecas y los archivos de propósito general dentro de la carpeta de proveedores , queda claro que los archivos que va a editar se ubicarán en la carpeta de recursos .

Además de su código HTML, el resto de los archivos en su aplicación son en su mayoría CSS, Javascript e imágenes. Lo más probable es que ya agrupe los archivos de su aplicación dentro de las carpetas que corresponden a este tipo de activos.

  • proyecto de appcropolis
    • recursos
      • css
      • js
      • imágenes
      • datos
    • vendedores
    • my-index.html

La carpeta js contendrá su código Javascript. Del mismo modo, la carpeta de imágenes es el lugar donde debe agregar imágenes que se usan directamente desde index.html o cualquier otra página en su aplicación. Esta carpeta de imágenes no debe usarse para alojar archivos relacionados con hojas de estilo. Su código CSS e imágenes relacionadas deben ubicarse dentro de la carpeta css . Al hacer esto, puede crear páginas que pueden usar fácilmente diferentes temas y permite que su aplicación sea más portátil.

  • proyecto de appcropolis
    • recursos
      • css
        • tema azul
          • background.png
        • imágenes
          • background.png
        • blue-theme.css
        • my-index.css
      • js
        • my-index.js
        • my-contact-info.js
      • imágenes
        • productos
          • computer.jpg
          • cellphone.png
          • printer.jpg
        • my-company-logo-small.png
        • my-company-logo-large.png
      • datos
        • some-data.json
        • more-data.xml
        • table-data.csv
        • extra-data.txt
    • vendedores
      • jquery
        • imágenes
          • ajax-loader.gif
          • icons-18-white.png
        • jquery.min.js
        • jquery.mobile-1.1.0.min.css
        • jquery.mobile-1.1.0.min.js
      • alguna-css-library
      • some-plugin.jquery
    • my-index.html
    • my-contact-info.html
    • my-products.html

El ejemplo anterior muestra el contenido de la carpeta css . Tenga en cuenta que hay un archivo llamado default.css que debe usarse como su archivo CSS principal. Las imágenes utilizadas por la hoja de estilo predeterminada deben colocarse dentro de la carpeta de imágenes . Si desea crear hojas de estilo alternativas o si desea anular las reglas definidas en su hoja de estilo predeterminada, puede crear archivos CSS adicionales y las carpetas correspondientes. Por ejemplo, puede crear una hoja de estilo blue-theme.css y colocar todas las imágenes relacionadas dentro de una carpeta de tema azul . Si tiene un código CSS o Javascript que solo utiliza una página (en este caso my-index.html), puede agrupar el código específico de la página dentro de los archivos .css y .js con el mismo nombre de la página (ei my-index .css y my-index.js). Su código CSS y Javascript debe ser lo más genérico posible, pero puede realizar un seguimiento de las excepciones colocándolas en archivos separados.

Recomendaciones finales

Algunas recomendaciones finales deben hacerse en torno a los nombres de carpetas y archivos. Como regla general, asegúrese de utilizar letras minúsculas en todos los nombres de carpetas y archivos. Cuando utilice varias palabras para nombrar un archivo o una carpeta, sepárelas con un guión (es decir, my-company-logo-small.png). Si sigues los consejos de este artículo, deberías poder combinar varias páginas a la vez que mantienes los recursos comunes juntos y el código personalizado muy bien separado.

Finalmente, incluso si no elige usar la estructura recomendada en este artículo, es importante apegarse a una convención. Aumentará su productividad y, lo que es más importante, hará que el trabajo que usted hace sea fácil de entender para los demás.

¿Cómo organizas tu carpeta js & css en tu aplicación web?

Mi estructura de proyecto actual es como esta:

root/ assets/ js/ lib/ css/ img/ index.html

Pero es más complicado cuando uso muchos javascript library & css plugin. El complemento de Javascript viene con su propio archivo .js y, a veces, con su propio archivo .css.

Por ejemplo, cuando uso JQuery con el complemento JQueryUI, coloco el jquery.js y el jquery-ui.js dentro del directorio js / lib. Pero JQueryUI viene con su propio archivo css. ¿Dónde debería colocar el css del complemento de JavaScript para obtener mejores prácticas? ¿Debo ponerlos dentro de la carpeta lib, para distinguir mi css y javascript css? ¿O en otra parte?

Sé que son preferencias personales, pero solo quiero saber cómo organizan la carpeta de proyectos.

Gracias por adelantado :)

root/ assets/ lib/-------------------------libraries-------------------- bootstrap/--------------Libraries can have js/css/images------------ css/ js/ images/ jquery/ js/ font-awesome/ css/ images/ common/--------------------common section will have application level resources css/ js/ img/ index.html

Así es como organicé los recursos estáticos de mi aplicación.