Cómo Crear un Conmutador de Estilos CSS Basado en el Tiempo

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Los conmutadores de estilo se han convertido en una característica popular en los sitios web en estos días. Las hojas de estilo CSS permiten a un diseñador web cambiar el aspecto y la sensación de un sitio web con poco esfuerzo. Algunos sitios usan el tipo de conmutadores de estilo "Día" y "Noche" que cambian automáticamente el tema del sitio según la hora del día.

Este tutorial le muestra cómo crear un conmutador de hojas de estilo CSS basado en el tiempo con PHP que le permite cambiar varias hojas de estilo a la vez en momentos específicos del día. ¡También se lanzó un poco de jQuery UI adentro sólo por diversión!

¿Por qué PHP en lugar de JavaScript?

El único inconveniente de usar PHP para un conmutador de hojas de estilo CSS basado en el tiempo es que el tiempo se basa en el servidor de alojamiento web o en una "zona horaria" establecida en el script.

Cuando estaba construyendo mi sitio de portafolio personal, creé un conmutador de hojas de estilo basado en el tiempo utilizando JavaScript y jQuery. La función de tiempo del script funcionó correctamente. Sin embargo, siempre había un breve "flash" de la hoja de estilo predeterminada cuando se cargaban las páginas web.

Los sitios web pesados de JavaScript pueden tener problemas con los conflictos entre varios scripts de JavaScript. En vez de eso decidí utilizar PHP para el conmutador de hojas de estilo CSS. Debido a que PHP es del lado del servidor, no hubo conflictos JavaScript y el script funcionó como se esperaba.

El único inconveniente de usar PHP para un conmutador de hojas de estilo CSS basado en el tiempo es que el tiempo se basa en el servidor de alojamiento web o en una "zona horaria" establecida en el script. Con JavaScript puede configurar las funciones de tiempo para que se basen en la computadora de un usuario.

Antes de que Comencemos

Si usted es nuevo en PHP, debe instalar y configurar un entorno de servidor en su computadora local (los archivos PHP no se pueden ver en un navegador web). Mi preferencia personal es XAMPP. Este artículo incluye algunas opciones de software e instrucciones básicas sobre cómo configurar un servidor local.

Aunque puede utilizar el Bloc de notas para crear y editar archivos PHP, un editor de código puede ser muy útil al escribir páginas web en PHP y otros lenguajes de programación. Consulte estos artículos para obtener información adicional sobre cómo elegir un editor de código:

El código utilizado en el tutorial crea un selector de hojas de estilo CSS básico y puede ver la demostración aquí. Los archivos fuente incluyen dos demostraciones adicionales.

¡Ahora, empecemos!

Paso 1: Cree la primera hoja de estilo CSS (Noche)

Cree una hoja de estilo CSS denominada style-1.css e incluya el siguiente código:



/*  Default Styles
--------------------------------------------------- */

body {
  margin: 0px;
	padding: 0px;
	background: url("../images/bokeh_2.jpg");  
	background-position: top left;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #666;
	font-size: 20px; 
	font-family: Arial, Helvetica, sans-serif;
	color: #fff;
	text-align: left;
}

#wrapper	{
	width: 965px;
	margin: 0 auto;	
	position: relative;
}

a:link, a:visited, a:active {
	color: #99ccff;
}

a:hover {
	color: #0073ea;
}

.content_container_1	{
	float: left;
	width: 650px;
	margin: 0px 0px 60px 0px;
}

p.main_description	{
	margin: 5px 0px 50px 0px;
	text-align: center;
}


/* Main Image
--------------------------------------------------- */

.main_image	{
	background: url("../images/main_image_1.jpg");  
	background-repeat: no-repeat;
	width: 630px;
	height: 425px;
	border: #fff solid 10px;
	margin: 40px 0px 10px 0px;
}


/*  Tabs 
--------------------------------------------------- */

#tabs p	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
}

a.tabs_link_1:link, a.tabs_link_1:visited, a.tabs_link_1:active { 
	text-decoration: underline;
	color: #0073ea;
	font-weight: bold;
}

a.tabs_link_1:hover { 
	text-decoration: underline;
	color: #ff0084;
	font-weight: bold;
}

#tabs .tabs_img	{
	float: left;
	background-color: #ddd;
	padding: 8px;
	margin: 0px 12px 0px 0px;
}

Paso 2: Cree la segunda hoja de estilo CSS (Mañana)

Abra style-1.css y guárdelo como style-2.css. Cambie la imagen de fondo del cuerpo de bokeh_2.jpg a bokeh_4.jpg. Cambie main_image_1.jpg a main_image_4.jpg.

Paso 3: Cree la tercera hoja de estilo CSS (Tarde)

Use style-1.css o style-2.css para crear una tercera hoja de estilo style-3.css. Cambie la imagen de fondo del cuerpo a bokeh_3.jpg y la imagen principal a main_image_5.jpg

