Galeria jQuery : PikaChoose

JQuery PikaChoose

JQuery PikaChoose

PikaChoose es una galeria jQuery

Despues de buscar algunas esta me gusto por sencilla y un diseño neutro que queda casi en cualquier sitio. Otras tambien son funcionales pero esta me parecio la mas acertada.

¿Como se usa?

Para usarla hay que estar familiarizado con HTML y copiar y pegar el codigo que provee el sitio de pikachoose. Agregas las fotos en un listado y el codigo hace el resto. Es una manera sencilla que puedes mostrar fotografias que esten rotando de manera automatica.

Ventajas

La ventaja que tiene sobre hacer esto en flash es que es mas rapido, Google indexa la fotografia con su respectivo texto ALT, es decir tambien te ayuda en posicionamiento, cosa que con flash es un poco mas complicado. Ademas la galeria se puede actualizar al poner nuevas fotos y actualizar el listado en el archivo HTML

Ejemplo de un sitio con esta galeria

Es una empresa que se dedica a hacer Calendarios Personalizados, Mouse Pad con tu imagen y nombre. Ademas cuentan con Mochilas Personalizadas para niños de preescolar. Es una empresa Tapatia llamada Properprint. He aqui un screenshot de la galeria pikachoose aunque es mejor verla en vivo directo su sitio.

pika_properprint

pika_properprint

Buenos ejemplos de CSS

diseño en CSS, lo mejor de lo mejor, ejemplos de buen uso de CSS

Ejemplos de buen CSS

El CSS o Cascading Style Sheets son una manera de darle de manera externa a tu sitio una apariencia a los textos, imagenes, menus y elementos. Es muy util ya que te puede ayudar a maquetar o estructurar un sitio, cosas que con las obsoletas TABLAS no se podia hacer. He aqui un link de donde puedes ver algunos ejemplos selectos de CSS hechos por nuestro amigo y colega Web Designer Wall.

Que es el CSS?

Todavia hay quienes no usan las bondades del CSS, te sirve para maquetar un sitio. Es decir, para posicionar objetos en la pantalla dentro, fuera o de manera relativa en tu documento HTML. La mejor manera de introducirse al CSS es viendo ejemplos y desactivando la ejecucion de CSS en tu navegador para ver la gran diferencia.

Tips para aprender

Lo primero es estudiar un poco su estructura.
Ver muchos ejemplos y ver lo que se repite.
Aprender por lo facil: Dar formato a texto.
Subir poco a poco la dificultad.
Te puedes auxiliar de DreamWeaver que te da sugerencias de codigo y ver los resultados.
Imprimir un CSS cheat sheet para tenerla a la mano.
Visitar sitios de tips para CSS y como mejorar.

Como introducirse al diseño web – Parte III

Como empieza una pagina web

Pues desde la idea ya sea del diseñador o del cliente. Sin embargo la pagina web debe de pasar por pasos basicos de estructuracion y aprobacion para que pueda terminarse como lo acordado entre el cliente y el diseñador.

Ciertamente algunos clientes abusan y creen que se pueden hacer cambios en cualquiern etapa del diseño y aun mejor para ellos: que esto no suba ni el costo de produccion ni los tiempos de entrega.

Hay que establecer pues unas etapas basicas que ayudaran a evitar esto y a llevar el negocio a mejores practicas.

1.- El sketch

El sketch es el que se hace cuando el cliente te esta platicando su idea de como debe ser o como cree el que debe ser. Es donde se anotan las caracteristicas deseadas de la paginas web. Donde se nota si el menu debe ir arriba o a la izquierda, si el logo aparece y en que parte, donde aparecen links o tros contenidos.

El sketch se hace varias veces, se hace uno con el cliente de manera rapida pero tambien al llegar a tu estudio y sentarte a pensar como resolver esa pagina web. Se hacen varios sketches ya que son rapidos y ayudan a visualizar no solo los acomodos sino tambien ayudan a preveer pasos tecnicos para la hora de programar el armado de la pagina web. Un diseñador web con experiencia ya puede visualizar como hara su codigo CSS y su estructura de DIVs con solo crear y ver como va el sketch.

Un paso muy importante seria refinarlo y mostrarselo al cliente. Pedirle su firma y autorizacion para ir al siguiente paso: El wireframe. (dejar en claro que retroceder o hacer cambios a lo previamente utorizado tiene un costo)

2.- Wireframe

El wireframe es el Sketch o boceto pasado en limpio y el cual se llena con los textos a usar en la pagina web.

Sitios posicionados de manera truculenta

El posicionamiento en Google y Yahoo

