Flex y position absolute compatibles ?

Mi experiencia de cierta incompatibilidad entre flex y la position absolute surgió al querer centrar verticalmente el contenido (título, headline y botón) del primer fold de un website. Les explico como superar esa “incompatibilidad”.

Lo que buscaba hacer es un diseño fluido, que permita guardar el contenido centrado, aún cuando la pantalla está disminuida en su altura.
Mira el ejemplo siguiente para entender mis palabras:

Así el texto sigue visible, en lugar de desaparecer por tener una posición especificada con referencia base aplicada desde el top o bottom del contenedor.

Las primeras líneas de css que escribí se aplicó de manera fantástica en Chrome; en Chrome únicamente. Después de leer unas documentaciones, entendí que efectivamente hay dos cosas que tomar en cuenta:

align-self no se aplica si está combinado con margin : auto

selector {
align-self: center; 
margin: auto;
}

la position absolute y las características flex son compatibles en todo los navegadores únicamente cuando flex y absolute:

  • se aplican a un mismo elemento
  • ese elemento es el contenedor padre directo de los elementos que vamos a alinear.
contenedor-padre-lejano {
 height: 100%;
}
contenedor-padre-directo {
 position: absolute;
 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
 display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
 display: -ms-flexbox; /* TWEENER - IE 10 */ 
 display: -ms-flex; /* TWEENER - IE 10 */
 display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
 display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+, Chrome, Opera */
 align-items: center;
 height: 100%;
 top: 0;
 flex-direction: column;
}
elemento-a-centrar {
}

Si atribuimos el display flex a un padre lejano, el efecto se aplicará unicamente en Chrome.

En cuanto a la compatibilidad con previas versiones de navegadores:

la compatibilidad de flex con varias versiones de navegadores

 

Tabs en publicación de wordpress sin plugin

Ok, el proyecto: un onepage website responsivo con espacio de membresia para un espacio co-working llamado hasta la hora Vorticer (MX), desarrollada en WordPress.

Cuando desarrollo páginas en wordpress, procuro usar el mínimo, por no decir ningún, plugin. Eso para no obligar el cliente en actualizarlos cada cuanto, cosa que de cualquier manera no hará, y entonces evitar que conflictos entre la versión de wordpress y la versión del plugin surjan además que eventuales problemas de visualización de la información lleguen en los meses siguiendo la entrega del proyecto.

Uno de mis objetivos cuando trabajo en proyectos digitales es entregar un producto en simbiosis con el business del cliente, con una organización de contenido adecuado para el usuario y que vaya de mano con los objetivos que tiene el cliente (su empresa / servicio / producto es ya conocido, o es desconocido, está mejorando algo, lanzando algo nuevo,…), que sea funcional, agradable a la vista, con una identidad propia, y en el cual el contenido tiene el primer papel. Eso sin hablar de la rapidez de cargamento, y del SEO.

Para contestar a todas esas exigencias, decidí recurrir a las tabs para enseñar varias opciones de membresía disponibles en el Vorticer co-working. Solución idea para una uno page, además porque nada más hay 3 membresias, un número ideal para las tabs.

En fin, el desafío que me tomó 2 días en resolver, pero que guardaré de por vida en esta publicación, era de implementar eso sin instalar uno de las decenas de plugin que existen para ello. Mi solución es puro php y jQuery (UI).

Lo que me costo más trabajo ha sido aplicar el incremento de +1 a cada nuevo div panel del tab, aquí:
<div class=“tab-pane fade<?php if ( $get_featured_pages->current_post == 0 ): ?> in active<?php endif; ?>” id=“tabs-<?php echo $panel_id; ?>”>
sin que se incrementará el numero de excerpt de +1 (el problema que he tenido era que si el id era 2,  entonces el excerpt se visualizaba 2 veces,…) Eso porque ponía el incremento dentro del loop en vez de ponerlo al final como aquí:
<?php $panel_id++;
endwhile;

Les planteo la solución PHP aquí (todavía no integre el jQuery, tampoco el CSS)

 

El código PHP:

<?php if( !empty ( $page_array ) ) :
$count = 0; ?>
<div class=“team-content-wrapper clearfix”>
<div class=“tg-column-wrapper clearfix”>
<div id=“tabs”>

