MixInformatico.com » Css http://www.mixinformatico.com Reforzando tus ideas Sat, 31 Jul 2010 00:47:31 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Query Multimedia Portfolio – Galería con contenido múltiple http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/ http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/#comments Sun, 04 Apr 2010 19:16:51 +0000 javier http://www.mixinformatico.com/?p=9221

jQuery Multimedia Portfolio un interesante plugin para jQuery que nos permitirá crear un porfolio utilizando una especia de carrusel con contenido múltiple. Para ser claros, en el no solo podremos introducir imágenes, sino que jQuery Multimedia Portfolio nos permitirá también optar por agregar videos en formato “ flv” o audio en formato “ mp3 ”. Esto es sin duda algo que hace a jQuery Multimedia Portfolio realmente interesante. Este plugin detectara automáticamente la extensión del archivo y le inserta el contenido o la funcionalidad correspondiente a cada uno de ellos. Por ejemplo, en el caso de videos, la opción de reproducción.

Ver Demo

Descargas:

Podremos bajar los archivos desde infectedfx o de la web oficial de openstudio

USO :

Como de costumbre lo primero que haremos será realizar las llamadas correspondientes al script y hoja de estilos utilizadas. Copiamos y pegamos el siguiente código dentro de nuestra etiqueta < head > .

JavaScript:

1
2
3
4
5
6
7
8
9
10
11

<link rel=“stylesheet” href=“css/multimedia-portfolio.css” type=“text/css” media=“screen” />
<script type=“text/javascript” src=“js/jquery.js”></script>
<script type=“text/javascript” src=“js/jquery.dimensions.js”></script>
<script type=“text/javascript” src=“js/ui.mouse.js”></script>
<script type=“text/javascript” src=“js/ui.slider.js”></script>
<script type=“text/javascript” src=“js/jquery.multimedia-portfolio.js”></script>
<script type=“text/javascript”>
  $(document).ready(function(){
  $(“ul.multimedia-portfolio”).multimedia_portfolio({width: 500, baseDir: ‘.'});
  });
</script>

y para insertar el contenido, la siguiente estructura

HTML:

1
2
3
4
5

<ul class=”multimedia-portfolio”>
<li>
………………CONTENIDO………………….
</li>
</ul>

Ejemplo: agregar imagenes de contenido

HTML:

1
2
3

<li>
<a href=”imagen.jpg” alt=”agrandir”> <img src=”thumbnail.jpg” title=”imagen” /> </a>
</li>

HTML:

1
2
3

 <li>
<a href=”video.flv” alt=”video”> <img src=”imagen.jpg” width=”320? height=”240? title=”video” /> </a>
</li>

Ejemplo: agregar audio record (mp3 format) de contenido

HTML: 

1
2
3

<li>
<a href=”audio.mp3? alt=”Audio”> <img src=”imagen.jpg” title=”Audio” /> </a>
</li>

HTML:

1
2
3
4
5

<ul class=”multimedia-portfolio”>
<li>
………………CONTENIDO………………….
</li>
</ul>

Ejemplo: agregar imagenes de contenido

HTML:

1
2
3

<li>
<a href=”imagen.jpg” alt=”agrandir”> <img src=”thumbnail.jpg” title=”imagen” /> </a>
</li>

Ejemplo: agregar video (flv format) de contenido

HTML: 

1
2
3

<li>
<a href=”video.flv” alt=”video”> <img src=”imagen.jpg” width=”320? height=”240? title=”video” /> </a>
</li>

Ejemplo: agregar audio record (mp3 format) de contenido

HTML:

1
2
3

<li>
<a href=”audio.mp3? alt=”Audio”> <img src=”imagen.jpg” title=”Audio” /> </a>
</li>
]]> http://www.mixinformatico.com/2010/04/04/query-multimedia-portfolio-%e2%80%93-galeria-con-contenido-multiple/feed/ 0 Paginacion en CSS http://www.mixinformatico.com/2010/03/29/paginacion-en-css/ http://www.mixinformatico.com/2010/03/29/paginacion-en-css/#comments Mon, 29 Mar 2010 01:57:13 +0000 dementexmaster http://www.mixinformatico.com/?p=9149 qui les dejo una coleccion de 24 CSS muy buenos para paginar tus archivos php, a los webmasters les servira bastante esta herramienta. DESCARGAR AQUI]]> >qui les dejo una coleccion de 24 CSS muy buenos para paginar tus archivos php, a los webmasters les servira bastante esta herramienta.


