HTML5 y CSS3... 572 días
- Escrito hace 1138 días
- Etiquetado en: offtopic blog
- 184 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 1138 días
Congrats, muy bueno me gusta mucho, como siempre un 11 porque un 10 se queda corto :D
# · @haripako · hace 1138 días
No tengo palabras. Te ha quedado tremendo! Felicidades, me alegra mucho leerte de nuevo! ;)
# · @lobotenaz · hace 1138 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 1138 días
Excelente! quedo muy bueno, felicitaciones!
# · @Fabbianz · hace 1138 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 1138 días
Awesome work, mate! Te ha quedado de lujo ;)
# · @sruiz · hace 1138 días
pedropablo emiliopenya haripako lobotenaz icebeat Fabbianz gruncho sruiz :D
# · roflmao · hace 1138 días
icebeat qué grande fenómeno! enhorabuena :D
# · @alv · hace 1138 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 1138 días
Sólo puedo decir... WOW! enhorabuena! ^^
# · @chavalina · hace 1138 días
Esta genial!! :D Bonito diseño y markup
# · @@boton · hace 1138 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 1138 días
Simplemente Perfect!
# · @felipedelpozo · hace 1138 días
me gusta. ;-)
# · @@sergiomas · hace 1138 días
Me sumo a las felicitaciones. Muy logrado.
# · @dragoncillos · hace 1138 días
Me encanta Dani! Enhorabuena! Lo de los comentarios con twitter users me flipa!
# · @ainiesta · hace 1138 días
¡Qué currado, sí señor! Enhorabuena, icebeat :)
# · @xoan · hace 1138 días
Madre mía, qué pasada. Lo del resaltado de comentarios es una caña!
# · @@ladybenko · hace 1138 días
Que grande eres maquina! icebeat
# · @mrrocks · hace 1138 días
qué bueno!! ya tocaba...
# · @carlostallon · hace 1138 días
happywebcoder arreglado, o eso espero :)
Muchas gracias chicos!
# · @icebeat · hace 1138 días
Me encanta, como siempre muy usable limpia y clarita, aunque te ha costado mucho tiempo eh? jejeje
# · @konyfero · hace 1138 días
Que ganas de ver ya algo nuevo! I like it! ;)
# · kikoruizlloret · hace 1138 días
Que ganas de ver ya algo nuevo! I like it! ;)
# · @kikoruizlloret · hace 1138 días
Lo siento, pero con Opera 10.51 no se ve correctamente...
# · @bitacoraguti · hace 1138 días
icebeat hay que estar al pie del cañón como tú, previendo la invasión XD
# · @emiliopenya · hace 1138 días
dormir es de cobardes
# · @emiliopenya · hace 1138 días
el comentario de happywebcoder nos ayudara a los torpes como yo :)
# · @boton · hace 1138 días
Faaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa esta genialllll!!
# · @caradenada · hace 1138 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 1138 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 1138 días
¿por qué se vé tan mal en opera? tengo opera versión 10.51
saludos,
# · @trixel · hace 1138 días
Nos preguntabamos para cuando, y mira que nos dejas pasmados nuevamente. Enhorabuena Mota
# · @ralexismf · hace 1138 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 1138 días
Novedades en icebeat!!!! Estupenda noticia. Buen diseño. :) Ahora a seguir escribiendo alguna cosilla. ;)
# · @corsaria · hace 1138 días
Has vuelto por todo lo alto! enhorabuena por el tema, es espectacular!
Ahora a seguir escribiendo, eh? ;)
Un saludote!
# · @marcosesperon · hace 1137 días
icebeat increíble lo de los comentarios.
# · @beldar · hace 1137 días
bien loco, por fin... hace ratos que se extrañaba tu blog... te felicito por el design.. muy bueno !!
# · varguti · hace 1137 días
Muy chulo el diseño, Felicidades!
# · @oscarcv · hace 1137 días
muy chulo el nuevo diseño, felicidades !
# · @gafeman · hace 1137 días
icebeat A mi me parece una basura :P
# · @ditman · hace 1137 días
es usté un puto crack maestro!
# · @Skeku · hace 1137 días
Menuda pasada!
Pasaba por aquí al recibir tantos RT de tu genialidad xD
# · @pollomuerto · hace 1137 días
icebeat brutal!
# · @lordchammon · hace 1137 días
El sistema de resaltar comentarios me ha 'matao'. BRUTAL. Felicidades maestro.
# · @RoninRojo · hace 1137 días
wow! enhorabuena!
# · @zoocreativo · hace 1137 días
Eres un máquina.
# · @tonicq · hace 1137 días
Una pasada compi !
# · @pasku1 · hace 1137 días
Te felicito, simple y de muy buen estilo. Buenisimo
# · @dhanny · hace 1136 días
Buenisimo maquinon!
# · @albgra · hace 1136 días
to perita vieo, enhorabuena :)
# · @teseo · hace 1136 días
Solo puedo decir una cosa, GENIO!
# · @jrdi · hace 1136 días
buenisimo eh :)
# · @tiagopregueiro · hace 1136 días
ditman jajaja, no tengo palabras para ti :P
Muchas gracias por los comentarios, el lunes nueva anotación :P
# · @icebeat · hace 1136 días
Caballero, ha vuelto usted a lucirse ;)
(Ya era hora!)
# · @Altheo · hace 1136 días
enhorabuena! brillante :)
# · @manuelraigada · hace 1136 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 1136 días
Eres un hacha... impresionante :)
# · @IgNoRaO · hace 1135 días
Excelente rediseño, inspirador y el mejor que he visto hasta el momento.
# · @stanmx · hace 1135 días
Felicidades tio, el diseño tan limpio y cuidando los detalles me encanta, pero lo mejor está en el interior ;)
# · @marciobarrios · hace 1135 días
icebeat Que puedo decir que no haya dicho... Toma, toma !!! Congrats
# · @epaDesign · hace 1135 días
uhh tengo un pequeño fallo con los checkbox
# · @icebeat · hace 1135 días
¡¡Madre mía!!. Me ha flipado lo de las imágenes en base64 para reducir cargas... enhorabuena :)
# · @r0sk · hace 1135 días
icebeat increíble ;) Tengo mucho que aprender de esta web... ;)
# · @yvoictra · hace 1133 días
me gusta bastante.
# · @juanpol · hace 1132 días
Genial icebeat!!! Enhorabuena, gran trabajo.
# · @blogartz · hace 1131 días
Enhorabuena! Me encanta, a ver si esto sirve para que no vuelvan a pasar 572 dias! ;)
# · @raul_quintana · hace 1130 días
excelente sitio, buena opcion tambien en dominiocolectivo.com
# · jameskildare123gmail.com · hace 1127 días
:O que bien te quedo
# · @xochoa · hace 1124 días
felicitacion por tus entradas, sigue haciendo buen trabajo... http://www.cosasperuanas.com
# · http://twitter.com/cosasperuanas · hace 1124 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 1123 días
sorry era problema de mi browser xD
# · @Upierz · hace 1123 días
Extraordinario!!!
# · @torresburriel · hace 1123 días
Buena apuesta lo de hacerlo en HTML5, y el resultado estupendo ;)
# · @fernandot · hace 1123 días
Excelente !
# · @n00b2Hack · hace 1116 días
gfhh
# · @n · hace 1115 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 1115 días
Muy bueno¡¡¡ saludos desde México. un abrazo.
# · @luislletsac · hace 1110 días
excelente trabajo
# · @chromacircle · hace 1110 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 1110 días
Altheo, icebeat está tramando algo que nos hará estremecer.... bien seguro es!
# · @emiliopenya · hace 1097 días
Me gusta esto de dejar comentarios con el user de twitter.
Saludos.
# · @emerz · hace 1094 días
lol
# · @billgates · hace 1092 días
1
# · @1 · hace 1091 días
why dont use cookie?
# · ' · hace 1091 días
muy bueno el efecto, eres muy innovador sabias ?
# · @principiante · hace 1091 días
genial
# · @principiante · hace 1091 días
principiante
# · @2 · hace 1091 días
Hermoso.
# · @DocumentoWeb · hace 1091 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 1089 días
1
# · @1 · hace 1087 días
1
# · @1 · hace 1087 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 1087 días
d
# · principiante · hace 1087 días
icebeat eres el amo.. te admiro eres mi dios sabias
# · principiante · hace 1087 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 1082 días
Esta muy bien :D venga tio cuando te pierdes si que regresas iluminado. Un abrazo
# · @andrexu · hace 1081 días
Buf, se sale, muy bueno
# · @juanjoseixas · hace 1081 días
quieres decir que si puede comentar com una cuenta twitter sin comprabación?
# · @pauloschilling · hace 1076 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 1076 días
icebeat Le darás la razón al grupo de Facebook :P
# · Altheo · hace 1076 días
icebeat te quedó genial! felicitaciones.
Se nota que entendés muchísimo del tema =)
Un abrazo
# · @BlogWindows7 · hace 1075 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 1074 días
ads
# · asd · hace 1071 días
adsa
# · asd · hace 1071 días
icebeat Vamos Dani, necesitas otro post, sino vas a romper tu propio record, ya llevas un mes :)
# · @andrexu · hace 1069 días
wow awesome :D
# · @kusaeni · hace 1067 días
me parece genia el disenio...
# · elhacker · hace 1066 días
wowo es genial como funciona el sistema de comentarios
# · @elhacker · hace 1066 días
valla no habia probado esto
# · @elhacker · hace 1066 días
kusaeni si lo mismo digo
# · @elhacker · hace 1066 días
icebeat kusaeni icebeat BlogWindows7 principiante xochoa todos de acuerdo
# · @elhacker · hace 1066 días
Me encanta la idea de comentar con cuentas Twitter, pero no crees que cualquiera podría falsificar cuentas?
# · @rnmp · hace 1066 días
OWNED !
# · @tuenti · hace 1066 días
elhacker agreed!
# · yo · hace 1064 días
Sólo le he echado un vistazo por encima pero tiene muy buena pinta. Felicitaciones por el trabajo.
# · @SeGo · hace 1053 días
hola icebeat
# · asd · hace 1049 días
icebeat echamos de menos lo que van siendo las actualizaciones XD
# · @emiliopenya · hace 1044 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 1044 días
Seguis siendo el Maestro Jedi del Front-end! :)
# · @diego_ar · hace 1040 días
jej faltaba mi comentario, y ya van 124 días...
# · @aurexs · hace 1014 días
gracias chicos por el buen diseño web del blog....http://bit.ly/bLg4AF
# · @judloved · hace 1013 días
fsdfsd
# · sdfdf · hace 1012 días
Muy guapo el diseño, felicidades ;)
# · yitan5 · hace 984 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 971 días
Hello! geggecc interesting geggecc site!
# · Pharme39 · hace 959 días
Very nice site! cheap viagra
# · Pharmb254 · hace 959 días
Very nice site! cheap cialis http://oixypea.com/qxqaq/4.html
# · Pharma134 · hace 959 días
Very nice site!
# · Pharmb177 · hace 959 días
Muchos errores todavia
# · @dgdd · hace 958 días
Buenos dias, Soy Ignacio Pacheco, estaría interesado en realizar un intercambio con ustedes. ignacio.jimdogooglemail.com
# · Ignacio · hace 955 días
hsadnas aveeeeeer
# · aver · hace 933 días
opa ta bueno no regarga toda la web simplemente agrega el nuevo coment no tiene emoticones esto?
# · aver · hace 933 días
Muy buen diseño felicitaciones!
# · @StudioLlanes · hace 932 días
Cojonudo!!!
# · @flasbak · hace 932 días
Hermoso diseño
# · @Xosmar · hace 916 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 910 días
Se ve hasta el carajo! en IE6 que mierda de theme
# · Tuenti · hace 906 días
hola
# · luis · hace 837 días
q tal
# · luis · hace 837 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 837 días
我靠
# · @summic · hace 817 días
we can use othername to talk
# · jack · hace 817 días
good
# · oi · hace 817 días
test
# · @d · hace 817 días
summic 围观
# · @yeasiz · hace 817 días
围观
# · @slene · hace 817 días
围观
# · rkpeng · hace 817 días
slene 不错。
# · rkpeng · hace 817 días
cool rkpeng
# · @wesdu · hace 817 días
围观，我艹
# · @dig · hace 817 días
ere
# · @wee · hace 816 días
test
# · @rerew · hace 816 días
test
# · @lightory · hace 816 días
ssssssssssssssssssssssss
# · 啊啊啊啊啊啊啊啊啊 · hace 816 días
very impressive lightory , another test rerew
# · @lepture · hace 815 días
so cool
# · @pppsss · hace 815 días
顶顶顶
# · 顶顶顶 · hace 815 días
they say this is coooooooooooool
# · @twitter · hace 815 días
aa
# · @aa · hace 815 días
围观 ...
# · @yleo77 · hace 815 días
fsvfvsdv Fabbianz
# · @sd · hace 813 días
Me encanta
# · Manuel · hace 812 días
Me gusta la manera en que se unen los comentarios
# · @lordcacique · hace 812 días
It's great!!!
# · @nowazhu · hace 808 días
我是来围观的～
# · fanzeyi · hace 798 días
Muy chulo te ha quedado, revisaré detenidamente el código fuente para ver que puedo aprender... :)
# · @Angel_fire · hace 779 días
gIagnX http://dy5Ndo9BsL1vpVv5kqsUh.com
# · @samuel · hace 778 días
goodsss
# · jsss · hace 775 días
mensaje
# · @juan · hace 758 días
excelente tema
# · @gustavonecore · hace 758 días
hola no soy juan y aparece la foto de twitter de alguien llamado juan quizas no?, buuuuuuuuuuug amigo, corrijalo :D
# · @juan · hace 758 días
nice website son of the beach :)
# · @CHARLIESHEEN · hace 758 días
please, shutdown your website, you have a BIG BUG, no soy obama y aparece el twitter de el... lolwned
# · @BarackObama · hace 758 días
aaaaaaaaaa
# · @pepe · hace 728 días
fuck you!!
# · @wordpress · hace 704 días
Ostias!!!!! actualiza el blog tio.. te estan dando por el culo?
# · @anieto2k · hace 704 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 644 días
:o
# · @axelpixer · hace 602 días
axelpixer testing.
# · @angelcustodio · hace 515 días
效果很赞的说~ fanzeyi
# · JustZiya · hace 513 días
Que bueno :)) felicidades!
# · @carrero · hace 429 días
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 235 días
Comentar