Paso 4: Cree la cuarta hoja de estilo CSS (Tarde Noche)

Cree una cuarta hoja de estilo style-4.css. Cambie la imagen de fondo del cuerpo a bokeh_1.jpg y la imagen principal a main_image_8.jpg

Para los pasos del 2 al 4, no dude en cambiar otros elementos como los colores de las fuentes y los bordes de la imagen. En lugar de utilizar las imágenes proporcionadas en los archivos de origen, puede utilizar sus propias imágenes para crear estilos CSS personalizados.

Paso 5: Descargue jQuery y jQuery UI

Para mostrar cómo el script PHP cambia varias hojas de estilo a la vez, se usan Temas de jQuery Themeroller para diseñar el área de contenido con pestañas de la página web.

Vaya a la Página de Descarga de jQuery UI y descargue los temas "Flick" y "Start".

A continuación, vaya al sitio oficial de jQuery y descargue jQuery.

Paso 6: El Marcado

Cree un archivo PHP que incluya el siguiente código:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- CSS style sheets -->
<?php include("style sheets.php"); ?>


<!-- jQuery / JavaScript -->
<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js">></script>
<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>

<meta name="description" content="This demo uses PHP to change multiple CSS style sheets (Main CSS and jQuery UI Theme) at specific times during a 24 hour period. The timezone for this demo is set to Australia/Melbourne." />
<meta name="keywords" content="time,based,css,stylesheet,switcher,php" />
<title>Simple Time Based CSS Style Sheet Switcher</title>

</head>
<body>

<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Content Container 1 -->
<div class="content_container_1">

<!-- Main Image Switches at Set Times -->
<div class="main_image"></div>
<p class="main_description">
Main Image changes at the times set in PHP Script (Australia/Melbourne).
</p>

<!-- Begin Tabs Area -->
 <div id="tabs">
	<ul>
		<li><a href="#tabs-1">About Envato</a></li>
		<li><a href="#tabs-2">Marketplaces</a></li>
		<li><a href="#tabs-3">Tuts+ Network</a></li>
	</ul>
	
	<div id="tabs-1">
	<p>
	<img class="tabs_img" src="images/envato_1.jpg" width="300" height="195" alt="About Envato" />
	Envato is a startup based out of Australia with people around the world and sites serving pages every second. We started in a living room in 2006 and have been steadily working to build our company into a world-class contender. Our background is creative, we love open source, we believe that work is about way more than just making money, and we're totally committed to making products that are awesome!
	</p>
	<p>
	<a class="tabs_link_1" href="http://envato.com/" target="_blank" title="Visit The Envato Website">Visit The Envato Website</a>
	</p>
	</div>

	<div id="tabs-2">
	<p>
	<img class="tabs_img" src="images/marketplace_1.jpg" width="300" height="195" alt="Marketplaces" />
	The Envato Marketplaces allow anyone to buy or sell digital goods like WordPress themes, background music, After Effects project files, Flash templates and much more. The marketplaces are home to a thriving community of over 500,000 users, authors and buyers and every day hundreds of new files are added.	
	</p>
	<p>
	<a class="tabs_link_1" href="http://themeforest.net/" target="_blank" title="Visit the Theme Marketplace">Visit the Theme Marketplace</a>
	</p>
	</div>

	<div id="tabs-3">
	<p>
	<img class="tabs_img" src="images/psdtuts_1.jpg" width="300" height="195" alt="Tuts+ Network" />
	At Envato we're very passionate about education, that's why we've created one of the most popular networks of educational blogs around. Tuts+ serves up over 18 million pageviews a month across its many subsites on subjects like graphics, web development, audio production, iPhone development and motion graphics.
	</p>
	<p>
	<a class="tabs_link_1" href="http://tutsplus.com/" target="_blank" title="Visit Tuts+ Hub">Visit Tuts+ Hub</a>
	</p>
	</div>

</div> 
<!-- End Tabs Area -->

</div>
<!-- End Content Container 1 -->

</div>
<!-- End Wrapper -->

</body>
</html>

Paso 7: Código de Conmutador de Hojas de Estilo CSS de PHP

Cree un archivo PHP que incluya el siguiente código:


<?php

date_default_timezone_set("Australia/Melbourne"); // Set default time zone

$time = date("H"); // Set the time in 24 hour format

if (00 <= $time && $time < 07) // 12:00am to 7:00am   Night
	{
	echo 
'<link href="css/style-1.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
	}

elseif (07 <= $time && $time < 12) // 7:00am to 12:00pm   Morning
	{
	echo 
'<link href="css/style-2.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
	}

elseif (12 <= $time && $time < 18) // 12:00pm to 6:00pm   Afternoon
	{
	echo 
'<link href="css/style-3.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
	}

