[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Diseño Web

  • Botón Ampliar tamaño de texto en nuestros artículos

    ampliartextoifx.jpg

    Si suelen leer periódicos Online, seguramente habrán notado que la gran mayoría de ellos nos brinda en cada uno de los artículos que leemos, la opción para ampliar el texto, función que podemos utilizar en caso de desearlo. Si bien utilizo los Periódicos como referencia, ya que es por lo general donde suelo verlos, no significa que solo deba utilizarse cada vez que llevemos adelante este tipo de proyectos (Periódicos). Si deseamos facilitar la lectura de cada uno de nuestros usuarios, no sería mala idea comenzar a implementar este tipo de opciones en nuestros blogs o web empresariales. Justamente hoy recordé que Mauricio había realizado un simple tutorial (el cual busque hasta encontrar), muy fácil de seguir, que les permitirá llevar esta idea a sus proyectos online.

    Uso:

    Realizar las llamadas a los script

    1. <script language="javascript" src="js/dw_cookies.js" type="text/javascript"></script>
    2.  
    3.       <script language="javascript" src="js/dw_sizerdx.js" type="text/javascript"></script>

    Seleccionamos que partes (DIV) son las que queremos que se modifique el tamaño del texto.

    1. <script type="text/javascript">
    2.       dw_fontSizerDX.setDefaults( "px", 11, 11, 14, ['div.post p' , 'blockquote'] );
    3.       dw_fontSizerDX.set(10, 10, 10, ['div#fontSize'] );
    4.       dw_fontSizerDX.init();
    5.       </script>

    Agregamos los Botones

    1. <div id="fontSize">
    2.         <ul>
    3.           <li id="more"><a href="#" onClick="dw_fontSizerDX.adjust(1); return false" title="Aumenta el tama&ntilde;o de texto"> Aumentar tama&ntilde;o </a></li>
    4.           <li id="less"><a href="#" onClick="dw_fontSizerDX.adjust(-1); return false" title="Disminuye el tama&ntilde;o de texto">Disminuir tama&ntilde;o</a></li>
    5.         </ul>
    6.       </div>

  • facelift – Para reemplazar textos por imagenes

    facelift.jpg

    Facelift es otro script que al igual que sIFR (basado en Flash), nos permite remplazar las fuentes (texto) de nuestra web por otras más originales y sin preocuparnos si nuestros usuarios poseen esas “fuentes” cargadas en sus ordenadores personales. Facelift no utiliza flash, sino que remplaza nuestras fuentes por imágenes, lo que puede ser toda una ventaja. Los resultados son realmente buenos y podremos definir colores ó diferentes tipografías para ciertas partes de nuestros textos.

    Fuente infectedfx

  • 120 bonitos ejemplos de Menu Horizontales con CSS

    120menu.jpg

    En el desarrollo de una nueva web, son muchas las etapas en las cuales nos sentamos a analizar, diagramar y probar ideas. La estructura será un factor muy importante, ya que dependiendo la diagramación de dicha estructura, será la organización de todo nuestro contenido. Pero los menús de navegación constituyen otro elemento importante en nuestro sitio web. Lograr un menú que facilite toda la navegación por cada una de las secciones de nuestra web y que se encuentre bien adaptado al diseño desarrollado, no siempre es tarea sencilla. Si te encuentras un poco retrasado tratando de lograr un menú que se adapte de forma adecuada a tu proyecto, buscar un poco de inspiración no será mala idea. 120 Excellent Examples of CSS Menu, es un artículo que recopila 120 menu Css horizontales que te ayudaran a construir originales nuevas ideas.

    Enlace 120 Excellent Examples of CSS Menu by csstea.com

  • Easy Slider – Plugin jQuery ideal para tu porfolio

    easyslider.jpg

    Otro agradable plugin jQuery para agregar a nuestra extensa lista. Easy Slider, como llama a este plugin Alen Grakalic, nos permitirá deslizar horizontalmente o verticalmente tanto imágenes como cualquier otro contenido que se nos ocurra. Es completamente configurable tan solo con CSS, lo que permite una integración realmente simple a nuestro sitio. Si desean ver una idea de cómo podrían llegar a implementar Easy Slider en sus porfolios, basta con visitar templatica, otro de los sitios de Alen Grakalic, donde ha logrado integrar Easy Slider de una forma maravillosa.

    Demos

    Mas Info Easy SliderDescarga ejemplos

    Uso:

    1. <script type="text/javascript" src="js/jquery.js"></script>
    2. <script type="text/javascript" src="js/easySlider.packed.js"></script>
    3. <script type="text/javascript">
    4.     $(document).ready(function(){  
    5.         $("#slider").easySlider({
    6.             orientation:'vertical'
    7.         });
    8.     });
    9. </script>

    agregando estilo

    1. /* Easy Slider */
    2.  
    3.     #slider ul, #slider li{
    4.         margin:0;
    5.         padding:0;
    6.         list-style:none;
    7.         }
    8.     #slider, #slider li{
    9.         /*
    10.             define width and height of container element and list item (slide)
    11.             list items must be the same size as the slider area
    12.         */
    13.         width:696px;
    14.         height:241px;
    15.         overflow:hidden;
    16.         }
    17.     span#prevBtn{}
    18.     span#nextBtn{}                 
    19.  
    20. /* // Easy Slider */

    Contenido

    1. <div id="slider">
    2.         <ul>               
    3.             <li><a href="#"><img src="images/01.jpg" alt="Descripcion" /></a></li>
    4.             <li><a href="#"><img src="images/02.jpg" alt="Descripcion" /></a></li>
    5.             <li><a href="#"><img src="images/03.jpg" alt="Descripcion" /></a></li>
    6.             <li><a href="#"><img src="images/04.jpg" alt="Descripcion" /></a></li>
    7.             <<li><a href="#"><img src="images/05.jpg" alt="Descripcion" /></a></li>        
    8.         </ul>
    9.     </div>

    El script automáticamente agregara la navegación “anterior” y “próximo”, pero se le ha asignado un ID (identificación) que pueden utilizar para darle un poco de estilo mediante CSS

    1. <span id="prevId"><a href="javascript:void(0);">Previous</a></span>
    2. <span id="nextBtn"><a href="javascript:void(0);">Next</a></span>

  • HTML Ipsum by Chris Coyier

    htmlimpsucode.jpg

    HTML Ipsum, el sitio que no hace mucho lanzo Chris Coyier, en el encontraremos (ya es fácil deducirlo con su nombre) los tradicionales lorem ipsum que nos permitirán probar el diseño visual junto con las tipografías, que formaran parte de nuestro proyecto online. A diferencia de otros sitios de este tipo HTML Ipsum, nos presenta los párrafos, lista, y demás, escritos completamente en HTML. Además se integra con los editores de código Coda y TextMate para Mac y Gedit para Linux.

    Enlace  HTML Ipsum

  • WP Framework – Base para tu próximo theme WP

    wpframework.jpg

    WP Framework , un theme WordPress totalmente “blanco” , limpio, sin objetos, que te permitirá crear tus propios themes en poco tiempo. Una buena forma de no comenzar tus proyectos desde “cero”, y tener una base para comenzar a plasmar todas tus ideas y tus estructuras para el próximo Theme de tu blog.
    Ver demoDescarga – Mas Info WP Framework

  • Crear un Widget Amazon Books con jQuery y XML

    amazonboxxml.jpg

    Create an Amazon Books Widget with jQuery and XML, un fabuloso tutorial paso a paso que nos permitirá crear un Widget Amazon Books con jQuery y XML, algo así como una caja donde exponer nuestros productos totalmente navegable mediante su carrusel. Inclusive nos permitirá añadir una breve descripción del producto, algo que lo torna mucho más interesante. Requiere de JavaScript y jQuery, esta ultima diseñada para recorrer documentos XML con facilidad, archivo que utilizaremos para actualizar los datos en nuestro widget de productos.

    Ver demoDescarga demo – Mas info Create an Amazon Books Widget
    Uso
    Realizar las llamadas desde nuestro encabezado < head > – Observar que se hace referencia a la ubicación del archivo book.xml, documento que utilizaremos para actualizar los datos de nuestro widgets:

    1. <script language="javascript" type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
    2. <script language="javascript" type="text/javascript" src="js/books.js"></script>
    3. <script language="javascript" type="text/javascript">
    4.  
    5.     $(function(){
    6.         BOOKS.init({
    7.             xmlPath : "data/books.xml",
    8.             imgPath : "images",
    9.             perView : 4
    10.         });
    11.     });
    12.  
    13. </script>

    Un poco de estilo

    1. #books {
    2.     width: 515px; /* optional */
    3. }
    4. #books img {
    5.     border: 0;
    6. }
    7. #books .clear_both {
    8.     clear: both;
    9. }
    10. #books .float_left,
    11. #books  ul li {
    12.     float: left;
    13.     display: inline;
    14. }
    15. #books .float_right {
    16.     float: right;
    17. }
    18. #books .overclear {
    19.     width: 100%;
    20.     overflow: hidden;
    21. }
    22.  
    23. /* styles */
    24.  
    25. #books .buttons {
    26.     position: relative;
    27.     height: 30px;
    28.     margin: 0 0 5px 0;
    29. }
    30. #books .prev {
    31.     position: absolute;
    32.     top: 0;
    33.     left: 0;
    34.     visibility: hidden;
    35. }
    36. #books .next {
    37.     position: absolute;
    38.     top: 0;
    39.     right: 0;
    40. }
    41. #books .showing {
    42.     margin: 5px 60px 0 60px;
    43.     text-align: center;
    44.     font-size: .8em;
    45. }
    46. #books .top {
    47.     background: url(../images/books_top.gif) repeat-x;
    48. }
    49. #books .inner {
    50.     padding: 0 0 0 20px;
    51.     margin: 0 0 -20px 0;
    52.     background: url(../images/books_left_mid.gif) repeat-y;
    53. }
    54. #books  ul {
    55.     margin: 0;
    56.     padding: 0;
    57.     list-style-type: none;
    58.     background: url(../images/books_right_mid.gif) repeat-y top right;
    59. }
    60. #books  ul li {
    61.     display: none;
    62.     position: relative;
    63.     margin: 0;
    64.     padding: 0 20px 20px 0;
    65.     font-size: .8em;
    66.     z-index: 1;
    67. }
    68. #books  ul li.loader {
    69.     display: block;
    70.     float: none;
    71.     height: 115px;
    72.     margin: 0 0 20px -20px;
    73.     background: url(../images/books_loader.gif) no-repeat center center;
    74. }
    75. #books  ul li a.info {
    76.     position: absolute;
    77.     bottom: 20px;
    78.     right: 20px;
    79. }
    80. #books  ul li a.thumb {
    81.     display: block;
    82.     border: 1px solid #ddd;
    83. }
    84. #books  ul li a.thumb img {
    85.     display: block;
    86.     margin: 0;
    87.     padding: 3px;
    88. }
    89. #books .btm {
    90.     background: url(../images/books_btm.gif) repeat-x;
    91. }
    92. .books_tool_tip {
    93.     display: none;
    94.     position: absolute;
    95.     top: 0;
    96.     left: 0;
    97.     width: 350px;
    98.     z-index: 9999;
    99. }
    100. .books_tool_tip .books_pointer_left {
    101.     position: absolute;
    102.     top: 0;
    103.     left: 0;
    104.     width: 10px;
    105.     height: 10px;
    106.     background: url(../images/books_pointer_left.gif);
    107. }
    108. .books_tool_tip .books_pointer_right {
    109.     position: absolute;
    110.     top: 0;
    111.     right: 0;
    112.     width: 10px;
    113.     height: 10px;
    114.     background: url(../images/books_pointer_right.gif);
    115. }
    116. .books_tool_tip .inner {
    117.     border: 1px solid #ddd;
    118.     padding: 15px 15px 3px 15px;
    119.     margin: 0 0 0 9px;
    120.     background: #fff;
    121. }
    122. .books_tool_tip .inner_right {
    123.     margin: 0 9px 0 0;
    124. }
    125. .books_tool_tip .inner p {
    126.     font-size: .8em;
    127.     margin: 0;
    128.     padding: 0 0 12px 0;
    129. }

    Contenido

    1. <div id="books">
    2.         <div class="overclear buttons">
    3.             <a href="#" class="prev"><img src="images/books_prev.gif" width="40" height="30" alt="Previous" /></a>
    4.             <div class="showing"><!-- showing --></div>
    5.             <a href="#" class="next"><img src="images/books_next.gif" width="40" height="30" alt="Next" /></a>
    6.         </div>
    7.         <div class="overclear top">
    8.             <img src="images/books_left_top.gif" width="20" height="20" alt="" class="float_left" />
    9.             <img src="images/books_right_top.gif" width="20" height="20" alt="" class="float_right" />
    10.         </div>
    11.         <div class="inner">
    12.             <ul class="overclear">
    13.                 <li class="loader"><!-- loader --></li>
    14.             </ul>
    15.         </div>
    16.         <div class="overclear btm">
    17.             <img src="images/books_left_btm.gif" width="20" height="20" alt="" class="float_left" />
    18.             <img src="images/books_right_btm.gif" width="20" height="20" alt="" class="float_right" />
    19.         </div>
    20.     </div>


Pagina 8 de 35« Portada...456789101112...2030...Ultima »