Programación Web

Después de actualizar dokuwiki, me aparcían todas las páginas en blanco. Encontré un error en el log de errores de Apache (/var/log/httpd/apache22-error_log accediendo desde ssh al NAS de Synology):

 

FastCGI: server "/php56-fpm-handler" stderr: PHP message: PHP Fatal error:  Uncaught exception

 'Exception' with message 'There is no suitable CSPRNG installed on your system' in /volume1/web/dokuwiki/vendor/paragonie/random_compat/lib/random.php:203, referer: http://192.168.0.24/dok

uwiki/doku.php

 

La solución se encontraba en la configuración de php. Hay que añadir un directorio en el open_basedir.

Para ello hay que entrar en la configuración de Web Station del Panel de Control y seleccionar la sección PHP Settings.

Existe una opción llamada "Customize PHP open_basedir". Hay que añadir al final

:/dev/urandom

de esa manera el texto quedaría como:

/var/services/tmp:/etc.defaults:/usr/bin/php:/usr/syno/synoman:/etc:/var/run:/volume1/@tmp/php:/var/services/web:/var/services/photo:/var/services/blog:/var/services/homes:/dev/urandom

 

Reiniciando el servidor, todo solucionado.

En esta ocasión voy a hablar de una extensión que se puede utilizar en Reveal.js, que sirve para realizar presentaciones en HTML de una forma bastante sencilla y que funciona bien como sustituto de PowerPoint.

 

Si tenemos instalada la página, vemos que se pueden añadir esquemas vectoriales a partir de un fichero svg (que podemos generar con Inkscape, un programa gratuito sustituto de Adobe Illustrator o Corel). 

Si nos interesa que el esquema aparezca de forma secuencial en la presentación podemos utilizar la siguiente extensión que he encontrado en github.

 

Primero tenemos que descargar el código en el directorio plugins de nuestra presentación. En el terminal clonamos el fragmento:

git clone https://gist.github.com/bollwyvl/fe1d2806449487cdf88a 

ya solo queda activarlo:

{src: 'reveal/plugin/svg-fragments/reveal-svg-fragment.js',
condition: function () { return !!document.querySelector('[data-svg-fragment]'); },
// de manera opcional, si se tiene instalado el d3
d3: "./d3.min.js"
}

 NOTAS importantes:

- Las capas han de llamarse "base", "fragment1", "fragment2", "fragmentX", sino no funciona.

<section>
<div data-svg-fragment="imagenes/historia_enfermedad.svg#[*|label=base]" width="100%">
<a class="fragment" title="[*|label=fragment1]"></a>
<a class="fragment" title="[*|label=fragment2]"></a>
</div>
</section>

 

Han cambiado mucho las cosas desde que apareció HTML5 y CSS3. Entre las que me parece interesantes está la posibilidad de añadir fuentes a las páginas web.

Voy a explicar un poco cómo hacerlo utilizando unas fuentes que sirven para crear bocetos de un diseñador llamado Christian Naths Redacted-Fonts.

 

Las fuentes que se pueden utilizar pueden tener diferentes formatos (extensiones). En mi caso las voy a colocar en un directorio llamado fonts, que cuelga del directorio raiz de la página web.

arbol

Descomprimo los ficheros que se encuentran en la carpeta Redacted-Font-master/fonts/web, dentro de la carpeta fonts de mi servidor. En este caso existe un fichero stylesheet.css que define los tipos de letra:

 /* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 2, 2013 */



@font-face {
font-family: 'redactedregular';
src: url('redacted-regular.eot');
src: url('redacted-regular.eot?#iefix') format('embedded-opentype'),
url('redacted-regular.woff') format('woff'),
url('redacted-regular.ttf') format('truetype'),
url('redacted-regular.svg#redactedregular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'redacted_scriptbold';
src: url('redacted-script-bold.eot');
src: url('redacted-script-bold.eot?#iefix') format('embedded-opentype'),
url('redacted-script-bold.woff') format('woff'),
url('redacted-script-bold.ttf') format('truetype'),
url('redacted-script-bold.svg#redacted_scriptbold') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'redacted_scriptlight';
src: url('redacted-script-light.eot');
src: url('redacted-script-light.eot?#iefix') format('embedded-opentype'),
url('redacted-script-light.woff') format('woff'),
url('redacted-script-light.ttf') format('truetype'),
url('redacted-script-light.svg#redacted_scriptlight') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: 'redacted_scriptregular';
src: url('redacted-script-regular.eot');
src: url('redacted-script-regular.eot?#iefix') format('embedded-opentype'),
url('redacted-script-regular.woff') format('woff'),
url('redacted-script-regular.ttf') format('truetype'),
url('redacted-script-regular.svg#redacted_scriptregular') format('svg');
font-weight: normal;
font-style: normal;

}

Este fichero css define el tipo de letras y el nombre que les da: redactedregular, redacted_scriptbold, redacted_scriptlight, redacted_scriptregular.

Ahora tenemos que añadir las definiciones a nuestro proyecto. Para no poner todas las definiciones al principio de un css, que dificultaría la lectura del fichero, yo lo que hago es importarlo desde un css que ya tengo. Añado al principio del fichero esta linea:

@import url(../fonts/stylesheet.css) all;

Dentro de los paréntesis está la ruta hasta el fichero stylesheet.css, en mi caso ../fonts/. Cada uno deberá poner la ruta propia.

Una vez hecho esto ya podemos utilizar las fuentes con el atributo font-family. Por ejemplo, si lo queremos todo con esta letra:

body {
font-family: 'redacted_scriptregular', Helvetica;
font-size: 18px; line-height:1.2;
}

 

Una forma de crear columas es añadiendo el siguiente código al tema que se esté utilizando (fichero scss), suele estar en la ruta css/theme/source/nombre_tema.scss

Se puede añadir antes de:

// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

 

.multiCol {
    display: table;
    table-layout: fixed; // don't fudge depending on content
    width: 100%;
    text-align: left; // matter of taste, makes imho sense
    .col {
        display: table-cell;
        vertical-align: top;
        width: 50%;
        padding: 2% 0 2% 3%; // some vertical, and between columns
        &:first-of-type { padding-left: 0; } // there's nothing before col1
    }
}

Luego solo tenemos que crear unos divs con la clase multicol y col, por ejemplo:

                <section style="font-size: 70%">
                    <h3>Doing two-column (this headline still full-width)</h3>

                    <div class='multiCol'>
                        <div class='col'>
                            Gallia est omnis divisa in partes tres, quarum unam incolunt Belgae, aliam Aquitani, tertiam qui ipsorum lingua Celtae, nostra Galli appellantur.
                        </div>
                        <div class='col'>
                            Qua de causa Helvetii quoque reliquos Gallos virtute praecedunt, quod fere cotidianis proeliis cum Germanis contendunt, cum aut suis finibus eos prohibent aut ipsi in eorum finibus bellum gerunt.
                        </div>
                    </div>
                    And simply more regular full-width text in the following. But hey, there is also:
                    <div class='multiCol'>
                        <div class='col'>Also works for 3 columns...</div>
                        <div class='col'>...as we can show in...</div>
                        <div class='col'>...this example here.</div>
                    </div>
                </section>