Archivo del Autor: ksizor

Recargar CSS sin actualizar caché

Cuando estamos haciendo cambios cada poco en el CSS de nuestra web, puede darse el caso de que no se actualice el CSS a no ser que entremos en sesión de incógnito, cambiemos de navegador, dispositivo, o borremos la caché del navegador. Muchas veces con presionar Alt + Actualizar puede ser suficiente, pero muchas otras el navegador se pone un poco pesadito.
Una posible opción es cambiar el nombre del archivo css cada vez que recargamos la página web. Para ello si nuestro servidor cuenta con php podemos hacer lo siguiente:

En lugar de escribir el habitual:

<link rel="stylesheet" href="estilo.css">

Escribimos:

<link rel="stylesheet" href="estilo.css?id=<php date('u'); ?>">

El Resultado en nuestro navegador será algo así:

<link rel="stylesheet" href="estilo.css?id=1545079036">

De tal forma, que de cara al navegador, será un archivo nuevo.
Al escribir en php date(‘u’); Lo que hemos hecho ha sido insertar los segundos pasados desde el el 1 de enero de 1970. Otra opción menos friky es poner date(‘Ymdhms’); que hará que aparezcan los Years, months, days, hours, minutes y seconds… pero es más corta la otra opción.

Para saber más sobre los date(); de php consultar la guia de referencia oficial de php


Aunque esta técnica es ideal para desarrollar la web, es probable que Google Speed Test te lo notifique como una cosa a mejorar en tu web.

Selectores CSS

Los selectores CSS es la forma en la que tenemos de decirle al navegador qué elemento queremos pintar de una forma determinada. Las formas más sencillas es hacerlo con etiquetas, clases o ids, pero existen muchísimas más opciones, y el siguiente enlace de w3schools aquí los muestra de una forma, fácil, comprensible e interactiva:

Ver enlace de selectores css

Una de las mejores herramientas para aprender selectores en CSS

Scroll Animado “Smooth” con CSS y sin JQuery ni JavaScript

Para crear un scroll que realice una transición animada entre dos puntos de la página web; utilizado generalmente en enlaces a ids tipo <a href=”#contacto”> ir a contacto </a> , elemento que vincula a <div id=”contacto”>… </div>, puedes utilizar javascript con JQuery, pero el siguiente turco evitará esto, permitiéndote hacerlo con una sola línea de código. Pega lo siguiente en tu código CSS:

html {  scroll-behavior: smooth; }

Puedes ver un ejemplo aquí

WordPress: función para últimos artículos del post

La siguiente función muestra los  últimos artículos insertados en el apartado blog, junto con una imagen ( thumbnail ) del artículo, en caso de que la tenga, ideal para poner en sitios como por ejemplo el footer o la home.

function destacadosBlog(){

echo('
<div class="ultimospost">
<h4>En nuestro blog</h4>
<ul> ');

$args = array( 'numberposts' => '4', 'tax_query' => array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => 'post-format-aside',
'operator' => 'NOT IN'
) );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){

echo '
<div class="col-3">
<a href="'. get_permalink($recent["ID"]).'">
'.get_the_post_thumbnail($recent["ID"],'large').'
</a>
<h4><a href="'. get_permalink($recent["ID"]).'">'.(__($recent["post_title"])).'</a>
</h4>
</div> ';

}
wp_reset_query();

echo('</ul> </div>');

}

Si lo que pretendemos es mostrar los últimos contenidos de un Custom Post Type, entonces tendremos que utilizar es el código, en el que le especificaremos el típo de Custom Post Type.

function destacadosDesign($postType,$cantidad,$class,$titulo){
echo('
<div class="ultimospost '.$class.'">
<h4>'.$titulo.'</h4>
<ul>
');

$args = array(
'numberposts' => $cantidad,
'post_type'=>$postType,
'tax_query' => array(
'taxonomy' => 'post_format',
'field' => 'slug',
'terms' => 'post-format-aside',
'operator' => 'NOT IN'
) );

$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent ){
echo '
<li class="col-3">
<a href="'. get_permalink($recent["ID"]).'"> '.get_the_post_thumbnail($recent["ID"],'large').' </a>
<h4> <a href="'. get_permalink($recent["ID"]).'">'.( __($recent["post_title"])).'</a> </h4>
</li> ';
}
wp_reset_query();
echo('</ul>');
}