DESCARGAR AQUI

]]> http://www.mixinformatico.com/2010/03/29/paginacion-en-css/feed/ 0 Como crear una Web Modular http://www.mixinformatico.com/2010/03/28/como-crear-una-web-modular/ http://www.mixinformatico.com/2010/03/28/como-crear-una-web-modular/#comments Sun, 28 Mar 2010 02:16:18 +0000 dementexmaster http://www.mixinformatico.com/?p=9100 Que tal users de mix informatico, antes que nada vamos a nesesitar algunos conocimientos previos de los lenguajes php , html y css, cabe mensionar que pueden lograr crear la web modular sin estos conocimientos pero les costara un poco mas de trabajo, bueno para comenzar vamos a crear un archivo php a el cual nombraremos:

Contenido.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?
 switch ($_GET["seccion"]){
 case 'noticias';
 include("modulos/principal.php");
 break;
 case 'linux';
 include("modulos/linux.php");
 break;
 case 'descargar';
 include("modulos/descargar.php");
 break;
 
default:
 include("modulos/principal.php");
 }
 ?>

el metodo de seleccion switch () ya lohempos utilizado en otros lenguajes como java este funciona de la siguiente manera cuando switch recibe un parametro por ejemplo switch(‘miwebprincipal’) se ira comparando en cada caso (case) aver si existe alguno que contenga ese nombre por ejemplo:

1
2
3
4
5
6
7
8
9

<?
$query='miwebprincipal'
switch($query){
//en este caso entrara
case 'miwebprincipal':
//aqui entrara
break;
}
?>

el break; sirve para que no se siga comparando con los demas casos y hay termine de comparar y asi muestra lo que tenga ese caso. Ahora nesesitamos incluir ese Contenido.php a un index o alguna pagina principal entonces creamos:

Index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ejemplo de Web Modular</title>
<style>
body{
padding:0;
margin:0 auto;
background:url(imagenes/bck.jpg) repeat-x;
}
.principal{
padding:0;
margin:0 auto;
width:900px;
background:#cccccc;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.cuadros{
background:#ffffff; height:400px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.link{
height:20px;
}
A:link {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
text-decoration: none;
}
A:visited {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:active {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:hover {
font-size: 13px;
color: #7ed9ff;
font-family:  arial, helvetica, verdana, sans-serif;
}
 
</style>
</head>
<body>
<center>
<div align="center"><img width="900" height="100" src="imagenes/header.gif" alt="Cabecera" /></div>
<div>
<table width="900" border="0" cellspacing="10" cellpadding="1">
<tr>
<td width="250">
<div>
<div><a href="index.php?seccion=principal"><B>Principal</B></a></div>
<div><a href="index.php?seccion=linux"><B>Apache en Linux</B></a></div>
<div><a href="index.php?seccion=descargar"><B>Descargar Template</B></a></div>
</div>
</td>
<td>
<div>
<div style="border: 0px solid #D1D1D1; OVERFLOW-y: scroll; OVERFLOW-x: hidden; HEIGHT: 400px">
 
<?
include("contenido.php");
?>
</div>
</div>
</td>
</tr>
</table>
</div>
<table width="900" border="2" cellspacing="0" cellpadding="5">
<tr>
<td align="center">Copyright 2010 www.mixinformatico.com</td>
</tr>
</table>
</center>
</body>
</html>

Bueno ya saben la inclusion del contenido la haremos en la parte qeu sutedes gusten del index esto ya sera para lo estetico y lo hacemos de esta forma:

1
2
3

<?
include("contenido.php");
?>

los links para que nuestro contenido sea llamado lo se deven crear asi:

1

<a href="index.php?seccion=principal"><B>Principal</B></a>

este es el Css que hice para mi ejemplo pero ustedes pueden crearlo o modificarlo a su gusto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

<style>
body{
padding:0;
margin:0 auto;
background:url(imagenes/bck.jpg) repeat-x;
}
.principal{
padding:0;
margin:0 auto;
width:900px;
background:#cccccc;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
.cuadros{
background:#ffffff; height:400px;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
.link{
height:20px;
}
A:link {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
text-decoration: none;
}
A:visited {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:active {
FONT-SIZE: 13px;
COLOR:#FF3300;
FONT-FAMILY:  arial, helvetica, verdana, sans-serif;
TEXT-DECORATION: none;
}
A:hover {
font-size: 13px;
color: #7ed9ff;
font-family:  arial, helvetica, verdana, sans-serif;
}
 
</style>

Aqui les dejo una captura:

Bueno aqui les dejo el demo:
http://webmodular.mixinformatico.com/
Y aqui la descarga:
descargar

]]> http://www.mixinformatico.com/2010/03/28/como-crear-una-web-modular/feed/ 3