A veces uno se lleva sorpresas al ver que hay sitios posicionados con “trampas” , me he llevado la sorpresa al hacer una investigacion para un cliente con ciertas palabras claves y encontre una empresa posicionada gracias a trucos que supuestamente Google no acepta y que baja o borra de los resultados como:

  • 1.- Texto oculto con keyword stuffing
  • 2.- Links rotos o inactivos pero con palabras clave
  • 3.- Avisos clasificados ficticios con link a su pagina
  • Pues me he llevado a una sorpresa al ver que hay empresas que se han posicionado con metodos poco eticos y que Google dice no permitir… He aqui algunas cosas que no se deben hacer al crear una pagina web o intentar posicionarla.

    Keyword stuffing

    En pocas palabras es “atascar” o llenar de palabras el documento HTML con el fin que Google sea engañado y la indexe creyendo que es un documento en el cual encontramos informacion de esas palabras. Muchas veces esos sitios ocultan esas palabras poniendolas al mismo color del fondo con lo que a la vista no se ven, pero si existen.

    Links rotos o inactivos pero con palabras clave

    Google tambien indexa esto y me parece mal, ya que es frustrante para un usuario el llegar a una pagina web y ver que los enlaces no funcionan. Desgraciadamente todavia hay empresas que usan estos metodos poco eticos para indexar algunas palabras clave. Sin embargo el usuario recibe el mensaje que es un sitio SIN CALIDAD y que no merece la pena verlo. Son metodos que salen contraproducentes.

    Avisos clasificados ficticios con link a su pagina

    He encontrado tipos de foros o de avisos clasificados que usan para llenarlos de anuncios ficiticios, en algunos casos con miles ellos y en cada uno de ellos un link a la pagina que quieren posicionar. De esta manera engañan a Google quien cree que hay miles de links apuntando a esa pagina, sin embargo un posible comprador al ver esto se puede confundir y juzgar a la pagina como de mala calidad, engañosa y poco fiable.

    Si engañan a Google tambien engañaran sus clientes con sus productos.

    Si bien estas empresas que se valen de trucos para subir en Google o Yahoo demuestran que no tienen etica de competencia leal en internet, es obvio pensar que tampoco la tienen en los negocios. Asi que sus posibles compradores dudaran y todas estas estrategias les pueden salir contraproducentes. CUIDADO CON COMPRAR A ESTAS EMPRESAS!

    MIcrosoft podria congelar tu PC hasta que pagues!

    jajaja, que risa me dio esta noticia. Seria realmente divertido ver que se empezaran a congelar miles de ordenadores en el mundo gracias a esta aplicacion que ya patento MIcrosoft. Ahi nos dariamos cuenta hasta donde llega la pirateria, escuelas, oficinas de gobierno, empresas privadas, casas particulares.

    Microsoft estaria en su derecho de hacerlo…je je

    Microsoft ha invertido años y millones de dolares en desarrollar su software, tal vez no sea el mejor software pero cierto es que quien use software pirata, de alguna forma esta robando. Si, es caro el software pero si nosotros fueramos los ofendidos pediriamos que todos aquellos que usan nuestro software pirata paguen la justa cantidad por usarlo.

    Y el software libre?

    Pues en semanas anteriores lei un articulo donde hablaban la posible paralizacion de labores de las personas que trabajan el OPEN OFFICE, una version “gratuita” o mas bien de no costo para tener hojas de calculo, procesador de palabras,etc…
    El punto al que voy es que nada es gratis y con donativos miseros no se llega muy lejos, eventualmente todos tienen que tener alguna retribucion economica. Como seguramente pasara cuando mas y mas personas usen UBUNTU o alguna distribucion de de Linux. De hecho los de UBUNTU si te cobran una cantidad si deseas que te den soporte, instalacion dedicada y cofiguracion a tus redes. Dinero es dinero.

    Que pasaria si nos obligan a pagar el software?

    Pues nos estarian obligando a pagar un software que por varios años nos “hemos robado” asi que eticamente no esta mal. Al contrario estamos mal todos los que en algun momento hemos descargado un MP3, una pelicula o alguna material que tiene un costo “de manera gratuita” en redes como Limewire o torrents.
    Lo divertido es que si se llega a la manera de obligar a las personas a pagar por todo el software las PC dejarian de ser tan baratas y asequibles y muchos mirarian a nuevos sistemas operativos y marcas como instalar alguna distribucion de Linux o bien adquirir una preciosa Mac.
    Que tal?

    La fuente de este articulo via: Abadia Digital

    Como introducirse al diseño web – Parte III

    Como empieza una pagina web

    Pues desde la idea ya sea del diseñador o del cliente. Sin embargo la pagina web debe de pasar por pasos basicos de estructuracion y aprobacion para que pueda terminarse como lo acordado entre el cliente y el diseñador.
    Ciertamente algunos clientes abusan y creen que se pueden hacer cambios en cualquiern etapa del diseño y aun mejor para ellos: que esto no suba ni el costo de produccion ni los tiempos de entrega.

    Hay que establecer pues unas etapas basicas que ayudaran a evitar esto y a llevar el negocio a mejores practicas.

    1.- El sketch

    El sketch es el que se hace cuando el cliente te esta platicando su idea de como debe ser o como cree el que debe ser. Es donde se anotan las caracteristicas deseadas de la paginas web. Donde se nota si el menu debe ir arriba o a la izquierda, si el logo aparece y en que parte, donde aparecen links o tros contenidos.

    El sketch se hace varias veces, se hace uno con el cliente de manera rapida pero tambien al llegar a tu estudio y sentarte a pensar como resolver esa pagina web. Se hacen varios sketches ya que son rapidos y ayudan a visualizar no solo los acomodos sino tambien ayudan a preveer pasos tecnicos para la hora de programar el armado de la pagina web. Un diseñador web con experiencia ya puede visualizar como hara su codigo CSS y su estructura de DIVs con solo crear y ver como va el sketch.

    Un paso muy importante seria refinarlo y mostrarselo al cliente. Pedirle su firma y autorizacion para ir al siguiente paso: El wireframe. (dejar en claro que retroceder o hacer cambios a lo previamente utorizado tiene un costo)

    2.- Wireframe

    El wireframe es el Sketch o boceto pasado en limpio y el cual se llena con los textos a usar en la pagina web. Es una manera formal de que el cliente vea al acomodo de la informacion real de su web pero que nos da la ventaja de que apruebe el acomodo de la informacion antes de meterle mano al diseño y apariencia del sitio web.

    El cliente debe aprobar el acomodo o pedir los ajuses pertinentes y luego firma. De esta manera ya el diseñador se concentra en la apariencia del sitio ya que la informacion, acomodo de menus y objetos ya esta definido!

    3.- Diseño FINAL

    En las imagenes adjuntas podemos ver como el diseño se apego a lo especificado y autorizado en el wireframe. De esta manera evitaremos prensentar un diseño que luego el cliente nos diga los clasicos:

    “Si me gusta pero ponle mi logo al otro lado” , “muy bien, pero cambialo todo de lugar…”

    Ya si el cliente decide contradecirse sabra que el te ha firmado en la aprobacion del SKETCH y en la del WIREFRAME y estara bajo aviso que el costo es mayor y el tiempo de entrega mas largo.
    paginas web, web sketching, web wireframe, web design
    paginas web, web sketching, web wireframe, web design

    Como introducirse al diseño web – Parte II

    Como introducirse al diseño web – Parte II

    El usar CSS es un metodo muy usado hoy dia, ademas que permite dar el formato a un documento HTML de maneera mas controlada. Aunque, siendo realistas hay que decir que si tiene su curva de aprendizaje. Sin embargo una vez que empiezas a comprender como funciona, puedes empezar a ver el codigo de otras pagina y aprender por ejemplos practicos. Esta es la forma en la que he encontrado muchas aplicaciones muy creativas de CSS que luego utilizarlo en algun sitio.

    En lo personal les voy a recomendar un addon de firefox es el WEB DEVELOPER 1.1.6, con este plugin puedes hacer click derecho sobre paginas web para que puedas ver su codigo HTML y mas importante su CSS y el arreglo que DIVs que usaron para armar el sitio.

    Web Developer 1.1.6 un complemento (addon) para Firefox

    Este addon creado por Chris Pederick es muy util, ya que sirve tanto para expertos como para novatos ya que al poder ver en otras ventanas la part tecnica de un diseño web te da nuevas ideas y te sirve como herramienta de aprendizaje. Podras descargarlo aqui Descargar Web Developer 1.1.6 para Firefox

    Web Developer 1.1.6

    Web Developer 1.1.6

    Como usar Web Developer para aprender CSS

    Pues es muy sencillo, abres una pagina web que tenga algun CSS que desees saber como lo lograron y seleccionas.
    WEB DEVELOPER > CSS > VIEW CSS (con esto abres el CSS adjunto al archivo)
    o
    WEB DEVELOPER > CSS > VIEW STYLE INFORMATION Esta es la verdadera hermosura de este addon, ya que te permitira ver el acomodo de DIVs para que luego lo compares con el CSS adjunto y con ello podras darte idea de como estrucutraron el sitio. Estructurar un sitio es a veces la tarea mas dificil y tal vez lo hayan intentado con tablas de HTML. con DIVs y CSS es mas facil, aun asi es bueno que tomen nota de como otros lo logran.

    Muy bien ¿y ahora donde veo sitios con buen CSS?

    Pues si ya instalaron el Web Developer 1.1.6 es tiempo de navegar por sitios con CSS, abrir tu editor de HTML y hacer muchas pruebas. (muchas, ya que la practica sera lo mejor)
    He aqui un sitio donde pueden ver varias paginas web con un buen diseño en CSS para que aprendan viendo ejemplos.
    http://cssmania.com
    css_mania1

    Otros articulos relacionados con Introduccion al diseño

    http://sdgestudio.wordpress.com/2008/09/29/como-introducirse-al-diseno-web-parte-i/

    Soccer vs Hockey

    Cada que veo a la seleccion mexicana jugar me dan mas ganas de ser extranjero… ¿Que debo de nacionalizarme de cualquier otra patria para poder ver a mi selccion ganar? jejeje.

    En el soccer lo que falta es una mentalidad ganadora

    En soccer cualquier roce, empujon o minimo toque basta para que el jugador se retuerza de “dolor” y pare el partido, nada mas para sacar de ritmo al oponente y haciendo perder minutos valiosos en los que podrian dedicarse a jugar. Falta una mentalidad ganadora y que se refleja en cada partido de la seleccion mexicana.

    ¿Por que fallan mas en el soccer que en el hockey?

    Me pregunto si las porterias en el hockey son mas pequeñas, el puck mas dificil de controlar y la presion de la defensa es muy dura. ¿Por que meten mas y mejores goles los jugadores de hockey que los de soccer?

    Ademas en el hockey llegan a jugar hasta con huesos fracturados y no andan llorando como los jugadores de soccer.Americanos y Canadienses tienen esa mentalidad, ¿sera por eso que cada vez es mas dificil poder ganarles?

    He aqui un par de videos de por que el soccer no me gusta

    Comparen los goles y la dificultad para hacerlos y comprobaran que el Hockey sobre hielo es un deporte años luz mas avanzado que el futbol. Diseñado para jugar sin hacer tiempo ni parar el partido, diseñado para la accion continua y donde hay golpes muy fuertes pero nunca los golpes baratos y y deshonrosos del soccer.

    Goles fallados en soccer

    Goles a pesar de las circunstancias en el hockey

    ¿Que les parece? cual es mejor Soccer o Hockey?

    Jejeje pues los panboleros no lo aceptaran, de hecho ni deben de entender las reglas del hockey. Pero bueno, cada quien lo suyo. Sin embargo yo alguna vez fui muy aficionado al futbol soccer y lo termine odiando, y mas con esta seleccion mexicana lelna de divas como Rafa Marquez, Osvaldo y compañia. A ver si no nos pone una friega Bolivia y luego otra Costa Rica, Pero se estaria cosechando lo que se sembro. Mejor vean hockey!

    Escuché y compare, Coldplay y Satriani…

    Me parece que la noticia en que Joe Satriani, el virtuoso guitarrista demando a Coldplay por plagio si procedera. Me puse a escuchar ambas canciones y si les puedo decir que hay notas en “Viva la Vida” de Coldplay iguales a las lineas melodicas y armonicas de “If I could fly” de Satriani.

    Escuchen y comparen, no tengo un link a Viva la Vida pero les tengo el link dificil a la musica de Satriani: http://www.satriani.com/discography/Is_There_Love_In_Space/

    He aqui el video en youtube donde ponen Satriani, luego Coldplay y luego LOS DOS: http://www.youtube.com/watch?v=eb49QuPLuHg

    Escuchen el minuto 3:30 de Viva la Vida
    y El 0:30 de If I could Fly de Satriani…

    Quien tendra la razon? Quien sabe, pero por lo pronto que quemon para Coldplay…

    Coldplay sued for plagiarism.

    Coldplay sued for plagiarism.

    http://www.chouroom.com: Trade Show Especializado en street wear. Clover Lawn. Av la Paz 1811.

    3dfactory un excelente sitio para encargar representaciones en 3D.

    Si eres arquitecto y quieres vender tu proyecto o ver como se veria mcho antes de construir 3dfactory te puede ayudar. Tambien cuentan con servicio de animacion de procesos industriales o graficos que pueden servir para web, DVD o TV.

    visita su sitio y conoce mas…

    http://www.3dfactory.com.mx/maquetas_virtuales_render_3d_visualizacion_espacios_arquitectonicos.html