Editar un texto

Submitted by martin on Lun, 06/10/2019 - 09:30

1.- Dirixímonos a crear contido > páxina (page)

2.- No título escribimos Que é a economía azul?

3.- Eliximos a taxonomía e termo axeitado

4.- Clic en Axustes de ruta URL, e engadimos a ruta texto

 

5.- Seguidamente copiamos e pegamos o seguinte texto. O ideal é copialo e pegalo nun programa de texto plano como o leafpad, gedit ou bloc de notas, no caso de empregar Windows.

 

  Mucho se ha hablado de la economía verde como una de las posibles formas o de las alternativas al sistema actual que predomina en occidente. Una forma sostenible de aprovechamiento de los recursos escasos que tenemos en la tierra pero con un alto coste de transformación ocasionando, en muchas situaciones, que los productos estén por encima de las posibilidades del ciudadano medio. Una opción que está sonando con mucha fuerza desde hace un par de años es la denominada Economía azul promovida por Gunter Pauli, un emprendedor belga que desde sus inicios de su carrera apostó por un método que fuera totalmente respetuoso con el medio natural y con un bajo coste. Pero, ¿qué es la economía azul? ¿es el modelo definitivo de sostenibilidad?

          La economía azul tiene como premisa servirse del "conocimiento acumulado durante millones de años por la naturaleza para alcanzar cada vez mayores niveles de eficacia, respetando el medio y creando riqueza y traducir esa lógica del ecosistema al mundo empresarial". El ser humano tiene que adaptarse e imitar el ambiente de una forma que no dañe su alrededor. Un ejemplo bastante claro serían móviles sin batería que se recargan gracias a la diferencia de temperatura entre aparato y cuerpo humano.

 
 

      Parece ciencia ficción pero muchas de las alternativas propuestas por el propio Pauli buscan una emulación con los sistemas naturales para ser eficientes en la producción de bienes y servicios que los ciudadanos necesitan. Se trata de aprovechar todo, desde los subproductos hasta el residuo ya que se convierten en oportunidades de negocio. Por ejemplo, para la fabricación de café solo se aprovecha un 2% de los que se extrae y con esta nueva visión podemos darle un uso a ese 98% restante como la plantación de este para la obtención de hongos que servirán para la investigación médica o alimentos para animales.

 

Fonte: http://www.pajarosflotantes.com

6.- Garda o texto

7.- Volve a editalo e cambia a fonte a Arial 12 e xustificao.

Engadir fórmulas en Moodle ou Drupal

Submitted by martin on Lun, 06/10/2019 - 09:26

Existen varias formas de engadir fórmulas na aula virtual Moodle ou no Drupal. Vexamos unha moi sinxela, que consiste en copiar o código desde o editor de ecuacións de Wiris ou Calcme

a. Entrar no enderezo: https://calcme.com

b. Inserir a fórmula desexada. Lembra que podes utilizar os atallos de teclado para ir máis rápido (por exemplo maiúsculas + 7) para inserir unha fracción, ou (control + cursor arriba) para inserir un expoñente

c. Seleccionamos a fórmula e prememos na combinación de teclas Ctrl + c , para copiar a fórmula ao portapapeles

1. PEGAR O CONTIDO EN MOODLE

a. Abrirmos o Moodle e creamos un tipo de contido Páxina. Pinchamos na icona de Editar código HTML

b. Pegamos o contido o portapapeles. Como podemos comprobar, trátase de código MathML

c. Clic en Actualizar. E este será o resultado:

2. PEGAR O CONTIDO EN DRUPAL

a. Creamos un novo contido tipo Páxina. Desactivamos o texto enriquecido

b. Pegamos o contido do portapapeles, e ¡importante!, seguidamente clic en Gardar.

 

Sen embargo  é moi posible que o tamaño de visualización sexa moi pequeno e queiramos que se vexa máis grande, cun tipo de fonte determinado ou cunha cor específica. Deberemos de botar man dos estilos css para iso. Poderíase empregar o seguinte código a modo de exemplo:

 

<!DOCTYPE html><html><head>
    <style>    math{font-family: TeX-fonts-35; font-size:2em;}    </style>
