sábado, 23 de enero de 2016

Estructura de archivos de Wordpress y sus plantillas

1 - Estructura de archivos de Wordpress

Vamos a analizar de manera breve y sesgada la estructura de directorios de una instalación típica de Wordpress, lo cual no ayudará a entenderlo mejor y ser más eficientes.

Estructura de directorios de una instalación de Wordpress
El directorio wp-content incluye, en concreto, dos directorios: plugins, que contendrá únicamente las carpetas y archivos de los plugins; y themes, donde se alojan las plantillas o temas. Éstas serán las ubicaciones de los plugins y temas que creemos o modifiquemos. El resto de los archivos, si bien es relevante, no nos interesa analizar ni modificar. Corresponden al funcionamiento de Wordpress y el administrador de nuestro sitio, y de momento no profundizaremos en eso.

Contenido de wp-content

2 - Estructura de archivos del tema de Worpress


Tema básico de Wordpress

http://www.esandra.com/crear-plantilla-wordpress-desde-cero

/wp-content/themes/mitema
    /imagesCarpeta con las imágenes del tema.
    /jsCarpeta con los archivos de JavaScript
    style.cssHoja de estilos del tema. Obligatoria para que el tema funcione.
    index.phpObligatorio para que el tema funcione. Por defecto será la página principal.
    screenshot.pngMuestra la imagen en miniatura que se verá en el panel de adminsitración en Apariencia > Temas.
    favicon.icoLa imagen que se verá en el navegador y al guardar el marcador.
    header.phpMódulo que contiene la cabecera del tema.
    sidebar.phpLa barra lateral del tema. Nota: Si queremos más de una barra lateral, se habrán de configurar de modo manual.
    footer.phpMódulo que contiene el pie de página del tema.
    single.phpEste archivo indica cómo se ve una entrada de blog.
    category.phpMuestra cómo se ve la página de resultados de una categoría.
    tag.phpMuestra cómo se ve la página de resultados de una etiqueta.
    search.phpMuestra cómo se ve la página de resultados de búsqueda.
    template.phpPlantilla de página que a título de ejemplo llamaremos template.
    functions.phpArchivo con las funciones de nuestro tema de WordPress.

    jueves, 21 de enero de 2016

    CSS responsivo: usos de @media

    Adición de código CSS para implementar diseño responsivo.
    Se recomienta leer:  http://www.desarrolloweb.com/articulos/regla-media-css.html
    Fuente: http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=CSS3MediaQueries

    Este código a añadir establecerá las directivas de diseño según el tamaño de la pantalla, y los siguientes fragmentos se refieren a algunos de los tamaños de pantalla más utilizados hasta la fecha.

    /* Para las resoluciones más pequeñas */
    @media only screen and (max-width: 340px) and (min-width: 5px)  { 
      /*reglas css*/
    }

    /* Para 480px */ 
    @media only screen and (max-width: 500px) and (min-width: 341px) { 
      /*reglas css*/

     
    /* Para 600px */ 
    @media only screen and (max-width: 620px) and (min-width: 501px) { 


    /* Para 800px */ 
    @media only screen and (max-width: 820px) and (min-width: 621px) { 
      /*reglas css*/


    /* Para 960px */ 
    @media only screen and (max-width: 980px) and (min-width: 821px) { 
      /*reglas css*/


    /* Para mínimo 980px  */ 
    @media only screen and (min-width: 981px) { 

    sábado, 9 de enero de 2016

    domingo, 3 de enero de 2016

    Control de equipos conectados a una red WiFi

    Es posible obtener cierta información sobre los equipos conectados a un router WiFi, si disponemos de acceso al router, que normalmente cuenta con la dirección IP con un formato parecido a 192.168.x.x.

    Esta información puede ser más o menos completa, según el modelo del router, pero normalmente consta de la dirección IP que el router le asigna a cada equipo, y la dirección MAC del mismo.

    Aunque no tenga que ver directamente con el tema que tratamos ahora, recomiendo cambiar la contraseña de acceso al panel de control del router. Es un hábito poco común, y la contraseña que viene por defecto suele ser demasiado sencilla, y estar incluida en bases de datos para el disfrute de los intrusos.

    Podemos obtener un listado de los equipos actualmente conectados a la red, o incluso de los que alguna vez se conectaron. La información puede extenderse a la fecha y hora exactas en las que se conectaron, el tiempo que estuvieron conectados, su actividad en la red...

    Es posible bloquear todos los equipos salvo una lista, o todos los equipos pertenecientes a una lista. El bloqueo puede hacerse por dirección IP o por MAC.


    Se deduce que no es seguro conectarse a una red WiFi que no es de confianza, ya que el usuario del router dispondría de información sobre nuestro equipo y puede que de acceso al mismo.

    IMÁGENES POR CORTESÍA DE:
    http://bgr.com/2014/07/02/smartphone-security-tips-tricks/
    http://ikeepsafe.org/be-a-pro/online-security/

    lunes, 21 de diciembre de 2015

    Javascript relojes y repeticiones

    Usar setInterval(función, milisegundos) para ejecutar una función con un retraso de milisegundos.
    No lo hace repetidamente, pero una estrategia común es ejecutar el código y llamar a setTimeout al final del script.

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function startTime() {
        var today = new Date();
        var h = today.getHours();
        var m = today.getMinutes();
        var s = today.getSeconds();
        m = checkTime(m);
        s = checkTime(s);
        document.getElementById('txt').innerHTML =
        h + ":" + m + ":" + s;
        var t = setTimeout(startTime, 500);
    }
    function checkTime(i) {
        if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
        return i;
    }
    </script>
    </head>

    <body onload="startTime()">

    <div id="txt"></div>

    </body>
    </html>


    Cuenta Atrás

    var count=30;

    var counter=setInterval(timer, 1000);

    function timer()
    {
      count=count-1;
      if (count &lt;= 0)
      {
         clearInterval(counter);
         //termina el contador
         return;
      }

      //Aquí el código para mostrar los segundos
        document.getElementById('contador').innerHTML = count;
    }

    <div id="contador"></div>

    domingo, 20 de diciembre de 2015

    Evento onclick en Javascript

    Usando el siguiente div:

    <div id="probando"
    style="display:block;height:50px;width:50px;" 
    onclick="myFunction()">
    Prueba con javascript
    </div>

    Vamos a realizar algunos ejercicios con el evento onclick de javascript.

    "Herramientas":

    - Obtener un elemento por su ID: document.getElementById("id") en cada ejemplo.
    - Un poco de HTML (el div anterior), con algo de estilo y el evento onclick asociado a una función que hemos llamado myFunction
    - Para el primer ejemplo, obtenemos las medidas del elemento con .offsetWidth y .offsetHeight
    - Para el segundo, establecemos el color con .style.color
    - Para el primero y el tercero, establecemos las medidas con .style.width y .style.height

    1- Ampliar y reducir según tamaño

    <script>
        
    function myFunction() {

        var ancho = document.getElementById("probando").offsetWidth;

        var alto = document.getElementById("probando").offsetHeight; 
        
        if (ancho<100) {
            document.getElementById("probando").style.width = "100px";
            document.getElementById("probando").style.height = "100px";
        } else {
            document.getElementById("probando").style.width = "50px";
            document.getElementById("probando").style.height = "50px";
        
        }
    }


    </script>

    2- Cambiar color de fondo

    <script>
    function myFunction() {
        document.getElementById("probando").style.color = "red";
    }
    </script>

    3- Establecer tamnaño

    <script>
    function myFunction() {
        document.getElementById("probando").style.width = "100px";
        document.getElementById("probando").style.height = "100px";
        
    }
    </script>

    domingo, 8 de noviembre de 2015

    Tcl - matrices

     Uso de la librería: http://core.tcl.tk/tcllib/doc/trunk/embedded/www/tcllib/files/modules/struct/matrix.html#9

    # Para empezar a trabajar

    package require struct

    # Creamos matriz vacía

    ::struct::matrix mymatrix

    # Información sobre la matriz

    mymatrix cells
    mymatrix rows
    mymatrix columns

    # Añadir filas y columnas
    #Añadimos valores fijos, tenemos una matriz de 1x1

    mymatrix add column 5
    mymatrix add column 5
    mymatrix add row 5
    mymatrix add row 5

    mymatrix cells
    mymatrix rows
    mymatrix columns

    # Para verla

    mymatrix format 2string

    # Próximas funciones para estudiar

    # matrixName insert column column ? values?
    # matrixName insert row row ? values?