Creación de sitios web

Sentencia condicional "if" Puede que queramos que las sentencias de nuestro código no siempre se ejecuten, o sea que su ejecución  dependa de algún tipo de condición. La sentencia " if " evalua el valor de una condición antes de ejecutar una sentencia. Si el valor de la condición es " true " dicha sentencia se ejecuta . Sintaxis:   if (condición que se evalua)     sentencia   Ejem:      if (nota >= 5)     alert("aprobado"); Si la condición se cumple ( true ), es posible que queramos ejecutar un grupo de sentencias en vez de solo una . En ese caso agruparemos las sentencias a través de los caracteres " { } ".   Ejem:   if (nota >= 5) {     var texto = "aprobado";     alert(texto);   } Es posible también que en el caso de que la condición no se cumpla, queramos ejecutar otra/s sentencia/s . Para ello añadiremos la clausula " else ".     Ejem: ...

Crear un "slideshow" sencillo con código Es relativamente sencillo crear un "slideshow" si encontramos un buen código :). Es probable que no entendamos todo el código que estamos pegando, pero hay veces que nos puede convenir utilizar código que incluso no entendemos, por ejemplo por falta de tiempo. Si buscamos en Google "javascript slideshow", el primer resultado que nos aparece es la siguente página de w3schools: https://www.w3schools.com/howto/howto_js_slideshow.asp Como se puede apreciar en 3 sencillos pasos (steps) se puede crear un "slideshow" sencillo. Aquí abajo los vamos a reproducir con algo más de detalle: 1. Creamos la estructura básica de un documento HTML: <!DOCTYPE html> <html> <head></head> <body></body> </html> 2. En el interior de las etiquetas <body></body> añadimos el código que aparece en el "Step 1" de la página de w3schools. En dicho códig...

Incluir JavaScript en documentos HTML Existen 2 maneras de incluir JavaScript (JS) en un documento HTML: A través de las etiquetas <script></script> . Incluyendo un archivo externo con extension .js Si vamos a usar el 1er método , deberemos añadir las etiquetas <script></script> antes del cierre del body . <!DOCTYPE html> <html>   <head></head>   <body>      <script>     <!-- aquí se escribe el código JS -->   </script>   </body> </html> Se pueden incluir tantas etiquetas <script></script> como se quieran pero una es suficiente . Si vamos a usar el 2do método , deberemos de escribir la siguiente linea, igualmente también antes del cierre del body : <script src=" archivo, ruta o URL del archivo .js "></script> Si el archivo está almanceado en nuestro sistema, podemos crear un directorio llamado " js " ...

Introducción JavaScript es un lenguaje de programación . En nuestro caso, JavaScript formará parte de nuestras páginas web. JavaScript permite que una página web sea mas dinámica e interactiva. JavaScript permite añadir, eliminar o cambiar elementos de nuestra web una vez que está cargada en el navegador. Comentarios //  esto es un comentario de una linea /* esto también es un comentario de una linea */  /* esto es un   * comentario de   * varias lineas   */ Variables  Cuando creamos un programa informático, los datos se almacenan en variables . Las variables se suele almacenar en la  memoría RAM  del dispositivo informático donde se ejecuta el programa. Imaginemos que queremos hacer un programa con JS que sume dos números : var a = 3; var b = 5; var c = a + b; En el ejemplo anterior, primeramente declaramos la variable " a " (identificador) y la inicializamos con valor "3". Despues declaramo...

La barra de navegación horizontal Tras habernos logeado en WordPress, entramos en la parte administrativa. En la parte superior podemos ver una barra de navegación horizontal. Pulsando el icono de WordPress (primero empezando por la izquierda), aparecerá la parte administrativa de WordPress. Si pasamos el ratón por encima del siguiente icono, aparecerá una entrada en un menú despegable que dice "Visitar sitio". Al pulsar sobre él, nos aparece el sitio web que queremos publicar. Por defecto, nuestro sitio web se presenta así: Por defecto, WordPress nos muestra un tema orientado a la creación de una bitacora o "blog". Vemos que el contenido que aparece en la página principal es este: Una entrada o "post" por defecto. Una casilla de busqueda para realizar busquedas del contenido en los "posts". Entradas recientes: una lista de los "posts" más recientes. Comentarios más recientes: las lista de los comentarios que otra...

¿Qué es un servidor en informática? Cuando hablamos de servidor a casi todos nos viene a la cabeza un gran ordenador de este estilo: En realidad, un servidor en realidad es un programa informático , lo que ocurre es que cuando instalamos un servidor en un ordenador (pequeño o grande), a ese ordenador POR EXTENSIÓN también se le llama servidor . ¿De qué se encarga un servidor? Un servidor atiende solicitudes/ peticiones que le envía un cliente (otra software o aplicación informática). En muchos de los casos el servidor proporcionará (servirá) una respuesta a ese cliente que le ha enviado la petición. En el caso del SERVIDOR WEB , la respuesta que proporciona es una página web (código), o algún otro tipo de información: JSON, archivos, etc, etc. El cliente es el llamado "navegador web" (Firefox, Chrome, Explorer, etc). Una aplicación móvil (apps) también pueden contener un cliente que envia peticiones y recibe datos de un servidor. Si la petición se hac...

Centrar lineas de texto Para centrar lineas de texto, usaremos la propiedad " text-align : center". Ejemplo: <h1 style="background: greeen; text-align: center ">Lorem ipsum</h1> La declaración " text-align: center " suele usarse para centrar texto en elementos "de bloque" . Si el elemento es "en linea" su contenido siempre estará centrado. Centrar un elemento Elementos de bloque : ocupan el 100% del ancho del contenedor, así que será ínutil si intentamos centrarlos tal cual. Para centrar un elemento "de bloque" tendremos que asignarle un ancho y añadir las declaraciones " margin-left: auto " y " margin-right: auto ". Ejemplo: <h1 style="background: green; width: 500px; margin-left: auto; margin-right: auto ">Lorem ipsum</h1> Elementos en linea : será necesario transformarlos en elementos "de bloque" . Ejemplo: <img src="......

Tutorial: barra de navegación con submenú (o menú desplegable) con HTML y CSS Vamos a crear una barra de navegación como esta : Lo primero es crear una lista anidada. Como se puede ver, el "Item 2" contiene un submenú . A continuación, eliminamos el " padding ", el " margin " y los puntos de las listas: y flotamos a la izquierda ( float: left ) los <li> del menú principal (los del submenú no!!): Como se puede apreciar, el "Item 3" ha dejado de estar junto al "Item 2" , y el espacio entre ellos depende de la longitud del texto de los subitems. Para evitar esto, tendremos que sacar el submenú del flujo de elementos , de esta manera no ocupará espacio. Ahora se puede ver también, que "Subitem 1" y "Subitem 2" no están en una sola linea sino en 2. Para evitar esto añadimos " white-space: nowrap " en los <li> del submenu : Es necesario que el submenu sólo este visi...