Diseño Web

Accesible News Slider

2 comentarios jQuery, Javascript, Scripts, Diseño Web

slidequery.jpg

Accesible News Slider, otra alternativa para montar Slide Horizontales basados en jquery. Puede ser una buena forma de resaltar post, si se animan a adaptarlo a worpdress o para montar una sección de productos que se encuentren ofreciendo desde sus blogs.Ver demo - Descarga - Mas Info Reindel

Uso.

Descargar todos los archivos, alojarlos en nuestro servidor y realizar la llamada a ellos, copiando y pegando el siguiente código dentro de nuestra etiqueta < head >…

PLAIN TEXT
JavaScript:
  1. <link rel="stylesheet" href="jquery.accessible-news-slider.css" type="text/css" media="screen, projection" />
  2.  
  3. <script language="javascript" type="text/javascript" src="jquery-1.1.3.1.pack.js"></script>
  4. <script language="javascript" type="text/javascript" src="jquery.accessible-news-slider.js"></script>
  5. <script language="javascript" type="text/javascript">
  6. $(function() {
  7.  
  8.     $(".computers_technology").accessNews({
  9.         newsHeadline: "Computers &amp; Technology",
  10.         newsSpeed: "normal"
  11.     });
  12.  
  13.    
  14.     /*
  16.     newsHeadline: "Top Stories"  (String)          |  Each unique slider (id) or set of sliders (class) can receive a headline.
  17.     newsSpeed: "normal"          (String/Integer)  |  "slow","normal","fast", or an integer, with 1 being the fastest animation.
  19.     */
  20.  
  21. });
  22. </script>

Nuestra estructura

PLAIN TEXT
HTML:
  1. <div class="news_slider computers_technology">
  2.             <div class="messaging">
  3.                 Please Note: You may have disabled JavaScript and/or CSS. Although this news content will be accessible, certain functionality is unavailable.
  4.             </div>
  5.             <a href="#skip_to_news_1" class="skip">Skip to news content.</a>
  6.             <a href="#" class="prev"><img src="images/prev.gif" width="16" height="16" alt="Previous" title="Previous" env="images" /></a>
  7.             <a href="#" class="next"><img src="images/next.gif" width="16" height="16" alt="Next" title="Next" env="images" /></a>
  8.             <div class="news_items">
  9.                 <a name="skip_to_news_1"></a>
  10.                 <div class="container fl">
  11.                     <div class="item fl">
  12.                         <a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
  13.                         <div class="fl">
  14.                             <a href="/">Titulo Producto o articulo</a><br />
  15.                             Descripcion detallada del post o articulo...etc etc etc
  16.                         </div>
  17.                     </div>
  18.                    
  19.                      <div class="item fl">
  20.                         <a href="/"><img src="images/photo.gif" width="75" height="75" alt="" class="fl" /></a>
  21.                         <div class="fl">
  22.                             <a href="/">Titulo Producto o articulo</a><br />
  23.                             Descripcion detallada del post o articulo...etc etc etc
  24.                         </div>
  25.                     </div>
  26.                    
  27.                    
  28.                    
  29.                 </div>
  30.             </div>
  31.         </div>

El aspecto lo pueden modificar por completo, desde la hoja de estilo que acompaña a los archivos.

Compartelo

8 maneras de construir graficas con CSS

1 Comentario CSS, Diseño Web

cssgraficas.jpg

Si están pensando en mostrar alguna clase de estadística en sus web, porque no hacerlo también utilizando CSS. Sixrevisions, nos muestra 8 atractivas formas de hacerlo y cada una de ellas con opciones en particular.

Via Anieto2k  - Mas ejemplos en Sixrevisions

Ejemplo: Ver demo online - - Idea by Apples to oranges

Images utilizadas en el Ejemplo: Imagen 1 - imagen 2 (guardar como)

PLAIN TEXT
CSS:
  1. /* Vertical Bar Graph */
  2.                 #vertgraph {
  3.                     width: 378px;
  4.                     height: 207px;
  5.                     position: relative;
  6.                     background: url("/wp-content/uploads/2006/08/g_backbar.gif") no-repeat;
  7.                 }
  8.                 #vertgraph ul {
  9.                     width: 378px;
  10.                     height: 207px;
  11.                     margin: 0;
  12.                     padding: 0;
  13.                  }
  14.                 #vertgraph ul li {
  15.                     position: absolute;
  16.                     width: 28px;
  17.                     height: 160px;
  18.                     bottom: 34px;
  19.                     padding: 0 !important;
  20.                     margin: 0 !important;
  21.                     background: url("/wp-content/uploads/2006/08/g_colorbar3.jpg") no-repeat !important;
  22.                     text-align: center;
  23.                     font-weight: bold;
  24.                     color: white;
  25.                     line-height: 2.5em;
  26.                 }
  27.                 #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
  28.                 #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
  29.                 #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
  30.                 #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
  31.                 #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }

