tag:blogger.com,1999:blog-17757057860874864352024-02-02T06:25:21.489-03:00Diario de 1 Nuevo Blogger... o cómo crear un nuevo blog desde cero.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.comBlogger26125tag:blogger.com,1999:blog-1775705786087486435.post-37858498070957614732018-03-04T01:32:00.000-03:002018-03-24T10:35:35.803-03:00Notable Ep. One > Epilogue<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwSg7nemxDDQYzRPYbxm_-Jt_LuUip6AJeP3-nnTA8PSItYwOkRtNE-Mf7Ok3p367dsdAWFnPQQm7-BfG678mHsx83pTrH2g3HNi1haCwgnSc7I0CBi8dEGDnGhjEDr3uOesCUZhg41WYQ/s1600/Notable+I+Plus+640x360.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="360" data-original-width="640" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwSg7nemxDDQYzRPYbxm_-Jt_LuUip6AJeP3-nnTA8PSItYwOkRtNE-Mf7Ok3p367dsdAWFnPQQm7-BfG678mHsx83pTrH2g3HNi1haCwgnSc7I0CBi8dEGDnGhjEDr3uOesCUZhg41WYQ/s400/Notable+I+Plus+640x360.png" width="400" /></a></div>
La utilización de una plantilla oficial para el diseño de un blog en la plataforma Blogger siempre presentó una ventaja para quienes quieran personalizarlas sin tener grandes conocimientos de diseño web: esto se sigue manteniendo para los cuatro nuevos <i>themes</i> <i>responsives </i>presentados en 2017, incluyendo al <i>theme </i>Notable que estamos analizando.<br />
En la presente entrada vamos a hablar de cómo personalizar el tamaño de la tipografía en dicho <i>theme </i>para un rango de visualización intermedio (680 a 968px).<br />
<hr />
NOTA: en este blog han sido tratados, en <i>post </i>escritos en <a href="https://diario1nuevoblogger.blogspot.com.ar/2016/06/" target="_blank">junio de 2016</a> , cuestiones vinculadas a ajustes de las plantillas oficiales en uso en ese momento, plantillas que no generaban <i>layouts </i>de tipo <i>responsive </i>como las nuevas. En lo que sigue nos concentraremos en los procedimientos a aplicar en un <i>theme </i>del 2017 específico, el <i>theme </i>Notable.<br />
<h3>
Una breve recapitulación</h3>
Estuvimos tratando en el <i>post </i>anterior cuestiones que tienen que ver con el tamaño con que se muestra el texto principal en el <i>theme </i><b>Notable</b>. Dado que estamos hablando de un <i>layout responsive</i>, analizamos cómo cambian los valores de los caracteres por línea según cambia el ancho del <i>viewport </i>(esto está vinculado directamente al dispositivo con que se visualice nuestro blog).<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJohPcZK33YqytEA8KbYq7PQu9r8qPEoSzGEezAJgOZWAExu1qBuNc0OUN3QOVqYF_w0_fidUlDalrUj5siK17j-pIj3mFeRnGg8v-BfzAn_dxU4yNhyphenhyphenocUgFmUf4vfH1E9I3JchjF2wKx/s1600/cant-caracteres-banda.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="caracteres por linea en funcion del ancho de viewport" border="0" data-original-height="371" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJohPcZK33YqytEA8KbYq7PQu9r8qPEoSzGEezAJgOZWAExu1qBuNc0OUN3QOVqYF_w0_fidUlDalrUj5siK17j-pIj3mFeRnGg8v-BfzAn_dxU4yNhyphenhyphenocUgFmUf4vfH1E9I3JchjF2wKx/s1600/cant-caracteres-banda.png" title="" /></a></div>
El análisis arroja un muy elevado número de caracteres por línea en una franja de entre los 680px y 968px de ancho de <i>viewport</i>, región donde los sumarios presentan, a su vez, un desmesurado tamaño en las “snippet thumbnail images” (imágenes que acompañan a los resúmenes de cada entrada)... dá toda la impresión que el diseño del <i>theme </i>Notable no ha sido suficientemente cuidado en su implementación bajo esas condiciones de visualización.<br />
<h3>
Definamos el objetivo</h3>
La finalidad de la presente entrada será principalmente “pedagógica”... mostrar de qué manera se puede implementar un primer y simple cambio en el <i>theme</i>, que permita compensar en parte la situación descripta. <br />
Concretamente: veremos cómo generar un nuevo tamaño de fuente para el texto principal —entre 14px y 20px: yo probé con 17px— para que se utilice en el rango antedicho.<br />
Para los amantes de las gráficas: vamos a pasar de lo que mostramos arriba a ésto...<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqHD9RBWVrKJt2KLiNhSFxtYcXy2SJ28bzbgjOfl3eRvQocEIE0dXRHX5HlTHleodrZYjE0KQFJYzhnS_CY6A_0DItKp_0Q5_ykURtzSdjjpfbNmWEsdhb_ijnU8QWUjpbolu6_3I0KS79/s1600/cant+caracteres+nuevos.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="371" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqHD9RBWVrKJt2KLiNhSFxtYcXy2SJ28bzbgjOfl3eRvQocEIE0dXRHX5HlTHleodrZYjE0KQFJYzhnS_CY6A_0DItKp_0Q5_ykURtzSdjjpfbNmWEsdhb_ijnU8QWUjpbolu6_3I0KS79/s1600/cant+caracteres+nuevos.png" /></a></div>
Para conseguir esto usaremos el Diseñador de Temas de Blogger, en su opción <a href="https://support.google.com/blogger/answer/176245" target="_blank"> Agregar CSS personalizado</a>.<br />
NOTA: Desde ya que podríamos haber modificado directamente la plantilla .xlm del <i>theme</i>, pero opté por mostrar una manera más directa (o que asuste menos).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwf4ZxAiA3PnKS0LRpGdSyzsSN_WLS43idyTGmGCdWk-lOKlw1jpYYkphJWzMe_ZLhR9XK10MOF5VboZw6O9YZ_0WRcYKQDP3B9BDuMX19QqZyWu0Kf8BMYxbozU13EytrFcmo8HJsPZXZ/s1600/dise%25C3%25B1ador-CSS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="280" data-original-width="860" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwf4ZxAiA3PnKS0LRpGdSyzsSN_WLS43idyTGmGCdWk-lOKlw1jpYYkphJWzMe_ZLhR9XK10MOF5VboZw6O9YZ_0WRcYKQDP3B9BDuMX19QqZyWu0Kf8BMYxbozU13EytrFcmo8HJsPZXZ/s640/dise%25C3%25B1ador-CSS.png" width="640" /></a></div>
<br />
<h3>
¿Cómo se definen los tamaños de fuente principal en el <i>theme</i>?</h3>
Ya hablamos que una de las ventajas del empleo de las plantillas oficiales de Blogger era que para su personalización básica no se necesitan conocimientos avanzados de diseño web. Esto gracias a que tenemos el mencionado “Diseñador de Temas de Blogger” a nuestra disposición.<br />
Desde el mismo se puede determinar, entre otras cosas, el tamaño de fuente principal, usado en el cuerpo de texto de cada entrada o página estática. <br />
Como vemos en la imagen, yo dejé el tamaño predeterminado de 20px, y cambié la fuente a Montserrat.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKHfSoziEEfvuqQ2gcHCg4IDGDoFbLf0CEzM3Zbi54iGQ2utWXuZXNgdpx2En9bfo3CmkAz3wHwHP42ciLDLEQczZF-xI1TYI8OBD5bcsi1ciY36eGiSy1MfixSVGAbius3N3DrMaEHtz/s1600/body.text.font.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="275" data-original-width="690" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHKHfSoziEEfvuqQ2gcHCg4IDGDoFbLf0CEzM3Zbi54iGQ2utWXuZXNgdpx2En9bfo3CmkAz3wHwHP42ciLDLEQczZF-xI1TYI8OBD5bcsi1ciY36eGiSy1MfixSVGAbius3N3DrMaEHtz/s640/body.text.font.png" width="640" /></a></div>
<br />
Cualquier cambio realizado desde el Diseñador se almacenará en la plantilla <b>.xml</b>… en realidad estamos redefiniendo ciertas variables que se usan en dicha plantilla para generar los <b>estilos CSS</b>: en este caso en particular la variable <b>($body.text.font)</b>.<br />
En la plantilla, el nuevo código quedará:<br />
<pre><code><Group description="Body">
...
<Variable name="body.text.font" description="Font" type="font"
default="$(loraNormal20)" value="normal normal 20px Montserrat"/>
...
</Group>
</code></pre>
Una vez concluida la redefinición de las variables, cuando aparezca esto en la sección <b><skin></b> de la plantilla:<br />
<pre><code>body{
background-color:$(body.background.color);
color:$(body.text.color);
font:$(body.text.font);
margin:0 auto
}
</code></pre>
En la página generada (la que vé el visitante del blog), el código <b>CSS </b>quedará:<br />
<pre><code>body{
background-color:#ffffff;
color:#292929;
font:normal normal 20px Montserrat;
margin:0 auto
}
</code></pre>
<u>Pero atención</u>: el tamaño de fuente de 20px será aquel que se aplique (según la plantilla <b>.xml</b> original) para valores de viewport mayores a 968px.<br />
Para valores menores o iguales a 968px dicho valor es sobreescrito dentro de los corchetes de una <i>media-query</i>, y vale:<br />
<pre><code>@media screen and (max-width:968px){
body{
font-size:$(body.text.font.size * 14 / 20)
}
</code></pre>
lo que implicará…<br />
<pre><code>@media screen and (max-width:968px){
body{
font-size:14px
}
</code></pre>
<h4>
Conclusión:</h4>
Vemos que el valor de tamaño de fuente para <i>viewports </i>chicos está determinado por el mismo valor fijado para <i>viewports </i>grandes (hay una sola variable de ajuste). Esto es lo que justifica que al cambiar el tamaño de fuente para una configuración tipo <i>desktop </i>(nuestros 20px), cambie proporcionalmente el valor para configuraciones menores a 968px (en principio, a 14px).<br />
Ya estamos ante una pista sobre cómo afectar el rango de visualización entre 600px y 968px… seguramente incluirá algo como ésto:<br />
<pre><code>@media screen and (min-width: 601px) and (max-width: 968px){
body{
font-size:$(body.text.font.size * 17 / 20)
}
…
</code></pre>
Si no estuviésemos tratando con una plantilla .xml de Blogger y su uso de variables, y en particular del <i>theme </i>Notable, ya estaríamos ante un paso de la solución. Pero a continuación veremos una última cuestión necesaria antes de llegar a la solución.<br />
Dejo un par de link con información sobre <i>media-queries</i> y su uso en los <i>responsive designs.</i><br />
<h4>
Lecturas recomendadas:</h4>
<ul>
<li>Wikipedia > <a href="https://es.wikipedia.org/wiki/Media_query" target="_blank">Media query</a> </li>
<li>rolandocaldas.com > <a href="https://rolandocaldas.com/html5/media-queries-y-responsive-design" target="_blank">Media queries como base del responsive design</a></li>
<li>w3.unpo<code>todo > <a href="http://w3.unpocodetodo.info/css3/media-query.php" target="_blank">@media-query</a></li>
</ul>
<h3>
La plantilla del theme Notable, y sus intríngulis</h3>
Un análisis detallado del archivo .xml de la plantilla da cuenta de una particularidad de la variable <b>$(body.text.font)</b>: además de su uso básico para configurar el tipo de fuente principal del blog, se usa para determinar otras reglas CSS, de elementos tales como la letra capital que encabeza algunos posts, o la <u>altura </u>de los contenedores de resúmenes de posts (reglas <i>.post-snippet.snippet-container</i>, <i>.popular-posts-snippet.snippet-container</i>, y otras).<br />
Ejemplo:<br />
<pre><code>.post-snippet.snippet-container{
max-height:$(body.text.font.size * 4 * 2)
}
</code></pre>
pero para viewports menores a 968px, encontramos:<br />
<pre><code>.post-snippet.snippet-container{
font-size:14px;
max-height:112px /* esto es 14px * 4 * 2 */
}
</code></pre>
que está pensado para mostrar 4 líneas de texto en los resúmenes, con interlineado 2. Vemos que en un caso se usa la variable <b>$body.text.font.size</b> como referencia, y en otro se fija la fuente a <b>14px</b> y se determina la altura máxima usando la misma fórmula.<br />
Puede inferirse entonces que, si queremos mantener implementar nuestros cambios y seguir manteniendo cierta coherencia con la plantilla original, deberemos afectar más que la regla: <code>font-size:$(body.text.font.size * 17 / 20)</code><br />
(También hay que considerar que los tamaños de letra de otros componentes del texto —títulos y demás— deberían ser afectados más o menos proporcionalmente al nuevo tamaño propuesto de 17px).<br />
<h3>
Recalculando...</h3>
De todo lo antedicho vemos que la modificación propuesta al theme Notable presenta unas cuantas complicaciones…<br />
Antes de mostrar los cambios a introducir vía el “Diseñador de Temas de Blogger”, aclaro que para crear los mismos me guié en los criterios que se usaron en la plantilla original para adaptar la visualización del <i>theme </i>de un tamaño de fuente de 20px (usado en desktops) a 14px (usado en smartphones).<br />
Acá están los cambios propuestos...<br />
<pre><code>
@media screen and (min-width: 601px) and (max-width: 968px){
body{
font-size:$(body.text.font.size * 17 / 20)
}
.post-header-container .byline,.post-header-container .byline a{
font-size:17px
}
.post-title,.post-title a{
font-size:32px
}
body.item-view blockquote{
font-size:20px
}
body.item-view .Blog .post-body{
font-size:$(body.text.font.size * 17 / 20)
}
body.item-view .Blog .post-body::first-letter{
font-size:$(body.text.font.size * 17 / 20 * 4);
line-height:$(body.text.font.size * 17 / 20 * 4)
}
.popular-posts-snippet.snippet-container,.post-snippet.snippet-container{
font-size:17px;
max-height:calc(17px * 8)
}
.popular-posts-snippet .snippet-fade,.post-snippet .snippet-fade{
height:34px
}
.hero-post-snippet.snippet-container{
font-size:17px;
max-height:calc(17px * 8)
}
.hero-post-snippet .snippet-fade{
height:34px
}
.hero-post-noimage-snippet.snippet-container{
font-size:17px;
line-height:2;
max-height:calc(17px * 16)
}
.hero-post-noimage-snippet .snippet-item{
line-height:2
}
.hero-post-noimage-snippet .snippet-fade{
height:34px
}
.hero-post-noimage-snippet .snippet-item::first-letter{
font-size:68px;
line-height:normal
}
}
</code></pre>
<br />
Importante para destacar: lo tratado en este post y el anterior tiene una finalidad más que nada "educativa", que quizás sirva de guía para aquellos que intenten sus propios cambios visuales en esta (u otra) plantilla de Blogger.<br />
Aún con los cambios de tamaño de fuente, el <i>theme </i>Notable muestra imágenes de "enorme" tamaño en los resúmenes (snippets) de cada post, dentro del rango de visualización en que estamos realizando los cambios. Mejorar esto quedará (quizás) como tema a tratar en un futuro.<br />
<br />
<br />
<br />
(CONTINUARÁ..?)Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-5436956479129527562018-02-17T11:56:00.000-03:002018-04-02T12:43:08.259-03:00Theme Notable Episode One<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2DWZT3TZCCTLGBmatTE6jaudQmZk1fK98KI6B32FEON6doA6oG791rlFWeq8Kba80XsEb_8w0lA2P7gqQYN5Q8mb14iTL2HHObYbbkd6FoXth4eBT2DaUrpwVvdixrBS4kTuZ6qkB2myf/s1600/Notable+I+640x360.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="360" data-original-width="640" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2DWZT3TZCCTLGBmatTE6jaudQmZk1fK98KI6B32FEON6doA6oG791rlFWeq8Kba80XsEb_8w0lA2P7gqQYN5Q8mb14iTL2HHObYbbkd6FoXth4eBT2DaUrpwVvdixrBS4kTuZ6qkB2myf/s400/Notable+I+640x360.png" width="400" /></a></div>
Tras la decisión de adoptar uno de los nuevos <i>responsives themes</i> para este blog, y luego de un primer análisis evaluativo de las 4 alternativas ofrecidas por Blogger, el theme "ganador" —con fallo dividido— finalmente estará basado en la plantilla <b>Notable</b>.<br />
En la presente entrada trataremos de uno de los primeros aspectos a personalizar, que surgen de un análisis —ahora más detallado— del <i>theme </i>funcionando con los contenidos previos escritos para este blog: hablaremos de la manera en que se implementan <b>los tamaños tipográficos</b> en la plantilla Notable.<br />
<h3>
Adaptabilidad Tipográfica del Theme Notable</h3>
Una vez que realicé el anunciado cambio a la plantilla Notable para este blog, de personalizar mínimamente algunos aspectos visuales, de ver que gadgets previos funcionaban o no, etc., el primer paso lógico y relevante fué chequear la correcta visualización de los contenidos correspondientes a los viejos <i>posts</i>, ahora bajo este nuevo "look", considerando toda la variedad de resoluciones de pantalla (celulares, tablets, desktops).<br />
El <i>theme </i>Notable viene promocionado como aquel de los 4 <i>responsive themes</i> de Blogger que privilegia particularmente el contenido escrito de un blog. Esta opinión quizás esté sustentada por sus características: diseño despojado usando colores planos, estructura o <i>layout </i>de columna única para todas las resoluciones de pantalla, y tamaños predeterminados de fuente de cuerpo —la fuente principal del contenido— relativamente grandes (especialmente en entornos desktops).<br />
Yendo a un punto concreto: el tamaño de fuente predeterminado para la visualización en grandes resoluciones ( > 968px ) es de 20px, y de 14px en resoluciones menores. Del análisis surge que hay un rango de resoluciones —entre 600px y 960px aproximadamente— en donde <b>convendría disponer de un tamaño de texto de cuerpo de un valor intermedio</b> (16 o 17px, por ejemplo); ya veremos por qué.<br />
<hr />
NOTA: en la misma franja de entre 600 y 960 px aparece otro “inconveniente”, esta vez entre la relación de tamaños de imagen de sumario o resumen, y el texto correspondiente: las primeras toman una preponderancia normalmente injustificada. Pero tal cuestión no formará parte de lo tratado en este post.<br />
<hr />
Pero antes de proponer cambios al comportamiento tipográfico que trae de forma predeterminada el theme Notable, conviene dejar explicitadas algunas bases teóricas (me gusta más la idea de mencionarlas como recomendaciones) que nos van a servir como lineamientos para nuestra propuesta.<br />
<h3>
¿Cuál es la cantidad ideal de caracteres por líneas?</h3>
Este dilema se debe haber planteado a no mucho después de la misma invención de la imprenta… y desde ya que no encontraremos una respuesta universal al mismo. Factores tan distintos como las características de la letra empleada, el medio desde el cual estemos leyendo, percepciones particulares de cada individuo, etc, sin duda inciden sobre lo que sería considerado un texto adecuadamente legible.<br />
Es aquí donde el poder de las estadísticas viene en nuestro auxilio, y permite acercar algunos valores numéricos que reflejen las impresiones de un “lector promedio”.<br />
Consultando diversas fuentes encontraremos algunas ligeras diferencias en los valores recomendados, pero para lo que sigue en nuestro trabajo nos manejaremos con los siguientes valores orientativos (recordando que trabajamos con textos a columna única):<br />
<ul>
<li>Escritorio: 50 a 75 caracteres por línea, incluyendo espacios; lo ideal es andar cerca de los 66 caracteres por línea.</li>
<li>Dispositivos móviles: 35 a 50 caracteres por línea.</li>
</ul>
En lo personal, cuando un sitio tiene páginas con una gran cantidad de contenido escrito (como ésta, por ejemplo), yo prefiero manejarme con números por sobre el promedio enunciado —entre 65 y 90 caracteres por línea, por ejemplo—.<br />
<hr />
El tema es muy amplio, así que como es mi costumbre dejo a mano algunas lecturas que tomé como fuente informativa:<br />
<h4>
Lecturas recomendadas:</h4>
<ul>
<li>Microsiervos > <a href="http://www.microsiervos.com/archivo/arte-y-diseno/caracteres-por-linea-web.html" target="_blank">¿Cuál es el número óptimo de caracteres por línea para que un texto sea bien legible en la web?</a> </li>
<li>imaginanet > <a href="https://www.imaginanet.com/blog/diseno-web-orientado-a-la-legibilidad-del-texto.html" target="_blank">Diseño web orientado a la legibilidad del texto</a></li>
<li>OERT > <a href="http://www.oert.org/tipografia-y-proporciones/" target="_blank">Tipografía y proporciones</a></li>
</ul>
<h3>
Anchos de líneas en el theme Notable</h3>
El factor que nos resta conocer para poder seguir con nuestra propuesta de cambio tipográfico, es saber los tamaños de anchos de línea destinados al cuerpo principal de texto en este <i>theme</i>. <br />
Pero dado que el diseño web <i>responsive </i>tiene que ver con adaptar los contenidos a los distintos tipos de resolución de pantallas, será necesario explicitar los valores de estos anchos de línea en función del ancho de visualización que se muestra en el navegador —generalmente pantalla completa— para la plantilla Notable.<br />
¿Cómo hacer esto? Podemos ayudarnos con las herramientas de desarrollador web que traen los navegadores, o explorar los estilos en cascada escritos en la plantilla .xml del <i>theme </i>—yo usé una mezcla de ambas cosas—.<br />
Y como una imagen vale más de mil palabras (cero originalidad) dejo a mano un gráfico donde se muestra como cambian los anchos de línea y el tamaño de la fuente de cuerpo, en función del ancho de viewport, para el theme Notable:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtAfq54zE_Y6oXXFeVi5QM4BvTvUIcZnHJbgWBfnQnxWddDdijOjrClTf7PyjsWD5urXLl90RHKHWSJr90Al9RlNS76k2Ammd_Sp90l8OHJ38_UXXmWrcGsBGnUyWfcdTfTjDOHsgoCPXa/s1600/chart+notable.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="anchos de linea en Notable" border="0" data-original-height="371" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtAfq54zE_Y6oXXFeVi5QM4BvTvUIcZnHJbgWBfnQnxWddDdijOjrClTf7PyjsWD5urXLl90RHKHWSJr90Al9RlNS76k2Ammd_Sp90l8OHJ38_UXXmWrcGsBGnUyWfcdTfTjDOHsgoCPXa/s1600/chart+notable.png" title="anchos de linea en Notable" /></a></div>
NOTA: el análisis mostrado está realizado sobre las páginas del sitio usando la plantilla Notable sin ningún tipo de personalización.<br />
<h4>
Puntos a destacar:</h4>
<ul>
<li>En rojo está graficado el tamaño de fuente, con sus 2 valores: hasta 968px de ancho de viewport el theme usa 14px, y salta a 20px de ahí en adelante.</li>
<li>El <i>layout </i>funciona de manera que en el primer rango de valores el ancho de línea aumenta proporcionalmente al aumento de ancho de viewport —ya que el texto ocupa todo el ancho de pantalla, usando 2 márgenes laterales de 24px—; esto implica que a 968px se estará superando fácilmente los 130 caracteres por línea.</li>
<li>Entre 969px y 1168px el ancho de línea queda fijo en 920px con el tamaño de fuente ya en 20px: estamos hablando de más de 90 caracteres por línea, seguramente.</li>
<li>Un nuevo cambio en el <i>layout </i>hace bajar el ancho de línea hasta 629px (¡casi 300px!) a partir de 1169px, ancho de línea que comenzará a aumentar posteriormente (igual que en un principio) a la par del aumento del viewport; el límite de esta zona de aumento, usando la configuración predeterminada del <i>theme</i>, estará en 1280px.</li>
<li>El último tramo de análisis el ancho de línea queda fijo en 740px (unos 75 caracteres por línea, o aún más en tipos de letras angostos).</li>
</ul>
<h3>
Un caso de análisis concreto, con una fuente concreta</h3>
Para afinar el análisis previo conviene que tengamos definida una fuente de cuerpo de texto: en mi caso tengo pensado el uso de la fuente <b>Montserrat </b>—obra de una diseñadora gráfica argentina, dicho sea de paso— como fuente para el texto principal del blog. Pero, ¿por qué es importante trabajar sobre una fuente determinada?<br />
Cada tipo de letra tiene un cierto tipo de variable de proporción; podríamos simplificarlo diciendo: existirá una relación entre altura y anchura de las letras, que hacen posible clasificarlas, por ejemplo, como <b>condensadas</b>, <b>normales </b>o <b>expandidas</b>.<br />
Es entonces lógico concluir que la cantidad de caracteres por línea —para un ancho de línea determinado— va a variar de acuerdo al tipo de letra empleado: van a entrar más letras si son de tipo condensado, van a entrar menos si son de tipo expandido (o <i>wide</i>). Por eso es importante conocer la fuente con que se va a trabajar.<br />
Ya con una fuente definida, y luego de un trabajo de relevamiento puramente empírico de la cantidad de caracteres por línea en diversas situaciones de visualización, pude llegar a los siguientes valores promedio:<br />
<ul>
<li>para un texto en fuente Montserrat de tamaño 14px, el ancho promedio de un caracter es de aproximadamente 7px.</li>
<li>para un texto en fuente Montserrat de tamaño 20px, el ancho promedio de un caracter es de aproximadamente 10px.</li>
</ul>
Será posible entonces unir los dos gráficos anteriores, arrojando una nueva gráfica que estará asociada, eso sí, <b>a la fuente Montserrat en particular</b>:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdHMA8vcc9h_vL2Qk_0uU7XQ4kbASpJwvFVeuJ7BWBLF2hqqvL4ahCLf8MiZ_Gul-04FygQTRPzdarZwfKMiyKvBhKZhsEsONN4qZpuMeqQTYoHpPlZKhG0aBJJrbVpecKLpch7xQ6XaL/s1600/cant-caracteres-banda.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="theme Notable con fuente Monserrat" border="0" data-original-height="371" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsdHMA8vcc9h_vL2Qk_0uU7XQ4kbASpJwvFVeuJ7BWBLF2hqqvL4ahCLf8MiZ_Gul-04FygQTRPzdarZwfKMiyKvBhKZhsEsONN4qZpuMeqQTYoHpPlZKhG0aBJJrbVpecKLpch7xQ6XaL/s1600/cant-caracteres-banda.png" title="theme Notable con fuente Monserrat" /></a></div>
NOTA: a fin de facilitar la interpretación, superpuse al gráfico una banda coloreada señalando los valores recomendados mencionados previamente.<br />
<h4>
Puntos a destacar:</h4>
<ul>
<li>Tal como fue anticipado al comienzo del post, existe una zona especialmente crítica (a partir de 680px y hasta 968px) en donde los valores de caracteres por línea se escapan de lo adecuado para una buena lectura.</li>
<li>De la forma de la gráfica se desprende, de forma más clara, que corregir de manera efectiva la cuestión que estamos tratando necesitará de algo más que del agregado y/o cambio de valores en los tamaños de fuente predeterminados.</li>
</ul>
<br />
Vamos a dejar para la próxima entrada un primer intento de modificación que, de la manera más simple posible, trate de compensar la respuesta del <i>theme </i>dentro de la zona mencionada.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-10166108290311106672018-01-29T03:46:00.002-03:002018-03-10T13:52:54.173-03:00De tin, marín, de do, pingüé<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0nhLFdkFg4MUv06OZ6TCSS3oEzGFg8o7WfGwtIdgoMdU4vzdgdAZPbmoLakQYJtJP1UVVKdn8CM2MjeQNQXK89kXS-L4pEJyzVgvTxjtdXMOiDdqyFoRKNxJBGU970ff31cj7_APgWGO/s1600/eleccion.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="480" data-original-width="852" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy0nhLFdkFg4MUv06OZ6TCSS3oEzGFg8o7WfGwtIdgoMdU4vzdgdAZPbmoLakQYJtJP1UVVKdn8CM2MjeQNQXK89kXS-L4pEJyzVgvTxjtdXMOiDdqyFoRKNxJBGU970ff31cj7_APgWGO/s320/eleccion.jpg" width="320" /></a></div>Este críptico título sirve de encabezado al tema que nos ocupará en la presente entrada: ¿cuál de los 4 nuevos <i>Responsive Themes</i> oficiales de Blogger elegir como base para la nueva template de nuestro blog? ¿Emporio, Soho, Contempo o Notable?<br />
Mi intención es no dejarlo al azar.<br />
<a name='more'></a><br />
Si leiste alguno de los post previos de este 2018, ya sabrás que estoy dedicando una serie de entradas a los nuevos <i>Themes </i>salidos en marzo de 2017, y documentando parte del proceso de cambio de mi vieja plantilla, basada en WaterMark, a una de las nuevas.<br />
El paso documentado en el post previo (recomiendo su lectura) tiene que ver con consideraciones para la realización de un <i>backup </i>de la vieja plantilla —por las dudas—<br />
<br />
Bien. Una manera de encarar la elección por alguno de los <i>Themes </i>es ir probándolos uno por uno, y ver cuán conformes quedamos con los resultados… pero quizás convenga, para ganar algo de tiempo, comenzar con darle una mirada analítica a los demos oficiales que nos ofrece Blogger:<br />
<ul><li>demo de <a href="http://tastytreats-blog.blogspot.com/" target="_blank">Emporio</a></li>
<li>demo de <a href="http://dayinthelife-blog.blogspot.com/" target="_blank">Soho</a></li>
<li>demo de <a href="http://herethere-blog.blogspot.com/" target="_blank">Contempo</a></li>
<li>demo de <a href="http://poweroffriendship-blog.blogspot.com/" target="_blank">Notable</a> (o Destacada)</li>
</ul><h3>Al analizar los Themes ¿en que cuestiones enfocarnos y en cuáles no?</h3>Empecemos en las cuestiones en que NO debemos enfocarnos. Blogger ofrece para cada <i>Theme</i> 5 versiones que varían solamente en las paletas de colores y en las tipografías empleadas en cada versión. Pero estas versiones pueden usarse como punto de partida para una posterior personalización, hasta quedar conformes con lo estético; dicho de otra manera, <b>no deberemos elegir el nuevo <i>Theme </i>basados en los colores y tipografías</b>.<br />
<br />
¿En qué fijarnos, entonces? En aquellos aspectos funcionales del Theme: <br />
<ul><li>cómo se visualizará y funcionará el blog en los diferentes dispositivos,</li>
<li>cómo se muestran en cada caso los sumarios de las entradas (sólo título o título más resumen), </li>
<li>qué tratamiento/prioridad se dá a la primera imagen en dichos sumarios, </li>
<li>cómo será el acceso a los distintos gadgets que agreguemos, </li>
<li>si lo que pongamos en la barra lateral será accesible desde todas las páginas o no, etc.</li>
</ul>De acuerdo a las características visuales y temáticas de nuestro blog, podremos encontrar que algún Theme pueda ser funcionalmente más adecuado a nuestras necesidades.<br />
<h3>Algunas observaciones iniciales</h3>Los 4 nuevos <i>Responsive Themes</i> de Blogger comparten muchas características en común (contenido muy al frente, navegabilidad inicialmente dependiente del sistema de etiquetado, gadget de entradas populares demasiado a la vista en detrimento de otros gadgets, etc).<br />
Asimismo, el sistema de generación de resumen en sumario ahora es automático, cuando en las plantillas pre-2017 se podía determinar el fin de los textos a mostrar en los sumarios con el botón salto de línea (que inserta el código <!--more--> en el flujo de texto).<br />
Tampoco se verán más los típicos enlaces de navegación para <b>Entradas Recientes/Entradas antiguas</b> al final de los post, y en su lugar sólo existe un botón para <b>Cargar más</b>.<br />
<br />
Todos los <i>layouts </i>parecen haber sido más pensados para la visualización del blog en dispositivos de poca resolución que en notebooks y PC de escritorio; se extraña la posibilidad de una mayor flexibilidad a la hora de ubicar los gadgets (algunos ya vienen posicionados en un lugar predeterminado, y lo único que nos queda es habilitar o no su visualización), y el área de footer está virtualmente ignorada en estos nuevos <i>Themes</i>.<br />
<h3>¿Cuál elegir entonces?</h3>Confieso que pensé encontrarme, después de un primer análisis de cada <i>Theme</i>, ante un panorama más claro respecto a cuál de ellos sería más adecuado para este blog.<br />
Como expuse el el punto anterior los 4 <i>themes </i>comparten muchas similitudes, pero presentan sus propias peculiaridades que pueden no ser tan evidentes a una primera mirada, especialmente aquellas vinculadas a cómo podrá <b>navegar </b>y encontrar contenidos en nuestro blog un eventual visitante.<br />
<br />
Posiblemente el <i>Theme </i>más equilibrado y más flexible para cualquier tipo de contenido sea <b>Contempo</b>, pero tiene una contra importante: tal como está pensado inicialmente, no podemos acceder a los gadget de la barra lateral ni al menú de páginas de header (si lo tenemos) desde las <i>post page</i> —páginas de entrada—... en ellas se prioriza la visita a las Entradas Populares del blog.<br />
Así, un visitante sólo tendrá acceso a un mayor nivel de información de navegación en nuestro blog desde las páginas multi-entrada (de indexación o archivo), o desde páginas estáticas.<br />
<br />
Situación similar se presenta en el <i>Theme </i><b>Soho</b>, aunque en el mismo no se vería afectado un eventual menú de páginas superior. De cualquier manera, esa plantilla parece más adecuada para contenidos de tipo visual.<br />
<br />
Ninguna de estas cuestiones se presenta en el <i>Theme </i><b>Notable</b>, que desde el punto de vista de la navegación del blog ofrece las opciones más adecuadas según mi opinión. Es un <i>Theme</i> más bien orientado al contenido escrito, cuyo punto débil es su excesiva simplicidad de diseño, lo que puede terminar perjudicando la experiencia de usuario.<br />
<br />
Por último, el <i>Theme </i>más personal de los cuatro es <b>Emporio</b>: para dispositivos de resolución menor a 680px de anchura su comportamiento es similar a los otros 3 <i>Themes</i>, pero para anchuras mayores <b>su <i>layout </i>deja de ser de columna única</b>, ya que aparece la barra lateral. Esta barra primero comienza a ser mostrada todo el tiempo en las páginas multientrada, y a partir de pantallas de 1225px de anchura, en todas las páginas del blog.<br />
Un detalle particular de la configuración: la barra lateral para páginas multientrada y la barra para páginas de entradas se configuran separadamente, por lo que podemos tener un poco más de control sobre donde mostrar ciertos gadgets y dónde no.<br />
Una de las cuestiones a tener en cuenta sobre la plantilla Emporio es que en las páginas multientrada los sumarios <b>sólo </b>muestran las imágenes y títulos de las entradas, sin ningún <i>teaser </i>o fragmento de texto que dé mayor información sobre los contenidos: para quien —como un servidor— no suele poner títulos de post “clarificantes”, puede constituir un serio problema.<br />
<hr /><h3>Primeras conclusiones personales</h3>Luego de este análisis —previo a cualquier implementación efectiva en este blog, a febrero de 2018—, puedo decir que ninguno de los cuatro nuevos <i>Themes </i>me dejó con la impresión de ser claramente más ventajoso que los otros para reemplazar a mi vieja plantilla WaterMark… <br />
Me dá la impresión que lo más rápido sería empezar trabajando con el <i>Theme </i><b>Notable</b>, ir personalizándolo en lo visual, y quizás a futuro alterar la plantilla .xml para agregar o cambiar alguna funcionalidad…<br />
La palabra final, de cualquier manera, tendrá mucho que ver a cómo se adaptarán mis viejos contenidos al nuevo diseño, y eso se verá (y documentaré) con el trabajo de aquí en adelante.<br />
<br />
Por ahora, me despido de ustedes y de mi plantilla Watermark potenciada. Chau!Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-65398047846324642092018-01-27T04:01:00.001-03:002018-02-09T10:53:19.880-03:00Backup en Blogger<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnggzA9gt-bL6u2Dit_Z9v8SHiXvb09T4EJM8YDrgG5AWsX1yz2T4a_rOb43aRwjvv3di2MM4uSj_4vDu28mpofYZzg1Xqjje6XPCcJfS4A-nUbrlKFIRHuzcsmDCskIWnlhDsneTqvSDC/s1600/report.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnggzA9gt-bL6u2Dit_Z9v8SHiXvb09T4EJM8YDrgG5AWsX1yz2T4a_rOb43aRwjvv3di2MM4uSj_4vDu28mpofYZzg1Xqjje6XPCcJfS4A-nUbrlKFIRHuzcsmDCskIWnlhDsneTqvSDC/s320/report.png" width="320" /></a></div>Para inaugurar un grupo de entradas vinculadas a la migración desde una plantilla pre-2017 (ya sea “oficial” o “de terceros”) a alguno de los nuevos <i>Responsives Themes</i> que ofrece Blogger, conviene que repasemos aspectos vinculados a lo que sería la primera acción recomendada: el backup de la plantilla de nuestro blog.<br />
<a name='more'></a><br />
<h3>¿Por qué hacer backup? ¿En qué casos hace falta?</h3>Si tenemos nuestro blog en funcionamiento desde hace cierto tiempo, es muy probable que hayamos personalizado su <i>layout</i>, aspecto visual, tipografías, e incluso añadido tanto gadgets nativos de Blogger como gadgets HTML personalizados (sí, esos que encontramos/copiamos/pegamos de la web).<br />
El problema es que si probamos con otra plantilla, <b>y por alguna razón no nos convence o no logramos configurarla</b> para que responda a nuestras necesidades, si queremos DESHACER los cambios y recuperar la plantilla previa <b>necesitaremos haber hecho una copia de seguridad</b> de la misma, esto es, haber hecho un <i>backup </i>de la plantilla original antes de tocar nada.<br />
Esta acción es recomendable en cualquiera de los casos, aunque si el aspecto y funcionalidad de nuestro blog ya no nos convence, quizás ya no sea relevante guardar nada previo —ojo, no estamos hablando de contenidos sino de estructura, gadgets, etc.— y sea mejor elegir todo desde cero.<br />
<h3>¿Qué elementos son los que deben ser respaldados?</h3>No siempre es clara la información que se encuentra en internet sobre este punto, así que trataré de resumir esta cuestión, y dejaré al final de este post —como suelo hacer— algunos links con lecturas recomendadas.<br />
Empecemos.<br />
Realizar un <i>backup </i><b>completo </b>en Blogger involucraría respaldar:<br />
<ul><li>contenido</li>
<li>template o plantilla</li>
<li>imágenes y otros archivos multimedia</li>
<li>gadgets HTML/Javascript</li>
</ul>Pero cuando se habla de respaldar (hacer un <i>backup</i>) <b>de una plantilla</b> estaremos ante un caso en particular, parcial o específico de copia... <br />
<br />
<blockquote class="tr_bq"><div style="text-align: center;">Aquí lo importante es destacar que cuando se pide hacer un <i>backup </i>de la plantilla, en realidad deberemos ocuparnos <u>no sólo</u> de hacer una copia de seguridad de la plantilla .xml, sino <u>también</u> de aquellos gadgets HTML/Javascript que hayamos agregado (sobre los gadgets que ofrece de modo nativo Blogger, “en principio” no deberíamos preocuparnos).</div></blockquote><br />
Para el caso en particular de que NO hubiésemos agregado ningún gadget HTML/Javascript “de terceros”, es decir, de esas piezas de código que cubren alguna funcionalidad que de modo nativo no nos ofrece la plataforma, nos bastaría “en principio” con crear una copia de seguridad de la plantilla .xml; caso contrario, la cuestión se complica.<br />
Supera los alcances de esta entrada entrar en detalles metodológicos del proceso de backup, dejo entonces unos links donde encontrarás info detallada sobre esto...<br />
<h4>Links de interés:</h4><ul><li>Kim Six Blogger Support > <a href="http://www.kimsixbloggersupport.com/2016/05/how-to-back-up-your-entire-blogspot.html" target="_blank">How to back up your entire blogspot blog</a> </li>
<li>SuperWebTricks > <a href="https://www.superwebtricks.com/backup-restore-blogger-template/" target="_blank">How to Take Complete Backup or Restore Blogger Blog Template</a></li>
<li>Peggy K. Tips & Tricks > <a href="https://www.peggyktc.com/2015/04/back-up-your-blogger-blog.html" target="_blank">Back up your Blogger blog: photos, posts, template, and gadgets</a> </li>
<li>Info Oficial > <a href="https://support.google.com/blogger/answer/41387?hl=es-419" target="_blank">Cómo crear una copia de seguridad de tu blog, importarlo o borrarlo</a> </li>
</ul><hr /><h3>Tomemos este blog (versión 2017) como ejemplo práctico</h3>Es conveniente mostrar el <i>layout </i>y distribución de gadgets de este blog en su versión 2017, con una plantilla que está basada en la template Watermark, con una sola barra lateral a la derecha, y un footer dividido en 3 columnas.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqLYQFdU1Qk1uQBbrqrAsaAy-o1JQWvA_sXWm0q5Ut18DnXFviqXimfpjLHpxGh1Di3MNVGc8uuG5RHmGW0NAZgseOyRSn2Xw-7JUUPGNVLY-7KMb0Y2hfreFnVCU6_ok8bsdXnawQjVG/s1600/milayout2017.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="1600" data-original-width="676" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqLYQFdU1Qk1uQBbrqrAsaAy-o1JQWvA_sXWm0q5Ut18DnXFviqXimfpjLHpxGh1Di3MNVGc8uuG5RHmGW0NAZgseOyRSn2Xw-7JUUPGNVLY-7KMb0Y2hfreFnVCU6_ok8bsdXnawQjVG/s320/milayout2017.png" width="135" /></a></div>La mayoría de los gadgets incluidos son del tipo “nativo”, o sea, proporcionados por la misma plataforma Blogger.<br />
La excepción son sólo dos: un gadget de texto intrascendente, y un gadget HTML/Javascript relacionado al servicio LinkWithin, que permite añadirle al blog la posibilidad de mostrar algunas <b>Entradas Relacionadas</b> al post que se esté viendo.<br />
NOTA: actualmente este último gadget no funciona, aparentemente dejó de hacerlo cuando recientemente configuré a SI el Redireccionamiento a HTTPS para el blog.<br />
<br />
Considerando este análisis —VÁLIDO PARA ESTE BLOG EN PARTICULAR—, bastará hacer un backup de la plantilla .xml a modo de respaldo, e intentar buscar algún nuevo gadget de Entradas Relacionadas que funcione con la futura template.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><br />
</div><hr />Para la entrada siguiente ya podremos tratar cuál o cuáles de los nuevos <i>Responsive Themes</i> de Blogger pueden ser más adecuados para este blog. Os vemos...Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-25587398089847681932018-01-23T03:29:00.000-03:002018-01-24T05:18:05.928-03:00Responsive or not... that's the question?<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEU397g_ETe9Q_-py46LHVqQZRnhRZLfsoUOrv9dKhX_J5v3ctjSLtble449hJCJxSl7bvEYtx3iRrH-eD86_6RmbT2HOlsuri4SVSaM7Sw4DS3D_AL0rihq38MfcRP4xciWI6tEOsAtwZ/s1600/shakes.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" data-original-height="499" data-original-width="900" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEU397g_ETe9Q_-py46LHVqQZRnhRZLfsoUOrv9dKhX_J5v3ctjSLtble449hJCJxSl7bvEYtx3iRrH-eD86_6RmbT2HOlsuri4SVSaM7Sw4DS3D_AL0rihq38MfcRP4xciWI6tEOsAtwZ/s320/shakes.jpg" width="320" /></a></div>En estos tiempos que corren, la pregunta por si el diseño de un sitio web debe ser <i>responsive </i>o no, con tanta variedad de dispositivos de distintas capacidades de visualización, ya no tiene sentido: todo nuevo diseño web ya considera el camino adaptativo como solución.<br />
Pero, ya pensando exclusivamente en la plataforma Blogger, decidir si usar los nuevos Responsives Themes aparecidos en 2017, o algunas de las plantillas “de terceros” disponibles en la web, puede ser un serio dilema.<br />
<a name='more'></a><br />
<h3>Antes que nada, un necesario <i>flashback</i></h3>Perdón: voy a ser autorreferencial. A mediados de 2016, publiqué en este blog algunos artículos que versaban sobre cómo configurar/personalizar las plantillas “oficiales” de modo de explotar todo lo posible (sin tocar la plantilla XML) lo que el sistema daba —aún sigue dando — como opción a un usuario no muy experimentado… digamos alguien con pocos conocimientos de HTML, CSS y otras yerbas. Estas entradas llevaron el nombre de <b>Ajustes finos en la plantilla Blogger I, II y III</b>.<br />
El paso evolutivo lógico era salir de las limitaciones que presentaba la plataforma Blogger en ese momento; esto implicaba: <b>elegir </b>y <b>estudiar</b>, para luego <b>adaptar </b>e implementar en este Blog, alguna de las muchas plantillas “de terceros” que —aún— se ofrecen en la web. Y como es de esperar para estos tiempos, yo buscaba que mi nueva plantilla tuviese aquello que le faltaba de base a esas plantillas “oficiales”:<br />
<ul><li>un diseño adaptable (de tipo responsive)</li>
<li>que tuviese en cuenta el etiquetado semántico que ofrece el lenguaje HTML5</li>
<li>un layout y presencia visual distintivos</li>
</ul>Sin entrar mucho en detalles, para finales del 2016 comencé eligiendo una plantilla llamada <a href="http://focused-theme.blogspot.com.ar/">Focused</a>, abrí un blog de prueba basado en los contenidos de este Diario de 1 nuevo Blogger… y a trabajar.<br />
<h3>Contar hasta 10</h3>La empresa de personalizar una plantilla XML es apasionante, se aprende mucho —especialmente de los errores— , pero… es un proceso que consume mucho tiempo; por ello es recomendable meditar el asunto en caso de pretender hacer muchos cambios sobre la misma (cambios no sólo cosméticos, se entiende).<br />
<br />
En mi caso en particular, tras algunos meses logré hacer cambios funcionales y visuales en las áreas de <header> y <footer> , y empecé a trabajar implementando un widget que cambia los links <b>Entrada más reciente</b> y <b>Entrada antigua</b> por los títulos correspondientes a las mismas (ver <a href="https://www.oloblogger.com/2013/03/sustituir-enlaces-navegacion-titulos.html">aquí</a> para saber de qué hablo)... estas cuestiones me llevaron más tiempo del que pensaba, ¡y eran sólo una parte de lo que quería cambiar!<br />
<hr />Dejo como muestra un par de imágenes para que tengan idea de los resultados parciales:<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrH9OhuMwwpBvvX4P4GIvFRZz4M1Ye-XTx1rl14SsQdGp_FX7-YXUK3kO_l9bxU0xEuZvTX5AXShKbSyIghtIZeoed3664scIeYmGp6h6h-9kyQVAk8pGZHbmwgXYWmdBf5mnBNjKv1FMw/s1600/D1NBup.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="510" data-original-width="964" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrH9OhuMwwpBvvX4P4GIvFRZz4M1Ye-XTx1rl14SsQdGp_FX7-YXUK3kO_l9bxU0xEuZvTX5AXShKbSyIghtIZeoed3664scIeYmGp6h6h-9kyQVAk8pGZHbmwgXYWmdBf5mnBNjKv1FMw/s320/D1NBup.png" width="320" /></a></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhDY0aP6kOIfeJUFekeKeEC026TQTTXK9VfAxFUkHBX31BjA_awPliFcOtluFQ3Gzpk-RM9Vrg0-Wstq2KGxL3q8tf9ufDPWQ0AttE-J2ru6lSQQisKXFcbxlwgaqsdVq-U0HCsOYQx95J/s1600/D1NBdown.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="621" data-original-width="964" height="206" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhDY0aP6kOIfeJUFekeKeEC026TQTTXK9VfAxFUkHBX31BjA_awPliFcOtluFQ3Gzpk-RM9Vrg0-Wstq2KGxL3q8tf9ufDPWQ0AttE-J2ru6lSQQisKXFcbxlwgaqsdVq-U0HCsOYQx95J/s320/D1NBdown.png" width="320" /> </a></div><br />
<hr /><h3>Dilema 2017</h3>No, no es el título de un programa de temática electoral (chiste). Me enteré de la llegada de los nuevos Themes Responsives de Blogger promediando el 2017, cuando me disponía a retomar mi —ya atrasado— trabajo de modificación de la plantilla Focused. <b>¡Y he aquí el dilema!</b> Tenía que decidir si seguir lidiando con una template específica en la que había invertido una importante cantidad de tiempo, o apostar al estudio, implementación y posterior personalización de alguna de las nuevas variantes adaptativas propuestas por Blogger.<br />
Tras varias idas y venidas sopesando pros y contras, y dado que fundamentalmente este blog tiene como objetivo ofrecer información sobre como <b>construir un blog en Blogger desde cero</b>, me parece potencialmente más interesante probar con alguno de los nuevos <i>Themes </i>de 2017, e ir documentando dicho proceso paso a paso. A eso me encamino. Chau.<br />
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-6602984144976507132018-01-19T16:00:00.000-03:002018-01-22T16:04:23.843-03:00Nuevas plantillas oficiales (¡al fin!)<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9lkkJApk5KS0_Ok1z1FbK-ttHqrL3ljiBfqnI8DqY4AmFW59E_3u_vgEqSfqPMiMCn_3piXbxrL7Dzxd8YAQSrhE0JBK9wJdJNrTL5omhpIlCWJJKLF11tWAsUJnx_2ye4T-WGSVE-i-/s1600/Responsive_Web_Design_Demo_Template.svg.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="607" data-original-width="1000" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9lkkJApk5KS0_Ok1z1FbK-ttHqrL3ljiBfqnI8DqY4AmFW59E_3u_vgEqSfqPMiMCn_3piXbxrL7Dzxd8YAQSrhE0JBK9wJdJNrTL5omhpIlCWJJKLF11tWAsUJnx_2ye4T-WGSVE-i-/s320/Responsive_Web_Design_Demo_Template.svg.png" width="320" /></a><br />
Tras un largo hiato de índole temporal, regreso con esta entrada vinculada a uno de los tópicos favoritos de este Blog: las plantillas. Más puntualmente, a las plantillas denominadas "oficiales".<br />
Desde hace algunos meses Blogger lanzó 4 nuevas plantillas de estilo "<i>responsive</i>" o adaptable a distintos dispositivos de visualización... el objetivo de este post es dar un primer acercamiento a esta cuestión.<br />
<a name='more'></a><br />
<h3>
Muy tarde, pero seguro</h3>
Increíblemente, hace ya una década que empezaron a ser discutidas las bases del <a href="https://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptable" target="_blank">Diseño web adaptable</a>. Aún así, la respuesta de la plataforma Blogger ante esa realidad se demoró en exceso, y el <i>contraste visual</i> de sus blogs (de su mayoría, al menos) en comparación no sólo con los de WordPress, sino también con alternativas como Wix, Weebly, Jimdo, etc. empezó a ser notable.<br />
Está, por supuesto, la alternativa de utilizar una template “de terceros” que siga los lineamientos de un diseño adaptable, y también respete el nuevo etiquetado semántico HTML5 (muchas de las que pueden encontrarse son “copias” de plantillas diseñadas inicialmente para WordPress). El uso de esta alternativa, si bien está más que documentada en numerosos sitios de ayuda para administradores de blogs bajo Blogger, puede resultar algo intimidante para el bloguista promedio… de hecho la gran mayoría de los blogs utilizan alguna de las plantillas oficiales, más o menos personalizadas.<br />
<h4>
Por todo esto...</h4>
Es buena noticia la aparición de 4 nuevas plantillas (ahora denominadas themes):<br />
<ul>
<li>Contempo Theme</li>
<li>Soho Theme</li>
<li>Emporio Theme</li>
<li>Notable Theme</li>
</ul>
Cada una de las ellas se ofrece en cinco variedades ya preconfiguradas en colores y fuentes (sumando el total de 20 plantillas nuevas), aunque el proceso de personalización que ya existía permite darles un ajuste más fino a las mismas.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPcLpJ9mAeqE8RCHRdFyI5dnr5fL30IOGfruCctszjTNxlhDdNFXDknYnmpJwiC_OfygPk3jr_0W7mEfe1_ZHvQPtopBcspMo2F9mUgJxeIatII87QCzQI4EcXm3lCmMP56Di57AUNIJX2/s1600/Themes+2017.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="585" data-original-width="900" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPcLpJ9mAeqE8RCHRdFyI5dnr5fL30IOGfruCctszjTNxlhDdNFXDknYnmpJwiC_OfygPk3jr_0W7mEfe1_ZHvQPtopBcspMo2F9mUgJxeIatII87QCzQI4EcXm3lCmMP56Di57AUNIJX2/s400/Themes+2017.jpg" width="400" /></a></div>
Es de destacar que ahora están <i>incluidos de base</i> algunos gadgets utilizados en muchos de los blogs de otras plataformas, como ser <b>Entrada Destacada</b> (sólo una), y <b>Entradas Populares</b> (aunque sólo en páginas de entradas de blog).<br />
Dejo la lectura de detalles pormenorizados en las siguientes fuentes de información (muy recomendables):<br />
<h4>
Links de interés:</h4>
<ul>
<li>Odisea Gráfica > <a href="http://minervaurora.blogspot.com.ar/2017/04/analisis-nuevas-plantillas-Blogger.html" target="_blank">Analizando las nuevas plantillas responsive de Blogger</a> </li>
<li>OloBlogger > <a href="https://www.oloblogger.com/2017/03/nuevas-plantillas-adaptables-blogger.html" target="_blank">Nuevas plantillas adaptables de Blogger</a></li>
<li>Blogger Spice > <a href="http://www.bloggerspice.com/2017/03/blogger-new-theme.html">Blogger Officially Launched 4 stylish new Responsive Themes</a> </li>
</ul>
<hr />
Por mi parte y por ahora, me parecen una buena opción para los llamados "Blogs de tipo personal" —¿volver a las fuentes?—, pero para dar una opinión más contundente tendría que verlo trabajando en su implementación.<br />
¿Debería haber puesto ALERTA SPOILER? Chau.<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-30884289965929308002016-07-15T01:19:00.001-03:002018-02-14T07:54:40.084-03:00Tipografías en Blogger: un truco para tener en cuenta<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWeGOWkHcrIkUUP9Uh28DFzYhe0Ovu-A6mrgnfFdS2k9mfzXDvm0LsIXLaL8yjdQLTT56UfCHbSYiqLOc2BWmhvW01jH11zLiRttkPyv9YtDBEeIVbywtEDlkBzHIAZKqlbJBRTpuPLWtG/s1600/idea-1014016_960_720.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWeGOWkHcrIkUUP9Uh28DFzYhe0Ovu-A6mrgnfFdS2k9mfzXDvm0LsIXLaL8yjdQLTT56UfCHbSYiqLOc2BWmhvW01jH11zLiRttkPyv9YtDBEeIVbywtEDlkBzHIAZKqlbJBRTpuPLWtG/s200/idea-1014016_960_720.jpg" width="200" /></a></div>El uso de fuentes tipográficas cargadas de modo <i>online </i>permite no sólo el enriquecimiento visual de un sitio web: también facilita la experiencia del visitante al aportar un rápido sentido de ubicación ante la lectura de cada página.<br />
Vamos a analizar en este post una manera rápida y relativamente sencilla de dar riqueza tipográfica a nuestros blogs, usando un truco que puede implementarse directamente desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger (es decir, sin editar directamente la plantilla XML de nuestro blog).<br />
<a name='more'></a><h3>Los orígenes de la idea</h3>Para llevar a cabo la escritura del <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/06/ajustes-finos-en-la-plantilla-3.html" target="_blank">post previo</a> (que versaba también sobre las posibilidades de cambios tipográficos en Blogger) tuve que investigar en qué sección de la plantilla se reflejan los cambios hechos desde la ventana del Diseñador, específicamente aquellos relacionados a la configuración de las fuentes a ser empleadas en mi blog.<br />
Vuelvo a mostrar ahora la tabla que condensa la información relevada en ese momento, donde incluyo las 6 fuentes que elegí para ser usadas en el blog (en junio de 2016), —una plantilla del grupo Watermark—, y los selectores a los que estaban destinadas… todas las fuentes seleccionadas pertenecen al servicio de Google Fonts.<br />
<br />
<table border="0" cellpadding="2" cellspacing="0" style="width: 600px;"><tbody>
<tr> <th>Variable name </th> <th>elementos afectados </th> <th>familia de fuente elegida</th></tr>
<tr> <td>body.font</td> <td>selector="body"</td> <td>Roboto</td></tr>
<tr> <td>header.font</td> <td>selector=".header h1"</td> <td>Luckiest Guy</td></tr>
<tr> <td>tabs.font</td> <td>selector=".tabs-inner .widget li a"</td> <td>Oswald</td></tr>
<tr> <td>date.font</td> <td>selector="h2.date-header"</td> <td>Cuprum</td></tr>
<tr> <td>post.title.font</td> <td>selector="h3.post-title, .comments h4"</td> <td>Paytone One</td></tr>
<tr> <td>widget.title.font</td> <td>selector="h2"</td> <td>Paytone One</td></tr>
</tbody></table><br />
Conviene señalar dos cuestiones, una más de base y otra coyuntural:<br />
<ol><li>El sistema de configuración de Blogger permite la selección de 6 fuentes diferentes —para plantillas pre-2017—, pero <b>no permite elegir a qué selectores serán destinadas</b>: de la tabla se infiere que 4 de las mismas están destinadas a títulos, una a los links del menú principal (sólo visible si es agregada a través de un gadget), y una sola fuente al texto de base del blog (en mi caso, <i>Roboto</i>). </li>
<li>En mi configuración de fuentes, hay dos que se repiten, por lo que el sistema cargará la fuente <i>Paytone One</i> una sola vez (dicho de otra forma, sólo cargará 5 fuentes desde Google Fonts, y no 6). </li>
</ol>Del post previo nos llegaba la conclusión que añadir una fuente <i>online</i> para ser destinada, por ejemplo, a los textos del <i>footer </i>de nuestro blog, no era una tarea tan sencilla (al menos, sin meternos con el código de la template XML del blog).<br />
Pero, ¿será posible aprovechar la disponibilidad de cargar esa sexta fuente, y destinarla a un selector distinto de los previstos por el sistema?<br />
<h3>La idea en acción</h3>Veamos cómo funciona la idea con un ejemplo concreto.<br />
<h5>Paso 1</h5>Voy a reemplazar temporariamente la fuente que configuré para los títulos de los <i>posts</i> (concretamente, los selectores h3.post-title y .comments h4 ) por la fuente que quiero que el sistema cargue para un posterior uso (la fuente <i>Puritan</i>)… con esto consigo desentenderme del problema de editar directamente la plantilla.<br />
<ul><li>Abro la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger, selecciono la categoría Entrada, y cambio la fuente previa (<i>Paytone One</i> de 30 px) a <i>Puritan</i> de 24px. </li>
</ul>El selector <b>h3.post-title</b> deberá ser reconfigurado desde ya a su valor previo (en un momento veremos cómo), pero el selector <b>.comments h4</b> quedará ya con su valor definitivo —es el que elegimos para los títulos del área de comentarios en el post anterior—. <br />
<h5>Paso 2</h5>Asigno la nueva fuente <i>Puritan</i> a los textos mostrados en el footer, y también devuelvo el estilo que tenían los títulos principales de los <i>posts </i>antes de ejecutar el paso 1.<br />
<ul><li>Busco en la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger la opción Agregar CSS, y escribo lo que ves a continuación: </li>
</ul><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9ckRmZHsg8LLBN5PwaKOrVXLuWSF6zEMqMbipJVZk6iaLlySm9JvqdbCuPelW0_R_Dkww8xqQtMfHRPLDyy9Gk-AiFERE9UAsM4mwQwQfk_Weq-H9wLnRohUoSHlP0Ynj_41zgGiWs__/s1600/agregarcss-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9ckRmZHsg8LLBN5PwaKOrVXLuWSF6zEMqMbipJVZk6iaLlySm9JvqdbCuPelW0_R_Dkww8xqQtMfHRPLDyy9Gk-AiFERE9UAsM4mwQwQfk_Weq-H9wLnRohUoSHlP0Ynj_41zgGiWs__/s400/agregarcss-2.png" width="400" /></a></div>¿Algo más..? Nada más. Sólo 2 pasos.<br />
<h3>Conclusiones</h3>Como se vé, el truco propuesto es de muy rápida aplicación, y especialmente recomendable para todos aquellos que tengan algunos conocimientos básicos de HTML y CSS, pero no conozcan tanto sobre los manejos de la template XML de Blogger.<br />
Está probado en una de las plantillas “oficiales” de Blogger (del grupo Watermark)… supongo que debe funcionar en el resto de las plantillas suministradas por Blogger, aunque en otras plantillas personalizadas no lo puedo asegurar.<br />
Requiere sí el tener disponible alguna fuente del grupo de 6 que nos deja configurar fácilmente Blogger (debe haber alguna repetición de fuentes en nuestra configuración previa).<br />
<br />
<hr />Desconozco si este método o truco ya ha sido presentado por alguien en la blogosfera, así como si existe algún inconveniente o contraindicación en su aplicación… desde ya cualquier comentario está más que bienvenido. Chau.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-40701991911155556752016-06-28T07:43:00.000-03:002018-03-22T23:02:07.776-03:00Ajustes finos en la plantilla Blogger (III)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihO-CguxMd13bDIadrtQDklQdt-fDxSYeydA6P7qq91TrRXxwsZuVWEMp1cJe_wjcmMhqNfPSXpalLwlKSbGLWBqVv1eWSodIxusUX_o6mM3psnIQ932D9cIK-pDYd0tBbSh7aqVAnvTN7/s1600/Caliper-icon.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihO-CguxMd13bDIadrtQDklQdt-fDxSYeydA6P7qq91TrRXxwsZuVWEMp1cJe_wjcmMhqNfPSXpalLwlKSbGLWBqVv1eWSodIxusUX_o6mM3psnIQ932D9cIK-pDYd0tBbSh7aqVAnvTN7/s320/Caliper-icon.png" width="320" /></a></div>Hacer ajustes de diseño en la plantilla Blogger es un proceso que implica una serie de pasos, de los cuales vimos los vinculados a la <b>identificación</b> de las etiquetas HTML a las que se les aplicarán los cambios de estilo CSS.<br />
Efectuar esos cambios desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger es relativamente sencillo (para quien cuenta con conocimientos en CSS), quizás con una única excepción: cuando queremos emplear una tipografía desde servicios de fuentes <i>online…</i><br />
<a name='more'></a><a href="https://www.blogger.com/null" name="more"></a> <br />
Antes de seguir con los pasos prácticos necesarios para cambiar nuestro blog, convendrá discurrir sobre esta cuestión.<br />
<h3>Cambios de tipografía en Blogger: casos posibles</h3><h4>I – Usar fuentes del grupo <i>web safe fonts</i> (fuentes seguras)</h4>Parece un eco que nos llega del pasado, pero tener en cuenta a los grupos de fuentes que ya están instaladas mayormente en los distintos sistemas operativos sigue siendo una opción a no dejar de lado, dado que posibilitan acelerar la carga y visualización de las páginas web.<br />
Aplicar esto a nuestro trabajo sería tan simple como añadir un estilo como el que sigue:<br />
<pre><code>footer {font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }</code></pre><h5>Links de interés:</h5><ul><li>W3Schools > <a href="http://www.w3schools.com/cssref/css_websafe_fonts.asp" target="_blank">CSS Web Safe Font Combinations</a> </li>
<li>Six Revisions > <a href="http://sixrevisions.com/web-standards/why-we-still-need-web-safe-fonts/" target="_blank">Why We Still Need Web-safe Fonts</a></li>
</ul><h4>II – Usar fuentes <i>online</i> ya cargadas en la configuración básica de nuestra plantilla Blogger</h4>Por si no reparaste en el detalle, durante el proceso de configuración de nuestra plantilla “oficial” vas a poder elegir <b>6</b> familias de fuentes distintas, ya sea desde el grupo <i>web safe</i> instaladas en casi todas las computadoras, ya sea desde Google Fonts.<br />
Me tomé el trabajo de explorar en mi plantilla (del grupo Watermark, como ya comenté en un post previo), y encontré las <b>seis variables</b> asociadas a la configuración. En las plantillas XML se usan esas variables para construir algunos de los estilos CSS asociados a determinados selectores.<br />
Aquí te muestro una tabla con algunos datos relevantes de mi análisis:<br />
<br />
<table border="0" cellpadding="2" cellspacing="0" style="width: 600px;"><tbody>
<tr> <th>Variable name </th> <th>elementos afectados </th> <th>familia de fuente elegida</th> </tr>
<tr> <td>body.font</td> <td>selector="body"</td> <td>Roboto</td> </tr>
<tr> <td>header.font</td> <td>selector=".header h1"</td> <td>Luckiest Guy</td> </tr>
<tr> <td>tabs.font</td> <td>selector=".tabs-inner .widget li a"</td> <td>Oswald</td> </tr>
<tr> <td>date.font</td> <td>selector="h2.date-header"</td> <td>Cuprum</td> </tr>
<tr> <td>post.title.font</td> <td>selector="h3.post-title, .comments h4"</td> <td>Paytone One</td> </tr>
<tr> <td>widget.title.font</td> <td>selector="h2"</td> <td>Paytone One</td> </tr>
</tbody> </table><br />
NOTA: recuerdo una vez más que los datos pertenecen a la plantilla que estoy usando en junio de 2016.<br />
Ya que estas fuentes online ya han sido cargadas, una pregunta interesante surge casi naturalmente: ¿no sería posible usar alguna de esas fuentes para dar formato a otras secciones de nuestro documento?<br />
La respuesta es SI. De hecho, ya empecé a <i>enriquecer visualmente</i> el área de contenidos de este blog asignando la fuente Cuprum a los selectores h3, h4 y h5 incluidos en los posts; queda algo así:<br />
<pre><code>div.post-body h3 {font: bold normal 1.67em Cuprum; margin:.5em 0}
div.post-body h4 {font: bold normal 1.3em Cuprum; margin:.67em 0}
div.post-body h5 {font: bold normal 1.1em Cuprum; letter-spacing:1px; margin:1em 0}</code></pre><blockquote>De la tabla anterior también surge una idea interesante, que voy a dejar tanto en su enunciación como en su aplicación para una próxima entrada (…cuanto misterio!).</blockquote><h4>III – Usar fuentes <i>online</i> no cargadas previamente por la plantilla Blogger</h4>Al fin llegamos al caso que planteamos en su momento: queríamos usar la fuente <b>Puritan</b> para los textos del contenido del área de footer, y para los títulos del área de comentarios. Recordemos además que dicho planteo incluía una condición: estudiar si esto puede realizarse SIN entrar a editar directamente la template XML de nuestro blog (así, cualquiera…).<br />
El primer acercamiento que intenté para resolver esto fue apelar a la regla <b>@import</b>, que permite —entre otras cosas— importar hojas de estilo específicas para el agregado de fuentes, como el servicio que ofrece Google Fonts. Probé con algo como esto:<br />
<pre><code>@import 'https://fonts.googleapis.com/css?family=Puritan';
footer {font-family: Puritan', sans-serif; }</code></pre><i>¡Y no me funcionó!. .</i> Investigando, me enteré de la regla @import debe añadirse sí o sí en la parte superior de las definiciones CSS, y eso es algo que no se puede conseguir desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger.<br />
Pero no todo está perdido. Otras de las reglas que se incorporaron con la aparición de las especificaciones CSS3 fue <b>@font-face</b>, que permite cargar fuentes desde archivos de variados formatos (.ttf, .otf, .woff, etc.), archivos que, en principio, deben estar disponibles públicamente en la web.<br />
La manera más común de resolver esto es cargar los archivos en alguna carpeta compartida que habilitemos en la nube (en Dropbox, o Google Drive, etc), y crear los enlaces a las mismas usando @font-face —dejaré algún link de alguna página donde se describa este método—.<br />
En mi caso voy a optar por emplear un servicio de fuentes llamado <a href="https://www.google.com.ar/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0ahUKEwiP29idq9HNAhVEI5AKHSq2DEUQFggeMAA&url=https%3A%2F%2Fwww.onlinewebfonts.com%2F&usg=AFQjCNFAA2y3AAtUDZU9wx86hb5dfNAQmQ&sig2=Y5fZXtEWoEKWvwVqFau20Q">oNline Web Fonts</a> , desde donde es posible acceder a infinidad de fuentes que incluyen a la mentada Puritan (aunque en su versión 1.0). Desde el sitio nos ofrecen el código listo para ser utilizado, y además la posibilidad de descargar la fuente a nuestro ordenador, para facilitar pruebas locales. <br />
En fin, el código a agregar en la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger será el siguiente:<br />
<pre><code>/***CODIGO PARA AJUSTES TIPOGRÁFICOS - FUENTE PURITAN***/
@font-face {
font-family: "Puritan";
src: url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.eot");
src: url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.eot?#iefix") format("embedded-opentype"),
url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.woff2") format("woff2"),
url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.woff") format("woff"),
url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.ttf") format("truetype"),
url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.svg#Puritan") format("svg");
}
footer{
font-family:"Puritan" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
div#comments h4 {font-family: 'Puritan', sans-serif; font-size:24px;}</code></pre><h5>Links de interés</h5><ul><li>Lenguaje CSS.com > <a href="https://lenguajecss.com/p/css/propiedades/fuentes-y-tipografias" title="https://lenguajecss.com/p/css/propiedades/fuentes-y-tipografias">Fuentes y tipografías</a> </li>
<li>Helplogger > <a href="http://helplogger.blogspot.com.ar/2014/09/upload-and-use-custom-fonts-in-blogger.html" title="http://helplogger.blogspot.com.ar/2014/09/upload-and-use-custom-fonts-in-blogger.html">How To Upload and Use Custom Fonts in Blogger</a></li>
</ul><h3>Conclusiones finales</h3>Para quien tenga conocimientos básicos de HTML y CSS le resultará sencillo realizar ajustes en la plantilla Blogger, sin necesidad de editar directamente la template XML (ni de conocer demasiado de su estructura, etc.). Puede realizar esto desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG3GgTVybPG4yO9g0Z98-BqpKAXJ7u2uQar3O-zqkK2vmvKr0bOO42k5iirOlSD1aXamT3NmDbZT1PuqsIyUNJRy-dHlJq1W6UorEtLye2Czvlcuvnt07uo38lXziUZ8GT_3EwktVK1_Q0/s1600/agregarcss.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG3GgTVybPG4yO9g0Z98-BqpKAXJ7u2uQar3O-zqkK2vmvKr0bOO42k5iirOlSD1aXamT3NmDbZT1PuqsIyUNJRy-dHlJq1W6UorEtLye2Czvlcuvnt07uo38lXziUZ8GT_3EwktVK1_Q0/s400/agregarcss.png" width="400" /></a></div>Para el caso particular de cambios donde se pretenda incorporar nuevas tipografías <i>online, </i>vimos que el tema puede ser complicado de resolver desde la ventana anterior… en realidad en esos casos conviene editar la template XML, agregando una línea HTML como la siguiente:<br />
<pre><code><link href="https://fonts.googleapis.com/css?family=Puritan" rel="stylesheet"></code></pre>Existen numerosos tutoriales para realizar esto, así que no voy a abundar en detalles al respecto.<br />
<hr />Para un próximo <i>post</i> les mostraré un truco que funcionará bajo ciertas condiciones, que hará simple la utilización de fuentes online desde Google fonts sin tener que acceder a la template.XML, ni usar @font-face. Chau.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-89466054709772899372016-06-28T00:28:00.001-03:002018-03-22T22:55:14.771-03:00Ajustes finos en la plantilla Blogger (II)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrMoMvvGuXlfBJax4CZgIYS3yTnxUM1hmc_Azmjt4zY3YGjJi3NDOpBsCH8zzNESkiIdmQIX2Cbltsm9fX8ks7BBTAjirxDcK4fEeiDffJZAe5Iv3N5KjLjft6aRvfWkRn5gESN8nE9qYy/s1600/icon_023520_256.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrMoMvvGuXlfBJax4CZgIYS3yTnxUM1hmc_Azmjt4zY3YGjJi3NDOpBsCH8zzNESkiIdmQIX2Cbltsm9fX8ks7BBTAjirxDcK4fEeiDffJZAe5Iv3N5KjLjft6aRvfWkRn5gESN8nE9qYy/s200/icon_023520_256.jpg" width="200" /></a></div>Seguiremos ahora con el tema que empezamos en el <i>post</i> previo, pero apuntando esta vez a un <b>caso práctico</b>: voy a realizar cambios en la plantilla de este blog (en su versión de junio de 2016), agregando o sobrescribiendo estilos CSS desde la ventana de edición que me ofrece la plataforma Blogger.<br />
En caso de que no hayas leído el mencionado post, aviso que para entender los procedimientos a ser aplicados aquí te serán necesarios algunos conocimientos básicos de lenguaje HTML y de CSS… <br />
<a href="https://www.blogger.com/null" name="more"></a> <br />
<a name='more'></a><h3>Datos de la plantilla tomada como punto de partida</h3>Dado de que <b>no es probable</b> que el aspecto de este blog al momento de que estés leyendo estas líneas sea el mismo que tiene al momento de que yo estoy escribiendo este <i>post </i>(dicho más fácil… es muy probable que ya haya cambiado de mi plantilla “oficial” a otra personalizada), te algunos algunos datos de mi template a junio de 2016:<br />
<ul><li>Está basada en una de las plantillas del grupo Watermark (o Filigrana, en español). </li>
<li>Usa la fuente <b>Roboto</b> de 16px en la configuración de <i>Fuente</i> de <i>Texto de la página. </i>Esta fuente es la que aparece no sólo en los textos de los contenidos, sino también como fuente para los gadgets, y cualquier otro texto genérico. </li>
<li>Usa la fuente <b>Paytone One</b> de 30px en la configuración de <i>Fuente del título</i> para <i>Entrada</i>: esto no sólo se aplica para los títulos de los posts, sino también para los títulos en la zona de comentarios (<i>very very baaaad!</i>). </li>
</ul>Desde ya que sólo mencioné los datos que tendrán que ver con los cambios que voy a efectuar.<br />
<h3>Manos a la obra: analicemos los cambios de algunas tipografías</h3>Como <i>dato anecdótico</i> te cuento que la primer fuente que elegí para el contenido se llama <b>Puritan</b>, la que luego cambié a <b>Roboto </b>por cuestiones de legibilidad. Sin embargo, los textos del <i>footer </i>quedaban (para mi gusto) mejor en Puritan, por lo que me propongo deshacer la unicidad propuesta por la configuración básica que me ofrece Blogger.<br />
Por otra parte, tampoco me gusta la <i>preponderancia visual</i> que tienen los títulos del área de comentarios. A los fines de este mini-tutorial los voy a cambiar también a la fuente Puritan, y darles un tamaño menor.<br />
Los pasos a seguir son: <br />
<h4>1- Identificar la etiqueta HTML sobre la cual realizar el primer cambio de estilo</h4>Esta es la parte donde hay que dedicar más tiempo, ya que habrá que investigar sobre un terreno desconocido: la estructura HTML de la página.<br />
Primero debemos tener ante nuestra vista la página que querramos analizar (en nuestro caso, como el <i>footer </i>se repite en todo el blog, podría ser cualquiera).<br />
Allí abrimos el inspector incorporado en las <b>Herramientas de Desarrollador (Ctrl + Mayús + I)</b>, e intentamos detectar el elemento HTML sobre el cual aplicar los cambios.<br />
NOTA: yo lo voy a hacer en Firefox, pero —al menos— en Chrome los procedimientos son similares.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZQr9jRXVGWUyJTD2gr7RRUfIqNXr8VBgS1xGSV_MpukfyCWzpE4dpA40wXAaI5PZz4uxsQ4P3cRT5-Z9eTaTqC3vWakLXLDarw9B8ihoF3nk5A8ZmH_jguWH-o1RutoMCYF3G0oaIm_m/s1600/inspector1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZQr9jRXVGWUyJTD2gr7RRUfIqNXr8VBgS1xGSV_MpukfyCWzpE4dpA40wXAaI5PZz4uxsQ4P3cRT5-Z9eTaTqC3vWakLXLDarw9B8ihoF3nk5A8ZmH_jguWH-o1RutoMCYF3G0oaIm_m/s320/inspector1.png" width="320" /></a> </div>Es importante destacar que el proceso tendrá bastante de prueba y error, y también que muchas veces podremos encontrar más de un elemento HTML que sirva a nuestros fines: voy a empezar probando con el elemento <b><footer> </b>.<br />
Para mi prueba voy a agregar lo que se llama un elemento <i>inline </i>transitorio desde la zona donde aparece la definición de reglas de <footer>; como sólo me interesa ver cómo se afecta la visualización de la página, voy a probar con una familia de fuente instalada en mi máquina —usé Georgia como podría haber usado Arial o cualquier otra fuente común—<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMIPKh8vPUAiHwKEokyMTCasBBw9_Bh-vZ-eP9NHdzZN12M0RoYRA09n5KAe47MRuPup-4j1rbSLKM33LQODZCzvohsS3gPK1Sdil1_bz4ka2uLyQmCLfK3PSnmUzWW2SbR9-mHf6quT_/s1600/newfont1GIF.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOMIPKh8vPUAiHwKEokyMTCasBBw9_Bh-vZ-eP9NHdzZN12M0RoYRA09n5KAe47MRuPup-4j1rbSLKM33LQODZCzvohsS3gPK1Sdil1_bz4ka2uLyQmCLfK3PSnmUzWW2SbR9-mHf6quT_/s320/newfont1GIF.gif" width="320" /></a></div>Como vemos en la imagen animada, sólo cambian los textos básicos presentes en el <i>footer</i>, pero NO la fuente de los títulos (que es lo que quería)… la regla CSS de estilo a agregar debería tener incluir algo como:<br />
<pre><code>footer {font-family: 'Puritan', sans-serif;}</code> </pre><h4>2- Identificar la etiqueta HTML sobre la cual realizar el segundo cambio de estilo</h4>Como esto puede cambiar dependiendo de que la página tenga comentarios o no, habrá que revisar ambas alternativas.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNkfWtlemskjXuZ-CaYqMlLJ_eKicNm7FkYIEARr95vXvrGfJGTJbdhLfcXGvnGeZwpdM_CXNa9efkdHtM2ehJxXaj7EdDgwsyeng3jRFbeB8OBqqlZSP40ePnnwMC7SPAmh635X9AxgAx/s1600/inspector2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNkfWtlemskjXuZ-CaYqMlLJ_eKicNm7FkYIEARr95vXvrGfJGTJbdhLfcXGvnGeZwpdM_CXNa9efkdHtM2ehJxXaj7EdDgwsyeng3jRFbeB8OBqqlZSP40ePnnwMC7SPAmh635X9AxgAx/s320/inspector2.png" width="320" /></a></div>En el caso mostrado en la imagen previa, la inspección revela que la etiqueta que deberá ser afectada por el cambio de estilo es del tipo <b><h4></b> (se ven 2 en el ejemplo, y hay otra más fuera de imagen). A diferencia del caso anterior —donde <footer> es una etiqueta HTML5 única— nos encontraremos con varias etiquetas <h4> en la página, por lo que será necesario precisar a cuáles de ellas afectar.<br />
De la estructura HTML de la página se puede ver que dichas etiquetas <b>están contenidas</b> dentro del siguiente <b>div</b>, que encierra todo lo que tiene que ver con los commentarios (textos y formularios).<br />
<pre><code><div class='comments' id='comments'>… </div></code> </pre>Usando las reglas con que se escriben los estilos CSS, y como las <h4> son “hijas” de ese contenedor de identificador <b>id=’comments’</b>, deberíamos culminar con un código similar a este:<br />
<pre><code>div#comments h4 {font-family: 'Puritan', sans-serif; font-size:??}</code> </pre><hr />Los pasos que siguen los dejo para el próximo <i>post</i> dado que, como veremos, la inclusión de fuentes <i>online</i> desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger tiene sus vericuetos… Chau.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-29068331617938158802016-06-24T22:25:00.000-03:002018-03-04T15:13:15.681-03:00Ajustes finos en la plantilla Blogger (I)<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwuBsoghSWbQK9hykAoHZflKwh0MatlzwWoECen7z9gVUmQOj7fAzsz4nzkSJFnw2qqI_OtDjWjQbYGWNl0wGyYUHvPzAfSUlcoQdVN-R6r6IxExFZGzbHaIFu2GXol7owJkv0_578pkFn/s1600/knobmine.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwuBsoghSWbQK9hykAoHZflKwh0MatlzwWoECen7z9gVUmQOj7fAzsz4nzkSJFnw2qqI_OtDjWjQbYGWNl0wGyYUHvPzAfSUlcoQdVN-R6r6IxExFZGzbHaIFu2GXol7owJkv0_578pkFn/s320/knobmine.png" width="320" /></a></div>
Para quien eligió para su blog la opción de usar alguna de las plantillas”oficiales” que ofrece la plataforma Blogger, ya vimos que el sistema permite configurar rápidamente no sólo el <i>layout </i>y colocación de gadgets, sino también controlar aspectos visuales vinculados a la tipografía, colores, imágenes de fondo, etc.<br />
Este post estará dedicado a describir una manera de lograr ajustes finos sobre los diseños básicos que ofrece Blogger.<br />
<a name='more'></a>Al trabajar con las herramientas de configuración de diseño y plantilla que nos ofrece la plataforma Blogger, nos encontramos con una realidad: el abanico de opciones es limitado. Para dar sólo un ejemplo: si elegimos una fuente determinada en la sección <b>Texto de la página</b>, esa misma fuente será usada no sólo en el área de contenidos (los posts en sí mismos) sino también para el área de <i>footer</i>, para el texto en los gadgets, etc.<br />
Pero es posible ir más allá de estas limitaciones, trabajando sobre la reescritura de los estilos CSS que quedaron aplicadas a nuestra plantilla (la <i>template </i>XML) luego del proceso de configuración inicial. Para hablar más precisamente, lo que vamos a hacer es <b>sobrescribir </b>dichos estilos CSS, sin entrar directamente a la edición de la plantilla propiamente dicha.<br />
<h3>
Antes que nada, ¿será difícil de realizar?</h3>
Por lo pronto, si estás usando alguno de los navegadores más usuales (Firefox, Chrome, etc.) ya tendrás a tu disposición las herramientas para realizar el trabajo: son conocidas como <i>herramientas del desarrollador web</i> , o algún nombre similar… —probá haciendo <b>CTRL+Mayús.+ I</b> , y aparecerán ante tu vista—.<br />
Con estas herramientas podremos seleccionar los elementos que componen la página web que estemos viendo, y analizar entre otras cosas qué estilos css tienen aplicados, su <i>box model</i>, etc…<br />
En el párrafo precedente está tácitamente enmarcada la dificultad en el trabajo a realizar: es necesario un conocimiento básico de HTML y CSS para llevarlo a cabo. <br />
Pero si tus competencias en el manejo de estos lenguajes son escasas o nulas, te tengo buenas noticias: afortunadamente existen hoy en día cursos muy bien realizados sobre estos temas, te sugiero especialmente visitar los siguientes sitios:<br />
<ul>
<li>W3Schools >> <a href="http://www.w3schools.com/html/default.asp" target="_blank">HTML(5) Tutorial</a> </li>
<li>Codecademy - Lenguajes de programación >> <a href="https://www.codecademy.com/es/learn/web" target="_blank">HTML y CSS</a> </li>
</ul>
En lo que a esta entrada respecta, lo que sigue lo escribiré suponiendo que el lector posee competencias mínimas sobre las tecnologías mencionadas.<br />
<h3>
Ubiquémonos conceptualmente en el asunto</h3>
A diferencia de lo que ocurre con otros CMSs, en Blogger todas las páginas .html que se envían al lector se construyen básicamente a partir de un archivo principal —llamado <i>template </i>o plantilla—, que es un documento XML que <b>combina </b>estructuras de control y de datos propias de blogger, más etiquetas HTML clásicas, más datos de formateo con estilos CSS, más programación en javascript, más… <i>SÍ: todo esto en un archivo.</i><br />
Quizás <i>para no espantar a los iniciados</i> en el Diseñador de plantillas de Blogger existe una opción para agregar CSS personalizado, que permite escribir estilos nuevos para algunos elementos HTML particulares, o sobrescribir algunas definiciones de estilos que ya estén presentes en el documento. Aquí va una imagen:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG3GgTVybPG4yO9g0Z98-BqpKAXJ7u2uQar3O-zqkK2vmvKr0bOO42k5iirOlSD1aXamT3NmDbZT1PuqsIyUNJRy-dHlJq1W6UorEtLye2Czvlcuvnt07uo38lXziUZ8GT_3EwktVK1_Q0/s1600/agregarcss.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="128" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG3GgTVybPG4yO9g0Z98-BqpKAXJ7u2uQar3O-zqkK2vmvKr0bOO42k5iirOlSD1aXamT3NmDbZT1PuqsIyUNJRy-dHlJq1W6UorEtLye2Czvlcuvnt07uo38lXziUZ8GT_3EwktVK1_Q0/s320/agregarcss.png" width="320" /></a></div>
Es importante entender que una vez conformes con los resultados obtenidos en las vistas previas, y habiendo guardado consecuentemente los cambios, <b>los estilos que escribimos en esta ventana del editor pasarán a formar parte de la plantilla XML</b> de nuestro blog; como consecuencia de esto, la próxima vez que accedamos a esta sección del Diseñador no veremos en la ventana estos cambios realizados: si quisiéramos borrarlos, no nos quedaría más remedio que buscarlos en la plantilla, y desde allí eliminarlos.<br />
DATO DE INTERÉS: los estilos CSS que agreguemos desde la ventanita de edición van a ser los últimos que aparezcan en la plantilla, antes de la primer etiqueta <b></b:skin></b><br />
P.D. 2018: en las nuevas plantillas del 2017 los estilos CSS agregados <b>vuelven a aparecer</b> al reingresar en la opción... lo que hace todo el proceso más lógico e intuitivo. <br />
<hr />
En el post siguiente me dedicaré a dar ejemplos prácticos del uso de estas opciones avanzadas (a aplicar a este mismísimo blog)… antes de cerrar te dejo un enlace que habla con detalle de las cuestiones aquí tratadas. Chau.<br />
<h4>
Link de interés:</h4>
<ul>
<li>Miss Lavanda > <a href="http://www.misslavanda.es/2015/01/codigo-css-blogger.html" target="_blank">Cosas que necesitas saber sobre el código CSS de tu plantilla blogger</a></li>
</ul>
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-85978835396017297942016-06-10T15:59:00.006-03:002018-03-03T19:24:36.785-03:00Más sobre las plantillas Blogger “oficiales”<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgd5348HCUA-Ino9uuK-SFZ4Bz-bsVgZM9qZRw8Y8R2zJe41ZNZIe6zuWZzZmzHWcG60fsdJHjo0WRsndbHQSgUsNcJYYXd4yBjscKJNqNW7XuiXl2rLOwbVHJn-k1xdm-me1MXxB3VJbK/s1600/Configurar-los-detalles-de-la-cuenta-de-Hotmail.jpeg.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgd5348HCUA-Ino9uuK-SFZ4Bz-bsVgZM9qZRw8Y8R2zJe41ZNZIe6zuWZzZmzHWcG60fsdJHjo0WRsndbHQSgUsNcJYYXd4yBjscKJNqNW7XuiXl2rLOwbVHJn-k1xdm-me1MXxB3VJbK/s320/Configurar-los-detalles-de-la-cuenta-de-Hotmail.jpeg.jpg" width="320" /></a> En el post previo me interesó poner la lupa sobre la idea —casi mítica— que indica que "todos los blogs de Blogger se parecen demasiado", como paso previo a la temática del proceso de configuración en sí mismo.<br />
Las plantillas "oficiales" de Blogger tienen la enorme ventaja de ser muy simples de personalizar, aunque por otro lado presentan algunas <b>limitaciones </b>que van más allá de lo puramente estético (adaptabilidad a la gran variedad de dispositivos que se usan hoy en día, por ejemplo).<br />
Hablaremos también de esa cuestión en esta entrada… <br />
<a name='more'></a><h3>
Nada mejor que un video </h3>
Existen numerosas páginas dedicadas al tema de configuración de plantillas en Blogger (después dejo algunos links), pero me pareció recomendable compartir el siguiente video: <br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/sxHYIdhUm2g/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/sxHYIdhUm2g?feature=player_embedded" width="320"></iframe></div>
Como se vé, la interfaz de trabajo permite hacer cambios de forma bastante intuitiva, particularmente por dejarnos ver los resultados de la personalización en tiempo real. Para no aumentar la redundancia de la web, te sugiero también estas lecturas: <br />
<h4>
Links de interés:</h4>
<ul>
<li>Odisea Gráfica > <a href="http://minervaurora.blogspot.com.ar/2014/11/como-personalizar-el-blog-con-el.html" target="_blank">Como personalizar el blog con el Diseñador de plantillas de Blogger</a> </li>
<li>Info Oficial > <a href="https://support.google.com/blogger/answer/176245?hl=es&ref_topic=6321969" target="_blank">Cambiar el diseño de tu blog</a> </li>
</ul>
<h3>
Una importante cuestión a analizar: el <i>layout</i></h3>
<div style="text-align: right;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsyfTXTR4Vn_A3W4fJ8O9QITMPNKamZnUDqBR4fv7pk06WlwQwpsSAB-oHdtMp9dKV5wh74nhkrzcDICUqLc-2vTSNfhS4jItvXQg5JBsS7LHjO_VxOOzKCNBLB7ilr6SX6zJR1F7P23jZ/s1600/dise%25C3%25B1o+layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="227" data-original-width="740" height="122" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsyfTXTR4Vn_A3W4fJ8O9QITMPNKamZnUDqBR4fv7pk06WlwQwpsSAB-oHdtMp9dKV5wh74nhkrzcDICUqLc-2vTSNfhS4jItvXQg5JBsS7LHjO_VxOOzKCNBLB7ilr6SX6zJR1F7P23jZ/s400/dise%25C3%25B1o+layout.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Relativo al proceso anterior me parece que hay un punto sobre el cual prestar especial atención: cómo elegir la estructura visual que mejor se adecue a nuestro blog. Dicho en lenguaje más técnico: elegir un <i>layout</i>. <br />
Las estructuras —que podemos seleccionar muy fácilmente desde el área <b>Diseño</b>— son las clásicas que podemos encontrar en cualquier sitio web aún hoy en día. Pero que de a poco <i>van quedando relegadas</i> con la aparición de una amplia gama de nuevos dispositivos (especialmente los móviles) y la variedad de tamaños de pantallas con que se puede visualizar un sitio.<br />
Lo que Blogger nos ofrece con sus plantillas “oficiales” (excepción hecha de la plantilla Vistas Dinámicas, que es muy poco personalizable) es presentar la visualización de nuestro blog en 2 versiones:<br />
<ul>
<li>una versión “desktop”: podremos personalizar la anchura útil del blog, pero los <i>layouts</i> no cambiarán para adaptarse al dispositivo desde el cual el usuario se está conectando (las plantillas no utilizan lo que se conoce como <i><a href="https://es.wikipedia.org/wiki/Dise%C3%B1o_web_adaptable" target="_blank">Responsive design</a></i>) </li>
<li>una versión para celulares: pensada en principio para centrarse en el contenido base (los <i>posts</i>, bah), puede configurarse para que también se muestren algunos gadgets. Puede pensarse como una versión reducida y adaptada del blog original, donde los elementos a ser visualizados se mostrarán en <b>una única columna</b>, de la cabecera hasta el <i>footer</i>. </li>
</ul>
Esta “solución” de dividir al universo de dispositivos en dos grupos no es lo suficientemente flexible como para adaptarse con eficiencia a la actual segmentación de tecnologías existentes. Está en línea con uno de los primeros caminos para enfrentar la aparición de los <i>smartphones</i>, pero fue superada por los diseños responsivos, vigentes hoy en día.<br />
<h3>
¿qué <i>layout</i> elegir, entonces?</h3>
A pesar de lo dicho, el camino simple que nos ofrecen las plantillas “oficiales” sigue siendo una opción muy tentadora (al menos para dar los primeros pasos con la plataforma). Para enfrentar estos nuevos tiempos, convendría que se tengan en cuenta las siguientes sugerencias… <br />
<h4>
1- No usar más que una barra lateral, preferiblemente a la derecha</h4>
Con esto se consigue dejar suficiente espacio para el contenido (¿para que llegan los visitantes?). La contrapartida obvia es que tendremos menos lugar para ubicar lateralmente a los gadgets, y nos obligará a sopesar cuáles de ellos “se ganarán el puesto”.<br />
<h4>
2- Utilizar un footer dividido en columnas</h4>
Algunos de los gadgets que usualmente se colocan en barras laterales podrían quedar muy bien dentro de un footer dividido en 2 o 3 columnas (por ej., entradas populares, comentarios recientes, blog & roll, etc.).<br />
<h4>
3- No usar anchuras de blog que excedan los 1000px (+ o –)</h4>
Con ese valor, seguramente las computadoras de escritorio o las <i>nootebooks</i> visualizarán de manera adecuada el blog, y para los dispositivos de menor resolución no se vería afectada la lectura de los contenidos.<br />
<hr />
Combinando estas 3 sugerencias se pueden obtener resultados aceptables, especialmente cuando se usa un <i>footer</i> a 3 columnas.<br />
En mi plantilla actual (junio de 2016) estoy usando la configuración citada, con un ancho total de blog de 1020px, y un ancho en la barra lateral derecha de 320px. Te dejo una imagen para que veas como cada zona se integra con fluidez.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"> <tbody>
<tr> <td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxltxdxdnH4x59WHCb5KyiJb2advQ6hQsFRTGQf01aQe8wShcRgM8glsE3NHfXoC2MhmJ8QW40hdXHC2H_vAlB96jnMqbQQIAMiFBEJIHN3DnG1Vqz-5BqkzuxUJNGDD-SIRJ_OLYmyscD/s1600/footer-3-col.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="127" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxltxdxdnH4x59WHCb5KyiJb2advQ6hQsFRTGQf01aQe8wShcRgM8glsE3NHfXoC2MhmJ8QW40hdXHC2H_vAlB96jnMqbQQIAMiFBEJIHN3DnG1Vqz-5BqkzuxUJNGDD-SIRJ_OLYmyscD/s400/footer-3-col.png" width="400" /></a></td></tr>
<tr> <td class="tr-caption" style="text-align: center;">layout usando 3 columnas en el footer </td></tr>
</tbody></table>
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-69563481709242833992016-06-01T07:55:00.000-03:002018-03-22T22:50:44.240-03:00Aún estás a tiempo: elegí tu plantilla Blogger<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbirn3maFmku8mHxkp1boiQQRoUC5xonxBPWRiLxVArvJocmrkJxcNPO_vIIBQiYeSTd7txZEJlrhYGPmOpwzW9DQ6-RHnt8_W9wJ1wcy6SCm4FSDVeo1LNNPa71CluG2nnB8TDp5ASBRC/s1600/boy-1300226_960_720.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbirn3maFmku8mHxkp1boiQQRoUC5xonxBPWRiLxVArvJocmrkJxcNPO_vIIBQiYeSTd7txZEJlrhYGPmOpwzW9DQ6-RHnt8_W9wJ1wcy6SCm4FSDVeo1LNNPa71CluG2nnB8TDp5ASBRC/s320/boy-1300226_960_720.png" width="320" /></a></div><div style="text-align: center;"><i>¿¿¿Cansado de que su blog se parezca a millones de blogs en la blogosfera??? ¡¡¡No más!!! Con el “Super Blogger Template Designer″ usted tendrá el blog que siempre soñó!!!!”</i></div>Perdón. Dado mi escaso número de visitas tuve que contratar a expertos en SEO y marketing que me sugirieron algunos "pequeños cambios" en este blog…<br />
En este post vamos a hablar de las plantillas “oficiales” de Blogger… “Mitos y verdades”. <i>¡¡¡No te lo pierdas!!!</i><br />
<a name='more'></a><i></i><br />
<blockquote><div style="text-align: center;">OK: voy a empezar con una confesión. <i>Nunca me gustó demasiado Blogger.</i></div></blockquote>Me pareció que el único mérito de esta plataforma era la <b>rapidez </b>y <b>simpleza </b>al momento de comenzar con un blog, pero un sistema falto de espacio para personalizar creativamente nuestro sitio —que a todo esto no dejaba de ser un blog… debiera haber empezado diciendo <i>"nunca me gustaron demasiado los blogs"</i>—<br />
Luego de haber experimentado algún tiempo con un par de CMSs (más que nada Drupal), y parado en el lugar de aquellos que creen que un blog es una herramienta potencialmente útil desde el punto de vista educativo (pero que no tienen mucho tiempo para hacerse expertos en tecnologías web), mi mirada cambió.<br />
Si lo importante es el contenido, ¿qué importa si el sitio se termina pareciendo a otros miles de sitios? ¿Qué importa si no es demasiado configurable?<br />
<h3>Pero, ¿será tan así?</h3>Como una imagen vale más que mil palabras, y un video está compuesto de millares de ellas…<br />
<div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/r6haqZoivBQ/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/r6haqZoivBQ?feature=player_embedded" width="320"></iframe></div><span id="goog_589662620"></span><span id="goog_589662621"></span> <br />
La idea de mostrarte este video es que veas de un pantallazo que es posible dar <i>cierto grado</i> de <b>identidad visual</b> a un blog que use las plantillas básicas que nos ofrece Blogger.<br />
El pequeño aporte que puedo hacer en esta entrada será echar luz sobre algunas cuestiones puntuales que no hay que perder de vista al momento de elegir alguna de dichas plantillas.<br />
Pero antes de seguir, <b>te recomiendo que leas</b> una info completa, clara y detallada sobre este tema que encontré en <b>Blog en Internet</b> > <a href="http://www.blogeninternet.com/2013/06/elegir-entre-las-7-plantillas-basicas.html" target="_blank">Elegir entre las 7 plantillas básicas de Blogger</a><br />
<h3>¿Qué te puedo recomendar? (modestamente)</h3><ul><li>Primero que nada, no te dejes llevar tan rápidamente por lo vinculado a colores, imágenes o tipografías: todo eso es configurable posteriormente. </li>
<li>En caso que tu blog no tenga incorporado un menú principal superior (generado por el gadget Páginas) agregá alguno para ver como se integra al diseño. </li>
<li>De manera similar, conviene agregar algunos gadgets (aunque sea provisionalmente) en la región del footer del <i>layout</i>. </li>
<li>Salvo que tengas en mente algo muy específico, no te aconsejo la plantilla Vistas Dinámicas: es muy llamativa pero difícil de personalizar, y su funcionamiento de cara al visitante no me parece muy claro. </li>
<li>Hablando ahora de los otros 6 grupos de plantillas restantes, la principal diferencia entre ellas está —en cuanto a la <b>legibilidad </b>tanto del contenido como de los gadgets— en el diferente uso que hacen de las <b>transparencias</b>. Estas permiten agregar una dimensión estética a nuestras páginas, pero muchas veces al costo de perder claridad sobre lo que se lee. </li>
</ul><u>Antes de cerrar este post, una reflexión final:</u><br />
Si estás embarcado en la creación de un blog con finalidades educativas, tu diseño web no tiene que perder nunca de vista que <b>el protagonista debe ser el contenido</b>, y que toda decisión estética debe estar al servicio del mismo: siempre que se pueda, realzar dicho contenido, y nunca obstaculizarlo o distraer la atención de nuestros lectores. Chau.<br />
<hr /><h4>POST DATA 2018:</h4>Por si no estás enterad@, Blogger a puesto a disposición de los blogueros 4 nuevas plantillas a partir de marzo de 2017: la particularidad de las mismas es que son (al fin) de tipo adaptativo... te sugiero leer mis nuevos post de 2018 donde comienzo a hablar de las mismas. <a href="https://diario1nuevoblogger.blogspot.com.ar/2018/01/nuevas-plantillas-oficiales-al-fin.html" target="_blank">MIRÁ AQUÍ</a><br />
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-67355942692401921922016-05-30T07:48:00.000-03:002018-03-04T14:39:01.945-03:00Dilemas de 1 nuevo blogger<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisDtr6K11NWMMhtHZ9rieTDJY3FYVz8PPau_e5U8FMWync7MKn_3UibNV21BGo-t2v6fTlVtXfTG_eTcckaCgGk573aD_9mVEARXLvpFgVaoEFPeYFsc63JIB8YM6Iw8FPUjc9LahWoO_s/s1600/yikaEqbrT.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisDtr6K11NWMMhtHZ9rieTDJY3FYVz8PPau_e5U8FMWync7MKn_3UibNV21BGo-t2v6fTlVtXfTG_eTcckaCgGk573aD_9mVEARXLvpFgVaoEFPeYFsc63JIB8YM6Iw8FPUjc9LahWoO_s/s320/yikaEqbrT.jpg" width="320" /></a><sub></sub>Concluida la primera etapa en donde se puede decir que <i>el blog está funcionando</i>, ya habiendo aprendido las bases sobre la creación de los distintos tipos de contenidos (<i>post </i>y <i>pages</i>), del uso de etiquetas, de la inclusión de un menú principal, etc., aparece una inevitable pregunta…<br />
<br />
<div align="center">
<span style="font-size: 1.5em;">¿por dónde seguir?</span></div>
<a href="https://www.blogger.com/null" name="more"></a><a href="https://www.blogger.com/null" name="more"></a> <br />
<a name='more'></a>Quiero pensar que todo aquel que empezó, y todo el que empezará con Blogger tendrá a esa dichosa pregunta en su camino: como un iniciado en esta plataforma <i>yo no soy la excepción</i>.<br />
<sub></sub><sub></sub><sub></sub>Para la elaboración de los post que anteceden a éste estuve (como corresponde) investigando y buceando en una gran cantidad de fuentes, y me fui inevitablemente cruzando con <i>tips</i>, trucos, y soluciones a problemas diversos <b>que ni siquiera tenía en mente</b>. Y algo así como una sensación de vértigo me ha ido ganando… ¡hay tanto por hacer!<br />
Pero también —y es un consejo para dejar a quien esté creando su blog— fui haciendo este camino con una <i>mirada curiosa</i>, tratando de ver (especialmente cuando visitaba sitios que usan Blogger) como se resolvían en cada sitio cuestiones vinculadas al <i>layout</i>, <i>gadgets</i> que usaban, tipos de menús y su ubicación, y ciertos cambios respecto a como la plataforma básica funciona. Y encontré cosas interesantes.<br />
<h3>
¿Por dónde seguir, entonces?</h3>
Teniendo en cuenta que este blog está pensado como fuente de información para quienes estén creando, también como novatos, su propio blog, un criterio orientativo a seguir es:<br />
<blockquote>
<div align="center">
Cubrir primero aquellas temáticas que todo nuevo Blogger pueda resolver sin tener grandes conocimientos técnicos, y que pueda allanar con las (elementales) herramientas de configuración que la plataforma provee.</div>
</blockquote>
Hay una lista con cuestiones que caen dentro de ese criterio, como ser:<br />
<ul>
<li>Selección de plantilla a tomar como punto de partida del diseño visual. </li>
<li>Elección del layout más adecuado a nuestro blog. Ajustes de tamaño de ancho. </li>
<li>Elección y configuración de gadgets. Criterios de elección. </li>
<li>Cambios en la tipografía: fuentes, colores y tamaños. </li>
</ul>
NOTA: en general, todos aquellos temas que involucren la manipulación de la plantilla (<i>template</i>) XML caerán fuera de este criterio, aunque tarde o temprano quien quiera personalizar medianamente su blog deberá “meter mano” en ese inefable archivo XML.<br />
<hr />
Y ya que venimos hablando de criterios, voy a crear 3 etiquetas nuevas para dar una clasificación del nivel de los contenidos presentados, de acuerdo a distintos grados de dificultad: <b>básico</b>, <b>intermedio</b> y <b>avanzado</b> (¡que original!). Como en toda aplicación de un nivel de clasificación… <i>tendrá mucho de subjetivo</i>. Las cuestiones enunciadas en la lista previa caerán dentro de la categoría básico, entonces.<br />
<hr />
<h3>
Por dónde seguir</h3>
El listado que escribí previamente abarca temas muy diversos, y puede ser discutible con cual de ellos empezar primero.<br />
A menos que ya tengas en tu mente como querés que luzca tu blog y que funcionalidades le va a brindar al visitante, me parece que lo primero que habría que determinarse es <b>cuáles gadgets incluir en nuestras páginas</b>… Teniendo eso en claro va a ser más sencillo definir el tipo de <i>layout</i> (o presentación, maquetación, disposición, en nuestro idioma) que nos convenga más, para luego avanzar sobre la personalización de la parte visual del blog.<br />
Lo bueno es que Blogger permite hacer estas cuestiones de un modo sencillo, y se pueden ir probando distintas alternativas hasta llegar a alguna que nos satisfaga desde el punto de vista funcional — primero— y estético —después—. Y cambiar más adelante “sin miedo a que se rompa nada”.<br />
Con la sensación de que este post no le servirá a nadie, pero con mis conviciones en pie, me despido. Chau.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-77309468230380805332016-05-28T17:53:00.000-03:002018-03-22T22:46:58.460-03:00Contacto con Google Forms (III)<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4omdck-L3AfTfs1aL8dWTEvMTC3R1Iz9bPIJclulHE_lC0z2Vk7q2MyXsDERZADPgXPcAsnLMLZoSy6CxmEzhJqw9plXzSWzYmCmwWkW23Iobc7FUUbn718KyWaZSWGPMdq8lO54r0mFU/s1600/forms2+blogo.png" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4omdck-L3AfTfs1aL8dWTEvMTC3R1Iz9bPIJclulHE_lC0z2Vk7q2MyXsDERZADPgXPcAsnLMLZoSy6CxmEzhJqw9plXzSWzYmCmwWkW23Iobc7FUUbn718KyWaZSWGPMdq8lO54r0mFU/s200/forms2+blogo.png" width="200" /></a>Punto final de nuestro <i>cuasi</i>-tutorial que trata sobre la creación de una página de Contacto en Blogger, usando un formulario desarrollado con Google Forms.<br />
Todo el trabajo hasta el momento fue realizado y guardado en Google Drive… llega el momento de regresar al trabajo sobre nuestro blog.<br />
<a name='more'></a><br />
Terminamos la <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/contacto-con-google-forms-2.html" target="_blank">segunda parte</a> con la obtención de un código, que es el que debemos insertar en nuestro blog para poder acceder al formulario.<br />
Dicho código tenía la forma:<br />
<div style="background-color: #eeeeee; text-align: center;"><span style="font-family: "courier new" , "courier" , monospace;"><iframe src="https://docs.google.com/forms/d/XX-XXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXX/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Cargando...</iframe></span> </div><br />
Vamos a explicar rápidamente de que se trata tanta <i>cosa rara…</i><br />
<hr /><h3>La etiqueta IFRAME</h3>Si buscás en la web por <b>etiqueta iframe html </b>te podés encontrar con medio millón de resultados… para nuestros fines al menos debés conocer:<br />
<ul><li>los documentos HTML (páginas) se construyen usando etiquetas de diversa índole (posicionales, semánticos, funcionales, etc.), normalmente no visibles al lector. Suelen trabajar de a pares <i>apertura-cierre.</i></li>
<li>las etiquetas <iframe> permiten abrir un cuadro (o ventana) dentro de una página web <i>para mostrar otra página web</i>, generalmente de un sitio externo, posiblemente para mostrar un servicio, un video, etc.</li>
</ul>En nuestro caso, con el código anterior estaremos colocando (<i>incrustando</i>) una ventana o marco en donde se verá un documento tipo formulario, cargado desde <b>docs.google.com</b>.<br />
<h4>Link de interés</h4><ul><li>LibrosWeb > Introducción a XHTML > Otras etiquetas importantes > <a href="http://librosweb.es/libro/xhtml/capitulo_11/iframes.html" target="_blank">11.4. Iframes</a> </li>
</ul><hr />Luego de esta inevitable digresión, seguimos con la secuencia del trabajo desde donde dejamos en el <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/contacto-con-google-forms-2.html" target="_blank">post anterior</a>.<br />
<h4>Paso 10: crear la página de Contacto y vincularla al menú principal </h4>Si venís leyendo los contenidos de este blog, sabrás que el tema creación de páginas ya está cubierto en la entrada <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/crear-y-vincular-una-pagina.html" target="_blank"><i>Crear (y vincular) una página</i></a>…sino ahora te estás enterando. Los detalles los podés encontrar allí.<br />
<ul><li> Creé una página (no una entrada) de nombre Contacto ► el sistema automáticamente le asigna un nombre (que no se puede cambiar).</li>
<li><b>Usando el modo de edición HTML</b>, copié el código <span style="font-family: "courier new" , "courier" , monospace;"><iframe</span><i> ...</i> del que venimos hablando, en área de redacción del contenido de la página. Opcionalmente puede estar precedido de un texto explicativo.</li>
</ul>Queda algo así:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZm3HcOv1EadKvjQx69ik-VT7jSp_f0-aVgdGNq0c-ugMGRXyalw1rK6_EJWVuuM_1zVhyphenhyphenknlbNtsKcow5NyNdkREhuS7HkGj1w_100UN7fNQ4-poumE0nkWwacZB0tR-sXYxt8L5xc8E/s1600/forms10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUZm3HcOv1EadKvjQx69ik-VT7jSp_f0-aVgdGNq0c-ugMGRXyalw1rK6_EJWVuuM_1zVhyphenhyphenknlbNtsKcow5NyNdkREhuS7HkGj1w_100UN7fNQ4-poumE0nkWwacZB0tR-sXYxt8L5xc8E/s400/forms10.png" width="400" /></a></div><ul><li>Antes de crear un vínculo a esta página en el menú principal, visualicé los resultados, muy parecidos a lo que ves aquí : <a href="http://diario1nuevoblogger.blogspot.com.ar/p/contacto-2.html" target="_blank">Contacto 2</a> —recordemos que estamos usando la nueva versión de Google Forms—. Es buen momento que veas como quedó antes de seguir.</li>
</ul>NOTA: para probar los resultados con el nuevo Google Forms, creé una página Contacto 2, con un formulario alojado en otra cuenta de Google...<br />
NOTA 2: hice algunos cambios en el ancho (width) y altura (height) del iframe, para que se adapte algo mejor a mi blog.<br />
<h3>Trabajo ¿terminado?</h3>Desde el punto de vista <u>funcional</u>, el formulario cumple las espectativas básicas.<br />
Desde el punto de vista de como el formulario <u>se integra visualmente</u> a nuestro blog, <b>yo no estoy conforme</b>: se ve todo un espacio vertical inutilizado, y hay que bajar demasiado para llegar al primer campo a rellenar (Nombre).<br />
<h4>La pregunta sería: ¿no se puede arreglar?</h4>Para llegar a dar una respuesta hay que recordar que, por estar incrustado a través de etiquetas <span style="font-family: "courier new" , "courier" , monospace;"><iframe></span>, estamos viendo un contenido<b> no generado desde Blogger</b>, sino una página HTML donde se incluye el formulario, que está <b>generada por el sistema de Google Forms</b>.<br />
Y al momento de escribir esto —mayo de 2016— las nuevas Google Forms no dan opciones de configuración que nos ayuden sobre esta cuestión.<br />
Pero las Google Forms están en continuo desarrollo, y quizás permitan en un futuro la personalización de los contenidos que vayan a ser insertados en sitios web (usando hojas de estilo CSS o algo similar); hoy por hoy no parece posible.<br />
<h3>Ir un paso atrás es una solución </h3><i>¿Me leí tres post sólo para ésto?</i> Casi puedo leer tu mente. Pero yo empecé estos relatos diciendo que iba a hacer una reconstrucción de mi experiencia, así que…<br />
<br />
<h3>Reconstrucción de los hechos (final)</h3>Luego de un primer resultado<i> para mi gusto decepcionante</i>, se me ocurrió reintentar la creación del formulario, pero esta vez <u>cambiando a las Google Forms en su versión anterior</u>… <b>¡y la magia sucedió! </b>(la perseverancia rinde sus frutos).<br />
<ul><li>el formulario antes realizado fue <b>reconvertido </b>a la versión anterior de Forms sin mayores problemas, es decir, lo trabajado hasta aquí seguía teniendo validez.</li>
<li>la visualización en vista previa de mi formulario <i>reconvertido</i> a la versión previa de Forms me mostró algo interesante: es <b>visualmente más aceptable</b> si se lo piensa como algo que va a ser incrustado en una página web , usando etiquetas <span style="font-family: "courier new" , "courier" , monospace;">iframe</span>).</li>
<li>la versión anterior de Google Forms me deja personalizar <i>en parte</i> el formulario de contacto… yo cambié más que nada las tipografías.</li>
</ul>De hecho, es el formulario que podés ver en <a href="http://diario1nuevoblogger.blogspot.com.ar/p/contacto.html" target="_blank">mi página de Contacto actual</a> (y que no pienso cambiar hasta que alguna razón de peso lo amerite).<br />
<h3>Conclusión</h3>Las Google Forms son una manera <u>funcionalmente </u>aceptable de incluir formularios de Contacto en una página web específica, para un blog que trabaje con Blogger.<br />
De cualquier manera, si en el blog no se espera otro uso de formulario que en la página de contacto (una situación bastante normal) me parece que acceder a servicios externos como los que <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/en-busqueda-formulario-contacto.html" target="_blank">ya mencionamos</a> (Wufoo, JotForm, EmailMeForm, etc.) es una mejor solución:<br />
<ul><li>los formularios de servicios externos son más configurables/personalizables.</li>
<li>los mensajes enviados desde el sitio nos llegan directamente a nuestra casilla de email.</li>
<li>son más simples de implementar.</li>
</ul><i>End of transmission</i>. ChauAnonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-68391461330807358022016-05-26T22:09:00.001-03:002018-03-22T22:42:43.225-03:00Contacto con Google Forms (II)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4omdck-L3AfTfs1aL8dWTEvMTC3R1Iz9bPIJclulHE_lC0z2Vk7q2MyXsDERZADPgXPcAsnLMLZoSy6CxmEzhJqw9plXzSWzYmCmwWkW23Iobc7FUUbn718KyWaZSWGPMdq8lO54r0mFU/s1600/forms2+blogo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4omdck-L3AfTfs1aL8dWTEvMTC3R1Iz9bPIJclulHE_lC0z2Vk7q2MyXsDERZADPgXPcAsnLMLZoSy6CxmEzhJqw9plXzSWzYmCmwWkW23Iobc7FUUbn718KyWaZSWGPMdq8lO54r0mFU/s200/forms2+blogo.png" width="200" /></a></div>En esta entrada seguiremos con nuestro <i>cuasi</i>-tutorial que trata sobre la creación de una página de Contacto en Blogger, usando un formulario desarrollado con Google Forms.<br />
Es oportuno señalar que al culminar la <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/contacto-con-google-forms-1.html" target="_blank">primera parte</a> conseguimos una primera versión del formulario, y que estuvimos trabajando con la nueva versión de Google Forms…<br />
<br />
<br />
<a name='more'></a>Por si te perdiste la primera parte, mencioné entre otras cosas que iba a intentar relatar la secuencia de pasos que me llevaron a la construcción de mi página de contacto actual (vaya a saber si sobrevive ese formulario GForm al momento de tu lectura)…<br />
<h3>Reconstrucción de los hechos (continuación)</h3>Ya tengo el formulario de contacto almacenado en GDrive; lo que sigue es aprender cómo almacenar los datos del envío.<br />
La versión nueva de Google Forms guarda los datos recogidos <b>siempre </b>en una Hoja de Cálculo de Google (<i>pensá en Excel</i>) , almacenada también en GDrive (la versión anterior de Google Forms también lo permite, aunque daba otras opciones).<br />
Lo que sigue es entonces crear dicha Hoja y enlazarla a nuestro formulario…<br />
<h4>Paso 5: Configurar el manejo de la info recibida</h4>Al volver al Formulario de Contacto que almacenamos en GDrive, vamos a la sección Respuestas y vemos, como es lógico, que se indica que no se ha recibido ninguna, y que está configurado para recibirlas.<br />
<ul><li>Abrimos el menú (sí, esos 3 puntitos) y vamos a <b>Seleccionar destino de las respuestas</b>.</li>
<li>En la ventana emergente opté por la opción <b>Crear Hoja de cálculo</b>: aparece un nombre predeterminado para dicha hoja, que dejé sin cambiar.</li>
<li>Aparecerán un par de notificaciones informandonos que se creó la Hoja y que fue enlazada al Formulario.</li>
<li>La susodicha hoja <i>Formulario de Contacto (respuestas)</i> la puedo encontrar en la misma carpeta Drive donde se almacenó el formulario.</li>
</ul>Como siempre, alguna imagen de ayuda no está de más:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkF0loXlxpUjlU_btfp7umopssTKQZVQxiMd96kaRpNKKRZenuyczbAWv__HTdCCoYYG_TW_IsXgstH0TmcikDI7zoumDN0bYc2wgxZTKPYWjqHUxhU2D6SJz8UQFAOzd-yHS9_mdAbAJQ/s1600/forms6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkF0loXlxpUjlU_btfp7umopssTKQZVQxiMd96kaRpNKKRZenuyczbAWv__HTdCCoYYG_TW_IsXgstH0TmcikDI7zoumDN0bYc2wgxZTKPYWjqHUxhU2D6SJz8UQFAOzd-yHS9_mdAbAJQ/s400/forms6.png" width="400" /></a></div><h4>Paso 6: cambiar las opciones de compartir de la hoja de cálculos recién creada</h4>La privacidad de los datos enviados por los usuarios el llenar el formulario debe resguardarse: sólo el o los administradores deben poder leerlos. Esto se logra cambiando las opciones de compartir <b>de la hoja de cálculo</b>.<br />
Por si no estás habituad@ a GDrive, te dejo como deberían quedar esas opciones de compartir: faltaría agregar, si es su caso, las personas habilitadas.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlnsH0RU_4WNl8qBmCRihz35kkeZ-f5jwFJ8xYJ1qVQksm2ybLx4jYq2VhbycpZrYEQIiFqMOHhVQM8Mf3YAfhE41kWCspDF9f6JQ5g_CiB8ALXUT3CgA7psENGLvpicjHb2QLhipxzbf0/s1600/forms7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlnsH0RU_4WNl8qBmCRihz35kkeZ-f5jwFJ8xYJ1qVQksm2ybLx4jYq2VhbycpZrYEQIiFqMOHhVQM8Mf3YAfhE41kWCspDF9f6JQ5g_CiB8ALXUT3CgA7psENGLvpicjHb2QLhipxzbf0/s400/forms7.png" width="400" /></a></div><h4>Paso 7: programar la notificación por correo automática</h4>Es muy útil poder recibir un aviso de cuando alguien utilizó nuestro formulario de contacto, lo que en nuestro sistema equivale a decir: cuando alguien agregó sus datos a nuestra hoja de cálculo <i>Formulario de contacto (respuestas).</i><br />
Para lograr esto hay que configurar dicha hoja como vemos en la imagen:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5DBTOduD3LuA86zxd_0qqMi8ktKpCHgv8naSWWQyYj7c5om7siUgrBddWSA66B9XB0MDaWxAY4sEXMeE8bNLuCJJ86vx8xLyEUJmUaozPr4AOIURSy6fGjKaJE3kNwlQQydP284Ic3y0B/s1600/forms8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5DBTOduD3LuA86zxd_0qqMi8ktKpCHgv8naSWWQyYj7c5om7siUgrBddWSA66B9XB0MDaWxAY4sEXMeE8bNLuCJJ86vx8xLyEUJmUaozPr4AOIURSy6fGjKaJE3kNwlQQydP284Ic3y0B/s400/forms8.png" width="400" /></a></div>NOTA 1: la nueva versión de GForms también admite la notificación desde el área Respuestas del formulario (ver la imagen del paso 5).<br />
NOTA 2: en las notificaciones por correo <b>no nos llegarán los datos</b> que nos envíe el usuario: sus mensajes podremos leerlos desde la hoja de cálculo, o también desde los resultados del formulario, pero siempre accediendo a GDrive.<br />
<h4>Paso 8: darle un poco de estilo a nuestro formulario</h4>Aunque esto es <i>opcional</i>, no está de más adecuar nuestro formulario al estilo que tenga nuestro blog (letras, colores de texto, etc.).<br />
Al momento de escribir este post —mayo de 2016—, la nueva versión de Google Forms no dá demasiadas posibilidades de personalización, pero es de esperar cambios al respecto.<br />
<h4>Paso 9: obtener el código para incrustar el formulario en nuestro blog</h4>Finalizados los trabajos de creación del formulario de contacto y configurar todo lo que tiene que ver con la gestión de los envíos de los usuarios (todo dentro de GDrive), sólo resta obtener el código necesario para incrustar el formulario en nuestro página de Contacto —aún por crear—<br />
<ul><li>Hay que reabrir el formulario de ser necesario, y pulsar en el botón ENVIAR: la opción que usaremos en la ventana emergente es <b>Insertar HTML</b></li>
<li>Solo resta copiar el código mostrado, que usaremos , ahora si, en Blogger. El código es único, y puede volver a consultarse en cualquier momento.</li>
</ul>Verás algo como esto:<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbkYwbXT-WT7By6i7HtCm0CF5TKZBl7cRLbMTN600d6KpIPwza1CSiRwDEBbpjDUPQ_0UVUbEAoh_coEv9IXZRUWohNeyRWi5Dy1EhcjNUmUHnet-_BsHe0z02LOYwXEeIYlZjPxFhH7TU/s1600/forms9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbkYwbXT-WT7By6i7HtCm0CF5TKZBl7cRLbMTN600d6KpIPwza1CSiRwDEBbpjDUPQ_0UVUbEAoh_coEv9IXZRUWohNeyRWi5Dy1EhcjNUmUHnet-_BsHe0z02LOYwXEeIYlZjPxFhH7TU/s400/forms9.png" width="400" /></a></div>El código —que no se vé completo en la imagen— tiene la forma:<br />
<div style="background-color: #eeeeee; text-align: center;"><span style="font-family: "courier new" , "courier" , monospace;"><iframe src="https://docs.google.com/forms/d/XX-XXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXX/viewform?embedded=true" width="760" height="500" frameborder="0" marginheight="0" marginwidth="0">Cargando...</iframe></span> </div><hr />Lo que resta por hacer lo vamos a trabajar desde dentro de Blogger… me parece adecuado dejarlo para el próximo post. Chau.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-13646757999876539092016-05-25T16:52:00.001-03:002018-02-07T20:47:26.993-03:00Contacto con Google Forms (I)<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSwsaQMjPq_VT3WDgLoXIoVNMmMIJVIunRcs2Z6HlVlgbTJbMhyphenhyphenER7GXbh2mWdck3xoiIuJPiK6Gx0LQI4WClRgTdPwDRUQXbPoHoyA-tmB43bgvxHta8NQlS4RclkOspkHRtbhILF8Fr/s1600/forms2+blogo.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSwsaQMjPq_VT3WDgLoXIoVNMmMIJVIunRcs2Z6HlVlgbTJbMhyphenhyphenER7GXbh2mWdck3xoiIuJPiK6Gx0LQI4WClRgTdPwDRUQXbPoHoyA-tmB43bgvxHta8NQlS4RclkOspkHRtbhILF8Fr/s200/forms2+blogo.png" width="200" /></a>Veníamos hablando de cómo implementar una página de contacto en Blogger, y las alternativas para hacerlo.<br />
Una de ellas es usando Google Forms, y es la manera que elegí para crear mi formulario de contacto en este blog —hasta nuevo aviso—<br />
En este post comienzo a contar como lo logré…<br />
<br />
<a name='more'></a><h2>
Mis razones para probar con Google Forms</h2>
<ol>
<li>Si tengo un blog en Blogger ya tengo a mi disposición el uso de <b>GDrive</b> y una serie de aplicaciones: para implementar esta solución vamos a necesitar <b>Forms</b> y <b>Spreadsheets </b>(Formularios y Hojas de cálculos).</li>
<li>Cuando un usuario use el formulario de contacto, los datos del envío se almacenarán en una hoja de cálculo almacenada en GDrive; es posible configurarla para que nos llegue por email un aviso de tal evento. Dicha hoja de cálculo <i>puede ser accesible para todos los administradores del blog</i> (si es configurada para ello), lo que puede ser una ventaja para trabajos grupales.</li>
<li>Usando Google Forms se pueden crear e incrustar una gran variedad de formularios dentro del blog, lo que hace de esta herramienta algo potencialmente muy útil para sitios con finalidad educativa.</li>
</ol>
De cualquier manera me motivó más que nada la curiosidad, y lo que pudiese aprender en el camino…<br />
<h2>
Reconstrucción de los hechos</h2>
Como ya tengo <a href="http://diario1nuevoblogger.blogspot.com.ar/p/contacto.html" target="_blank">mi página de contacto</a> funcionando, voy a tratar de reproducir el trabajo desde cero, incluyendo en la secuencia algo que no pude solucionar en su momento (veremos si puedo ahora, quizás se solucione en el futuro… ¡cuanto misterio!).<br />
Como siempre empiezo investigando, y encuentro tres fuentes de información que paso a poner a tu disposición:<br />
<ul>
<li>SN tecnologías > <a href="http://www.santinavarro.es/como-crear-formulario-google-drive/" target="_blank">Cómo crear un formulario de contacto en Google Drive </a></li>
<li>Diarios de la nube > <a href="http://www.diariosdelanube.com/2013/10/crea-formularios-para-tu-blog-y-recibe.html" target="_blank">Crea formularios para tu Blog y recibe notificaciones... </a></li>
<li>iniciaBlog > <a href="http://www.iniciablog.com/2013/10/como-insertar-un-formulario-drive-en-blogger.html" target="_blank">Blogger y Google Drive Formularios</a> </li>
</ul>
<div style="text-align: center;">
<blockquote class="tr_bq">
Antes de empezar: conviene aclarar que buena parte del trabajo se realiza fuera de la plataforma Blogger… en este caso trabajamos con Google Drive y algunas Google Apps. </blockquote>
</div>
Entro en GoogleDrive, creo una carpeta <b>Blog</b> ► clic derecho en la carpeta ►Compartir... ► Avanzada ► cambiar quien tiene acceso ► Activado: <b>público </b>en la web<br />
Entro en mi nueva carpeta, y pulso NUEVO para crear un <b>nuevo formulario</b>…<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYrkp97A_VrHysPhSKNRTIUGdNIMwGOcfeAJbgGODfEr43s3Fd0aYn0_enGUPnNOiBEl4yLLbmJhRa9I1f0VV-liJD9kXmRa-qO6zTIP3Fan1Yg8RlsVHtkElkCMO0jrPjxtHNtFm_uIJ/s1600/forms1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYrkp97A_VrHysPhSKNRTIUGdNIMwGOcfeAJbgGODfEr43s3Fd0aYn0_enGUPnNOiBEl4yLLbmJhRa9I1f0VV-liJD9kXmRa-qO6zTIP3Fan1Yg8RlsVHtkElkCMO0jrPjxtHNtFm_uIJ/s400/forms1.png" width="400" /></a></div>
<div style="text-align: center;">
<span style="font-size: large;">Acepto en la pantalla que me avisa que el formulario va a estar compartido, y <i>Surprise!</i> : me aparece "el <b>nuevo</b> Google Forms".</span></div>
Luego de mascullar algunos insultos, no me amilano… <i>¿no querías experimentar?</i> me dije. Como tenía en mente la secuencia de pasos de lo que había leído, seguí adelante.<br />
<hr />
No está de más aclararlo, el formulario de contacto que tengo en mente constará de 4 campos clásicos: Nombre, Asunto, Correo Electrónico y Mensaje. Y voy a usar el nuevo Google Forms para crearlo…<br />
<h4>
Paso 1: poner título, descripción y trabajar en la pregunta Nombre</h4>
Veamos: no hay que perder de vista el <b>esquema pregunta - respuesta</b> que se maneja en los formularios.<br />
<ul>
<li>Lo del título en el formulario es obvio: es lo primero que verá el potencial usuario. Agregar una descripción o instrucciones de uso es opcional… podría ponerse en la página del blog donde vayamos a incrustarlo (Contacto). </li>
<li>Lo primero que necesito es generar la pregunta por el <b>Nombre</b>, y en mi caso opté por adjuntar una descripción/aclaración a la pregunta (aunque el que vió un formulario los vió todos).</li>
<li>El campo de respuesta debe ser de tipo <b>Respuesta corta</b>, y elegí marcarlo como campo de respuesta obligatoria<b>.</b></li>
</ul>
<i>Deberías ver algo como la imagen siguiente,</i> ya que estamos trabajando en edición; en todo momento podés ir controlando como va quedando pulsando el ojito de la vista previa.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkmjuQz3IwCZJSQDub_IYmGRC8YjyZpQaKeLjLioXbdCIjztJBj6_1N9lEwZbLudbKgvKSW9N44htPxiTb2YxtNqDtazFeLl1iBHhdrNVC2eS_m0Tln67bPn_dQ-pTFPRxuKdnXNimjJN3/s1600/forms2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkmjuQz3IwCZJSQDub_IYmGRC8YjyZpQaKeLjLioXbdCIjztJBj6_1N9lEwZbLudbKgvKSW9N44htPxiTb2YxtNqDtazFeLl1iBHhdrNVC2eS_m0Tln67bPn_dQ-pTFPRxuKdnXNimjJN3/s400/forms2.png" width="400" /></a></div>
<h4>
Paso 2: agregar 2 nuevos campos de texto, Asunto y Correo Electrónico</h4>
<ul>
<li>Añadí una nueva pregunta relacionada al <b>Asunto</b>, parecido al que usé en Nombre, pero no obligatorio.</li>
<li>La nueva pregunta <b>Correo Electrónico</b> es de respuesta obligatoria; además es importante aplicarle una <u>regla de validación</u> para comprobar que el usuario ingrese algo con la forma <i>mail@dominio.ext</i>... también escribí el texto "<i>no parece ser un correo electrónico</i>" que verá si ingresa algo que no tenga dicha forma.</li>
</ul>
La siguiente imagen te puede servir de guía (no se ve todo el formulario editado porque Google decidió mostrar todo <i>muuuy grande</i>):<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHugyhewHkl21ohfBRfcDIffTF033tFRsxtmrvjfLAFzCD_CtZwoodNJUb1fpDbCVXScgplarXP41TEebQBtcSduOu2ymycRl6HuCZQv3KASgIIW6RPpfi7Z1HytvIMfmL2yN1u1SwUn6H/s1600/forms3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHugyhewHkl21ohfBRfcDIffTF033tFRsxtmrvjfLAFzCD_CtZwoodNJUb1fpDbCVXScgplarXP41TEebQBtcSduOu2ymycRl6HuCZQv3KASgIIW6RPpfi7Z1HytvIMfmL2yN1u1SwUn6H/s400/forms3.png" width="400" /></a></div>
<h4>
Paso 3: agregar una pregunta para el Mensaje</h4>
Se necesita crear el espacio para que el usuario se explaye con comodidad sobre el motivo por el cual nos escribe…<br />
<ul>
<li>Añadimos una nueva pregunta, <b>Mensaje</b>, que difiere de los campos anteriores en que se espera una respuesta de tipo Párrafo (no ya un texto corto).</li>
<li>Como es una parte fundamental del envío, es necesario que se lo declare campo obligatorio.</li>
<li>Aunque yo no lo usé, puede limitarse la cantidad mínima o máxima de caracteres que van a ser escritos.</li>
</ul>
Es la última imagen-guía para esta parte del trabajo:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrqXSUNXAN38LjrjiZk38d8NEzRQb9vZYXNUW0ne5zPd6nW5bBWtccUd5_u8SJggWZZbnip97i63U4USC0M258UN2meDZ4hQ_cD2ozJrfoDvB2OMbnzpG4Ft2UsAxGns2ZtZHiEr8Gr3gW/s1600/forms4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrqXSUNXAN38LjrjiZk38d8NEzRQb9vZYXNUW0ne5zPd6nW5bBWtccUd5_u8SJggWZZbnip97i63U4USC0M258UN2meDZ4hQ_cD2ozJrfoDvB2OMbnzpG4Ft2UsAxGns2ZtZHiEr8Gr3gW/s400/forms4.png" width="400" /></a></div>
Es recomendable acceder a la vista previa para ver si nos conforma como va quedando el formulario… aunque pueden hacerse cambios posteriores en el momento en que se desee.<br />
<h4>
Paso 4: configurar el comportamiento del formulario luego del envío</h4>
Accediendo a través del icono de Configuración (el de la ruedita de engranaje) podremos determinar como tiene que responder el sistema luego del envío del mensaje.<br />
Para este tipo de formulario conviene:<br />
<ul>
<li>desmarcar la opción de 1 sola respuesta, para dar la posibilidad de que el usuario utilice otra vez nuestro formulario</li>
<li>escribir un mensaje de confirmación que se adecúe al tipo de envío esperado; es lo que verá el usuario después de pulsar en ENVIAR.</li>
<li>desmarcar la opción enviar otra respuesta... no es un cuestionario.</li>
<li>yo elegí desmarcar la posibilidad de edición posterior al envío: solo tiene sentido para usuarios registrados.</li>
<li>ver un resumen de las respuestas tampoco tiene sentido: el contacto es privado entre el usuario y el administrador</li>
<li>Las opciones de presentación tambén deben quedar desmarcadas: están pensadas para otros tipos de formularios.</li>
</ul>
En resumen: <i>desmarcar todo</i>.<br />
Te muestro una imagen de la ventana de configuración, tal como me quedó:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6o9uiTYJShqY10V9MunMg2yCC_es8ueayEP5z9htGZWbymGyN9algiZr9_NRNntAGpx8RZyqDVzHMXtQ2ZxOaKstbI-h4TyXqByjtgrbRY5pNR-PCzCBgPKcImbgR0NnFCzqfAJYV5pIF/s1600/forms5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6o9uiTYJShqY10V9MunMg2yCC_es8ueayEP5z9htGZWbymGyN9algiZr9_NRNntAGpx8RZyqDVzHMXtQ2ZxOaKstbI-h4TyXqByjtgrbRY5pNR-PCzCBgPKcImbgR0NnFCzqfAJYV5pIF/s400/forms5.png" width="348" /></a></div>
<hr />
Voy a seguir con la segunda parte del trabajo de creación de una página de contacto en Blogger usando GForms y demás (<i>hasta yo había perdido de vista el objetivo</i>…) en el próximo post.<br />
Este ya quedó muy largo. Chau.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-58414303739449621772016-05-23T21:30:00.000-03:002016-05-25T18:31:57.900-03:00En búsqueda de un Formulario de Contacto<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4QkdeIgI-s9ZSxL6L6jAcI4tjOSodAN5G095X6iOlCPDtuACXcxu7vIom-Lb4WXSamPuhRfj5Dmjyj1CWWSqZqQLAFuqy8Up8GaiWLLmqVK7q8bw1Bvs7mK_dQqZib7_xMaCDm4WoofTE/s1600/266c29a5d874af62d87413456e07d700.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4QkdeIgI-s9ZSxL6L6jAcI4tjOSodAN5G095X6iOlCPDtuACXcxu7vIom-Lb4WXSamPuhRfj5Dmjyj1CWWSqZqQLAFuqy8Up8GaiWLLmqVK7q8bw1Bvs7mK_dQqZib7_xMaCDm4WoofTE/s200/266c29a5d874af62d87413456e07d700.png" width="198" /></a>Vamos a ver en esta entrada que colocar un formulario de contacto en una página dedicada (Contacto) en la plataforma Blogger puede llegar a ser una peripecia (años que no uso esta palabra).<br />
<br />
<a name='more'></a><br />
A veces lo que debiera ser un trabajo simple no lo es tanto.<br />
Con todo el entusiasmo del mundo me propuse crear una <i>típica </i>página de contacto para este blog. Pero me encontré con que Blogger ofrece formularios de contacto<b> ¡pero como gadgets!</b> Y como todo gadget:<br />
<ul>
<li>suelen estar ubicados en <i>sidebars </i>o <i>footers</i>, pero nunca en el cuerpo principal de la página (zona de contenidos).</li>
<li>su visualización se dá —en principio— en todas las páginas del sitio.</li>
</ul>
Y si mi objetivo es que aparezca en el cuerpo principal de una página específica… estamos en problemas. Y aquí empezaron mis peripecias.<br />
<h2>
¿Es necesaria una página de contacto?</h2>
Es una buena primera pregunta.<br />
En los lejanos tiempos en que los sitios web eran básicamente una colección de documentos HTML (páginas web estáticas) enlazados entre sí,las posibilidades de colocar un formulario donde el visitante pudiese contactarse con el autor/administrador del sitio no solían estar no solían estar "tan a mano": dependían de lo que ofreciera el servicio de hosting (se usaba tecnología CGI <i>si mal no recuerdo</i> para transferir datos del programa cliente al servidor web).<br />
La idea de fondo es simple: que el visitante envíe su consulta sin salir desde nuestro sitio web, sin tener que tomar nota del mail de contacto y hacerlo de forma externa —dejando dicho mail expuesto a todo el mundo quizá sin necesidad, a todo esto — .<br />
Con el tiempo fueron apareciendo servicios externos (todavía hoy en uso) que permiten crear formularios de contacto, e incrustarlos en la página que deseemos; la gestión de recepción y envío a nuestro mail en este caso es externa.<br />
Con el advenimiento de los blogs —y lo llamado Web 2.0— si algo cambió dramáticamente es el incremento de la comunicación bidireccional entre los sitios web y los usuarios; de hecho, los visitantes en mayor o menor medida participan de la creación de los contenidos (<i>feedback</i>, dirían algunos).<br />
<i>¿Para qué una página de contacto en un blog, si muy probablemente un lector puede comunicarse con el autor a través de los comentarios?</i><br />
Bien, si pensamos que los comentarios de los visitantes también son parte de los contenidos del blog, puede darse el caso que un lector tenga preguntas, dudas o aportes que no tengan que ver directamente con los contenidos tratados; en ese caso conviene que tenga una vía de tramitarlas de forma más privada, como lo haría vía Email.<br />
<h2>
Opciones para generar el formulario de Contacto </h2>
Si estás decidid@ como yo a tener una página de contacto, veamos que opciones hay para lograrlo..<br />
<h3>
<u>desde Blogger</u></h3>
<i>¿No era que no se podía?</i> Bueno, según lo que encontré rastreando en pos de informarme habría más de una manera de hacerlo.<br />
No es la solución que terminé implementando, pero te anticipo que los procedimientos involucran manipulaciones de la template XML del blog (<i>¿lo qué?</i>) cuestiones que quizás no sean claras para un administrador que esté empezando con Blogger. Queda bajo tu responsabilidad…<br />
<h4>
Fuentes a consultar:</h4>
<ul>
<li>Oloblogger > <a href="http://www.oloblogger.com/2013/05/contacto-blogger-pagina-estatica.html" target="_blank">Gadget para contacto Blogger. Cambiar estilo. Instalar en una página estática</a></li>
<li>Blogger Plugins > <a href="http://www.bloggerplugins.org/2013/05/create-separate-contact-page-for-blogger.html" target="_blank">Create Separate Contact Page in Blogger</a></li>
</ul>
<h3>
<u>desde Servicios externos</u></h3>
Existen muchos proovedores de servicios de creación y gestión de formularios web que nos permitirán resolver esta cuestión, y de manera gratuita (a veces con algunas limitaciones).<br />
Un factor de elección debería estar de acuerdo a la cantidad de envíos mensuales estimados (aunque normalmente suelen ser pocos).<br />
Algunos servicios que podés consultar son:<br />
<ul>
<li><a href="http://www.wufoo.com.mx/" target="_blank">Wufoo</a> (yo lo uso en mi sitio <a href="http://www.scratchbydsigno.com.ar/" target="_blank">Scratch by dsigno</a>)</li>
<li><a href="http://spanish.jotform.com/" target="_blank">JotForm</a> (probé un demo y parece muy bueno)</li>
<li><a href="https://www.emailmeform.com/creador-de-formularios.html" target="_blank">EmailMeForm</a></li>
<li><a href="http://es.foxyform.com/" target="_blank">Foxyform</a> (sin necesidad de registro) </li>
</ul>
Esta vía de resolver el problema es para tener muy en cuenta… además hay info disponible en nuestro idioma —en un futuro quizás escriba alguna ayuda paso a paso, veremos—<br />
<h4>
Link de interés</h4>
JotForm > <a href="https://www.jotform.com/help/14-Adding-Form-to-Blogger" target="_blank">Adding Form to Blogger</a> (con videos) <br />
<h3>
<u>usando Google Forms</u></h3>
Podría pensarse a Google Forms como un servicio externo, <i>aunque si estamos usando Blogger</i>…<br />
Para este blog, <i>y al menos por ahora</i>, es la solución que voy a terminar implementando. Como esta entrada quedó ya muy extensa, voy a dejar la redacción de una info detallada para el próximo post. Chau.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-11665720215461330882016-05-22T10:27:00.001-03:002018-02-07T20:45:21.788-03:00Etiquetas en el menú<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJESVG8Q5FGXj-vaHrOJ98omKProJNhHggsune_Zwaz79Dg3lP6X9ewjhWjAiZa0E0zG6zcsEKXcrwZKsA8Ii7aDNVhiZFXAYu8KpYHm6scXM7t9CisMy1GU2atGQwKN7PhB19WHklhie/s1600/menu-145778_640.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJESVG8Q5FGXj-vaHrOJ98omKProJNhHggsune_Zwaz79Dg3lP6X9ewjhWjAiZa0E0zG6zcsEKXcrwZKsA8Ii7aDNVhiZFXAYu8KpYHm6scXM7t9CisMy1GU2atGQwKN7PhB19WHklhie/s200/menu-145778_640.png" width="200" /></a>Siguiendo en el camino de estructurar los vínculos a los contenidos de nuestro blog, veremos una forma de usar algunas etiquetas para crear vínculos en el menú principal, tratando de mejorar la experiencia de nuestros lectores.<br />
<a name='more'></a><br />
Debo decirlo: cuando llego a un blog vía un motor de búsqueda y quiero seguir navegando internamente en el mismo, suelo tardar en entender cómo el autor organizó los contenidos.<br />
En teoría las etiquetas deberían ser la principal ayuda, pero muchas veces me encuentro con:<br />
<ul>
<li>blogs que usan decenas de etiquetas en sus entradas, algunas incluso que parecen ser redundantes (¿será por el bendito SEO?)</li>
<li>etiquetas que parecen tener sentido sólo para el autor, lo que lleva a la pregunta ¿cómo etiquetar correctamente un contenido? ¿cuánto hay que pensar en el lector al momento de hacerlo?</li>
</ul>
No quiero ser fácilmente crítico: al momento de crear este blog me he preguntado cómo le serviría mejor al visitante <b>mi criterio</b> de etiquetado, y cómo aprovechar ese criterio de la manera más útil al estructurar la visualización del blog.<br />
<h2>
Las etiquetas y Blogger</h2>
Sin entrar en disquisiciones académicas de lo que es taxonomía, tesauro, ontología (soy un simple docente), me parece importante destacar que<i> en Blogger se dá la posibilidad de etiquetar contenidos, pero no es posible categorizar estas etiquetas de acuerdo a algún criterio</i>; como dato: esto si es posible en otras plataformas como WordPress y Drupal.<br />
Las etiquetas quedan así libres de cualquier vinculación que las jerarquice o que las agrupe: todas son “democráticamente” iguales <i>de cara al lector</i>.<br />
Pero podemos salvar en parte esta limitación: podemos hacer que <i>de cara al lector</i> algunas etiquetas se perciban como más importantes colocándolas en el menú principal.<br />
<h3>
Antes de tocar, planificar</h3>
Vayamos a un caso concreto: dada la temática de este blog, mis entradas —al menos en su mayor parte— podré categorizarlas en:
<br />
<ul>
<li>vinculadas a los <i>contenidos </i>del blog: tipos de contenido, consejos de escritura, formato y semántica del texto, uso de imágenes y videos, etc.</li>
<li>vinculadas a la <i>estructura </i>de funcionamiento y visual del blog: cambiar el layout, uso de gadgets, como se vinculan los contenidos entre sí (navegación), etc.</li>
<li>vinculadas a la <i>gestión </i>del blog: como configurarlo pensando en el universo de lectores, quienes podrán participar con comentarios, a cuestiones de posicionamiento web, etc.</li>
</ul>
Al ser un blog que se va definiendo en la medida que va creciendo, puede que tenga que hacer cambios en el futuro. Pero al día de la fecha tener en mente estas categorías debería servirme como guía tanto a mí como a mis potenciales lectores.<br />
Voy así a crear 3 etiquetas : <b>contenido</b>, <b>estructura </b>y <b>gestión</b>, y voy a resaltar de cara al visitante su importancia creando links en el menú principal para filtrar las entradas de acuerdo a esas tres categorías.<br />
Nota: esto no quiere decir que no siga trabajando con las etiquetas como se hace usualmente, aunque suele ser conveniente no exagerar con su cantidad.<br />
<h3>
Colocar los links en el menú</h3>
Ya usamos el gadget Páginas en el <i>post </i>anterior. Ahora usaremos la opción <b>Agregar vínculo externo</b> (aunque en realidad colocaremos uno interno)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIpFGuWaMus0S-mK2SWEAYJUbuWwJUzY_Odloj6Hj6q8GGGP5QQrvLemPQr1ci6m6YURtOgYeQmEVE_J3V-KE94Wx3bH6cRRZe4fvEXuXDR54XPxw2pClKb-anWItZGgUd68nM37pjrdIu/s1600/paginas-menu-conf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIpFGuWaMus0S-mK2SWEAYJUbuWwJUzY_Odloj6Hj6q8GGGP5QQrvLemPQr1ci6m6YURtOgYeQmEVE_J3V-KE94Wx3bH6cRRZe4fvEXuXDR54XPxw2pClKb-anWItZGgUd68nM37pjrdIu/s400/paginas-menu-conf.png" width="332" /></a></div>
Necesitaré tener a mano los 3 links a las páginas que listarán las entradas relativas a mis 3 etiquetas/categorías; en mi caso son:<br />
<ul>
<li>http://<span style="color: #cc0000;">diario1nuevoblogger.blogspot.com.ar</span>/search/label/<span style="color: #cc0000;">contenido</span></li>
<li>http://<span style="color: #cc0000;">diario1nuevoblogger.blogspot.com.ar</span>/search/label/<span style="color: #cc0000;">estructura</span></li>
<li>http://<span style="color: #cc0000;">diario1nuevoblogger.blogspot.com.ar</span>/search/label/<span style="color: #cc0000;">gestión</span></li>
</ul>
Agregaremos los vínculos en el menú con la opción <b>Agregar vínculo externo</b> :
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhahP33Daqmv6jHkWEsGBxx0F8891ARzoHAJM1HbfghHhxFJTMLi46SW_dwb7wU-VpksWTp-LanrZawExe6xFTJ8R27mUngH25ZQ6GVHO5s7C4AN_bmdG-hAPo5vB5CtWhazdiQu01pY-_d/s1600/menupaginalink.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhahP33Daqmv6jHkWEsGBxx0F8891ARzoHAJM1HbfghHhxFJTMLi46SW_dwb7wU-VpksWTp-LanrZawExe6xFTJ8R27mUngH25ZQ6GVHO5s7C4AN_bmdG-hAPo5vB5CtWhazdiQu01pY-_d/s400/menupaginalink.png" width="400" /></a></div>
Nos dará la opción de colocar el nombre que aparecerá en el menú (conviene que sea corto). Luego de repetir esta acción con los 2 links restantes conviene reordenar el menú a nuestro gusto…<br />
Al finalizar el trabajo el resultado (tal como se vé en este blog este día 22 de mayo de 2016) es:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizlMPCbzQ8F9E6iqR8nE205LEYnKaCyWYJ2d6HFnqV-1QCzvj4cK4SFag5TEVaPzj4adc7f-QQuMb7ZcJUy6mdg9OaFkP3dVJnSxDqOoJFQIB1nxqWOThfkqiVy7e1dohQxh3x6qzkQr_d/s1600/menu220516.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizlMPCbzQ8F9E6iqR8nE205LEYnKaCyWYJ2d6HFnqV-1QCzvj4cK4SFag5TEVaPzj4adc7f-QQuMb7ZcJUy6mdg9OaFkP3dVJnSxDqOoJFQIB1nxqWOThfkqiVy7e1dohQxh3x6qzkQr_d/s640/menu220516.png" width="640" /></a></div>
<h2>
Para terminar</h2>
La colocación de etiquetas en el menú principal no va a cambiar el funcionamiento y tratamiento que le dá Blogger a las mismas. Lo que conseguimos es que el visitante tenga <i>a un golpe de vista</i> <b>un indicio</b> de cómo está pensada la organización de los contenidos de nuestro blog… no es una solución mágica ni mucho menos. Chau. <br />
<hr />
<h4>
Links de interés:</h4>
<ul>
<li>Diarios de la Nube > <a href="http://www.diariosdelanube.com/2014/05/como-poner-un-menu-en-blogger-sin-tener.html">Cómo poner un menú en Blogger sin tener experiencia en informática o programación</a></li>
<li>Apuntes sobre blogs > <a href="http://avalerofer.blogspot.com.ar/2012/01/como-organizar-un-blog.html">Cómo organizar un blog</a></li>
<li>Reydefine > <a href="http://reydefine.com/etiquetas-blog-taxonomia/">Etiqueta en tu blog: el ciclo positivo de la taxonomía</a></li>
<li>40 de fiebre > <a href="https://www.40defiebre.com/como-planificar-etiquetas-blog/">Cómo y por qué planificar las etiquetas de un blog</a></li>
<li>lluís codina > <a href="http://www.lluiscodina.com/taxonomias-ontologias/">Taxonomías y Ontologías: qué son y cómo se aplican en Medios de Comunicación</a></li>
</ul>
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-34962863465943251302016-05-20T20:00:00.000-03:002018-02-07T20:10:09.626-03:00Crear (y vincular) una página<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTBIbupxeGSkLufOpg8QwrgJoD1D6hTR2LEEt_lqJeM8xyWhPKtma-ZQVrqX3Iue_BztGSgbfW-uLcChdVQS4GAa53o4jOuxfo5TEK1pLezS42LQqbOjw5EXDT1z_2sZ3Lw949w9Z-Smb/s1600/grey_new_seo-37-512.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrTBIbupxeGSkLufOpg8QwrgJoD1D6hTR2LEEt_lqJeM8xyWhPKtma-ZQVrqX3Iue_BztGSgbfW-uLcChdVQS4GAa53o4jOuxfo5TEK1pLezS42LQqbOjw5EXDT1z_2sZ3Lw949w9Z-Smb/s200/grey_new_seo-37-512.png" width="200" /></a>Como dijimos en el <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/los-contenidos-y-su-integracion-al-sitio.html" target="_blank">post anterior</a>,debe ser el administrador del blog quien se encargue vincular los contenidos de tipo <i>page </i>a la estructura del sitio.<br />
La manera más simple de hacerlo será a través del uso de un gadget que nos proporciona Blogger…<br />
<br />
<a name='more'></a><h2>
Un momento… ¿qué es un gadget? </h2>
Si se busca en internet por los términos "blog gadget" o "blog widget" (o términos de búsquedas similares) nos vamos a encontrar con millones de páginas dedicadas al tema.<br />
De las definiciones que encontré me gustó esta:<br />
<blockquote class="tr_bq">
Widget, de las palabras <i>window</i> (ventana) y <i>gadget</i>
(mecanismo, chisme, artilugio) es un pequeño programa que puede
incrustarse en algún servicio web (por ejemplo, un blog), y que ofrece
las más variadas funciones: un calendario, un registro de visitas, un
álbum de fotos, etc. Los widgets son de libre distribución en la web, y
puede añadirse un número ilimitado de ellos a nuestro sitio web (aunque
esto enlentecerá el proceso de carga de la página). <i>fuente: <a href="http://aprenderapensar.net/faq/25-%C2%BFque-es-un-widget-y-como-puedo-anadirlo-a-mi-blog/" target="_blank">Aprender a pensar</a></i></blockquote>
Los gadgets (término que utiliza Blogger) se usan para acompañar al contenido principal que visualiza el visitante, y es usual que sean vistos en todas las páginas del blog.<br />
Pueden describirse como <b>secciones (o trozos) de código web y de programación</b> que pueden agregarse a la <i>template </i>básica, que es la que genera la visualización de una página (en Blogger las <i>templates </i>se escriben en XML, usualmente se utiliza PHP en otras plataformas).<br />
Dentro de los múltiples gadget que puede agregar el administrador —por necesidad y gusto— se encuentran algunos que permiten vincular los contenidos del sitio (tema discutido en el <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/los-contenidos-y-su-integracion-al-sitio.html" target="_blank"><i>post</i> anterior</a>)…<br />
<ul>
<li>Para las entradas se usan los gadgets <b>Archivos del Blog</b> y <b>Etiquetas</b></li>
<li>Para las páginas se usa el gadget <b>Páginas</b></li>
</ul>
<i>Ya volvemos con el tema</i>…<br />
<h2>
Proceso de creación de una página</h2>
La idea es crear una primera página que llamaré <i>Sobre este Sitio</i>: su contenido tendrá que ver con mis motivaciones y objetivos relacionados a este blog (no hay mucho más para decir).<br />
El proceso de creación de las páginas es muy similar al de las entradas —dejaré unos links al final de este post que podrán servir de consulta— ; conviene si resaltar que:<br />
<ul>
<li>no encontraremos opciones para insertar etiquetas, ni programar la publicación para un día y fecha determinado.</li>
<li>no tendremos posibilidad de personalizar con que nombre se va identificar la página: tendrá que ver con el título que le pongamos al generar el contenido (Ej: si el título es <i>Sobre este Sitio</i> la página quedará <i>sobre-este-sitio.html</i>)</li>
<li>El título de la página es lo que va a aparecer también como link en el menú… conviene entonces que sea corto y conciso. </li>
</ul>
El paso siguiente es agregar el gadget Páginas desde la sección Diseño: en la imagen vemos que yo lo coloqué en un área por sobre el contenido, llamada Cross Column.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUmjlSnS4egC7QTGoLjg66iDgW2SFQCabgFMXcw5rq6BdkdnDqpZGAIwhDmi9yzslcYcBr29NNM1BnKU7XKvls9lkNPcX6InHJ-Gljr29ji_gfU8-lE9nZAlUP3-9kzLd_dyTND87sck_/s1600/gadgetsmenu.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUmjlSnS4egC7QTGoLjg66iDgW2SFQCabgFMXcw5rq6BdkdnDqpZGAIwhDmi9yzslcYcBr29NNM1BnKU7XKvls9lkNPcX6InHJ-Gljr29ji_gfU8-lE9nZAlUP3-9kzLd_dyTND87sck_/s400/gadgetsmenu.png" width="400" /></a></div>
<br />
No es el único lugar donde puede agregarse el gadget de menú: dependerá del tipo de <i>layout </i>o <i>disposición </i>que elijamos para nuestro blog (tema de otra entrada futura).<br />
Una vez colocado lo podremos editar y modificar cuantas veces querramos… <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxcLoUbBzXIOXlmXCfr8-ofld-eK-4ZwYTxm3N0VxER2yCVaMtLfyQd8X6qWlhM2uDBoIGyL3a-eNxTK3RqKFgrZZRae3CAXs1YJtc6qF1bnk2IhCXBozoguK9PNvt3avmin7r6lJ2G9tE/s1600/paginas-menu-conf0.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxcLoUbBzXIOXlmXCfr8-ofld-eK-4ZwYTxm3N0VxER2yCVaMtLfyQd8X6qWlhM2uDBoIGyL3a-eNxTK3RqKFgrZZRae3CAXs1YJtc6qF1bnk2IhCXBozoguK9PNvt3avmin7r6lJ2G9tE/s400/paginas-menu-conf0.png" width="300" /></a></div>
Cada página futura que agreguemos nos aparecerá listada en esta ventana de configuración: tendremos la opción de mostrarla o no, y de elegir el orden entre las mismas (el vínculo a la Página Principal o Home suele ponerse primero).<br />
Fácil. Para cerrar conviene decir que este gadget "oficial" de Blogger es muy útil especialmente para quien no conozca demasiado de HTML y CSS y Javascript (whatttt!), pero el menú resultante es muy simple: por ejemplo no soporta la configuración de un menú multinivel ( a <i>googlear </i>amigos...). Afortunadamente quedan a mano otros medios para lograrlo, tema que no hablaremos aquí. Chau.<br />
<hr />
<h4>
Link de interés:</h4>
<ul>
<li>IniciaFP > <a href="http://cursos.iniciafp.es/blogger/curso/tema5" target="_blank">Tema 5: Crear entradas y páginas en el blog</a></li>
<li>Info oficial > <a href="https://support.google.com/blogger/answer/165955?hl=es&ref_topic=3339243" target="_blank">Añadir páginas a tu blog</a></li>
</ul>
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-28496325223003584572016-05-18T20:00:00.000-03:002018-02-07T19:46:45.092-03:00Los contenidos y su integración al sitio<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9n2nPLky6gVtwxtEBE1yTMrHnZ3e4fvm9gW5dboZMVSGTncK0ET-sgvIjvFxjMgEsEDLMq5aHzV_Zf1Ow9xaZZf-d6f7nNRoFkrEsaGe8JNHeiYS4lYt2r5TiTlAHTwbU5YjBZRjRnRQA/s1600/grey_new_seo-08-512.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9n2nPLky6gVtwxtEBE1yTMrHnZ3e4fvm9gW5dboZMVSGTncK0ET-sgvIjvFxjMgEsEDLMq5aHzV_Zf1Ow9xaZZf-d6f7nNRoFkrEsaGe8JNHeiYS4lYt2r5TiTlAHTwbU5YjBZRjRnRQA/s200/grey_new_seo-08-512.png" width="200" /></a>En el <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/entradas-y-paginas.html" target="_blank">post previo</a> hablé sobre la diferencia entre los contenidos tipo entrada (<i>post</i>) y del tipo página (<i>page</i>) tal como están pensados dentro del funcionamiento de los <b>blogs</b>. Intenté un acercamiento desde un punto de vista conceptual sobre esa cuestión.<br />
Pero (y me voy a referir puntualmente a la plataforma Blogger) existe una importante diferencia que conviene ser señalada: es la manera en que se <i>integran estructuralmente</i> estos contenidos al sitio.<br />
<br />
<a name='more'></a><br />
Cuando hablo de <b>estructura </b>de un sitio me refiero no sólo a la manera en que están presentados los contenidos a los visitantes (el <i>layout o disposición</i>), sino también a las maneras de acceder a los distintos contenidos presentes en el sitio: a cómo están vinculados entre sí y cómo se muestran estos vínculos al lector... simplificando, a la <i>navegación</i>.<br />
<h2>
Vínculos a las entradas o <i>posts</i></h2>
Voy a tratar de ser sintético (no es una de mis virtudes): en los blogs el contenido principal lo constituyen las entradas, y <b>hay tres formas primarias de acceder al contenido</b> de ellas <i>desde dentro del mismo sitio</i> —olvidémonos de san google por un rato—:<br />
<ul>
<li>encontrándolas a partir de seguir el vínculo que apunta a ellas, presente en el cuerpo de <b>la página de inicio</b> (la página principal) del blog. En la página principal aparece un resumen o recorte de cada entrada escrita, y los <i>links </i>están en los títulos de las mismas; las entradas se muestran en orden cronológicamente inverso a su fecha de publicación, como ya hablamos.</li>
<li>encontrándolas desde el menú <b>Archivo del Blog</b> : este es un gadget que puede agregarse configurando el <i>Diseño del blog</i> (ya hablaremos de esto). Para este menú tenemos varias opciones, como se vé en la imagen:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbHAA56FVKxuhrSDNg6R23VABIoJJgjNFreZ7-dB2FGGsEKxeuBypca0qU1pFR84q11M-9qjo85nUVX72h47g7I4pWhsIkAe_0hRfGn2ZBJ-ZSfrhK89rKIb7JOrX8mUpoS98CKwjeZYk/s1600/archivoconf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvbHAA56FVKxuhrSDNg6R23VABIoJJgjNFreZ7-dB2FGGsEKxeuBypca0qU1pFR84q11M-9qjo85nUVX72h47g7I4pWhsIkAe_0hRfGn2ZBJ-ZSfrhK89rKIb7JOrX8mUpoS98CKwjeZYk/s400/archivoconf.png" width="356" /></a></div>
<div style="background-color: #b9e0bb; margin-left: 2.5em;">
En caso de que esté configurado con la opción de estilo Jerarquía, podremos acceder a una entrada en particular desde este menú. Si hiciésemos en cambio click en el mes o el año, nos dirigiría a una página con un compendio de determinadas entradas <i>filtradas </i>con el criterio indicado (mes o año)... vamos a hablar un poco más del filtrado a continuación.</div>
<ul>
<li>encontrándolas desde un grupo de entradas que compartan el mismo <b><i>tag </i>o etiqueta</b>. El etiquetado es <i>la única forma simple</i> que tiene el redactor de contenidos de organizar la información del blog de manera ágil: la etiquetas permiten agrupar ciertas entradas de acuerdo a su similitud temática, lo que permite al visitante encontrar más contenidos relacionados al ya visto... existe también en este caso un <i>filtrado </i>en búsqueda de un grupo determinado de entradas.<br />Cuando se hace click a una etiqueta, el sistema genera una página
mostrando todas las entradas que el redactor haya marcado con dicho <i>tag</i>: podemos simplificar y decir que nos encontraremos <i>con una versión filtrada</i> de la página principal.</li>
</ul>
<ul>
</ul>
<blockquote class="tr_bq">
Pasando en claro: en una plataforma de tipo blog el sistema <b>automatiza </b>en buena parte la generación de los vínculos entre los contenidos <b>tipo entrada</b>, en base a un criterio cronológico. La manera que tiene <i>quien organiza</i> el blog de <i>dar cierto nivel de orden propio</i> es a través del etiquetado de las entradas, que resulta en un <i>filtrado </i>(generación de un subconjunto de entradas respecto al total). A partir de ese <i>resultado de búsqueda</i> el visitante aumenta su posibilidad de encontrar el contenido buscado.
</blockquote>
<h2>
Vínculos a las páginas o <i>pages</i></h2>
Ya comentamos el uso que se dan en una plataforma de blog a las páginas: suelen contener información de índole atemporal, no vinculada al flujo <i>tipo noticias </i>de las entradas.<br />
En Blogger existía antiguamente un tope máximo de 10 páginas por blog; luego se amplió a 20, y (según <a href="http://www.oloblogger.com/2014/02/nueva-interface-paginas-blogger.html" target="_blank">leí aquí</a>) por ahora no hay un límite conocido.<br />
Cuando creamos una página en Blogger (tema de una próxima entrada) nos encontraremos con la siguiente situación:<br />
<ul>
<li>la misma no podrá ser accedida a través de una etiqueta (las páginas no se pueden etiquetar),</li>
<li>como las páginas no son archivadas automáticamente por su fecha, no va a aparecer un vínculo a ellas en el menú Archivo del Blog.</li>
</ul>
Dicho de otra manera: el sistema no generará automáticamente un vínculo a los contenidos de <b>tipo página</b>: deberemos añadir el gadget <b>Páginas </b>desde el área de <i>Diseño del Blog</i>.. contaremos entonces con un nuevo menú desde donde añadir todas la páginas que creemos, ordenadas de la manera que queramos.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzb8p_IfKRY0fa3v1wbHq5GCgh6jErnezZD9YVcRAIaUNTq81biq_JIvwDNPGqZECOFvKZ2aiFSAAvP33og6jebQ1gtKZYjDtDH2jBP2sBCa8qob59redcn56tJpKxWfQR_mDk-AoASAC0/s1600/paginas-menu-conf.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzb8p_IfKRY0fa3v1wbHq5GCgh6jErnezZD9YVcRAIaUNTq81biq_JIvwDNPGqZECOFvKZ2aiFSAAvP33og6jebQ1gtKZYjDtDH2jBP2sBCa8qob59redcn56tJpKxWfQR_mDk-AoASAC0/s400/paginas-menu-conf.png" width="332" /></a></div>
Como los gadgets añadidos aparecen —en principio— tanto en la página principal como en el resto del sitio, tendremos acceso a los contenidos de tipo <i>page </i>desde todos lados.<br />
<blockquote class="tr_bq">
Resumiendo: en una plataforma como Blogger el manejo de los vínculos a los contenidos <b>tipo </b><i><b>page </b> </i> quedará bajo la responsabilidad del creador del blog, quien ganará un mayor grado de control sobre su estructuración.</blockquote>
<hr />
Queda pendiente un tema interesante: ver cómo emplear algunos <i>tags </i>específicos como ítems dentro del menú generado por el gadget Páginas, de manera de concentrar buena parte de la navegación en nuestro blog desde el menú principal.<br />
<h4>
Link de interés:</h4>
<ul>
<li> Oloblogger > <a href="http://www.oloblogger.com/2014/02/nueva-interface-paginas-blogger.html" target="_blank">Blogger: Cambios en la administración de páginas estáticas</a></li>
</ul>
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-90472374175561576152016-05-16T08:39:00.000-03:002018-02-17T12:51:30.572-03:00Contenidos en un blog: entradas y páginas<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3N-eGNVH3u1MYu9vmiL6tstugYWAog5aqlwuAYkwpRFafv_CpOklhQToC28UgspDkVt6z7ao03SEjO6ZaahNCbyLty4d5PVZKr_PkdjDSCV2lGC0QjHvJidLWb-ISdbTa0MRWnbCCi3bz/s1600/post-1019869_960_720.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3N-eGNVH3u1MYu9vmiL6tstugYWAog5aqlwuAYkwpRFafv_CpOklhQToC28UgspDkVt6z7ao03SEjO6ZaahNCbyLty4d5PVZKr_PkdjDSCV2lGC0QjHvJidLWb-ISdbTa0MRWnbCCi3bz/s320/post-1019869_960_720.jpg" width="320" /></a> <br />
Con la llegada de los blogs se masificó la creación de contenidos en internet, y se posibilitó el intercambio entre el emisor y los receptores de dichos contenidos (mucho antes de la aparición de las redes sociales).<br />
Este post versará sobre las dos formas básicas de presentar contenidos en un blog: las entradas o <i>posts </i>y las páginas o <i>pages</i>…<br />
<a name='more'></a><br />
Si bien los contenidos en los blogs pueden presentarse bajo dos formas , la <b>base constitutiva</b> de un blog está en la creación de <b>contenidos generados y editados cronológicamente</b> (llamados <b>posts </b>o <b>entradas</b>): esto se lleva bien con sitios web de noticias, o de presentación de novedades, pero no tanto con otros cuyo contenido no dependa de la contingencia del momento, y que necesiten más de un vínculo jerárquico entre los contenidos del sitio (pensemos en un manual, guías, o cualquier tipo de información que necesite agruparse por temas o capítulos).<br />
Más allá de esto, la facilidad de creación de un sitio web aún para personas con escaso conocimiento específico de temas como (X)HTML y sus tags, CSS, PHP, etc., ha hecho de los blogs una herramienta invaluable, y a la que se le puede sacar mucho provecho desde una actividad educativa.<br />
<h3>
Las entradas y las páginas como contenidos de un blog</h3>
Para quien se inicia en la creación de un blog, es importante conocer la diferencia entre estos 2 tipos de contenidos.<br />
<h4>
¿Qué es una entrada?</h4>
También conocida como <i>posts</i>, las entradas son la base constitutiva de un blog: podemos decir que son el contenido principal del mismo (al menos en Blogger).<br />
De hecho lo que habitualmente es la página de inicio de un blog consta principalmente de las últimas entradas que se hicieron en el mismo, presentadas en orden cronológicamente inverso, a lo que se suele agregar la visualización de alguna entrada especialmente destacada, o los post más vistos, etc.<br />
<h5>
Algunas características:</h5>
<ul>
<li>Las entradas de blog o posts se caracterizan por su fecha de publicación. </li>
<li>Las entradas de blog se ordenarán por su fecha de publicación, quedando como es lógico las de fecha más reciente en la parte superior del blog. </li>
<li>Conforme vas escribiendo entradas, estas se van archivando en base al mes y año de publicación. </li>
<li>A los posts o entradas de blog también se le pueden asignar <b>etiquetas </b>o <b><i>tags </i></b>(frases o palabras que caracterizan el contenido de la entrada de blog). Estas serán de utilidad con la utilización de un widget tipo nube de etiquetas como filtro de búsqueda de posts, y pueden servir para generar elementos de menú de ser necesario. </li>
<li>Suelen tener asociadas una sección para comentarios </li>
</ul>
<h4>
¿Qué es una página?</h4>
<i>Desde un punto de vista estricto de lo que es un blog</i>, en las páginas debería incluirse toda información que es accesoria respecto al contenido principal del mismo. Así, en un blog dedicado a noticias, la información de la empresa o particular que las difunde, formas de contacto, declaraciones de principios y demás, <b>deberían colocarse en páginas</b> para que no se confundan con el contenido principal.<br />
<h5>
Algunas características:</h5>
<ul>
<li>Las páginas de blogs (o páginas estáticas) se distinguen por su caracter atemporal, es decir, que no dependen de su fecha de publicación </li>
<li>No suelen listarse, sino aparecer de forma única y singular. </li>
<li>En Blogger en particular no se puede establecer entre ellas ninguna relación de jerarquía (en otros CMSs como Drupal y WordPress sí). </li>
<li>Normalmente su acceso es a través de un link del menú principal. </li>
<li>Suelen emplearse para crear contenidos esenciales como “Contacto”, “Acerca de”, “Preguntas Frecuentes”, “Políticas de Privacidad”. </li>
</ul>
El paso siguiente en nuestro trabajo "paso a paso" será crear una primera página que verse sobre los objetivos de este Blog... la llamaré <a href="http://diario1nuevoblogger.blogspot.com.ar/p/sobre-este-sitio.html" target="_blank">Sobre este sitio</a>, pero en el próximo post hablaremos más en detalle de una diferencia en particular. Chau.<br />
<hr />
<h4>
Links de interés:</h4>
<ul>
<li>Apuntes sobre blogs > <a href="http://avalerofer.blogspot.com.ar/2010/02/las-paginas-estaticas-en-blogger.html" target="_blank">Las páginas estáticas en Blogger</a> </li>
<li>Blog en Internet > <a href="http://www.blogeninternet.com/2013/06/7-diferencias-entre-un-post-y-una.html" target="_blank">7 diferencias entre un post y una página de Blogger</a> </li>
<li>codection > <a href="http://codection.com/escribiendo-entradas-y-paginas/" target="_blank">Curso WordPress: Escribiendo entradas y páginas</a> (para WordPress, pero con datos de utilidad aplicacables en parte a Blogger). </li>
</ul>
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-51005126377070726992016-05-11T21:44:00.005-03:002018-03-04T01:20:05.341-03:00Configuración del Blog: ¿público o privado? (III)<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqq-ecy_cUwS5DYEkEHKp3VxoehYqZwDYIZMzy0bU-j4m8S6gFa1R9kudPdBTisL4Oa1PcYzMl8vZlYOvrQyrECbKS_5onLt6reUF47wjrj7giHx6LzZGUf3_xB69sz6p7CCE0bcKLHFWP/s1600/Despacio_escuela.svg.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqq-ecy_cUwS5DYEkEHKp3VxoehYqZwDYIZMzy0bU-j4m8S6gFa1R9kudPdBTisL4Oa1PcYzMl8vZlYOvrQyrECbKS_5onLt6reUF47wjrj7giHx6LzZGUf3_xB69sz6p7CCE0bcKLHFWP/s320/Despacio_escuela.svg.png" width="320" /></a> <br />
Luego de analizadas las 2 opciones básicas usadas para configurar un blog de cara al universo de usuarios, puede darse la situación de que no terminen de satisfacer los objetivos y necesidades planteados.<br />
Dijimos que nos interesaba explayarnos especialmente sobre el uso de blogs en el <b>ámbito educativo</b>. Existe un camino intermedio a tener bajo consideración para un docente al que las funcionalidades de un <i>blog privado usando Blogger</i> no resulten adecuadas a lo que está buscando...<br />
<a name='more'></a><h3>
Tercera opción: un blog público no tan público</h3>
Dejémoslo claro desde un principio: vamos a ver cómo configurar un blog público de manera de restringirlo lo más posible de las visitas que no tengan el acceso directo.<br />
Para razonar sobre esto debemos hacer una pregunta clave: ¿de que manera llega un visitante a un sitio web determinado? Existen 3 vías principales:<br />
<ul>
<li>Conociendo de antemano la URL del sitio (http://www.<i>nombredelsitio</i>). </li>
<li>A través de un buscador, por palabras claves. </li>
<li>Siguiendo un vínculo presente en otra página (de blog, red social, etc.), o que le llegue un link desde un mail, SMS, etc. </li>
</ul>
En la mayoría de los casos las 2 últimas opciones son las más frecuentes, por lo que para llegar a <b>conseguir cierto grado de privacidad</b> deberíamos actuar sobre ellas. Si a esto le agregamos el mayor grado de control posible sobre quien puede publicar comentarios y quienes no, más un administrador <b>moderando </b>los mismos, podremos llegar a una alternativa intermedia interesante.<br />
¿Cuáles serían los pasos a seguir?<br />
<h4>
1- Impedir que los buscadores indexen el blog</h4>
Impidiendo que los buscadores muestren resultados que incluyan nuestro sitio conseguiríamos ganar mucho en privacidad... dificilmente pueda llegar a conocer la URL del blog alguien que no tenga que ver de alguna manera con la comunidad educativa.<br />
El administrador del sitio debería cambiar algunas cosas que vienen configuradas por defecto:<br />
<ul>
<li>Yendo a Configuración > Básico > Privacidad > Editar aparecen las opciones mostradas en la imagen; deberían quedar así: </li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Ine_2jaTdtPOWknuq0Z1TpieC8Du-7dmab3Gcqfc7mp7n39PDrzrwKfW7sE2scdKPzXw9AaoBcKLEb0NF0I2Jnz99rVLQuSJwP2LN0etfrM_E95FGHJfyBmKWepwyyg3I75-UMii82v_/s1600/privacidad.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Ine_2jaTdtPOWknuq0Z1TpieC8Du-7dmab3Gcqfc7mp7n39PDrzrwKfW7sE2scdKPzXw9AaoBcKLEb0NF0I2Jnz99rVLQuSJwP2LN0etfrM_E95FGHJfyBmKWepwyyg3I75-UMii82v_/s400/privacidad.png" width="400" /></a></div>
<ul>
<li>En Configuración › Preferencias de búsqueda > Rastreadores e índices deberíamos editar las<span class="OJTUNIC-E-db"> Etiquetas de los títulos de robots personalizadas usando en todas el atributo </span>"noindex" </li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghX97XJBtIIPF3d-wqAhgI189M17CSO_jHU16G1Yxd15NCLVORQAIBNs08oLjopHKdVNYaFm_bBw6oqaPMtbI8fZCAXHxyJ-Qaycuc-X35d1tKJdj9AtE2tCgq_N5C9YhfuT74KKPUeNab/s1600/noindex.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="243" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghX97XJBtIIPF3d-wqAhgI189M17CSO_jHU16G1Yxd15NCLVORQAIBNs08oLjopHKdVNYaFm_bBw6oqaPMtbI8fZCAXHxyJ-Qaycuc-X35d1tKJdj9AtE2tCgq_N5C9YhfuT74KKPUeNab/s400/noindex.png" width="400" /></a></div>
<ul>
<li>Asimismo convendría desvincular a nuestro blog de la cuenta de Google+ para que no haya vínculo entre los comentarios. </li>
</ul>
<h4>
Link de interés:</h4>
<ul>
<li>Foro Oficial > <a href="https://productforums.google.com/forum/#!topic/blogger-es/3vgV8gyF_Ws;context-place=topicsearchin/blogger-es/$20no$20indexable" target="_blank">Privacidad y enlace de un blog en blogger</a> </li>
</ul>
<h4>
2- Limitar cualquier publicidad sobre la existencia del blog</h4>
En este punto me refiero a tratar de no fomentar ni alentar la difusión de la existencia del blog <b>más allá del alcance de la comunidad educativa involucrada</b> (especialmente en redes sociales): esta cuestión no depende del administrador del blog ni de ninguna configuración sobre el sistema, dependerá del compromiso de los participantes en cuidar esta cuestión.<br />
<h3>
Conclusiones [rápidas]</h3>
La principal ventaja de implementar un blog público con este tipo de configuración (frente a la opción de hacer un blog privado) es que <b>no limitará la visualización del contenido a sólo 100 personas que, además, <u>necesariamente </u>deben tener una cuenta en Google</b>.<br />
<blockquote class="tr_bq">
NOTA: recordemos que estamos hablando de la implementación de blogs usando Blogger, apuntando a un uso educativo.</blockquote>
Queda pendiente el análisis de a quien permitir la posibilidad de contribuir con comentarios: la restricción de pedir una autenticación con alguna cuenta de mail o similar cuando los destinatarios son alumnos menores de 13 años es un claro problema, pero permitir comentarios anónimos (aun cuando su publicación sea moderada por un administrador) también es fuente de problemas y confusiones.<br />
En fin, será cuestión de probar y evaluar cual es la mejor alternativa y configuración para cada caso en particular…Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-89121498203264111672016-05-10T19:44:00.003-03:002018-03-04T01:16:49.938-03:00Configuración del Blog: ¿público o privado? (II)<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLVwQtMcCvbSWy4C6CMd8MJ_syxHsL5B9dalxGF3Zg7IfO-K7EON8ygPoKr-cMlBjRM3qjrymO3p6DhA-42I_LsTsh8_Gr1hngI8AljYPFYSWtu4iH2cB5rucYurQHwv2aUPdSXH_bE63/s1600/pegatina_prohibido_paso.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLVwQtMcCvbSWy4C6CMd8MJ_syxHsL5B9dalxGF3Zg7IfO-K7EON8ygPoKr-cMlBjRM3qjrymO3p6DhA-42I_LsTsh8_Gr1hngI8AljYPFYSWtu4iH2cB5rucYurQHwv2aUPdSXH_bE63/s320/pegatina_prohibido_paso.png" width="320" /></a></div>
En la <a href="http://diario1nuevoblogger.blogspot.com.ar/2016/05/configuracion-del-blog-publico-o.html" target="_blank">entrada anterior</a> hablamos rápidamente sobre la clasificación de los usuarios de un blog en Blogger según su <b>rol </b>(administrador, autor y visitante/lector).<br />
También (y como el título de estas entradas lo sugiere) hay otra clasificación —esta vez de los blogs— según un aspecto funcional básico: públicos o privados.<br />
Nos centraremos a continuación en hablar sobre los blogs privados y, especialmente, en su utilidad dentro del ámbito educacional.<br />
<a name='more'></a><h3>
Caso menos conocido: un blog privado</h3>
Existen múltiples razones para que un blog sea puesto a privado: en principio me voy a interesar en señalar cuestiones que tengan que ver con un blog a ser usado dentro de una comunidad educativa, donde la necesidad sea centralizar el trabajo de varias personas en un <b>proyecto privado.</b><br />
En pocas palabras: un blog privado es aquel en donde el universo de usuarios (lectores, comentaristas, autores) está restringido y controlado desde el vamos.<br />
En la mayoría de los CMSs comerciales o no (<i>WordPress, Drupal, Joomla</i>, etc.) existe en la base de datos del site la información de aquellos usuarios que tienen acceso permitido, con sus contraseñas correspondientes. El proceso de alta de los usuarios lo realiza el administrador del sistema ya sea desde la consola de control, o mediante un proceso de envío/respuesta de mails.<br />
<h3>
¿Cómo funciona esto en Blogger? </h3>
Dejando de lado cómo realizar el proceso de configuración necesario para hacer un blog privado (dejo algunos links de interés más abajo donde lo podés consultar), conviene destacar algunos puntos:<br />
<ul>
<li>Puedes compartir tu blog privado con <b>100 personas como máximo</b>, cifra que incluye a lectores, autores y administradores. </li>
<li>Los participantes <b>deben tener</b> una <a href="https://support.google.com/accounts/answer/27441" target="_blank">cuenta de Google</a> , forma de acreditar su pertenencia al grupo del blog (el proceso de ingresar datos y contraseña es el mismo que para el ingreso a los otros servicios de Google). </li>
<li>La persona a la que invites, recibirá un <b>correo electrónico </b>con un enlace para <b>aceptar la invitación</b>; una vez que esto ocurra ya podrá leer tu blog y será suficiente para acceder a tu blog privado. </li>
<li>La persona invitada accederá al blog bien <b>escribiendo la dirección</b> en el navegador o bien a través del enlace en el correo de invitación, nunca verá tu blog privado en su escritorio de Blogger. </li>
<li>Una vez dado de alta el usuario, solo un administrador podrá eliminarlo. </li>
</ul>
<h4>
Links de interés:</h4>
<ul>
<li>iniciaBlog > <a href="http://www.iniciablog.com/2012/03/blogger-privado-invitacion-lectores.html" target="_blank">Cómo configurar un blog como privado e invitar solo a quien quieras</a> </li>
<li>Info Oficial > <a href="https://support.google.com/blogger/answer/42673?hl=es" target="_blank">Controlar el acceso a tu blog</a> </li>
<li>BloggerTrucos > <a href="http://bloggertrucos.com/crear-blog-privado/" target="_blank">Blog privado: Como crearlo y para qué sirve?</a> </li>
</ul>
<h3>
Uso de esta alternativa en el ámbito educacional</h3>
La utilización de blogs privados dentro del ámbito educativo luce muy atractiva en aquellos casos donde el alcance del proyecto se circunscriba a un grupo limitado de personas (alumnos / docentes / padres). Puede ser un auxiliar pedagógico de interés para el docente y un importante factor motivador para los alumnos, especialmente si pueden volcar en entradas del blog los resultados de investigaciones, experimentos, etc.<br />
Antes de implementar un <b>blog privado usando Blogger</b>, sin embargo, conviene que se tengan en cuenta un par de cuestiones:<br />
<ul>
<li>El límite de 100 usuarios es (hasta donde sé) inflexible por parte de Blogger, por lo que dificilmente sea posible que se llegue a toda la comunidad educativa de una institución. No será un problema para un docente de grado que quiera trabajar particularmente con su grupo de alumnos. </li>
<li>La obligación de tener una cuenta en Google como modo de autenticación en el blog implicaría una complicación para su uso por parte de alumnos menores de 13 años (ver <a href="https://support.google.com/accounts/answer/1350409?hl=es-419" target="_blank">Requisitos de edad para las cuentas de Google</a>). Esta situación podría salvarse en caso de llegarse a un acuerdo entre la institución y los padres/tutores de los mismos. </li>
</ul>
<hr />
Como vemos, los blogs privados creados con Blogger pueden no ser la solución más adecuada (especialmente desde los instrumental). En la entrada siguiente mencionaremos una opción intermedia a ser considerada… Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-32954837666076411612016-05-09T08:14:00.004-03:002018-03-04T01:21:43.367-03:00Configuración del Blog: ¿público o privado? (I)<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc_bRj0-hxwTRWSLvpUcSEVMp3h2HpizBeX1P0jpCHgHeNmDQmOiGu_u-pCqdtKcqwVkBfok_gmWINeyPjGxfj-ltiRUTc56PQyKMNMLmbmLr80SV4oiDQ16M-8fwZbbxxidxc6obJC1a/s1600/Configuracion.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilc_bRj0-hxwTRWSLvpUcSEVMp3h2HpizBeX1P0jpCHgHeNmDQmOiGu_u-pCqdtKcqwVkBfok_gmWINeyPjGxfj-ltiRUTc56PQyKMNMLmbmLr80SV4oiDQ16M-8fwZbbxxidxc6obJC1a/s320/Configuracion.png" style="display: inline; margin-left: 0px; margin-right: 0px;" width="320" /></a></div>
El proceso de configuración de nuestro nuevo blog puede dividirse según que aspectos del mismo sean considerados: funcionales, estructurales, visuales, etc.<br />
Hablaremos en esta entrada de una cuestión fundamental: sobre el <b>Control de Acceso</b> al blog.<br />
<a name='more'></a>Antes de hablar de las posibilidades de acceso a nuestro blog, conviene distinguir 3 categorías de usuarios...<br />
<b>Administrador</b>: tiene que haber al menos uno (quien crea el blog tiene en principio este rol, aunque lo puede llegar a delegar). Sus privilegios son:<br />
<ul>
<li>Añadir o eliminar a otros administradores y autores </li>
<li>Cambiar la configuración o la plantilla del blog </li>
<li>Editar o eliminar cualquier entrada </li>
</ul>
<div>
<b>Autor</b>: los autores serán aquellas personas que invites a participar (via mail) en la creación de nuevas entradas, y que acepten dicha invitación. Sus privilegios son:</div>
<ul>
<li>Añadir y editar sus propias entradas </li>
</ul>
<b>Visitante/Lector</b>: la posibilidad de entrar en esta categoría dependerá del caracter público o privado de nuestro blog. A su vez el nivel de participación vía comentarios puede configurarse en <i>Configuración > Entradas y Comentarios > Comentarios > <span class="OJTUNIC-E-db">¿Quién puede hacer un comentario?</span></i>; opciones: <br />
<ul>
<li>Cualquiera (incluidos los usuarios anónimos) </li>
<li>Usuarios registrados (incluye OpenID) </li>
<li>Usuarios que tengan cuentas de Google </li>
<li>Solo los miembros de este blog </li>
</ul>
A su vez, cada entrada puede configurarse individualmente para permitir comentarios, cerrar su posibilidad a partir de determinado momento, o no permitirlos ni mostrar comentarios previos.<br />
<hr />
NOTA 1: Si quieren gestionar y publicar entradas en blogs, los administradores y autores invitados <b>deben tener</b> una cuenta en Google<br />
NOTA 2: Puedes añadir a tu blog un máximo de 100 miembros en total (autores, administradores y lectores).<br />
<h4>
Links de interés:</h4>
<ul>
<li>Info Oficial > <a href="https://support.google.com/blogger/answer/42673?hl=es" target="_blank">Controlar el acceso a tu blog</a> </li>
<li>iniciaBlog > <a href="http://www.iniciablog.com/2012/02/como-configurar-blogger-para-trabajar.html" target="_blank">Cómo configurar Blogger para trabajar en equipo</a> </li>
</ul>
<span style="font-weight: normal;">Una vez aclarado este tópico, comencemos a hablar sobre las posibilidades de configuración de un blog de acuerdo a las formas y límites de acceso... </span><br />
<h3>
Caso más frecuente: un blog público</h3>
Al crear un nuevo blog la opción ofrecida por defecto es la de un <b>blog Público</b>: esto significa que será posible su lectura para todos aquellos que lleguen a nuestra URL.<br />
Pero, como mencionamos previamente, se presentan algunos matices en cuanto al nivel de participación de los usuarios <i>en los comentarios</i>: nuestro blog puede configurarse de manera de exigir algún grado de autenticación o no.<br />
Añadido a esto está la posibilidad de <b>moderación </b>de los comentarios: las contribuciones de los lectores no serán inmediatamente publicadas en el blog, necesitarán de la previa aprobación de <b>un administrador</b> del blog. Esto puede ser engorroso, pero en <b>sitios vinculados a lo educativo</b> puede ser imprescindible como opción.<br />
No voy a ahondar mucho más sobre el tema blogs públicos, ya que el material de consulta en la web es muy amplio... <br />
<hr />
Pregunta: ¿será un blog público la mejor opción cuando pensamos en su aplicación circunscripta principalmente a una comunidad educativa determinada (alumnos / docentes / padres)?.<br />
No es un tema menor pensar en la privacidad y en la seguridad del alumnado, por lo que en la entrada siguiente nos centraremos en otras opciones de configuración posibles en Blogger. Chau.Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0tag:blogger.com,1999:blog-1775705786087486435.post-84668441476004147932016-05-08T16:37:00.000-03:002018-03-04T01:13:49.361-03:00Manos a la obra: 1er paso... suscribirse a Blogger<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBmlKAty1OfuBbt3fXlWkAKZKlqhKhnqb7IDBtRECRclDHbYpHY_ORxezplmB8yhqv32NnQLWQDl6abjEi1S9CD2iQ7HWMOkR_lFK8rzxaBHHigkRvKjDU3OQWKZCcoeV1j-WyE2MfPMk/s1600/start-button-305427_960_720.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOBmlKAty1OfuBbt3fXlWkAKZKlqhKhnqb7IDBtRECRclDHbYpHY_ORxezplmB8yhqv32NnQLWQDl6abjEi1S9CD2iQ7HWMOkR_lFK8rzxaBHHigkRvKjDU3OQWKZCcoeV1j-WyE2MfPMk/s320/start-button-305427_960_720.png" width="320" /></a> <br />
Existen cientos de páginas que sirven como guía a este proceso... no es mi intención agregar una más.<br />
En esta mini-entrada me interesa dejar solo un par de TIPs muy básicos que no hay que perder de vista...<br />
Ah... y también una recomendación —aún a riesgo de sonar trivial—: hay muchísimo material sobre Blogger en la web, pero esta plataforma se ha ido actualizando, por lo que conviene que prestes especial atención a la fecha de publicación de la info que leas. No todo es aplicable al 2016. No toda la info está revisada y actualizada por sus autores.<br />
<a name='more'></a><h3>
TIPs (pocos pero buenos)</h3>
<ul>
<li>Requisitos para la suscripción: los mismos que para abrir una cuenta en GMail... de hecho cuando alguien se suscribe a cualquier servicio de Google tiene acceso —con el mismo nombre de usuario y contraseña— a una variedad de servicios anexos. El trámite es más que sencillo (aunque no está de más tener en cuenta las políticas de ¿privacidad? de Google). </li>
<li><u>Tip 1</u>: si la finalidad del blog es del tipo educativo quizás te sea conveniente <b>crear una cuenta específica</b> en gmail y no usar una de tipo "personal". Por cada cuenta en Google tienes la posibilidad de crear hasta 100 blogs. </li>
<li><u>Tip 2</u>: tómate un tiempo para pensar <b>qué nombre le vas a asignar a tu blog</b>... lo ideal es que no sea muy largo o difícil de recordar, y que tenga que ver con la temática u objetivos del mismo. </li>
</ul>
El proceso inicial culmina con la elección de una plantilla; como es algo que veré como trabajar más adelante elegí una del llamada WaterMark. <br />
<h4>
Links de interés:</h4>
<ul>
<li><span href="http://purl.org/dc/dcmitype/Text" rel="dct:type">iniciaBlog > <a href="http://www.iniciablog.com/2013/06/como-crear-un-blog-con-blogger.html" target="_blank">Cómo crear un blog</a></span> </li>
<li><span href="http://purl.org/dc/dcmitype/Text" rel="dct:type">GCFA</span>prendeLibre > <a href="http://www.gcfaprendelibre.org/tecnologia/curso/crear_un_blog_en_internet/crear_un_blog_con_blogger/1.do" target="_blank">Abrir una cuenta en Blogger</a> </li>
<li>Info Oficial > <a href="https://support.google.com/blogger/answer/1623800?hl=es&ref_topic=3339243" target="_blank">Guía de introducción a Blogger</a> </li>
<li>tecnología educativa (Universidad de Málaga) > <a href="http://tecnologiaedu.uma.es/materiales/blog/cap3.pdf" target="_blank">Los blog y su uso en educación - cap3.pdf</a> </li>
</ul>
Anonymoushttp://www.blogger.com/profile/13702004827727287002noreply@blogger.com0