</head>
<body>
    <math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mn>2</mn><mn>4</mn></mfrac>
    <mo>+</mo><mfrac><mn>1</mn><mn>3</mn></mfrac><mo>+</mo><mfrac><mn>4</mn><mn>6</mn></mfrac>
    <mo>=</mo></math>
</body>
</html>

E a visualización web quedaría do seguinte xeito:

 

24+13+46=

Centrar texto nun div

Submitted by martin on Lun, 06/10/2019 - 09:02

A. Nesta primeira opción centramos horizontalmente o contido. Para isto creamos un div con clase contido e ademais de darlle as dimensións de alto e ancho, aplicamoslle un margin 0 auto. Seguidamente engadimos outro div dentro do cal está inserido o texto. Neste segundo div, fillo de contido, aplicamos un display:table-cell e un vertical-align:middle.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar div</title>
    <style>
    .contido{
        margin:0 auto;
        width:300px;
        height:200px;
        background:black;
    }    
    .texto{
        height:200px;
        display:table-cell;
        vertical-align: middle;
    }

    .texto p{
        color:white;
    }
    </style>
</head>
<body>
    <div class="contido">
        <div class="texto">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Aut quas voluptas culpa ea corporis alias nobis vel, doloribus illo obcaecati.</p>
        </div>
    </div>
</body>
</html>

 

B. Na segunda opción, centramos o div fillo texto empregando a propiedade de CSS transform. Para isto ao div pai configuramos a propiedade de position como relative. O div fillo (texto), configúrase coa propiedade absolute, para desprazalo div fillo o 50% da altura do elemento pai, contido. Seguidamente facemos un transform:translateY(-50%); para subir de novo o 50% da altura do div fillo texto.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Centrar div</title>
    <style>
    .contido{
        margin:0 auto;
        width:300px;
        height:200px;
        background:black;
        position:relative;
    }    
    .texto{
        position:absolute;
        top:50%;
        transform:translateY(-50%);
    }

    .texto p{
        color:white;
    }
    </style>
</head>
<body>
    <div class="contido">
        <div class="texto">
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.
            Aut quas voluptas culpa ea corporis alias nobis vel, doloribus illo obcaecati.</p>
        </div>
    </div>
</body>
</html>

Una práctica máis completa podémola ver no seguinte exemplo, incluso empregando o media query para visualizalo correctamente en dispositivos móbiles.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
   
<style>
        .strong{
            font-weight: bold;
        }  
        .titulo_seccion{
            font-family: Verdana, Geneva, Tahoma, sans-serif, serif;
            font-size:25px;
            font-weight: 100;
            text-align: center;
            color:white;
        }

        .contenido_seccion {
            font-family: Verdana, Geneva, Tahoma, sans-serif, serif;
            text-align: left;
            font-size: 14px;
            color:white;   
        }

        .contenido_seccion a{
            color:black;
            text-decoration:none;
        }
        
        #diseño{
            width:100%;
            height:355px;
            overflow: hidden;
            background:#7d5c7d;
            position:relative;
            
        }

        #diDesarrollo{
            width:50%;
            position:absolute;
            top:50%;
            left:25%;
            transform:translateX(-25%);
            transform:translateY(-50%);
      
        }

        @media  (max-width: 480px) {
            #diseño{
            height:415px;
            position:relative;
            }

            #diDesarrollo{
            width:95%;
            position:absolute;
            top:50%;
            left:2.5%;
            transform:translateX(-2.5%);
            transform:translateY(-50%);
            }
                    
        }    
   
 </style>
</head>
<body>
        <section id="diseño">
                <article id="diDesarrollo">
                    <h3 class="titulo_seccion">Texto centrado</h3>
                    <p class="contenido_seccion">Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                         Totam, deserunt officia exercitationem hic accusamus ipsam optio error eum facere
                         magni, et fuga. Fugit incidunt at ipsa beatae eos inventore pariatur tempore rem
                         possimus repellat! <span class="strong">Ipsam debitis dicta</span> voluptatem consequatur? Perspiciatis tempora
                          repellendus vel harum inventore quo ratione deleniti voluptatem ad.</p>
                </article>
    
        </section>
    
</body>
</html>