Montando nuestras graficas

PLAIN TEXT
HTML:
  1. <div id="vertgraph">
  2.                         <ul>
  3.                             <li class="critical" style="height: 150px;">22</li>
  4.                             <li class="high" style="height: 80px;">7</li>
  5.                             <li class="medium" style="height: 50px;">3</li>
  6.                             <li class="low" style="height: 90px;">8</li>
  7.                             <li class="info" style="height: 40px;">2</li>
  8.                         </ul>
  9.                     </div>

Compartelo

AIR Icon Generator - Aplicacion para crear iconos al mejor estilo Adobe CS3 con Adobe air

1 Comentario Iconos, Adobe Air, Software, Recursos Web, Diseño, Diseño Web

iconadobe.jpg

AIR Icon Generator otra agradable aplicación para trabajar con Adobe air desde tu escritorio, con ella podremos crear en tan solo simples click, atractivos badges para tus proyectos online o iconos al mejor estilo Adobe CS3. La versión de AIR Icon Generator nos brinda una personalización limitada, opciones de color de fondo, opciones de color de texto y la utilización de un máximo de cuatro caracteres para nuestros iconos. Nuestros iconos serán generados en 4 tamaños 128×128, 64×64, 32×32 y 16×16. Si bien las opciones son limitadas, no tengas dudas de que lograran conseguir resultados muy atractivos.

Descarga y mas Info  AIR Icon Generator

Visto en webmasterlibre - bitelia

Compartelo

Contenido deslizante con Auto-Reproducción

3 comentarios jQuery, php, Javascript, Scripts, Diseño Web

contslider.jpg

Auto playing featured Content Slider, una divertida forma para mostrar gran cantidad de contenido en una pequeña área. Estaremos usando XHTML / CSS para la construcción y el estilo de widgets. Junto con las librerías jQuery y Coda Slider plugin para los efectos de animación. Este featured Content Slider, posee un contenido principal (grupos), que se desliza de izquierda a derecha mostrando cada uno de ellos un contenido único. Hay enlaces que actúan como menú de navegación que nos permitirá saltar rápidamente a cualquier grupo en particular. Estos vínculos pueden estar formados por hipervínculo de texto, miniatura, etc.

  • Diferentes tipos de contenido personalizado en los paneles. Se puede poner lo que queramos en los paneles, pero para que sea más fácil para nosotros mismos, habrá un par de diferentes formatos a respetar. Una imagen de fondo cubriéndolo por completo, pero con una superposición de textos.
  • Auto-play. Podemos hacer click en los paneles para saltar a cada grupo especifico, o dejar que las transiciones se produzcan de forma automática.
  • Flecha indicador. Sirve como indicador visual para resaltar el panel que estamos viendo actualmente, algo así como una pequeña flecha sobre las miniaturas que apunta en el panel.

Ver demo - Mas informacion y descarga Auto playing featured Content Slider - By css-tricks
Instalacion:

PLAIN TEXT
JavaScript:
  1. <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
  2.     <script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
  3.     <script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
  4.     <script type="text/javascript" src="js/coda-slider.1.1.1.pack.js"></script>
  5.     <script type="text/javascript">
  6.         var theInt = null;
  7.         var $crosslink, $navthumb;
  8.         var curclicked = 0;
  9.         theInterval = function(cur){
  10.             clearInterval(theInt);
  11.             if( typeof cur != 'undefined' )
  12.                 curclicked = cur;
  13.             $crosslink.removeClass("active-thumb");
  14.             $navthumb.eq(curclicked).parent().addClass("active-thumb");
  15.                 $(".stripNav ul li a").eq(curclicked).trigger('click');
  16.             theInt = setInterval(function(){
  17.                 $crosslink.removeClass("active-thumb");
  18.                 $navthumb.eq(curclicked).parent().addClass("active-thumb");
  19.                 $(".stripNav ul li a").eq(curclicked).trigger('click');
  20.                 curclicked++;
  21.                 if( 6 == curclicked )
  22.                     curclicked = 0;
  23.             }, 3000);
  24.         };
  25.         $(function(){
  26.             $("#main-photo-slider").codaSlider();
  27.             $navthumb = $(".nav-thumb");
  28.             $crosslink = $(".cross-link");
  29.             $navthumb
  30.             .click(function() {
  31.                 var $this = $(this);
  32.                 theInterval($this.parent().attr('href').slice(1) - 1);
  33.                 return false;
  34.             });
  35.             theInterval();
  36.         });
  37.     </script>