else // all other hours   Evening
	{
	echo
'<link href="css/style-4.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
	}

?>

Desglose del Marcado

Include PHP para los enlaces `rel="stylesheet"`

El script para el conmutador de hojas de estilo CSS va a estar contenido en un archivo include de PHP llamado stylesheets.php.

Una declaración include() de PHP incluye y evalúa un archivo específico. El archivo stylesheets.php es referenciado por este código:

1
2	<!-- CSS style sheets -->
3	<?php include("style sheets.php"); ?>

Debido a que estamos utilizando un script PHP para cambiar las hojas de estilo CSS en tiempos establecidos, los vínculos rel="stylesheet" serán generados por el script PHP.

Referencie bibliotecas jQuery y jQuery UI

Necesitamos asegurarnos de que la página web hace referencia a las bibliotecas jQuery y jQuery UI.

Entre las etiquetas head de la página web se ha añadido el siguiente código:

1
2	<!-- jQuery / JavaScript -->
3	<script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
4	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>

Inicialice jQuery UI Tabs

Este tutorial incluye jQuery UI Tabs utilizando la funcionalidad por defecto. El código siguiente inicializa las pestañas:


<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>

Div Contenedor para jQuery UI Tabs


<!-- Begin Wrapper -->
<div id="wrapper">

<!-- Begin Content Container 1 -->
<div class="content_container_1">

(</div> de cierre para Wrapper y Contenedor de Contenido 1 se muestran en el bloque de código para el marcado de las pestañas de jQuery UI)

La mayoría de los Widgets de jQuery UI están programados para expandirse al ancho del 100% del área de contenido donde se colocan.

El contenedor content_container_1 se ha establecido en un ancho fijo de 650px en el CSS para que el área de contenido con pestañas no se expanda el ancho completo de la pantalla.

Marcado de Imagen Principal

Para que la imagen principal también cambie a tiempos establecidos usando el script PHP, necesita ser incluida en la página web como una imagen de fondo CSS.

Así que en lugar de agregar la imagen a la página web usando un marcado como este:

1
2	<img src="main_image_1.jpg" width="630" height="425" alt="Image" />

Se agregó a la página web como una imagen de fondo CSS de un <div> con la clase "main_image", así:


<!-- Main Image Switches at Set Times -->
<div class="main_image"></div>
<p class="main_description">
Main Image changes at the times indicated.
</p>

Marcado para las pestañas de jQuery UI

El siguiente marcado añade el área de contenido tabulado que está alimentado por jQuery UI y ha sido diseñado utilizando los Temas de jQuery Themeroller.


<!-- Begin Tabs Area -->
 <div id="tabs">
	<ul>
		<li><a href="#tabs-1">About Envato</a></li>
		<li><a href="#tabs-2">Marketplaces</a></li>
		<li><a href="#tabs-3">Tuts+ Network</a></li>
	</ul>
	
	<div id="tabs-1">
	<p>
	<img class="tabs_img" src="images/envato_1.jpg" width="300" height="195" alt="About Envato" />
	Envato is a startup based out of Australia with people around the world and sites serving pages every second. We started in a living room in 2006 and have been steadily working to build our company into a world-class contender. Our background is creative, we love open source, we believe that work is about way more than just making money, and we're totally committed to making products that are awesome!
	</p>
	<p>
	<a class="tabs_link_1" href="http://envato.com/" target="_blank" title="Visit The Envato Website">Visit The Envato Website</a>
	</p>
	</div>

	<div id="tabs-2">
	<p>
	<img class="tabs_img" src="images/marketplace_1.jpg" width="300" height="195" alt="Marketplaces" />
	The Envato Marketplaces allow anyone to buy or sell digital goods like WordPress themes, background music, After Effects project files, Flash templates and much more. The marketplaces are home to a thriving community of over 500,000 users, authors and buyers and every day hundreds of new files are added.	
	</p>
	<p>
	<a class="tabs_link_1" href="http://themeforest.net/" target="_blank" title="Visit the Theme Marketplace">Visit the Theme Marketplace</a>
	</p>
	</div>

	<div id="tabs-3">
	<p>
	<img class="tabs_img" src="images/psdtuts_1.jpg" width="300" height="195" alt="Tuts+ Network" />
	At Envato we're very passionate about education, that's why we've created one of the most popular networks of educational blogs around. Tuts+ serves up over 18 million pageviews a month across its many subsites on subjects like graphics, web development, audio production, iPhone development and motion graphics.
	</p>
	<p>
	<a class="tabs_link_1" href="http://tutsplus.com/" target="_blank" title="Visit Tuts+ Hub">Visit Tuts+ Hub</a>
	</p>
	</div>

</div> 
<!-- End Tabs Area -->

</div>
<!-- End Content Container 1 -->

</div>
<!-- End Wrapper -->

