El diario de Yuuki: tutoriales

Mostrando las entradas con la etiqueta tutoriales. Mostrar todas las entradas

Tutorial de Rafflecopter | Tutorial

¡Creadores! ¿Qué tal están? Pues yo muy bien. Estos días han sido muy fríos por lo que mis piecesitos están llorando del dolor, pero amo el frío, así que me la aguantaré. He visto que en muchos sorteos, los creadores de estos, dejan algunos tutoriales de como completar el Rafflecopter, cosa que me inspiró a hacer esta entrada. Muchos pensarán que es muy simple, porque lo es, pero hay que hacerlo correctamente para que nos tengan en cuenta, es por eso que decidí armar un tutorial con todas las posibilidades de campos para completar. Empecemos :)

Personalizar ficha técnica y sinopsis + extra | Tutorial HTML

tutorial HTML

¡Buenas! ¿Qué tal están creadores? Hoy les traigo una propuesta que votaron en Twitter: un tutorial para personalizar esa parte fundamental de las reseñas, la ficha técnica y la sinopsis. Esta entrada será sencilla, básica, por lo que si están buscando algo demasiado producido temo que no les servirá de mucho. Sin más vueltas, ¡empecemos!

NOTA: Si no sabes mucho sobre el HTML puedes pasar por mis anteriores tutoriales en los que cuento un poco de ello. Click aquí para verlos

Sencilla

Este tipo de personalización (para la ficha técnica solamente) es la que uso yo actualmente en mis reseñas

¿Recuerdan que en la entrada anterior de esta sección les dije que las tablas servían mucho? ¡Pues en este ejemplo las utilizaremos! ~~Parezco adicta a las tablas, pero no, en serio, ¡creanmeeee!~~ No se preocupen que es muy fácil. Yo los ayudaré a comprender lo más complicado

Ficha técnica

♦ Título: Death Note

♦ Director: Tetsurō Araki

♦ Año de lanzamiento: 2006

La historia es protagonizada por Light Yagami, un estudiante sobresaliente de Japón que tiene una perspectiva «aburrida» de la vida y quien considera el mundo como un lugar «podrido». Un día, su vida sufre un cambio radical, cuando encuentra un extraño cuaderno sobrenatural llamado «Death Note», tendido en el suelo. Detrás de la portada de dicho cuaderno había instrucciones sobre su uso, donde decía que si se escribía el nombre de una persona y se visualizaba mentalmente el rostro de ésta, moriría de un ataque al corazón. Al principio, Light desconfiaba de la autenticidad del cuaderno, pero luego de probarlo en dos ocasiones, se da cuenta que su poder era real. Después de cinco días, recibe la visita del verdadero dueño del Death Note, un shinigami llamado Ryuk, que le cuenta que había dejado caer el Death Note a la Tierra porque se encontraba aburrido, y a su vez Light le cuenta que su objetivo era matar a todos los criminales, para así limpiar al mundo de la maldad.

Código

<table><tbody> <tr><td><img src="https://tvfiles.alphacoders.com/957/poster-thumb-9571.jpg" width="200"></td> <td><div style="padding: 10px; width: 200px;"> <div class="separator" style="clear: both; text-align: center; font-size: 30px; font-family: 'Open Sans Condensed', sans-serif; color: #C50E1F"><b>Ficha técnica</b></div><div style="text-align: center;"><span style="font-size: 16px;">♦ <u><b>Título</b></u></span>: Death Note</div><div style="text-align: center;"><span style="font-size: 16px;">♦ <b><u>Director</u></b></span>: Tetsurō Araki</div><div style="text-align: center;"><span style="font-size: 16px;">♦ </span><b style="font-size: 16px;"><u>Año de lanzamiento</u></b>: 2006</div> <br /></div></td></tr>

</table>

<br/>