Agregando estilo

PLAIN TEXT
CSS:
  1. /*
  2.     SLIDER
  3. */
  4. .slider-wrap                                { width: 419px; position: absolute; top: 87px; left: 40px; }
  5. .stripViewer .panelContainer
  6. .panel ul                     { text-align: left; margin: 0 15px 0 30px; }
  7. .stripViewer                                { position: relative; overflow: hidden; width: 419px; height: 285px; }
  8. .stripViewer .panelContainer                { position: relative; left: 0; top: 0; }
  9. .stripViewer .panelContainer .panel   { float: left; height: 100%; position: relative; width: 419px; }
  10. .stripNavL, .stripNavR, .stripNav       { display: none; }
  11. .nav-thumb      { border: 1px solid black; margin-right: 5px; }
  12. #movers-row   { margin: -43px 0 0 62px; }
  13. #movers-row div  { width: 20%; float: left; }
  14. #movers-row div a.cross-link             { float: right; }
  15. .photo-meta-data                            { background: url(images/transpBlack.png); padding: 10px; height: 30px;
  16.                                               margin-top: -50px; position: relative; z-index: 9999; color: white; }
  17. .photo-meta-data span          { font-size: 13px; }
  18. .cross-link   { display: block; width: 62px; margin-top: -14px;
  19.                                               position: relative; padding-top: 15px; z-index: 9999; }
  20. .active-thumb             { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

Contenido

PLAIN TEXT
HTML:
  1. <div class="slider-wrap">
  2.     <div id="main-photo-slider" class="csw">
  3.         <div class="panelContainer">
  4.             <div class="panel" title="Panel 1">
  5.                 <div class="wrapper">
  6.                     <!-- REGULAR IMAGE PANEL -->
  7.                     <img src="images/tempphoto-1.jpg" alt="temp" />
  8.                     <div class="photo-meta-data">
  9.                         Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
  10.                         <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
  11.                     </div>
  12.                 </div>
  13.             </div>
  14.             <div class="panel" title="Panel 2">
  15.                 <div class="wrapper">
  16.                     <!-- PANEL CONTENT -->
  17.                 </div>
  18.             </div>
  19.             <div class="panel" title="Panel 3">
  20.                 <div class="wrapper">
  21.                     <!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
  22.                     <img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
  23.                     <h1>How to Cook a Scotch Egg</h1>
  24.                     <ul>
  25.                         <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
  26.                         <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
  27.                         <li>1/2 cup AP flour</li>
  28.                         <li>1-2 eggs, beaten</li>
  29.                         <li>3/4 cup panko-style bread crumbs</li>
  30.                         <li>Vegetable oil for frying</li>
  31.                     </ul>
  32.                 </div>
  33.             </div>
  34.             <div class="panel" title="Panel 4">
  35.                 <div class="wrapper">
  36.                     <!-- PANEL CONTENT -->
  37.                 </div>
  38.             </div>
  39.             <div class="panel" title="Panel 5">
  40.                 <div class="wrapper">
  41.                     <!-- PANEL CONTENT -->
  42.                 </div>
  43.             </div>
  44.             <div class="panel" title="Panel 6">
  45.                 <div class="wrapper">
  46.                     <!-- PANEL CONTENT -->
  47.                 </div>
  48.             </div>
  49.         </div>
  50.     </div>
  51.     <!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
  52.           AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
  53.     <a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
  54.     <div id="movers-row">
  55.         <div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  56.         <div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  57.         <div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  58.         <div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  59.         <div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  60.     </div>
  61. </div>

Ver demo - Mas informacion y descarga Auto playing featured Content Slider - By css-tricks

Compartelo

Crear menu de navegación de dos niveles para tus secciones

Sin comentarios CSS, WordPress, Diseño Web

seccionesdoblefila.jpg

Si han estado siguiendo algunas de las tendencias en los themes Wordpress Premium, probablemente habrán notado que los dos niveles en menú de navegación se han ido convirtiendo en algo muy popular o frecuente de ver, quizás más aun, en aquellos diseños estilo magazine que suelen poseer muchas secciones con información. Este estilo de menú puede utilizarse en infinidad de maneras, pero lo más común es mostrar las paginas principales, donde al posar nuestro ratón sobre uno de los títulos nos mostrara en un segundo nivel todas las subpáginas que contenga dicha sección. Como lograrlo en worpdress? de esta forma:

PLAIN TEXT
PHP:
  1. <ul id="nav">
  2. <?php wp_list_pages('title_li=&depth=1'); ?>
  3. </ul>
  4.  
  5. <?php if($post->post_parent)
  6. $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
  7. $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
  8. if ($chil