Daniel Mota / IceBeat

Mi vida en formato CSS3

Estás en la bitácora de IceBeat, una página sobre diseño y desarrollo web.

HTML5 y CSS3... 572 días

Después de varios intentos hoy os presento el nuevo rediseño de icebeat.

1

¿Qué tiene de especial este diseño?

  1. Todo está escrito en html5
  2. No utilizo classes para maquetar con CSS
  3. Ahora existen 4 temas básicos
  4. Paginado con AJAX
  5. Avatares de twitter
  6. Versión para navegadores que no acepten html5
  7. 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).

1

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.

1


Comentarios


  1. Felicidades Dani!!, ya tocaba :D Me gusta mucho

    # · @emiliopenya · hace 1662 días

  2. Congrats, muy bueno me gusta mucho, como siempre un 11 porque un 10 se queda corto :D

    # · @haripako · hace 1662 días

  3. No tengo palabras. Te ha quedado tremendo! Felicidades, me alegra mucho leerte de nuevo! ;)

    # · @lobotenaz · hace 1662 días

  4. 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 1662 días

  5. Excelente! quedo muy bueno, felicitaciones!

    # · @Fabbianz · hace 1662 días

  6. 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 1662 días

  7. Awesome work, mate! Te ha quedado de lujo ;)

    # · @sruiz · hace 1662 días

  8. # · roflmao · hace 1662 días

  9. icebeat qué grande fenómeno! enhorabuena :D

    # · @alv · hace 1662 días

  10. 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 1662 días

  11. Sólo puedo decir... WOW! enhorabuena! ^^

    # · @chavalina · hace 1662 días

  12. Esta genial!! :D Bonito diseño y markup

    # · @@boton · hace 1662 días

  13. 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 1662 días

  14. Simplemente Perfect!

    # · @felipedelpozo · hace 1662 días

  15. me gusta. ;-)

    # · @@sergiomas · hace 1662 días

  16. Me sumo a las felicitaciones. Muy logrado.

    # · @dragoncillos · hace 1662 días

  17. Me encanta Dani! Enhorabuena! Lo de los comentarios con twitter users me flipa!

    # · @ainiesta · hace 1662 días

  18. ¡Qué currado, sí señor! Enhorabuena, icebeat :)

    # · @xoan · hace 1662 días

  19. Madre mía, qué pasada. Lo del resaltado de comentarios es una caña!

    # · @@ladybenko · hace 1662 días

  20. Que grande eres maquina! icebeat

    # · @mrrocks · hace 1662 días

  21. qué bueno!! ya tocaba...

    # · @carlostallon · hace 1662 días

  22. happywebcoder arreglado, o eso espero :)

    Muchas gracias chicos!

    # · @icebeat · hace 1662 días

  23. Me encanta, como siempre muy usable limpia y clarita, aunque te ha costado mucho tiempo eh? jejeje

    # · @konyfero · hace 1662 días

  24. Que ganas de ver ya algo nuevo! I like it! ;)

    # · kikoruizlloret · hace 1662 días

  25. Que ganas de ver ya algo nuevo! I like it! ;)

    # · @kikoruizlloret · hace 1662 días

  26. Lo siento, pero con Opera 10.51 no se ve correctamente...

    # · @bitacoraguti · hace 1662 días

  27. icebeat hay que estar al pie del cañón como tú, previendo la invasión XD

    # · @emiliopenya · hace 1662 días

  28. dormir es de cobardes

    # · @emiliopenya · hace 1662 días

  29. el comentario de happywebcoder nos ayudara a los torpes como yo :)

    # · @boton · hace 1662 días

  30. Faaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa esta genialllll!!

    # · @caradenada · hace 1662 días

  31. 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 1662 días

  32. 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 1662 días

  33. ¿por qué se vé tan mal en opera? tengo opera versión 10.51

    saludos,

    # · @trixel · hace 1662 días

  34. Nos preguntabamos para cuando, y mira que nos dejas pasmados nuevamente. Enhorabuena Mota

    # · @ralexismf · hace 1662 días

  35. 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 1662 días

  36. Novedades en icebeat!!!! Estupenda noticia. Buen diseño. :) Ahora a seguir escribiendo alguna cosilla. ;)

    # · @corsaria · hace 1662 días

  37. Has vuelto por todo lo alto! enhorabuena por el tema, es espectacular!

    Ahora a seguir escribiendo, eh? ;)

    Un saludote!

    # · @marcosesperon · hace 1661 días

  38. icebeat increíble lo de los comentarios.

    # · @beldar · hace 1661 días

  39. bien loco, por fin... hace ratos que se extrañaba tu blog... te felicito por el design.. muy bueno !!

    # · varguti · hace 1661 días

  40. Muy chulo el diseño, Felicidades!

    # · @oscarcv · hace 1661 días

  41. muy chulo el nuevo diseño, felicidades !

    # · @gafeman · hace 1661 días

  42. icebeat A mi me parece una basura :P

    # · @ditman · hace 1661 días

  43. es usté un puto crack maestro!

    # · @Skeku · hace 1661 días

  44. Menuda pasada!

    Pasaba por aquí al recibir tantos RT de tu genialidad xD

    # · @pollomuerto · hace 1661 días

  45. icebeat brutal!

    # · @lordchammon · hace 1661 días

  46. El sistema de resaltar comentarios me ha 'matao'. BRUTAL. Felicidades maestro.

    # · @RoninRojo · hace 1661 días

  47. wow! enhorabuena!

    # · @zoocreativo · hace 1661 días

  48. Eres un máquina.

    # · @tonicq · hace 1661 días

  49. Una pasada compi !

    # · @pasku1 · hace 1661 días

  50. Te felicito, simple y de muy buen estilo. Buenisimo

    # · @dhanny · hace 1660 días

  51. Buenisimo maquinon!

    # · @albgra · hace 1660 días

  52. to perita vieo, enhorabuena :)

    # · @teseo · hace 1660 días

  53. Solo puedo decir una cosa, GENIO!

    # · @jrdi · hace 1660 días

  54. buenisimo eh :)

    # · @tiagopregueiro · hace 1660 días

  55. ditman jajaja, no tengo palabras para ti :P

    Muchas gracias por los comentarios, el lunes nueva anotación :P

    # · @icebeat · hace 1660 días

  56. Caballero, ha vuelto usted a lucirse ;)

    (Ya era hora!)

    # · @Altheo · hace 1660 días

  57. enhorabuena! brillante :)

    # · @manuelraigada · hace 1660 días

  58. 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 1660 días

  59. Eres un hacha... impresionante :)

    # · @IgNoRaO · hace 1659 días

  60. Excelente rediseño, inspirador y el mejor que he visto hasta el momento.

    # · @stanmx · hace 1659 días

  61. Felicidades tio, el diseño tan limpio y cuidando los detalles me encanta, pero lo mejor está en el interior ;)

    # · @marciobarrios · hace 1659 días

  62. icebeat Que puedo decir que no haya dicho... Toma, toma !!! Congrats

    # · @epaDesign · hace 1659 días

  63. uhh tengo un pequeño fallo con los checkbox

    # · @icebeat · hace 1659 días

  64. ¡¡Madre mía!!. Me ha flipado lo de las imágenes en base64 para reducir cargas... enhorabuena :)

    # · @r0sk · hace 1659 días

  65. icebeat increíble ;) Tengo mucho que aprender de esta web... ;)

    # · @yvoictra · hace 1657 días

  66. me gusta bastante.

    # · @juanpol · hace 1656 días

  67. Genial icebeat!!! Enhorabuena, gran trabajo.

    # · @blogartz · hace 1655 días

  68. Enhorabuena! Me encanta, a ver si esto sirve para que no vuelvan a pasar 572 dias! ;)

    # · @raul_quintana · hace 1654 días

  69. excelente sitio, buena opcion tambien en dominiocolectivo.com

    # · jameskildare123gmail.com · hace 1651 días

  70. :O que bien te quedo

    # · @xochoa · hace 1648 días

  71. felicitacion por tus entradas, sigue haciendo buen trabajo... http://www.cosasperuanas.com

    # · http://twitter.com/cosasperuanas · hace 1648 días

  72. 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 1648 días

  73. sorry era problema de mi browser xD

    # · @Upierz · hace 1647 días

  74. Extraordinario!!!

    # · @torresburriel · hace 1647 días

  75. Buena apuesta lo de hacerlo en HTML5, y el resultado estupendo ;)

    # · @fernandot · hace 1647 días

  76. Excelente !

    # · @n00b2Hack · hace 1640 días

  77. gfhh

    # · @n · hace 1639 días

  78. 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 1639 días

  79. Muy bueno¡¡¡ saludos desde México. un abrazo.

    # · @luislletsac · hace 1634 días

  80. excelente trabajo

    # · @chromacircle · hace 1634 días

  81. 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 1634 días

  82. Altheo, icebeat está tramando algo que nos hará estremecer.... bien seguro es!

    # · @emiliopenya · hace 1621 días

  83. Me gusta esto de dejar comentarios con el user de twitter.

    Saludos.

    # · @emerz · hace 1618 días

  84. lol

    # · @billgates · hace 1616 días

  85. 1

    # · @1 · hace 1615 días

  86. why dont use cookie?

    # · ' · hace 1615 días

  87. muy bueno el efecto, eres muy innovador sabias ?

    # · @principiante · hace 1615 días

  88. genial

    # · @principiante · hace 1615 días

  89. # · @2 · hace 1615 días

  90. Hermoso.

    # · @DocumentoWeb · hace 1615 días

  91. 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 1613 días

  92. 1

    # · @1 · hace 1611 días

  93. 1

    # · @1 · hace 1611 días

  94. pincfloit maquetar usando el tag directamente es como acceder a un nodo html usando xpath ultra rapido, mas que una clase saludos

    # · @principiante · hace 1611 días

  95. d

    # · principiante · hace 1611 días

  96. icebeat eres el amo.. te admiro eres mi dios sabias

    # · principiante · hace 1611 días

  97. 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 1606 días

  98. Esta muy bien :D venga tio cuando te pierdes si que regresas iluminado. Un abrazo

    # · @andrexu · hace 1606 días

  99. Buf, se sale, muy bueno

    # · @juanjoseixas · hace 1605 días

  100. quieres decir que si puede comentar com una cuenta twitter sin comprabación?

    # · @pauloschilling · hace 1600 días

  101. 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 1600 días

  102. icebeat Le darás la razón al grupo de Facebook :P

    # · Altheo · hace 1600 días

  103. icebeat te quedó genial! felicitaciones.

    Se nota que entendés muchísimo del tema =)

    Un abrazo

    # · @BlogWindows7 · hace 1599 días

  104. 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 1598 días

  105. ads

    # · asd · hace 1595 días

  106. adsa

    # · asd · hace 1595 días

  107. icebeat Vamos Dani, necesitas otro post, sino vas a romper tu propio record, ya llevas un mes :)

    # · @andrexu · hace 1593 días

  108. wow awesome :D

    # · @kusaeni · hace 1591 días

  109. me parece genia el disenio...

    # · elhacker · hace 1590 días

  110. wowo es genial como funciona el sistema de comentarios

    # · @elhacker · hace 1590 días

  111. valla no habia probado esto

    # · @elhacker · hace 1590 días

  112. kusaeni si lo mismo digo

    # · @elhacker · hace 1590 días

  113. # · @elhacker · hace 1590 días

  114. Me encanta la idea de comentar con cuentas Twitter, pero no crees que cualquiera podría falsificar cuentas?

    # · @rnmp · hace 1590 días

  115. OWNED !

    # · @tuenti · hace 1590 días

  116. elhacker agreed!

    # · yo · hace 1588 días

  117. Sólo le he echado un vistazo por encima pero tiene muy buena pinta. Felicitaciones por el trabajo.

    # · @SeGo · hace 1577 días

  118. hola icebeat

    # · asd · hace 1573 días

  119. icebeat echamos de menos lo que van siendo las actualizaciones XD

    # · @emiliopenya · hace 1568 días

  120. 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 1568 días

  121. Seguis siendo el Maestro Jedi del Front-end! :)

    # · @diego_ar · hace 1564 días

  122. jej faltaba mi comentario, y ya van 124 días...

    # · @aurexs · hace 1538 días

  123. gracias chicos por el buen diseño web del blog....http://bit.ly/bLg4AF

    # · @judloved · hace 1537 días

  124. fsdfsd

    # · sdfdf · hace 1536 días

  125. Muy guapo el diseño, felicidades ;)

    # · yitan5 · hace 1508 días

  126. 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 1495 días

  127. Hello! geggecc interesting geggecc site!

    # · Pharme39 · hace 1483 días

  128. Very nice site! cheap viagra

    # · Pharmb254 · hace 1483 días

  129. Very nice site! cheap cialis http://oixypea.com/qxqaq/4.html

    # · Pharma134 · hace 1483 días

  130. Very nice site!

    # · Pharmb177 · hace 1483 días

  131. Muchos errores todavia

    # · @dgdd · hace 1482 días

  132. Buenos dias, Soy Ignacio Pacheco, estaría interesado en realizar un intercambio con ustedes. ignacio.jimdogooglemail.com

    # · Ignacio · hace 1479 días

  133. hsadnas aveeeeeer

    # · aver · hace 1457 días

  134. opa ta bueno no regarga toda la web simplemente agrega el nuevo coment no tiene emoticones esto?

    # · aver · hace 1457 días

  135. Muy buen diseño felicitaciones!

    # · @StudioLlanes · hace 1456 días

  136. Cojonudo!!!

    # · @flasbak · hace 1456 días

  137. Hermoso diseño

    # · @Xosmar · hace 1441 días

  138. 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 1434 días

  139. Se ve hasta el carajo! en IE6 que mierda de theme

    # · Tuenti · hace 1430 días

  140. hola

    # · luis · hace 1361 días

  141. q tal

    # · luis · hace 1361 días

  142. 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 1361 días

  143. 我靠

    # · @summic · hace 1341 días

  144. we can use othername to talk

    # · jack · hace 1341 días

  145. good

    # · oi · hace 1341 días

  146. test

    # · @d · hace 1341 días

  147. summic 围观

    # · @yeasiz · hace 1341 días

  148. 围观

    # · @slene · hace 1341 días

  149. 围观

    # · rkpeng · hace 1341 días

  150. slene 不错。

    # · rkpeng · hace 1341 días

  151. cool rkpeng

    # · @wesdu · hace 1341 días

  152. 围观,我艹

    # · @dig · hace 1341 días

  153. ere

    # · @wee · hace 1340 días

  154. test

    # · @rerew · hace 1340 días

  155. test

    # · @lightory · hace 1340 días

  156. ssssssssssssssssssssssss

    # · 啊啊啊啊啊啊啊啊啊 · hace 1340 días

  157. very impressive lightory , another test rerew

    # · @lepture · hace 1339 días

  158. so cool

    # · @pppsss · hace 1339 días

  159. 顶顶顶

    # · 顶顶顶 · hace 1339 días

  160. they say this is coooooooooooool

    # · @twitter · hace 1339 días

  161. aa

    # · @aa · hace 1339 días

  162. 围观 ...

    # · @yleo77 · hace 1339 días

  163. fsvfvsdv Fabbianz

    # · @sd · hace 1337 días

  164. Me encanta

    # · Manuel · hace 1336 días

  165. Me gusta la manera en que se unen los comentarios

    # · @lordcacique · hace 1336 días

  166. It's great!!!

    # · @nowazhu · hace 1332 días

  167. 我是来围观的~

    # · fanzeyi · hace 1322 días

  168. Muy chulo te ha quedado, revisaré detenidamente el código fuente para ver que puedo aprender... :)

    # · @Angel_fire · hace 1303 días

  169. gIagnX http://dy5Ndo9BsL1vpVv5kqsUh.com

    # · @samuel · hace 1303 días

  170. goodsss

    # · jsss · hace 1299 días

  171. mensaje

    # · @juan · hace 1282 días

  172. excelente tema

    # · @gustavonecore · hace 1282 días

  173. hola no soy juan y aparece la foto de twitter de alguien llamado juan quizas no?, buuuuuuuuuuug amigo, corrijalo :D

    # · @juan · hace 1282 días

  174. nice website son of the beach :)

    # · @CHARLIESHEEN · hace 1282 días

  175. please, shutdown your website, you have a BIG BUG, no soy obama y aparece el twitter de el... lolwned

    # · @BarackObama · hace 1282 días

  176. aaaaaaaaaa

    # · @pepe · hace 1252 días

  177. fuck you!!

    # · @wordpress · hace 1228 días

  178. Ostias!!!!! actualiza el blog tio.. te estan dando por el culo?

    # · @anieto2k · hace 1228 días

  179. 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 1168 días

  180. :o

    # · @axelpixer · hace 1127 días

  181. axelpixer testing.

    # · @angelcustodio · hace 1039 días

  182. 效果很赞的说~ fanzeyi

    # · JustZiya · hace 1037 días

  183. Que bueno :)) felicidades!

    # · @carrero · hace 953 días

  184. pork dejaste de publicar jeje, si se ve muy bien el nuevo diseño,, ahi te dejo el enlace de mi sitio saludos

    # · http://blogdecomputacion.com/blog/ · hace 759 días

  185. carrero nice nice nice nice nice

    # · asdw · hace 359 días

Comentar

Aceptamos Markdown, @nick para reply automático.