HTML5 y CSS3... 572 días
- Escrito hace 681 días
- Etiquetado en: offtopic blog
- 182 comentarios
Después de varios intentos hoy os presento el nuevo rediseño de icebeat.
¿Qué tiene de especial este diseño?
- Todo está escrito en html5
- No utilizo classes para maquetar con CSS
- Ahora existen 4 temas básicos
- Paginado con AJAX
- Avatares de twitter
- Versión para navegadores que no acepten html5
- Resaltado de comentarios
Mi prioridad era escribir el blog en html y maquetar usando herencias, esto me limita bastante a la hora de añadir nuevas funcionalidades pero normalmente no solemos añadir cosas nuevas. he reducido las peticiones de las imágenes usando base64.
He intentado simplificar las etiquetas, ahora con 4 temas (código, diseño, internet y offtopic) acaparo la mayoría de las anotaciones.
He añadido la paginación infinita como hace itunes, sigue siendo compatible si desactivas javascript.
Ahora obtengo la información del usuario gracias al usuario de twitter, antes lo hacíamos con gravatar.
Para no comerme mucho la cabeza he creado 2 diseños, uno con html5 y otro para buscadores o navegadores dificiles de maquetar, me resulta más rápido lidiar con varias plantillas que intentar hacer crossbrowsing (para eso ya tengo el curro).
Está es la joyita de la casa, es un sistema para resaltar comentarios y los replies que se hacen. Al utilizar el usuario de twitter tienes un autocompletado en el textarea, si escribes @ puedes tabular y buscar. Para ver el resaltado tienes que hacer click en el avatar o en el reply del mensaje.
Comentarios
Felicidades Dani!!, ya tocaba :D Me gusta mucho
# · @emiliopenya · hace 681 días
Congrats, muy bueno me gusta mucho, como siempre un 11 porque un 10 se queda corto :D
# · @haripako · hace 681 días
No tengo palabras. Te ha quedado tremendo! Felicidades, me alegra mucho leerte de nuevo! ;)
# · @lobotenaz · hace 681 días
pedropablo haripako lobotenaz gracias, lo había acabado hace un par de días pero tenia unos problemillas con mysql. Ahora queda lo pero, escribir!
emiliopenya quillo tu no duermes verdad? jajaja que máquina.
# · @icebeat · hace 681 días
Excelente! quedo muy bueno, felicitaciones!
# · @Fabbianz · hace 681 días
que grande eres,la mejor forma para acostumbrarte a html5, esperemos que sigas escribiendo en el blog, y asi aprender de ti.
Un saludo
# · @gruncho · hace 681 días
Awesome work, mate! Te ha quedado de lujo ;)
# · @sruiz · hace 681 días
pedropablo emiliopenya haripako lobotenaz icebeat Fabbianz gruncho sruiz :D
# · roflmao · hace 681 días
icebeat qué grande fenómeno! enhorabuena :D
# · @alv · hace 681 días
Muy bueno en general y genial los comentarios resaltados y dejar sólo 4 etiquetas, que con el tiempo uno llega a tener cualquier cosa por tag.
# · @rauto · hace 681 días
Sólo puedo decir... WOW! enhorabuena! ^^
# · @chavalina · hace 681 días
Esta genial!! :D Bonito diseño y markup
# · @@boton · hace 681 días
BRU-TAL!!! :)
Veo que hay gente que pone la arroba de twitter, quizá la antepondría al campo de texto o la filtraría en el server si llega duplicada...
Me encanta, de veras, eres un fiera Dani!!!
# · @happywebcoder · hace 681 días
Simplemente Perfect!
# · @felipedelpozo · hace 681 días
me gusta. ;-)
# · @@sergiomas · hace 681 días
Me sumo a las felicitaciones. Muy logrado.
# · @dragoncillos · hace 681 días
Me encanta Dani! Enhorabuena! Lo de los comentarios con twitter users me flipa!
# · @ainiesta · hace 681 días
¡Qué currado, sí señor! Enhorabuena, icebeat :)
# · @xoan · hace 681 días
Madre mía, qué pasada. Lo del resaltado de comentarios es una caña!
# · @@ladybenko · hace 681 días
Que grande eres maquina! icebeat
# · @mrrocks · hace 681 días
qué bueno!! ya tocaba...
# · @carlostallon · hace 681 días
happywebcoder arreglado, o eso espero :)
Muchas gracias chicos!
# · @icebeat · hace 681 días
Me encanta, como siempre muy usable limpia y clarita, aunque te ha costado mucho tiempo eh? jejeje
# · @konyfero · hace 681 días
Que ganas de ver ya algo nuevo! I like it! ;)
# · kikoruizlloret · hace 681 días
Que ganas de ver ya algo nuevo! I like it! ;)
# · @kikoruizlloret · hace 681 días
Lo siento, pero con Opera 10.51 no se ve correctamente...
# · @bitacoraguti · hace 681 días
icebeat hay que estar al pie del cañón como tú, previendo la invasión XD
# · @emiliopenya · hace 681 días
dormir es de cobardes
# · @emiliopenya · hace 681 días
el comentario de happywebcoder nos ayudara a los torpes como yo :)
# · @boton · hace 681 días
Faaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa esta genialllll!!
# · @caradenada · hace 681 días
Upss, no soy ese caradenada de twitter... Tal vez le faltaría una validación para que nadie comente a nombre de otro y no generar confusión. Lo mismo, impresionante
# · @caradenada · hace 681 días
caradenada tengo pendiente la interacción con la API de twitter para identificar usuarios, ahora funciona como cuando pones tu nombre, obviamente puedes poner el nombre de otra persona al igual que el twitter de otra persona jeje.
# · @icebeat · hace 681 días
¿por qué se vé tan mal en opera? tengo opera versión 10.51
saludos,
# · @trixel · hace 681 días
Nos preguntabamos para cuando, y mira que nos dejas pasmados nuevamente. Enhorabuena Mota
# · @ralexismf · hace 681 días
trixel no he podido adaptar la versión html5 para opera, en opera supongo que ves la versión en texto plano.
ralexismf gracias maquina :)
# · @icebeat · hace 681 días
Novedades en icebeat!!!! Estupenda noticia. Buen diseño. :) Ahora a seguir escribiendo alguna cosilla. ;)
# · @corsaria · hace 681 días
Has vuelto por todo lo alto! enhorabuena por el tema, es espectacular!
Ahora a seguir escribiendo, eh? ;)
Un saludote!
# · @marcosesperon · hace 680 días
icebeat increíble lo de los comentarios.
# · @beldar · hace 680 días
bien loco, por fin... hace ratos que se extrañaba tu blog... te felicito por el design.. muy bueno !!
# · varguti · hace 680 días
Muy chulo el diseño, Felicidades!
# · @oscarcv · hace 680 días
muy chulo el nuevo diseño, felicidades !
# · @gafeman · hace 680 días
icebeat A mi me parece una basura :P
# · @ditman · hace 680 días
es usté un puto crack maestro!
# · @Skeku · hace 680 días
Menuda pasada!
Pasaba por aquí al recibir tantos RT de tu genialidad xD
# · @pollomuerto · hace 680 días
icebeat brutal!
# · @lordchammon · hace 680 días
El sistema de resaltar comentarios me ha 'matao'. BRUTAL. Felicidades maestro.
# · @RoninRojo · hace 680 días
wow! enhorabuena!
# · @zoocreativo · hace 680 días
Eres un máquina.
# · @tonicq · hace 680 días
Una pasada compi !
# · @pasku1 · hace 680 días
Te felicito, simple y de muy buen estilo. Buenisimo
# · @dhanny · hace 679 días
Buenisimo maquinon!
# · @albgra · hace 679 días
to perita vieo, enhorabuena :)
# · @teseo · hace 679 días
Solo puedo decir una cosa, GENIO!
# · @jrdi · hace 679 días
buenisimo eh :)
# · @tiagopregueiro · hace 679 días
ditman jajaja, no tengo palabras para ti :P
Muchas gracias por los comentarios, el lunes nueva anotación :P
# · @icebeat · hace 679 días
Caballero, ha vuelto usted a lucirse ;)
(Ya era hora!)
# · @Altheo · hace 679 días
enhorabuena! brillante :)
# · @manuelraigada · hace 679 días
Si señor, muy bueno ya estoy esperando un post de como lo hiciste :P Por cierto ya acabe por fin el proyecto y reviví en persona los nervios que pasasteis vosotros en su día. :P
# · @mianmaro · hace 679 días
Eres un hacha... impresionante :)
# · @IgNoRaO · hace 678 días
Excelente rediseño, inspirador y el mejor que he visto hasta el momento.
# · @stanmx · hace 678 días
Felicidades tio, el diseño tan limpio y cuidando los detalles me encanta, pero lo mejor está en el interior ;)
# · @marciobarrios · hace 678 días
icebeat Que puedo decir que no haya dicho... Toma, toma !!! Congrats
# · @epaDesign · hace 678 días
uhh tengo un pequeño fallo con los checkbox
# · @icebeat · hace 678 días
¡¡Madre mía!!. Me ha flipado lo de las imágenes en base64 para reducir cargas... enhorabuena :)
# · @r0sk · hace 678 días
icebeat increíble ;) Tengo mucho que aprender de esta web... ;)
# · @yvoictra · hace 676 días
me gusta bastante.
# · @juanpol · hace 675 días
Genial icebeat!!! Enhorabuena, gran trabajo.
# · @blogartz · hace 674 días
Enhorabuena! Me encanta, a ver si esto sirve para que no vuelvan a pasar 572 dias! ;)
# · @raul_quintana · hace 673 días
excelente sitio, buena opcion tambien en dominiocolectivo.com
# · jameskildare123gmail.com · hace 671 días
:O que bien te quedo
# · @xochoa · hace 667 días
felicitacion por tus entradas, sigue haciendo buen trabajo... http://www.cosasperuanas.com
# · http://twitter.com/cosasperuanas · hace 667 días
excelente diseño, mirando por sitios interesantes ocupando html5 me tropecé con el tuyo y genial aunque le encontré un solo y pequeño detalle y es relacionado a la paginación, ya que muchas veces los contenidos son algo extensos, al ir a la pagina anterior tienes que volver a arriba a la antigua, deberías indicarle que luego de recargar envié al top del sitio.
Saludos.
# · @Upierz · hace 667 días
sorry era problema de mi browser xD
# · @Upierz · hace 667 días
Extraordinario!!!
# · @torresburriel · hace 667 días
Buena apuesta lo de hacerlo en HTML5, y el resultado estupendo ;)
# · @fernandot · hace 666 días
Excelente !
# · @n00b2Hack · hace 660 días
gfhh
# · @n · hace 658 días
Perdona, el anterior post es mío, intentaba probar si había algún script de validación.
Sorry por la basura xD
Un genial trabajo!
# · @nocoments · hace 658 días
Muy bueno¡¡¡ saludos desde México. un abrazo.
# · @luislletsac · hace 653 días
excelente trabajo
# · @chromacircle · hace 653 días
icebeat Ya van a hacer 30 días... dale caña chaval y sácale partido a esto. Que te veo volviéndo a postear cuando salga HTML6 :P
# · Altheo · hace 653 días
Altheo, icebeat está tramando algo que nos hará estremecer.... bien seguro es!
# · @emiliopenya · hace 640 días
Me gusta esto de dejar comentarios con el user de twitter.
Saludos.
# · @emerz · hace 637 días
lol
# · @billgates · hace 635 días
1
# · @1 · hace 634 días
why dont use cookie?
# · ' · hace 634 días
muy bueno el efecto, eres muy innovador sabias ?
# · @principiante · hace 634 días
genial
# · @principiante · hace 634 días
principiante
# · @2 · hace 634 días
Hermoso.
# · @DocumentoWeb · hace 634 días
He llegado hasta aqui por casualidad y el diseño me gusta mucho, pero tengo una pregunta... ¿Por que no utilizar clases? Siempre he entendido que los ID y las clases son mas eficientes que maquetar por anidacion (no se exactamente como se traduce nesting...)
# · @pincfloit · hace 632 días
1
# · @1 · hace 630 días
1
# · @1 · hace 630 días
pincfloit maquetar usando el tag directamente es como acceder a un nodo html usando xpath ultra rapido, mas que una clase saludos
# · @principiante · hace 630 días
d
# · principiante · hace 630 días
icebeat eres el amo.. te admiro eres mi dios sabias
# · principiante · hace 630 días
principiante hmm... no lo acabo de entender, según Google es mas eficiente una clase que un tag "Make your rules as specific as possible: Prefer class and ID selectors over tag selectors." Y si son descendientes, menos eficientes aún. Sacado de aquí: http://code.google.com/speed/page-speed/docs/rendering.html
# · @pincfloit · hace 625 días
Esta muy bien :D venga tio cuando te pierdes si que regresas iluminado. Un abrazo
# · @andrexu · hace 625 días
Buf, se sale, muy bueno
# · @juanjoseixas · hace 624 días
quieres decir que si puede comentar com una cuenta twitter sin comprabación?
# · @pauloschilling · hace 619 días
Basicamente es lo mismo que si añades un nick falso o un correo falso, eso depende de la persona... aunque eso no quita que necesite comprobación :P.
62 días son demasiados :S
# · @icebeat · hace 619 días
icebeat Le darás la razón al grupo de Facebook :P
# · Altheo · hace 619 días
icebeat te quedó genial! felicitaciones.
Se nota que entendés muchísimo del tema =)
Un abrazo
# · @BlogWindows7 · hace 618 días
Bonito diseño :P un día podrías hacer algo así como un post mostrando todos los anteriores diseños para ver la evolución (?)
PD: mas de 100 comentarios en la entrada, wow
# · @scromega · hace 617 días
ads
# · asd · hace 614 días
adsa
# · asd · hace 614 días
icebeat Vamos Dani, necesitas otro post, sino vas a romper tu propio record, ya llevas un mes :)
# · @andrexu · hace 612 días
wow awesome :D
# · @kusaeni · hace 610 días
me parece genia el disenio...
# · elhacker · hace 609 días
wowo es genial como funciona el sistema de comentarios
# · @elhacker · hace 609 días
valla no habia probado esto
# · @elhacker · hace 609 días
kusaeni si lo mismo digo
# · @elhacker · hace 609 días
icebeat kusaeni icebeat BlogWindows7 principiante xochoa todos de acuerdo
# · @elhacker · hace 609 días
Me encanta la idea de comentar con cuentas Twitter, pero no crees que cualquiera podría falsificar cuentas?
# · @rnmp · hace 609 días
OWNED !
# · @tuenti · hace 609 días
elhacker agreed!
# · yo · hace 608 días
Sólo le he echado un vistazo por encima pero tiene muy buena pinta. Felicitaciones por el trabajo.
# · @SeGo · hace 596 días
hola icebeat
# · asd · hace 592 días
icebeat echamos de menos lo que van siendo las actualizaciones XD
# · @emiliopenya · hace 587 días
jajaja... Emilio, no sé de qué te extrañas si ya estás en el grupo:
http://www.facebook.com/#!/group.php?gid=124693910891909&ref=ts
# · Altheo · hace 587 días
Seguis siendo el Maestro Jedi del Front-end! :)
# · @diego_ar · hace 583 días
jej faltaba mi comentario, y ya van 124 días...
# · @aurexs · hace 557 días
gracias chicos por el buen diseño web del blog....http://bit.ly/bLg4AF
# · @judloved · hace 556 días
fsdfsd
# · sdfdf · hace 555 días
Muy guapo el diseño, felicidades ;)
# · yitan5 · hace 527 días
Tio, tu CSS es tremendamente INEFICIENTE... aquí te dejo una guía para que te machaques un poco :D: https://developer.mozilla.org/es/Escribir_CSS_eficaz Tu diseño es una pasada, ME ENCANTA, sobre todo lo de relacionar los nombres con los comentarios, es una idea muy buena y original
# · napascual · hace 514 días
Hello! geggecc interesting geggecc site!
# · Pharme39 · hace 502 días
Very nice site! cheap viagra
# · Pharmb254 · hace 502 días
Very nice site! cheap cialis http://oixypea.com/qxqaq/4.html
# · Pharma134 · hace 502 días
Very nice site!
# · Pharmb177 · hace 502 días
Muchos errores todavia
# · @dgdd · hace 501 días
Buenos dias, Soy Ignacio Pacheco, estaría interesado en realizar un intercambio con ustedes. ignacio.jimdogooglemail.com
# · Ignacio · hace 498 días
hsadnas aveeeeeer
# · aver · hace 476 días
opa ta bueno no regarga toda la web simplemente agrega el nuevo coment no tiene emoticones esto?
# · aver · hace 476 días
Muy buen diseño felicitaciones!
# · @StudioLlanes · hace 475 días
Cojonudo!!!
# · @flasbak · hace 475 días
Hermoso diseño
# · @Xosmar · hace 460 días
Epa ta buena la web, aunque tiene articulos algo viejos pero son bien novedosos, si se puede te pido permiso para tomar uno que otro codigito tuyo y luego pongo un enlace a tu web, gracias hermano.
# · Hjoaco · hace 453 días
Se ve hasta el carajo! en IE6 que mierda de theme
# · Tuenti · hace 450 días
hola
# · luis · hace 380 días
q tal
# · luis · hace 380 días
Si sigues sin escribir vamos a llegar a otros 572 días, por lo que te va a tocar hacerte otro diseño :P
# · @jmapariciogijon · hace 380 días
我靠
# · @summic · hace 360 días
we can use othername to talk
# · jack · hace 360 días
good
# · oi · hace 360 días
test
# · @d · hace 360 días
summic 围观
# · @yeasiz · hace 360 días
围观
# · @slene · hace 360 días
围观
# · rkpeng · hace 360 días
slene 不错。
# · rkpeng · hace 360 días
cool rkpeng
# · @wesdu · hace 360 días
围观，我艹
# · @dig · hace 360 días
ere
# · @wee · hace 359 días
test
# · @rerew · hace 359 días
test
# · @lightory · hace 359 días
ssssssssssssssssssssssss
# · 啊啊啊啊啊啊啊啊啊 · hace 359 días
very impressive lightory , another test rerew
# · @lepture · hace 358 días
so cool
# · @pppsss · hace 358 días
顶顶顶
# · 顶顶顶 · hace 358 días
they say this is coooooooooooool
# · @twitter · hace 358 días
aa
# · @aa · hace 358 días
围观 ...
# · @yleo77 · hace 358 días
fsvfvsdv Fabbianz
# · @sd · hace 356 días
Me encanta
# · Manuel · hace 356 días
Me gusta la manera en que se unen los comentarios
# · @lordcacique · hace 356 días
It's great!!!
# · @nowazhu · hace 351 días
我是来围观的～
# · fanzeyi · hace 341 días
Muy chulo te ha quedado, revisaré detenidamente el código fuente para ver que puedo aprender... :)
# · @Angel_fire · hace 322 días
gIagnX http://dy5Ndo9BsL1vpVv5kqsUh.com
# · @samuel · hace 322 días
goodsss
# · jsss · hace 318 días
mensaje
# · @juan · hace 301 días
excelente tema
# · @gustavonecore · hace 301 días
hola no soy juan y aparece la foto de twitter de alguien llamado juan quizas no?, buuuuuuuuuuug amigo, corrijalo :D
# · @juan · hace 301 días
nice website son of the beach :)
# · @CHARLIESHEEN · hace 301 días
please, shutdown your website, you have a BIG BUG, no soy obama y aparece el twitter de el... lolwned
# · @BarackObama · hace 301 días
aaaaaaaaaa
# · @pepe · hace 271 días
fuck you!!
# · @wordpress · hace 247 días
Ostias!!!!! actualiza el blog tio.. te estan dando por el culo?
# · @anieto2k · hace 247 días
Cada ves que entro por aquí pasa siempre mas de un año después del último post, tienes que darle más a esto.
Excelente diseño, un saludo para icebeat Te digo siempre entro aquí por la web de anieto2k
# · @yoanyala · hace 187 días
:o
# · @axelpixer · hace 146 días
axelpixer testing.
# · @angelcustodio · hace 58 días
效果很赞的说~ fanzeyi
# · JustZiya · hace 56 días
Comentar