Una correcta distribución de códigos

El día de hoy y con este tema lo que se pretende es despejar una serie de dudas que a la mayoría, en cierta ocasión, se os ha planteado. Si os inquieta el peso de vuestra página, la rapidez y sobre todo el poseer un buen trabajo hecho, este artículo quizá os interesará bastante.

Se empezará con el tema de la distribución de estilos, lugar, forma etc.

Código CSS

Se tiene que conocer que hay tres fórmulas de determinar código CSS en vuestra página web. Los tres son correctos, pero sólo uno es el más óptimo.

  1. En línea: Dicho código lo pueden incluir en una etiqueta HTML a través del atributo “style”. Un ejemplo de esa forma de agregar código CSS es el siguiente:

<div style=”float:left; width:50%”>Lo que sea </div>

  1. Incrustado: El código lo pueden agregar en cualquier parte del código a través la etiqueta. Un ejemplo sería:

[callout font_size=”13px” style=”bluegrey”]

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Document</title>

</head>

<body>

<h1>CSS </h1>

<p>

Lo que sea

</p>

<style>

h1{

font-size: 16pt;

color:red;

}

</style>

</body>

</html>

[/callout]

  1. Externo: Se crea un archivo o distintos .css en el cual tienen todo vuestro código CSS completamente organizado. Lo añadirían a vuestro HTML de la siguiente forma:

[callout font_size=”13px” style=”bluegrey”]

<!doctype html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Document</title>

<link rel=”stylesheet” href=”estilos.css”>

</head>

<body>

[/callout]

 

¿Cuál creen que sea la opción más efectiva para vuestra web? Bien pues os mencionaré que la tercera. Esa es la manera más conveniente de representar vuestro código CSS. Si bien penséis que de esa manera hacen otra petición al servidor, cosa que es verdadera, os mencionaré que de ese modo tarda menos en cargar la página y la petición al servidor apenas se nota ya que tarda mucho menos que en cargar CSS combinado con el código HTML.

Si debéis de meter código CSS en el documento HTML, es respetable redactar el CSS al comienzo del documento para que, al cargar la web, lo primero que se cargue sean el HTML y el CSS y la persona posea la página con estilos lo antes posible y no pueda observar la web sin formato ni estilos.

Código Javascript

Una vez que se haya visto cómo añadir el código CSS de forma correcta para optimizar vuestra web, se va a realizar lo mismo con los scripts Javascript.

Al igual que pasaba con CSS, se dispone de tres formulas de inserción de código Javascript:

  1. En línea: Se puede agregar un código Javascript por ejemplo a un botón de un formulario en HTML de la siguiente forma:

[callout font_size=”13px” style=”bluegrey”]

<form action=”loquesea.php” method=”post”>

<input type=”email” value=”” name=”EMAIL”>

<input type=”submit” value=”Subscribete” name=”subscribe” onclick=”window.alert(‘Vas en enviar el formulario’)”>

</form>

[/callout]

  1. Incrustado: Pueden colocar vuestro código Javascript en cualquier parte del HTML, siempre y cuando esté entre las etiquetas <script></script>

[callout font_size=”13px” style=”bluegrey”]

<!DOCTYPE HTML>

<html lang=”es”>

<head>
<meta charset=”UTF-8″>

<title>Mi página con Javascript</title>

</head>

<body>

<script>

//Aquí tu código Javascript

</script>

</body>

</html>

[/callout]

 

  1. Externo: Pueden asimismo separar vuestro código javascript en un archivo aparte con extensión .js. Para vincularlo con vuestro HTML utilizarán el siguiente código:

[callout font_size=”13px” style=”bluegrey”]

<!DOCTYPE HTML>

<html lang=”es”>

<head>

<meta charset=”UTF-8″>

<title>Mi página con Javascript</title>

<script src=loquesea.js ></script>

[/callout]

Ya saben cómo insertarlo, realmente fácil. Ahora bien deben de estudiar cuál es la opción más óptima de cara a la carga de vuestra página.

Se comienza diciendo que, como en el caso anterior, os recomiendo repetidamente que saquéis vuestro código javascript, jQuery, etc. fuera del archivo .html. Es la elección más inapreciable, pero si tienen que redactar algo en el mismo archivo .html, deben tener en cuenta que lo más recomendable es redactar los scripts al final del documento.