Engadir unha cor de fondo a un texto en Drupal 6

Submitted by martin on Lun, 06/10/2019 - 08:57

En ocasións desexamos resaltar un texto. Para iso podemos engadir unha cor de fondo a esa nova en concreto. Podemos empregar os seguintes métodos para a súa edición. Un dos datos que hai que engadir é o código da cor que desexamos engadir de fondo. Unha maneira de consultar eses códigos e a través da páxina https://picular.co

OPCIÓN Nº1

Coa axuda das táboas

Inserir táboa → avanzado → Cor de fondo

taboa0.png

taboa1.png

taboa2.png

OPCIÓN Nº2

Coa axuda de código CSS (máis elegante). Creamos un novo contido tipo páxina. Clic en disable rich text:

disable.png

E pegas un código html similar ao seguinte, pero modificando o texto que aparece entre as etiquetas <p> ---</p>, polo desexado. É interesante engadir un padding, para que a nova manteña un marxe en todo o contorno.

 <!doctype html>
<html>
<head>
   <style type="text/css">

      #texto_cor_fondo {
          padding: 10px;
          background-color: #d8da3d; }
  </style>
</head>

<body>

<div id="texto_cor_fondo">
<p>


¿Qué es Lorem Ipsum?

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto... 

</p>
</div>
</body>
</html>

codigo.png

OPCIÓN Nº3

No caso de que traballemos cun ficheiro css nunha carpeta pública, eliminaremos do código html anterior a parte correspondente a <style> --- </style>, que debe de estar reflexado no ficheiro css da carpeta pública. Se queremos empregar ese estilo de fondo en máis dun sitio, en vez de escoller un id, debemos de definir unha clase, coa etiqueta class. Quedaría do seguinte xeito:

No ficheiro css:

 .texto_cor_fondo {

    padding:10px;
    background-color: #d8da3d;

  }

En cada entrada creanda engadiremos código html, dispoñendo entre a etiqueta <p> ---</p> o texto que consideremos

<!doctype html>
<html>
<head>
</head>

<body>

<div class="texto_cor_fondo">
<p>

¿Qué es Lorem Ipsum?

Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.

</p>
</div>
</body>
</html>

resultado.png

Texto en columnas

Submitted by martin on Lun, 06/10/2019 - 08:54

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        box-sizing:border-box;
        margin:0;
        padding:0;
    }  
    html{
        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }
    #wrapper{
        width:80%;
        height:300px;
        margin-top:50px;
        margin-left:auto;
        margin-right:auto;
    }  
    .column-three{
        text-align: justify;
        column-count: 3;
        column-gap: 40px;
        column-rule: 2px solid tomato;

    }
    </style>
</head>
<body>
    <div id="wrapper">
        <div class="column-three">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptates atque ipsa, ea dolor debitis fugit esse neque obcaecati explicabo laboriosam commodi culpa earum iure facilis possimus necessitatibus nemo cum tempora cumque! Accusantium tempore odio, delectus quibusdam porro in voluptas voluptate a sapiente? Eligendi atque nemo enim rem nihil nostrum unde explicabo, maiores dolore, quam quis ipsam suscipit consectetur corrupti?</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae officiis neque ab. Debitis, illo. Harum doloremque voluptas illo facere dolores! Aliquam, reiciendis vitae? Reprehenderit officiis minima vitae harum tempora veritatis cupiditate libero, atque ipsam ex ullam impedit. Adipisci consequuntur ex non. Libero asperiores eaque amet, suscipit officia quaerat exercitationem est illum quasi, quidem dolor unde, minima dolore quis. Numquam aperiam accusamus error blanditiis porro quisquam eius. Quae inventore molestias provident sed eum, quos quis harum quasi veritatis voluptates quia dolore.</p>
        </div>
    </div>
    
</body>
</html>

Numeración personalizada dunha lista ordenada html

Submitted by martin on Lun, 06/10/2019 - 08:39

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

        #lista ol li{
            counter-increment: contador

        }

        #lista ol li:before{
            content:counter(contador) ".- " ;
            color:grey;
            margin-left:50px;
        }

 
    </style>
</head>
<body>
    <section id="lista">
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
        </ol>
    </section>
