[ un desarrollo de PATAGONIA CREATIVE ]

Archivos en Categoria: Diseño Web

  • Diseñando tablas agradables para tu web

    Mientras trabajo en varios diseños de los cuales saldrá uno para el rediseño de xyberneticos, voy pensado también en otros cambios, entre ellos en la sección Presenta tu web (Pronto les diré los cambios que haré aquí para agregar las futuras web), pero estéticamente lo que haré a partir de ahora será presentar todas las nuevas web que aparezcan para esta sección mediante tablas, ya que estéticamente dan un diseño muy agradable y es una buena opción para tenerlas completamente organizadas.
    Seguramente ustedes también estarán necesitando algunas tablas para organizar algunos datos, por eso recordé unos bonitos tutoriales creados por Infectedfx ya hace meses largos. Y lo mejor aun es que posee, diseños realmente muy agradables. Los tutoriales son dos, uno para lograr el estilo Zebra en nuestras tablas, y otro un poco más tradicional pero igual de bello. Podrán descargar los tutoriales para seguirlos desde sus ordenadores, y también ver los ejemplos que ya trae prediseñados en los archivos.

    Tablas Estilo ZebraDemoDescarga

    Tablas Estilo TradicionalDescarga

  • GrayBit – Visualiza tu sitio a escala de grises (grayscale)

    GrayBit es una sencilla herramienta online que prueba la accesibilidad de tu sitio web en línea. GrayBit convierte páginas web completas a sus equivalentes en escala de grises o grayscale. Por lo tanto, podrás comprobar los niveles de contraste del contenido en tu web y elegir un esquema de color más accesible para tu diseño. Su utilización es sumamente sencilla, basta con solo ingresar la url de nuestro sitio para convertirlo a tonos grayscale.

     

  • WordPress y Joomla Dreamweaver extension

    WordPress Dreamweaver extension

    Mauricio me hizo recordar algo que tenia que postear, ¿Que? Vikiworks, ofrece una genial extensión muy útil para diseñadores web, WordPress Dreamweaver extensión, que básicamente nos permitía estructurar themes para wordpress utilizando Dreamweaver. Entre las tantas opciones que podremos encontrar, incluye código para:

    • Include Header
    • Include Sidebar
    • Comments Template
    • Include Footer
    • Categories ASC & DESC
    • Lastest 10 Post
    • Dynamic Title Tag
    • Entry Content
    • etc…

    Enlace Descarga version Dreamweaver 8 (Vikiworks) – Actualizo: Acabo de encontrar una versión para Dreamweaver MX2004 – Enlace DescargaWeb oficial

    Fuente infectedfx

    Joomla Dreamweaver extension

    Para los que diseñan bajo joomla, Dreamweaver extension Joomla es una útil extensión que les permitirá estructurar y crear bajo Dreamweaver plantillas para sus blog. También posee buenas opciones, de las cuales podrán sacar provecho.

    Enlace Descarga Dreamweaver extension Joomla - Fuente Codigogeek

  • NetworkBarGenerator: Generador de barras para promocionar nuestros blog desde otros

    NetworkBarGenerator, es un generador online de top bar, muy práctico para promocionar nuestros blog desde otros. Como podemos verlo en la red de blog de hipertextual. Si bien no es algo difícil de lograr, este generador nos facilitara mucho la tarea. NetworkBarGenerator nos permite configurar prácticamente todo, para adaptar el diseño lo mejor posible a nuestro blog, aunque si podríamos decir que han faltado algunas opciones mas que seguramente se iran agregando de a poco al servicio. NetworkBarGenerator requiere que nos registremos de forma garuita, lo que lleva solo unos segundos. Luego solo queda comenzar a agregar nuestros enlaces, ponerle un nombre a nuestro top bar, adaptar las fuentes, los colores, etc. Una vez que hemos realizado o agregado todo los enlaces que deseamos, y luego de ver la vista previa y quedar conforme con el diseño, simplemente daremos click sobre “Get the code”, para obtener el código que luego insertaremos en nuestros blog para comenzar a promocionar todos nuestros blog desde otros.

    Enlace NetworkBarGenerator

    Ejemplos:

     

    1. <link rel="stylesheet" type="text/css" href="http://networkbargenerator.com/styles.css" media="all" />
    2. <script src="http://networkbargenerator.com/bar.php?id=269" type="text/javascript"></script>
    3. <script>
    4. // <![CDATA[
    5. var bar = document.createElement('div');
    6. bar.setAttribute('id', 'bar');
    7. document.body.insertBefore(bar, document.body.firstChild);
    8. bar.innerHTML = code;
    9. // ]]>
    10. </script>

  • Codepress, Editar código online y plugin para evitar errores

    Codepress, es un editor de código fuente que podremos integrar a nuestras web facilmente. Básicamente lo que nos permite Codepress es editar nuestros códigos de manera online, coloreando la sintaxis para que los lenguajes que vayamos escribiendo sean más fáciles de leer a medida que lo vamos desarrollando.
    Características
    • Resaltado de sintaxis en tiempo real
    • Soporta ASP, C#, CSS, HTML, Java, JavaScript, Perl, PHP, Ruby, SQL y VBScript.
    • Fragmentos pre-armados de código (snippets). Por ejemplo, en modo PHP, tecleamos “switch” y presionamos TAB y se genera la estructura del switch lista para rellenar.
    • Autocompletado de código.
    • Diversos atajos de teclado.
    • Posibilidad de tener múltiples ventanas.

    DemoDescarga – Web Oficial Codepress – Via bitslab

    Codepress Plugin wordpress

    WordPress Plugin Code Editor es un plugin basado en Codepress que nos permite resaltar todas las sintaxis de los diferentes lenguajes utilizados en nuestra plataforma wordpress. Por ejemplo cuando deseamos corregir algo de nuestra hoja de estilo, de nuestro header, etc, La idea con este plugin es tratar de que puedas leer o ubicar todo de una forma más sencilla y puedas así localizar errores de sintaxis fácilmente o evitarlos.

    Instalación:

    1. Descargar WordPress Plugin Code Editor – otro enlace opcional Aqui
    2. Descomprimir el fichero
    3. Alojarlo en la carpeta de los plugin “/wp-content/plugins/” todo el contenido
    4. Activar desde el menú administrador

  • Diseño Web | Scripts

    15 /08 / 2007 - 12:25 pm

    Publicado por Nikko.

    • 15
    • 24.875

    Social Link

    Page Turner, Efecto libro animado basado en jQuery

    Page Turner es un bello script que trabajando con jQuery nos permite lograr un efecto realmente muy bonito, como si se tratase de un libro animado. Lograremos exactamente lo mismo que haríamos con PageFlip, pero lo bueno de Page Turner, es que no necesitaremos utilizar nada de flash.
    Básicamente el efecto que produciremos utilizando Page Turner, es mediante la superposición de imágenes, donde crearemos una imagen con los artículos de nuestro libro, y otra que será la encargada de generar el efecto de transición entre página y pagina.

    DemoDescarga – via Anieto

    Modo de uso:

    Descargamos la libreria jquery.js
    JavaScript (agregar a nuestro header)

    1. <script type="text/javascript" src="jquery.js"></script>
    2.  
    3. <script type="text/javascript">
    4.  
    5. // set constants
    6. var $pageheight = 189; // our single page height
    7. var $pagewidth = 146; // our single page width
    8.  
    9. var $pageYpos = 0; // current Y position of our bg-image (in both pages)
    10.  
    11. $(document).ready(function(){ // When the page is ready
    12.  
    13.  
    14. /* left page turner */
    15. $("#leftpage").click( function() {
    16. $pageYpos = $pageYpos + $pageheight; // update Y postion
    17. $("#leftpage").css("background-position", "0px "+$pageYpos+"px");// move the background position
    18.  
    19. setTimeout ('$("#flip").css("background-position", "top center");', 200);
    20. setTimeout ('$("#rightpage").css("background-position", "146px "+$pageYpos+"px");', 200);
    21.  
    22. }); // close leftpage click function
    23.  
    24. /* right page turner */
    25. $("#rightpage").click( function() {
    26. $pageYpos = $pageYpos - $pageheight; // note: minus page height
    27. $("#rightpage")
    28. .css("background-position", "0px "+$pageYpos+"px");
    29.  
    30. $("#flip").css("background-position", "top left");
    31. setTimeout ('$("#flip").css("background-position", "top center");', 200);
    32. setTimeout ('$("#leftpage").css("background-position", "146px "+$pageYpos+"px");', 200);
    33.  
    34. }); // close rightpage click function
    35. }); // close doc ready
    36.  
    37. </script>
    1. div#turner {
    2. float:left;
    3. padding-top:11px;
    4. width:302px;
    5. height:210px;
    6. position:relative;
    7. background: transparent url(/images/frame.jpg) 0px 6px no-repeat; /* this graphic gives us the book edges and the shadows around the edges */
    8. }
    9.  
    10. #leftpage, #rightpage {
    11. float:left;
    12. position:relative;
    13. background-image:url(images/10page.jpg);
    14. overflow:hidden;
    15. width:146px;
    16. height:189px;
    17. left:5px;
    18. cursor:pointer
    19. }
    20. #leftpage{
    21. background-position:0 0;
    22. }
    23. #rightpage{
    24. background-position:146px 0
    25. }
    26. div#flip {
    27. background: transparent url(images/3d.png) top center;
    28. height:210px;
    29. width:118px;
    30. position:absolute;
    31. top:0;
    32. left:90px;
    33. z-index:99;
    34. margin-bottom:0;
    35. padding-bottom:0
    36. }
    37. #js {
    38. font-family:"Courier New", Courier, monospace;
    39. font-size:small;
    40. padding:2em;
    41. clear:both
    42. }
    43. #js strong{
    44. color:#003399
    45. }
    46. #js em{
    47. color:#aaa
    48. }
    49. #js p.sc{
    50. color:#c00;
    51. font-weight:700;
    52. margin:0;
    53. padding:0
    54. }
    55. #js .function{
    56. color:#090;
    57. font-weight:700;
    58. }
    59. #js .css{
    60. color:#900;
    61. font-weight:700;
    62. }
    1. <h2>Libro animado </h2>
    2. <div id="turner">
    3. <div style="background-position: center top;" id="flip"></div>
    4. <div style="background-position: 146px -11151px;" id="leftpage"></div>
    5. <div style="background-position: 0px -11151px;" id="rightpage"></div>
    6. </div>

  • InnerFade, Aplicar el efecto Fade in-out a cualquiera de nuestros elementos

    InnerFade , es un script muy agradable, basado en la librería JQuery. InnerFade básicamente nos permite animar cualquier elemento, sea un div, un enlace, imágenes, etc dando un efecto “Fade in/out”, elementos que desaparecen suavemente hasta ser remplazados por otros. Realmente es un bello script para ser aplicado en nuestros proyectos web.


Pagina 34 de 35« Portada...1020...272829303132333435