<!–La navegación tabs –>
<ul>
<?php while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post();

if ( $count % 3 == 0 && $count > 1 ) { ?> <div class=“clearfix”></div> <?php }

$title_attribute = the_title_attribute( ‘echo=0’ ); ?>

<li>
<?php
$output = “;
$himalayas_designation = get_post_meta( $post->ID, ‘himalayas_designation’, true );
?>

<?php
$output .= ’<a class=”team-name team-desc-wrapper” href=“#tabs-’ . $count . ’” title=“’ . $title_attribute . ’” alt =“’ . $title_attribute . ’”>’ . get_the_title() . ’</a></li>’ ;

echo $output;
$count++; ?>
<?php endwhile;

// Reset Post Data
wp_reset_query(); ?>
</ul>

<!– Los paneles de la navegación tab –>

<?php
$panel_id = 1;

while( $get_featured_pages->have_posts() ):$get_featured_pages->the_post(); ?>

<div class=“tab-pane fade<?php if ( $get_featured_pages->current_post == 0 ): ?> in active<?php endif; ?>” id=“tabs-<?php echo $panel_id; ?>”>
<div class=“col-xs-4 col-sm-2”>
<?php
$output = “;
$himalayas_designation = get_post_meta( $post->ID, ‘himalayas_designation’, true );

$output .= ’<p>’ . get_the_excerpt() . ’</p>’;
echo $output;
?>
</div>
</div>

<?php $panel_id++;
endwhile;
wp_reset_postdata();

// Reset Post Data
wp_reset_query();
?>

</div><!– #tab container –>
</div><!– .tg-column-wrapper –>
</div><!– .team-content-wrapper –>

<?php endif; ?>

You are welcome!

Instalar Ratchet un framework para app móvil

Necesito crear una landing page para el website versión móvil de Mundo Joven. Con los desarrolladores acordamos que sería conveniente utilizar Ratchet para eso.

Ratchet es bastante ligero por ser une framework de app móvil, entonces ideal para el diseño de una sencilla landing.

Es primera vez que utilizo Ratchet, y experimente una dificultad en instalarlo. Además las instrucciones definidas en su Get Started son, a mi gusto, incompletas.

El paquete de Ratchet contiene varios archivos de Grunt. Pero al momento de lanzar Grunt desde la Terminal (Mac) o desde la consola (PC), me regresaba un mensaje: No se encuentra ningún archivo Grunt en esta carpeta.
Intente resolver eso al actualizar node.js y NPM sin exito. Mi conclusión es que los archivos Grunt de Ratchet tienen un problema en su configuración..? (Si alguien tiene respuesta compartenla por favor). 

En fin mi problema real es que no puedo ver de manera correcta los archivos de Ratchet:

Al ver eso me parece claro que Ratchet no es un Framework tipo Bootstrap que puedes visualizar al rastrear el index directamente en el navegador. Y al ver como están organizados los archivos en docs (producción) y dist (procesados) me parece aún más claro. 

ratchet/
├── sass/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Es cuando consulte la documentación de NPM para la instalación de Ratchet que entendí lo que me faltaba:

  • Instalar Jekyll (un servidor en ámbito local).
  • Instalar Rouge (opcional)

Sin eso no podía ver los archivos de Ratchet de manera correcta, sin el servidor no hay manera de procesar los archivos. 

Una vez Jekyll instalado el servidor conecta todas las dependencias y abre el proyecto en http://localhost:4000 automáticamente gracias al comando 

jekyll serve


Nota: no es necesario ubicar los archivos de Ratchets en la carpeta htdocs de XAMP, MAMP.


Hice la instalación de Jekyll en Windows, sistema operativo que necesita una instalación alternativa extremadamente bien explicada por Julian Thilo en jekyll-windows.juthilo.com. La instalación en

Mac OS X or Linux se hace siguiendo las instrucciones de jekyllrb.com

Una vez instalado eso es lo que podrás ver en tu navegador al escribir el comando jekyll serve 

Instrucciones más detalladas para los principiantes en el uso de la consola o del Terminal: ( – en proceso de escritura de esta parte del tutorial —)