Codigo Simplificado [¡Actualizado!]

[jqp]

He aqui algunas cosillas que os pueden resultar útiles a la hora de hacer reviews. Yo no sé, ni nunca he estudiado código html, pero gracias a este post que abrió koro y que ahora edito yo, y a alguna gente que me ha dado consejillos, trucos... etc; he ido entendiendo un poco de que va todo el asunto. Pues eso... Que mireis el resultado y si os gusta copiais el código de abajo y luego editais al gusto ^^

¡Ah! Supongo que todo el mundo sabe poner imagenes ¿no? En caso contrario leed este tutorial (http://www.elrincondelmanga.com/foro/showthread.php?t=104860) antes.




1- BARRA SEPARADORA HORIZONTAL

Muy útil para remarcar títulos de apartados dentro de la review (ej.: Kara no Kyoukai (http://www.elrincondelmanga.com/foro/showthread.php?t=104344))


<hr>

<hr>




2- SISTEMA DE PUNTUACIÓN POR ESTRELLAS

Un poco lioso pero resultón. (ej.: Monster (http://www.elrincondelmanga.com/foro/showthread.php?t=76857))


</td></tr><tr><td colspan="3" width="100%"><table width="100%"><tr><td colspan="2"><table width="300px" cellpadding="1" cellspacing="1" border="1px" bordercolor="#FFCC99"><tr><td class="nolf1"><b>Categoría</b></td><td width="nolf2"><b>Puntuación</b></td></tr><tr><td class="nolf1"><b>Animación</b></td><td class="nolf2"><img src="./images/rating/rating_1.gif"/><img src="./images/rating/rating_2.gif"/></td></tr><tr><td class="nolf1"><b>Dibujo</b></td><td class="nolf2"><img src="./images/rating/rating_3.gif"/><img src="./images/rating/rating_4.gif"/></td></tr><tr><td class="nolf1"><b>Argumento</b></td><td class="nolf2"><img src="./images/rating/rating_5.gif"><img src="./images/rating/rating_5.gif" alt="10 estrellas" title="10 Estrellas" /></td></tr><tr><td class="nolf1"><b>Banda Sonora</b></td><td class="nolf2"><img src="./images/rating/rating_4.gif" alt="" title="9 Estrellas" /><img src="./images/rating/rating_5.gif" alt="9 estrellas" title="9 Estrellas" /></td></tr><tr><td class="nolf1"><b>Duración</b></td><td><img src="./images/rating/rating_1.gif" alt="1 estrellas" title="1 Estrellas" /><img src="./images/rating/rating_5.gif" alt="9 estrellas" title="9 Estrellas"/></td></tr><tr><td><b>Nota Total</b></td><td><img src="./images/rating/rating_5.gif" alt="10 estrellas" title="10 Estrellas" /></tr></table></td><td align="justify"></td>
</tr></table>




</td></tr><tr><td colspan="3" width="100%"><table width="100%"><tr><td colspan="2"><table width="300px" cellpadding="1" cellspacing="1" border="1px" bordercolor="#FFCC99"><tr><td class="nolf1"><b>Categoría</b></td><td width="nolf2"><b>Puntuación</b></td></tr><tr><td class="nolf1"><b>Animación</b></td><td class="nolf2"><img src="./images/rating/rating_1.gif"/><img src="./images/rating/rating_2.gif"/></td></tr><tr><td class="nolf1"><b>Dibujo</b></td><td class="nolf2"><img src="./images/rating/rating_3.gif"/><img src="./images/rating/rating_4.gif"/></td></tr><tr><td class="nolf1"><b>Argumento</b></td><td class="nolf2"><img src="./images/rating/rating_5.gif"><img src="./images/rating/rating_5.gif" alt="10 estrellas" title="10 Estrellas" /></td></tr><tr><td class="nolf1"><b>Banda Sonora</b></td><td class="nolf2"><img src="./images/rating/rating_4.gif" alt="" title="9 Estrellas" /><img src="./images/rating/rating_5.gif" alt="9 estrellas" title="9 Estrellas" /></td></tr><tr><td class="nolf1"><b>Duración</b></td><td><img src="./images/rating/rating_1.gif" alt="1 estrellas" title="1 Estrellas" /><img src="./images/rating/rating_5.gif" alt="9 estrellas" title="9 Estrellas"/></td></tr><tr><td><b>Nota Total</b></td><td><img src="./images/rating/rating_5.gif" alt="10 estrellas" title="10 Estrellas" /></tr></table></td><td align="justify"></td>
</tr></table>




3- FICHA TÉCNICA ESTÁNDAR

Yo la suelo usar casi siempre. Lo mejor es que el texto la envuelve y eso le da un aire un poco más profesional xD (ej.: Berserk (http://www.elrincondelmanga.com/foro/showthread.php?t=96066))


<table align="left"><tbody><tr><td><!-- TABLA FICHA TÉCNICA --><table title="Datos Técnicos" style="border: 1px solid black; font-weight: bold;" align="center" background="/foro/images/chestnut/misc/fond_bouton.gif" bgcolor="#d5d1c2" cellspacing="5" width="260"><tbody align="left"><tr><td> <font="tahoma">Ficha técnica</font="tahoma"></td></tr></tbody></table><!-- TABLA INTERMEDIA DATOS--><table style="border-style: solid; border-color: black; border-width: 0px 1px; font-weight: bold;" align="center" background="./images/j/fondogeneral.gif" bgcolor="#f0efea" cellpadding="3" cellspacing="5" width="260"><tbody><tr><td width="95">Nombre original:
</td><td>
</td></tr><tr><td width="95">Año:</td><td>http://www.elrincondelmanga.com/foro/images/j/japon2.gif </td></tr><tr><td colspan="2" align="center"><hr></td></tr><tr><td valign="top">Autor:</td><td></td></tr><tr><td valign="top">Dibujo:</td><td>
</td></tr><tr><td colspan="2" align="center"><hr></td></tr><tr><td valign="top">Género:</td><td>
</td></tr><tr><td valign="top">Categoría:</td><td>Seinen manga
</td></tr><tr><td colspan="2" align="center"><hr></td></tr><tr><td>Nº Tomos:</td><td></td></tr><tr><td>Descarga:</td><td>desde eRDM
</td></tr></tbody></table><!-- TABLA FINAL --><table style="border: 1px solid black; font-weight: bold;" align="center" background="/foro/images/chestnut/misc/fond_bouton.gif" bgcolor="#d5d1c2" cellspacing="5" width="260" height="15"><tbody align="left"><!-- FIN CARACTERISTICAS TECNICAS--></tbody></table><!-- FIN DE TABLA --></td></tr></tbody></table>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...



<table align="left"><tbody><tr><td><!-- TABLA FICHA TÉCNICA --><table title="Datos Técnicos" style="border: 1px solid black; font-weight: bold;" align="center" background="/foro/images/chestnut/misc/fond_bouton.gif" bgcolor="#d5d1c2" cellspacing="5" width="260"><tbody align="left"><tr><td> <font="tahoma">Ficha técnica</font="tahoma"></td></tr></tbody></table><!-- TABLA INTERMEDIA DATOS--><table style="border-style: solid; border-color: black; border-width: 0px 1px; font-weight: bold;" align="center" background="./images/j/fondogeneral.gif" bgcolor="#f0efea" cellpadding="3" cellspacing="5" width="260"><tbody><tr><td width="95">Nombre original:
</td><td>
</td></tr><tr><td width="95">Año:</td><td>http://www.elrincondelmanga.com/foro/images/j/japon2.gif </td></tr><tr><td colspan="2" align="center"><hr></td></tr><tr><td valign="top">Autor:</td><td></td></tr><tr><td valign="top">Dibujo:</td><td>
</td></tr><tr><td colspan="2" align="center"><hr></td></tr><tr><td valign="top">Género:</td><td>
</td></tr><tr><td valign="top">Categoría:</td><td>Seinen manga
</td></tr><tr><td colspan="2" align="center"><hr></td></tr><tr><td>Nº Tomos:</td><td></td></tr><tr><td>Descarga:</td><td>desde eRDM
</td></tr></tbody></table><!-- TABLA FINAL --><table style="border: 1px solid black; font-weight: bold;" align="center" background="/foro/images/chestnut/misc/fond_bouton.gif" bgcolor="#d5d1c2" cellspacing="5" width="260" height="15"><tbody align="left"><!-- FIN CARACTERISTICAS TECNICAS--></tbody></table><!-- FIN DE TABLA --></td></tr></tbody></table>





4- IMAGENES EN HTML

Usando codigo html podemos conseguir un efecto interesante: que el texto envuelva a la imagen. Pero cuidado, no useis el editor avanzado porque sinó el vBulletin (osea en lo que está hecho el foro) lo cambia automaticamente a los tags de siempre que centran la imagen. (ej.: Fruits Basket (http://www.elrincondelmanga.com/foro/showthread.php?t=100222))


<img src="http://img230.imageshack.us/img230/7638/finalgi8.jpg" align=right />bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...



<img src="http://img230.imageshack.us/img230/7638/finalgi8.jpg" align=right />




<img src="http://img230.imageshack.us/img230/7638/finalgi8.jpg" align=left />bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...



<img src="http://img230.imageshack.us/img230/7638/finalgi8.jpg" align=left />


Un problema bastante común al insertar imágenes es que en ocasiones el texto se pega mucho a ellas y no queda del todo bien. Pero eso tiene arreglo; en el siguiente ejemplo voy a establecer una distancia vertical y horizontal de 15 puntos (pero eso puede variarse al gusto):

<img src="http://img230.imageshack.us/img230/7638/finalgi8.jpg" align=left vspace="15px" hspace="15px" />bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ...



<img src="http://img230.imageshack.us/img230/7638/finalgi8.jpg" align=left vspace="15px" hspace="15px" />


El valor de separación horizontal se define con hspace, y el vertical con vspace.


Además este código html es necesario también para postear noticias (o recomendaciones en nuestro caso) en la página principal de eRDM, donde los tags ...[*/img] (sin *) no funcionan.



<img src="http://i38.tinypic.com/qpjfcx.jpg" > (http://www.elrincondelmanga.com/foro/forumdisplay.php?f=79)

Empieza semana y empieza estación; y como no, he aquí nuestras propuestas de anime habituales. ¡Oh, no! M*****, este lunes tampoco hay manga... :eek: ¡A ver si leemos un poco más, gente!

A lo que vamos... Para abrir boca, D-Gray Man (http://www.elrincondelmanga.com/foro/showthread.php?t=104636), un shounen de acción y fantasia que seguro gustará a los seguidores Bleach, Full Metal Alchemist, etc... Y para los que ya esteis aburridos del tema, Shakugan no Shana (http://www.elrincondelmanga.com/foro/showthread.php?t=103281), un trepidante seinen cuya bonita protagonista se ha convertido en todo un icono de la red, como bien dice cjdeacon, el autor de ambas reviews. (Doble merito -> 100% reputación ¿wakata? :cool:)



<img src="http://i38.tinypic.com/qpjfcx.jpg" >


@Nuevos reviewers: ¡Recordad usar esto porque sinó la imagen no se verá bien!




5- VIDEOS

Para poner un video tendrás que copiar el "embed", un codigo bastante largo que suele aparecer al lado del clip en casi todas las páginas. Luego lo pegas y lo centras (en modo no-avanzado porque sinó no sale... xD)


Para YouTube

http://i35.tinypic.com/mkyjc1.jpg


<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/5IVWJZSzA8Q&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/5IVWJZSzA8Q&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/5IVWJZSzA8Q&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/5IVWJZSzA8Q&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed></object>




Para TuTV

[IMG]http://i35.tinypic.com/miyte9.jpg


<object width="425" height="350"><param name="movie" value="http://tu.tv/tutvweb.swf?kpt=aHR0cDovL3R1LnR2L3ZpZGVvc2NvZGkvZC9yL2RyYWdvbi1iYWxsLXZhbGVuY2lhbm8tY2FwaXR1bG8tMjAuZmx2&xtp=21462"></param><param name="wmode" value="transparent"></param><embed src="http://tu.tv/tutvweb.swf?kpt=aHR0cDovL3R1LnR2L3ZpZGVvc2NvZGkvZC9yL2RyYWdvbi1iYWxsLXZhbGVuY2lhbm8tY2FwaXR1bG8tMjAuZmx2&xtp=21462" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object><br /><a href="http://www.tu.tv"><img src="http://www.tu.tv/img/tranparente.gif" alt="www.Tu.tv" border="0" /></a><br />

<object width="425" height="350"><param name="movie" value="http://tu.tv/tutvweb.swf?kpt=aHR0cDovL3R1LnR2L3ZpZGVvc2NvZGkvZC9yL2RyYWdvbi1iYWxsLXZhbGVuY2lhbm8tY2FwaXR1bG8tMjAuZmx2&xtp=21462"></param><param name="wmode" value="transparent"></param><embed src="http://tu.tv/tutvweb.swf?kpt=aHR0cDovL3R1LnR2L3ZpZGVvc2NvZGkvZC9yL2RyYWdvbi1iYWxsLXZhbGVuY2lhbm8tY2FwaXR1bG8tMjAuZmx2&xtp=21462" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object><br /><a href="http://www.tu.tv"><img src="http://www.tu.tv/img/tranparente.gif" alt="www.Tu.tv" border="0" /></a><br />





6- TABLAS INVISIBLES


cjdeacon dice: Gracias a Suiken que me ayudo en la review de D-Gray Man (http://www.elrincondelmanga.com/foro/showthread.php?t=104636), conocí esta otra forma curiosa de ordenar a modo de tablas invisibles el contenido de un texto con una foto o un texto con un video como en la review de Ghost in the Shell (http://www.elrincondelmanga.com/foro/showthread.php?t=106899):

<table width="100%"><center><tbody><tr><td valign="top">S.A.C.: El Hombre que Ríe.

Nos encontramos en el 2030. La sección 9 se encarga de sus casos hasta que hace reaparición un hacker de gran nivel. Lo que debería ser una simple misión de busca y captura, se convertirá en una enrevesada trama política que puede dañar gravemente a todo el equipo en busca de la autentica verdad tras El Hombre que Ríe.</td><td>Trailers de SAC:
<object width="350" height="260"><param name="movie" value="http://www.youtube.com/v/SY6PNTzQb1A&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/SY6PNTzQb1A&hl=es&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="350" height="260"></embed></object></td></tr></tbody></center></table>


<table width="100%"><center><tbody><tr><td valign="top">Aquí ponemos lo que queramos que vaya a la derecha, texto, foto o lo que sea, si no quereis que las dos columnas empiezen a la misma altura quitar la palabra valing="top" del corchete de antes</td><td>Aqui el texto que ira a la derecha de nuestros ojos, o el video o lo que sea</td></tr></tbody></center></table>


Otra ventaja del "uso de tablas invisibles para maquetar" es que puedes elegir el tamaño de las celdas con tan sólo una pequeña modificación. Pero queda mas claro si se ve antes un ejemplo:

Por ejemplo, voy a hacer que el texto llegue sólo hasta la mitad de la página (El vídeo lo voy simplemente a centrar en el espacio que queda):

<table width="100%"><center><tbody><tr><td valign="top" width="50%">S.A.C.: El Hombre que Ríe.

Nos encontramos en el 2030. La sección 9 se encarga de sus casos hasta que hace reaparición un hacker de gran nivel. Lo que debería ser una simple misión de busca y captura, se convertirá en una enrevesada trama política que puede dañar gravemente a todo el equipo en busca de la autentica verdad tras El Hombre que Ríe.</td><td>Trailers de SAC:
<object width="350" height="260"><param name="movie" value="http://www.youtube.com/v/SY6PNTzQb1A&hl=es&fs=1"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.youtube.com/v/SY6PNTzQb1A&hl=es&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="350" height="260"></embed></object></td></tr></tbody></center></table>

Y si os fijáis, la modificación es mínima:
<table width="100%"><center><tbody><tr><td valign="top" width="50%">Aquí ponemos lo que queramos que vaya a la derecha, texto, foto o lo que sea, si no quereis que las dos columnas empiezen a la misma altura quitar la palabra valing="top" del corchete de antes</td><td>Aqui el texto que ira a la derecha de nuestros ojos, o el video o lo que sea</td></tr></tbody></center></table>

Basta con añadir al lado de valign="top" esto: width="50%" (Y quien dice 50%, dice otras cifras ;) )


<hr>


Si se te ocurre algún truco más que pueda ser útil, no dudes y comenta!! Este post-it está constantemente actualizandose.

[jqp]

A mi me gustaria poder poner una tabla con tres filas para poder poner esto siempre al final:


En Resumen: (y una frase que describa)

Lo Mejor: (el mejor punto de la serie)

Lo Peor: (... pues eso)

Bueno, espero que alguien me eche una mano. Gracias anticipadas!!

[Fuyuhoshi]

¿Eso es para escribir lo de las estrellas? Si no ¿me podéis decir cómo escribir lo de las estrellas?

[jqp]

Si, es eso. Tu copias el code HTML, y luego lo pegas, en el modo avanzado de edicion de mensaje, y le das al boton de vista previa para ver como queda... es muy facil, ya lo iras entendiendo.

[Fuyuhoshi]

Buf, creo que voy a tardar demasiado, necesito un tuto o algo así, porque no me entero de nada. Ya trataré de habituarme a ese sistema.

Vale, ya he pillado el sistema, ahora la cuestión es ¿sobre cuántas estrellas?

[jqp]

Bah, yo tambien pienso que el sistema de las estrellas es un lio. Lo mejor es hacer un resumen al final y que quede clarito.

Si aun asi no te convence ponle nota del 1 al 10 xD

[Fuyuhoshi]

Bien, ya pillo el código de estrellas. Como no voy a ponerlo en ninguna de mis reviews específicas porque si no la gente quizá no lo viera, lo pondré aquí (además, así todos los que hagamos reviews adoptamos el sistema). Como con la nota total no consigo poner de una a diez estrellas puntuaré la nota total así:

1: Penoso, ni se te ocurra mirarlo, hay cosas mejores que hacer en este mundo. Sólo se disculpa si no tienes nada mejor que hacer.
2: Aprobado. Ni fu ni fa, es bueno y punto. Míralo, seguramente te guste, pero mira antes el resto de reviews que seguro que hay algo que gusta más.
3: Bueno. Está por encima de la media, merece la pena verlo.
4: Excelente. Seguramente será un clásico, serie de culto o al menos muy conocida durante años. Tienes que verlo, rebosa calidad.
5: Obra maestra. No hay que ponerlo sobre un pedestal, hay que dedicarle una calle a esta joya. ESTO es calidad y el resto es basura.

[jqp]

Añadida nueva ficha técnica... Estoy seguro que a partir de ahora todas las review llevarán una de esas xD

[Wolf Blue]

Que quieres que te diga yo creo que se puede mejorar, de echo tengo pensado un modelo mejor para la tabla de la ficha técnica :xD:. Ya lo verás :p

[jqp]

ok, yo es que no tengo ni pajolera idea de html... aunque si nos echas una mano te lo agradeceria.

A mi me gustaria poder poner una tabla con tres filas para poder poner esto siempre al final:


En Resumen: (y una frase que describa)

Lo Mejor: (el mejor punto de la serie)

Lo Peor: (... pues eso)

Bueno, espero que alguien me eche una mano. Gracias anticipadas!!

Eso lo dije antes de revivir la sección y nadie me hizo caso, a ver si puedes ayudarnos tú ahora ^^

[Suiken]

Definitivamente, paso de las estrellitas.
Es incómodo de insertar, y como lectora me agobia bastante tener que dedicarme a contarlas.

[lax]

<table style="border-style: solid; border-color: black; border-width: 0px 1px; font-weight: bold;" align="center" background="./images/j/fondogeneral.gif" bgcolor="#f0efea" cellpadding="3" cellspacing="5" width="260"><tbody><tr><td width="95"> En Resumen:
</td><td>
</td></tr><tr><td colspan="2" align="center"><hr></td></tr><tr><td valign="top">Lo Mejor:</td><td>Bla bla</td></tr><tr></tr><tr><td colspan="2" align="center"><hr></td></tr><tr><td valign="top">Lo Peor:</td><td>Blablablablablabalblablablablablablablablabnla</td></tr><tr></tr></tbody></table>




...................

Esto es lo mejor que he conseguido, si me dejais más tiempo a lo mejor consigo algo mejor. Lo cierto es que aunque me encante el codigo html solo he dado lo básico y encima, está todo enmarañado (pues he seguido como guía el de la ficha tecnica) y utiliza un codigo que no he usado... :p

P.D: La tabla se irá ensanchando cuando se escriba

[jqp]

He actualizado mejorado y adecentado en post... No estaria de más que os lo estudiarais, so vagos xD

[cjdeacon]

Bien hecho.....!!!

Por cierto por qué tu ultimo post ha abierto tanto el hilo???

[jqp]

Bien hecho.....!!!

Por cierto por qué tu ultimo post ha abierto tanto el hilo???

No lo sé, pero supongo que debe ser algo relacionado con tanta edición (porque he editado mucho para que se quede como está ahora xD).

Por cierto, si a alguien se le ocurren más cosas que lo diga aquí mismo y lo añado.

[Wolf Blue]

jqp o lax, editar el mensaje de lax que ha dejado el código incompleto y está descuadrando el foro :p

[jqp]

Añadido ejemplo de video TuTV, algunos comentarios sobre cada elemento, ejemplos de reviews que los llevan, y lo más importante de todo: una explicación bastante interesante sobre imagenes en código html referido al posteo de recomendaciones. Que todo el que no se aclare se asegure de leerlo y estudiarselo ;)

[kaitoren]

Genial tio, Seguro que a muchos les interesara saber como incluir todos esos cachivaches.

Pero confio en que siempre halla algunos que hagan las review como en el siglo pasado, solamente usando aceite de ballena :cool:

[cjdeacon]

Añadido ejemplo de video TuTV, algunos comentarios sobre cada elemento, ejemplos de reviews que los llevan, y lo más importante de todo: una explicación bastante interesante sobre imagenes en código html referido al posteo de recomendaciones. Que todo el que no se aclare se asegure de leerlo y estudiarselo ;)

Humm me vendria de cine el render que hay detras de las portadas y que has utilizado :D

[jqp]

Humm me vendria de cine el render que hay detras de las portadas y que has utilizado :D

El .psd (archivo de photoshop) lo tienes aquí (http://www.gigasize.com/get.php?d=z7gkc06pdrf). Subido a mi cuenta GS premium... ¿Deberia añadirlo al post? xD

[cjdeacon]

El .psd (archivo de photoshop) lo tienes aquí (http://www.gigasize.com/get.php?d=z7gkc06pdrf). Subido a mi cuenta GS premium... ¿Deberia añadirlo al post? xD

Yo no utilizo el photoshop, pero para hacer una composición con unas caratulas y ponerle unas letras monas puedo utilizar el gimp, acdsese o hasta el que lleva el microsoft.

Edito: La conseguistes con el truquito que hay en el foro lo de la cuenta gs premiun?? :lol:

[Suiken]

Yo la última vez hice un apaño con el Gimp, y no quedó mal del todo. Ayer me bajé el PSD, a ver si mas tarde le echo un vistazo. Me vendrá bien, así tendré algo mas de libertad con las medidas y la colocación del contenido :p

[jqp]

Yo la última vez hice un apaño con el Gimp, y no quedó mal del todo. Ayer me bajé el PSD, a ver si mas tarde le echo un vistazo. Me vendrá bien, así tendré algo mas de libertad con las medidas y la colocación del contenido :p

Además está por capas: el texto, la marca de agua del rincon (que se puede cambiar de opacidad al gusto) y las imagenes con sus opciones de fusión; lo mejor el trazo de 3 o 4 pixeles que cambia de color en relación con las portadas ^^

Jeje... Ahi es nah xD

[Suiken]

Vaaaya, toda una obra maestra. Voy a tener que analizar ese PSD bien a fondo (hace tanto que no abro el Photoshop...).

[jqp]

Versión mejorada. Gracias a Suiken y cj que han añadido el truco de las tablas.

[jqp]

Actualizado por enésima vez. Gracias a Suiken (de nuevo) que ha solucionado el tema de las imagenes pegadas al texto ^^