Las "Pestañas" del menú son generadas por una lista no ordenada. Las secciones de contenido se generan mediante etiquetas <div> que tienen identificadores únicos los cuales corresponden a vínculos de anclaje en las etiquetas <li></li>.

Por ejemplo: <div id="tabs-1"> corresponde con <a href="#tabs-1">

Desglose del Código de Conmutador de Hojas de Estilo de PHP

Establecer la Zona Horaria por Defecto:

1
2	date_default_timezone_set("Australia/Melbourne"); // Set default time zone

El código date_default_timezone_set establece la zona horaria predeterminada utilizada por todas las funciones de fecha/hora en un script.

Si el script no incluye date_default_timezone_set, el tiempo del servidor de alojamiento web se utilizará para todas las funciones de fecha/hora en el script.

Consulte la Lista de Zonas Horarias Compatibles para encontrar el huso horario apropiado para su ubicación.

Las versiones más recientes de PHP incorporan "Tiempos de Ahorro de Luz Solar" en la funcionalidad de date_default_timezone_set. Algunas versiones anteriores de PHP no toman en cuenta los "Tiempos de Ahorro de Luz Solar".

Establezca la Hora en el Formato de 24 horas:

1
2	$time = date("H"); // Set the hour in 24 hour format

date("H") formatea la hora/fecha local en un formato de 24 horas de una hora, con ceros a la izquierda. Haga clic aquí para ver información sobre el reloj de 24 horas.

Desglose de las Declaraciones If, Elseif, Else

He partido el resto del código PHP para mostrar cómo el script PHP funcionará línea por línea. Hay varias funciones que se utilizan en el código, incluyendo:

if


if (00 <= $time && $time < 07) // 12:00am to 7:00am   Night
	{
	echo 
'<link href="css/style-1.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
	}

Si 00 (medianoche) es Menor que o igual que la hora actual Y la hora actual es Menor que 07 (7:00 am) Entonces, el script aplicará style-1.css y las hojas de estilo CSS flick.

elseif


elseif (07 <= $time && $time < 12) // 7:00am to 12:00pm   Morning
	{
	echo 
'<link href="css/style-2.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
	}

Si 07 (7:00 am) es Menor que o igual que la hora actual Y la hora actual es Menor que 12 (12:00 pm) Entonces el script aplicará style-2.css y las hojas de estilo CSS start.

elseif


elseif (12 <= $time && $time < 18) // 12:00pm to 6:00pm   Afternoon
	{
	echo 
'<link href="css/style-3.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/start/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
	}

Si 12 (12:00 pm) es Menor que o igual que la hora actual Y la hora actual es Menor que 18 (6:00 pm) Entonces el script aplicará style-3.css y las hojas de estilo CSS start.

else


else // all other hours   Evening
	{
	echo
'<link href="css/style-4.css" rel="stylesheet" type="text/css" media="screen" /><link href="css/flick/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" media="screen" />';
	}

Si NINGUNA de las condiciones se cumple en las declaraciones "if ... elseif", Entonces el script aplicará style-4.css y las hojas de estilo CSS flick.

Conclusión

Con CSS, usted puede crear muchos estilos diferentes para sus páginas web. Utilizando PHP puede aplicar esos estilos dinámicamente a su sitio web. Lance un poco de jQuery UI y sus páginas web no sólo serán divertidas de crear para que usted, ¡sino que serán divertidas para sus visitantes también!

Si tiene preguntas sobre este tutorial, por favor hágalas a continuación, ¡Muchas gracias por leer!

Cómo Crear un Conmutador de Estilos CSS Basado en el Tiempo

¿Por qué PHP en lugar de JavaScript?

Antes de que Comencemos

Paso 1: Cree la primera hoja de estilo CSS (Noche)

Paso 2: Cree la segunda hoja de estilo CSS (Mañana)

Paso 3: Cree la tercera hoja de estilo CSS (Tarde)

Paso 4: Cree la cuarta hoja de estilo CSS (Tarde Noche)

Paso 5: Descargue jQuery y jQuery UI

Paso 6: El Marcado

Paso 7: Código de Conmutador de Hojas de Estilo CSS de PHP

Desglose del Marcado

Include PHP para los enlaces rel="stylesheet"

Referencie bibliotecas jQuery y jQuery UI

Inicialice jQuery UI Tabs

Div Contenedor para jQuery UI Tabs

Marcado de Imagen Principal

Marcado para las pestañas de jQuery UI

Desglose del Código de Conmutador de Hojas de Estilo de PHP

Establecer la Zona Horaria por Defecto:

Establezca la Hora en el Formato de 24 horas:

Desglose de las Declaraciones If, ​​Elseif, Else

if

elseif

elseif

else

Conclusión

Include PHP para los enlaces `rel="stylesheet"`

Desglose de las Declaraciones If, Elseif, Else