destacadosDesign('libros',8,desing,'Otros proyectos:');
// siendo libros el nombre del custom post type
// siendo 8 la cantidad de elementos a mostrar
// design en nombre de la clase
//'Otro proyectos:' el título del h4

Wordpres theme twentytwelve CSS hacks

Twentytwelve es uno de los temas gratuitos de wordpress más limpios y versátiles.

Aquí traemos una serie de fragmentos de código CSS para mejorar ciertas características:

/* Google Fonts*/
@import url('https://fonts.googleapis.com/css?family=Oswald');

// ENLACES
// Desactiva punteado de los enlaces tras el click
a:focus{ outline: none;}

// PÁRRAFOS
p{
// Texto de párrafo justificado por defecto
text-align: justify;}


#page.site{
	margin:0px auto;
	
	max-width:100%;
	box-shadow: 0 0 0;
}

// IMÁGENES
// desactiva el borde redondeado y sombra de las imágenes
img{
	border-radius:0 !important;
	box-shadow:none;
}





Unity 3D: Movimiento simple con teclado

El siguiente código hará que el GameObject que lo contenta pueda moverse a con las teclas de movimiento habituales del teclado:

Versión 1:
El GameObject girará en cualquier momento ( como un robot )

using UnityEngine;
using System.Collections;

public class A2_MovementControl : MonoBehaviour
{
    public float moveSpeed = 10f;
    public float turnSpeed = 50f;
    
    
    void Update ()
    {
        if(Input.GetKey(KeyCode.UpArrow)){
            transform.Translate(Vector3.forward * moveSpeed * Time.deltaTime);
        }
        
        if(Input.GetKey(KeyCode.DownArrow)){
            transform.Translate(-Vector3.forward * (moveSpeed-(moveSpeed/2)) * Time.deltaTime);
        }

        if(Input.GetKey(KeyCode.LeftArrow)){
            transform.Rotate(Vector3.up, -turnSpeed * Time.deltaTime);
        }
       
        if(Input.GetKey(KeyCode.RightArrow)){
            transform.Rotate(Vector3.up, turnSpeed * Time.deltaTime);
        }
    }
}

Versión 2:
El GameObject solo girará cuando se pulse el acelarador ( como en un coche )

using UnityEngine;
using System.Collections;

public class A2_MovementControl : MonoBehaviour
{
    public float moveSpeed = 10f;
    public float turnSpeed = 50f;
    
    
    void Update ()
    {
        if(Input.GetKey(KeyCode.UpArrow)){
            transform.Translate(Vector3.forward * moveSpeed * Time.deltaTime);

              if(Input.GetKey(KeyCode.LeftArrow)){
                transform.Rotate(Vector3.up, -turnSpeed * Time.deltaTime);
                }
        
            if(Input.GetKey(KeyCode.RightArrow)){
                transform.Rotate(Vector3.up, turnSpeed * Time.deltaTime);
                }
        }
        
        if(Input.GetKey(KeyCode.DownArrow)){
            transform.Translate(-Vector3.forward * (moveSpeed-(moveSpeed/2)) * Time.deltaTime);
        }
    }
}

Unity 3D: Rotación infinita

El siguiente código genera una rotación constante sobre el elemento que se aplique.

using UnityEngine;
using System.Collections;

public class A4_InfinitRotation : MonoBehaviour {

	public float rotationX = 0;
	public float rotationY = 0;
	public float rotationZ = 0;

    void Update () 
    {
        transform.Rotate (new Vector3 (rotationX, rotationY, rotationZ) * Time.deltaTime);
    }
}

Unity 3D: Hacer que un objeto mire a otro

Con el siguiente conseguiremos a través de la clase  LookAt, que el un elemento, como por ejemplo una cámara, esté mirando constantemente a un GameObject, como por ejemplo Player

using UnityEngine;
using System.Collections;

public class LookAt : MonoBehaviour
{
    public Transform target;
    
    void Update ()
    {
        transform.LookAt(target);
    }
}

HTML: Menú desplegable con enlaces

Cómo crear un menú desplegable tipo <select>, donde al hacer click sobre una opción, nos derive a un enlace.

<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>