<div style="width: 550px; height: auto; padding: 13px; background-color: #B3AFAF; text-align: justify">La historia es protagonizada por Light Yagami, un estudiante sobresaliente de Japón que tiene una perspectiva «aburrida» de la vida y quien considera el mundo como un lugar «podrido». Un día, su vida sufre un cambio radical, cuando encuentra un extraño cuaderno sobrenatural llamado «Death Note», tendido en el suelo. Detrás de la portada de dicho cuaderno había instrucciones sobre su uso, donde decía que si se escribía el nombre de una persona y se visualizaba mentalmente el rostro de ésta, moriría de un ataque al corazón. Al principio, Light desconfiaba de la autenticidad del cuaderno, pero luego de probarlo en dos ocasiones, se da cuenta que su poder era real. Después de cinco días, recibe la visita del verdadero dueño del Death Note, un shinigami llamado Ryuk, que le cuenta que había dejado caer el Death Note a la Tierra porque se encontraba aburrido, y a su vez Light le cuenta que su objetivo era matar a todos los criminales, para así limpiar al mundo de la maldad.</div></center>

corresponde a la fuente que usé para el título "Ficha técnica", sacada de Google Fonts. Explicaré más abajo sobre que datos sacar de la página y como utilizarlos

usado para que todo quede centrado, más que nada la tabla

corresponde al link de la imagen que coloqué, tienen que reemplazarlo por el que ustedes quieran usar

es el tamaño con el que redimensioné la imagen porque estaba grande. Si les parece engorroso, pueden dimensionarla a gusto anteriormente con algún programa

es el código correspondiente a la sinopsis, pueden personalizarlo a gusto (tamaño de tabla, color de letras y de fondo, etc)

OJO, la tabla solamente corresponde a la ficha, la sinopsis es aparte

Más compleja

Acá se salvan de las tablas, pero es un poquitín más complicado de editar. Puede que comience a usar este tipo de personalización porque es mucho más dinámica que la otra

Death Note

Tsugumi Ōba - 2006 - 37 capítulos

Código

<span style="color: #085dad;"><u>Death Note</u></span></div>

<span style="font-family: "georgia" , "times new roman" , serif;">Tsugumi Ōba - 2006 - 37 capítulos</span><br />

<br />

corresponde a la fuente que usé para el título "Ficha técnica", sacada de Google Fonts. Explicaré más abajo sobre que datos sacar de la página y cómo utilizarlos

para que todo quede centrado

corresponde al link de la imagen que coloqué

es el tamaño con el que redimensioné la imagen porque estaba grande. Si les parece engorroso, pueden dimensionarla a gusto anteriormente con algún programa

es el código correspondiente a datos de ficha. Se puede personalizar a gusto

es el código entero (con texto incluido) correspondiente a la sinopsis. También se puede personalizar
IMPORTANTE: Debes agregar bastante espacio entre el texto debajo y lo que les muestro porque sino se sobrepondrán

Extra

¿Alguna vez quisieron utilizar alguna fuente de Google Fonts pero no sabían como? ¡Aquí les explicaré! Pero antes de proseguir, quiero comentarles que hay dos maneras de poner una fuente: una es "registrándola" en el blog directamente para que cuando quieran usarla no tengan que poner todo el código sino solamente el formato (acá les explican una manera de hacerlo), otra es la que explicaré aquí, que requiere que cada vez que quieras usar la fuente coloques todo.

1) Vamos a Google Fonts
2) Buscamos entre todas las fuentes hasta encontrarnos con la que nos gusta más
3) Una vez sabemos cuál nos gusta, hacemos click en el + que aparece en la esquina superior del lado derecho

4) Aparecerá una especie de menú desplegable abajo, que debemos clickear para que se maximice

5) Una vez maximizamos nos encontramos con dos códigos. El primero que empieza con "link href" es el código que se tiene que poner en las entradas (una única vez por entrada) cada vez que quieras utilizar la fuente (o sino, como dije arriba, debes registrarla en el blog para no tener que ponerlo cada vez que quieras utilizarla). El otro es el que se utiliza para darle el formato directamente al texto. A continuación les dejo un ejemplo con código incluido para que puedan verlo mejor:

Texto de ejemplo

Código:

Espero les sirva mucho y puedan ponerlo en práctica. ¡Besos a to'!

Modificar propiedades del texto con HTML - Parte III

tutorial HTML

¡Bienvenidos a la última parte!

En esta entrada se tratará el elemento TABLE, que es, básicamente, para armar tablas. Dirán, "ah, tablas, no necesito tablas para nada" pero creanme que si. ¡Yo las utilizo todo el tiempo!