</body>
</html>

No caso de queren engadir unha icona de font awesome, deberemos de seleccionar a fonte polo código unicode. Neste exemplo escollemos a imaxe de play, con código unicode f144, tal e como podemos ver na seguinte imaxe:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            font-family:Verdana, Geneva, Tahoma, sans-serif;
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

        #lista ol li{
            counter-increment: contador;
        }

        #lista ol li:before{
            font-family: FontAwesome;
            content: "\f144  " counter(contador) ;
            
            color:grey;
            margin-left:60px;
        }
 
    </style>
</head>
<body>
    <section id="lista">
        <ol>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
            <li>Lorem ipsum dolor sit amet.</li>
        </ol>
    </section>
</body>
</html>

Ou tamén engadindo a clase na etiqueta <li> dentro do body

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

       
        #lista ol li{
            counter-increment: contador;
            display: inline;
        }

        #lista ol li:before{
           
            content:counter(contador);
            color:grey;
            margin-left:10px;
        }
 
    </style>
</head>
<body>
        
        
    <section id="lista">
        <ol>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>
                <i class="fa fa-play-circle fa-1x"></i> <li> Lorem ipsum dolor sit amet.</li><br/>

     
        </ol>
    </section>
</body>
</html>

No caso de que teñamos a imaxe da icona descargada, podemos engadila do seguinte xeito:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devide-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <style>
        html{
            
            font-size:1em;
        }
        #lista ol{
            list-style: none;
            counter-reset: contador;
        }

       
        #lista ol li{
            counter-increment: contador;
            list-style-image:url(./iconos/claqueta_negra.png);
        }

        #lista ol li:before{
            
            content:counter(contador);
            color:grey;
            margin-left:10px;
        }
 
    </style>
</head>
<body>      
        
    <section id="lista">
        <ol>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>
                <li> Lorem ipsum dolor sit amet.</li>     
        </ol>
    </section>
</body>
</html>

Como copiar e pegar do procesador de textos

Submitted by martin on Dom, 06/09/2019 - 18:55

Debemos de ter en conta que ó traballar co procesador de textos, xa sexa o Writer de LibreOffice como o Word de Microsoft Word, a información que copiamos non só é o textos ou as táboas que vemos, senón que inclúe información extra, como son os estilos e outra, a veces difícil de saber para o que vale. Por iso temos que ter unha pequena precaución ó pegala: empregar a icona "Pegar desde Word" (xa podían cambiarlle o título por "Pegar desde Writer" , non si?)

Ademais cas imaxes, non vale o procedemento de copiar-pegar. Debemos de gardalas nunha carpeta e posteriormente inserilas na páxina de Drupal.

 

1.- Crea unha nova páxina que titulamos OS PRINCIPIOS DA ECONOMÍA AZUL. Vincula esta páxina ca práctica 02 do menú creado no preliminar 5 (Diríxete á práctica 01 se tes dúbidas)

2.- Descarga o ficheiro de Writer: los principios de la economía azul.odt

3.- Copia no ficheiro de Writer toda a táboa

4.- No Drupal, clic no botón "Pegar desde Word"

6.- Aparece unha nova fiestra, cal temos que pegar o copiado, ca combinación de teclas "Control + V"

7.- Clic en Insertar

      Se aparece información do estilo "H3 { margin-bottom: 0.21cm; }H3.western ..." ó principio, eliminámola

8.- Aparece no Drupal, pero temos que facer varios cambios:

  • Táboa: botón dereito do rato >> Propiedades da táboa

       Escollemos as seguintes opcións: Recheo de cela: 20, Aliñamento: Centrado, Ancho 100%, Borde 1

  • Imaxe. No documento de Writer, situámonos enriba da imaxe, clic co botón dereito do rato, e eliximos a opción "Gardar imaxe ..."

 

gardámola nunha carpeta do noso equipo, como Imaxes, Escritorio, etc.

Vamos a Drupal, situámonos la cela na cal debería de ir a imaxe e pinchamos en "Insertar/editar imaxes" , eliximos a carpeta e o ficheiro que acabamos de gardar no paso anterior

 

9. Clic en feito

 

RESULTADO


 

Subscribe to texto