Recomendación: si querés armar una tabla, escribí el código en algo aparte para no arruinar la entrada. Yo utilizo un editor (las veces que no utilicé se me armó un lío que no se imaginan) -> Editor de HTML

¡Recuerden ver los tutoriales anteriores para informarse de los otros elementos!

Link a Parte I | Link a Parte II

TABLE

Lo básico que necesitamos para crear una tabla es el código <table></table>

Como todos saben, una tabla consiste en columnas y filas. Existen diferentes etiquetas, que son TR (filas), TD (columnas) y TH (títulos). Yo solamente utilizo tr y td porque se me hace más sencillo y en este tutorial les enseñaré a usarlas, porque la idea es que les muestre como hago tablas

Hacer una tabla básica

1) Vamos al Editor y empezamos a armar una tabla colocando el código principal

2) Ahora, por ejemplo, quiero poner dos columnas y tres filas. Primero les mostraré con una fila

Texto

Código:

<center><table><tr><td><div style="border: 1px solid black">Texto</div></td><td><div style="border: 1px solid black">Texto</div></td></tr></table></center>

Primero se debe escribir, dentro del código principal, <tr></tr> para armar la fila, dentro de los tr deben de estar los <td></td> que son las columnas (entonces, se abre el elemento td, se cierra y así dependiendo del número de columnas. Como yo quería dos, coloque dos td). Para que sea visible le agregué bordes con div, que están dentro de cada td

- Para centrar la tabla, la coloque entre <center></center>

- Si la tabla que quieren hacer consta de una sola fila, no hace falta colocar el elemento tr

3) Ya tenemos una fila, nos resta hacer dos más. Lo que deben hacer es copiar el código desde <tr> a </tr> y pegarlo dos veces más para que se formen las 3 filas

Texto	Texto
Texto	Texto
Texto	Texto

Código:

<center><table><tr><td><div style="border: 1px solid black">Texto</div></td><td><div style="border: 1px solid black">Texto</div></td></tr><tr><td><div style="border: 1px solid black">Texto</div></td><td><div style="border: 1px solid black">Texto</div></td></tr><tr><td><div style="border: 1px solid black">Texto</div></td><td><div style="border: 1px solid black">Texto</div></td></tr></table></center>

Cute Girl | Tutoriales

tutoriales

En el tutorial anterior les comenté que iban a ser tres pero que iba a ser muy largo. Este es el que tuve que separar, espero lo disfruten

{ Cute Girl }

con Adobe Photoshop CS5 y Editor JavaScript online

Aquí editamos mínimamente una imagen y le agregamos HTML para conseguir algo que puede utilizarse como una firma o para hacer más lindas las entradas. Es bastante sencillo, se los prometo

1.- Lo primero que hice fue editar el render utilizando el Estilo que se llama "Trazo"

Hago doble click en la pestaña "Trazo" y se abre un menú en el que puedo editar el estilo a gusto

Luego redimensioné la imagen a 250px x 310px porque era muy grande. El resultado:

2.- Ahora toca la parte de añadir el HTML. Si no saben mucho de HTML y quisieran aprender lo básico, hagan click aquí para dirigirse a los tutoriales que he publicado hace tiempo

- Agregar la imagen dentro de un div por si luego quieren cambiarla de posición o editarla. Los parámetros que utilicé fueron: background-image; width y height. Queda así:

- Armar otro div debajo, en el cual personalizaremos un cuadrito
• Proponer un tamaño (width y height)
• Colocar bordes, en este caso es punteado (border)
• Redondear esquinas (border-radius)
• Colocar fondo. Puede ser un color o también una imagen (background o background-image)
• Colocar texto y darle formato (color, font-size y font-family). Utilicé una fuente de Google Fonts
• Separar texto de los bordes(padding)
• Y, por último, determinar en que posición queremos que esté (en este caso, margin-left y margin-top). Esto dependerá de las dimensiones de tu blog, todos son diferentes

El código de este div sería el siguiente:

<div style="font-family: 'Dancing Script', cursive; font-size: 20px;width: 363px; height: 94px; margin-top: -200px; margin-left: 200px; border-radius: 20px 10px 20px 10px; padding: 30px; border: 2px dotted grey; text-align: justify; color: black">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Para que la fuente funcione, deben colocar el siguiente código al principio de todo

Resultado final

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Recursos

• Imagen: Render

• Fuente: Montez
• Color: COLOURlovers

Nota: la imagen no es mía, ¡créditos a su respectivo creador!

¿Quieren más tutoriales? ¿De qué les gustaría? Dejen su opinión en los comentarios

¡Un beso!

Yuuki

Flying high + Extraer color | Tutoriales

tutoriales

¡Buenas gente! Después de tanto tiempo de no subir un tutorial, y al ver que muchos estuvieron votando para que haga más, les traigo dos que son livianitos. No estudio para este tipo de cosas, simplemente las aprendí con el tiempo practicando, por lo que siempre les voy a dar un punto de vista que no es profesional. Espero que les sirva~

{ Flying High }

con Adobe Photoshop CS5

En este tutorial voy a contarles como hice una firma, pero tranquilamente se puede utilizar para crear un banner u otro tipo de gráfico de pequeña escala. Probablemente sea raro utilizar en los blogs una firma, pero es una vieja costumbre mía ya que vengo de estar muchos años en foros de rol. Más abajo, como en los demás tutoriales, dejaré todos los recursos que utilicé.

1.- Abrir un nuevo documento con el tamaño deseado. En mi caso es de 450 x 150 px
2.- Colocar el fondo y acomodarlo hasta que quede como te guste

Modificar propiedades del texto con HTML - Parte II

tutorial HTML

¡Bienvenidos a la segunda parte!

En esta entrada se tratarán los elementos DIV y FONT. Primero procederé con div ya que es mucho más largo para explicar porque contiene muchas propiedades que se pueden modificar.

DIV

Antes que nada, para utilizarlo se necesita el siguiente código en el cual se irán colocando todos los elementos que iré indicando más abajo.

<div style="Elementos">Texto</div>

¡Es fundamental que se cierre la etiqueta porque de lo contrario generará problemas en el documento! Para separar los parámetros se utiliza el punto y coma. Verán que muchos de los códigos no son necesarios, así que depende de cada uno la utilización de estos. Sin más que decir, ¡comencemos!

Modificar propiedades del texto con HTML - Parte I

tutorial HTML

Todos los sitios web, como, por ejemplo, foros y blogs, utilizan HTML como también CSS para definir propiedades a gusto. Acá se explicará lo más básico del HTML aplicado a entradas, o sea, que esta vez nos basaremos en algo mucho más particular ya que el HTML es bastante amplio. Cabe destacar que esto es lo que yo aprendí con el tiempo, así que no puedo decir que es todo el HTML que existe. Este tutorial es básicamente para las personas que quieren darle un estilo a las entradas, no mucho más que eso

Créditos

Las imágenes que utilizo en mi blog no son mías, las utilizo simplemente para decorar las entradas, créditos a sus respectivos creadores. En cuanto a las fotos si me pertenecen a menos que diga lo contrario (en caso de las fotos que utilizo para mis reseñas se sobreentiende que no me pertenecen). Las sinopsis de libros las suelo sacar de las contraportadas o sitios en los que vendan o califiquen este, pero en el caso de lo demás lo suelo sacar por internet, no las hago yo misma, excepto por las primeras reseñas del blog.

• Las ilustraciones me las hizo Unanchoa. Créditos por estas hermosuras para ella.

Algunos códigos los saqué de variados sitios, así que quiero expresar mi gratitud hacía ellos por su gran aporte:

• La mayoría de los trucos para dejar todo más prolijo y a mi gusto los saqué de Ciudad Blogger.

Probablemente hay más sitios que utilicé y no anoté, pero también agradezco por todos los tutoriales para modificar la plantilla, ¡son super útiles!

Tutorial de Rafflecopter | Tutorial

Personalizar ficha técnica y sinopsis + extra | Tutorial HTML

Modificar propiedades del texto con HTML - Parte III

Cute Girl | Tutoriales

Flying high + Extraer color | Tutoriales

Modificar propiedades del texto con HTML - Parte II

Modificar propiedades del texto con HTML - Parte I

Etiquetas

Entradas populares