Aprende Informatica Conmigo

  • Inicio
  • Contenido Anterior
    • VIDEOTUTORIALES
    • Windows Server 2008
    • POWERSHELL

24 marzo, 2015 Por oscar Deja un comentario

Ionic Framework – Primera aplicación

ionic-logo-blog

Hace tiempo que había visto información sobre Ionic Framework por la web pero no le había dado mucha importancia debido sobre todo a que estaba mas o menos contento con Jquery Mobile y  no me apetecía cambiar sin más ni más.

También he de decir que estos dos últimos años he probado varios framew0rks pero ninguno se ajustaba a mis necesidades tanto como para cambiar.

Pero eso ha cambiado porque al ponerme serio y empezar a leer algunos artículos sobre Ionic Framework, hice algunas pruebas y quedé tan sorpendido que por fin he decidido cambiar de framework.

Antes de nada hay que decir que antes de empezar deberíamos tener algunos conocimientos sobre, html, css, javascript y angularjs.

Aunque es posible utilizar las librerías de Ionic Framework descargándolas y añadiéndolas a nuestro html, os voy a explicar la que para mi es la mejor forma. Estoy convencido que cuando lo probéis, estarés de acuerdo conmigo en esta forma de trabajar con Ionic y Phonegap.

Antes de instalar Ionic Framework, debemos tener instalado Nodejs. Como no tiene ningún secreto, simplemente lo descargáis y lo instaláis.

Tengo que decir que si queréis sacarle el máximo partido lo ideal es que tengáis instaladas las herramientas de desarrollo de vuestras plataformas favoritas como pueden para Android e IOS. Sobra decir que para compilar apps para IOS hace falta un Mac.

Asumimos que ya hemos instalado Nodejs. Desde la consola de comandos introducimos:

npm install -g ionic
También deberíamos instalar Cordova de la siguiente forma:
npm install -g cordova</pre>
<pre>

Bueno, ahora vamos a crear un nuevo proyecto Ionic y para ello, desde la consola de comandos nos posicionamos en el directorio sobre el que vamos a crear nuestro proyecto Ionic.

Creamos un directorio para incluir dentro este nuevo proyecto. Yo le he llamado: «primerionic», pero le podéis poner el nombre qué mas os inquiete. Recordad que es una prueba y haremos muchas más y mucho más interesantes.

Ejecutamos el siguiente comando :

</pre>
<pre>ionic start primerionic blank

En el comando anterior distinguimos «black» al final. Esto lo hacemos para que nos cree una app que herede de la plantilla básica «blank», que es la más sencilla. También disponemos de estas otras dos plantillas:  «tabs» y «sidemenu».

Si revisamos el directorio «primerionic», vemos que se han añadido un montón de directorios y ficheros:

ionicframework-01

A nosotros lo que más nos interesa es el contenido del directorio «www» porque es donde vamos a realizar los cambios y modificaciones, pero esto lo haremos en otro tutorial. Aunque como prueba, podemos cambiar el texto dentro del <h1 class=»title»> para que veamos el cambio.

Ahora vamos a ver cómo queda la app antes de compilarla y para ello nos posicionamos en el directorio de nuestra app y ejecutamos el comando:

ionic serve

Esto abrirá nuestra app en nuestro navegador web y podremos ver cómo queda:

Interesante, ¿verdad? Pues es todavía más interesante porque podemos hacer cambios en el documento y cuando guardamos, nuestra app también se actualiza en el navegador.

ionic-framework_primera-app-01

Podéis hacer la prueba de cambiar algo en el código, guardar el documento y ver que inmediatamente se actualiza en el navegador.

Bueno, creo que lo vamos a dejar aquí aunque hay más cosas interesantes de debemos saber de este framework pero vamos a ir poco a poco.

oscar
oscar

Programador WordPress freelance

Publicado en: Ionic Framework

19 junio, 2014 Por oscar Deja un comentario

56 generadores de texto LoremIpsum

En muchas ocasiones nos hace falta texto de ejemplo para nuestros proyectos web.

Pues bien, aquí os traigo un enlace a un artículo en el que se indican 56 sitios generadores de texto Loremipsum.

mashable 56 generadores de texto loremipsum

Espero que os sea de utilidad.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Desarrollo Etiquetado como: loremipsum, recursos, texto

17 junio, 2014 Por oscar Deja un comentario

Curso de Drupal 7 – 06 Añadir contenido: Páginas

Hoy vamos a ver cómo añadir una página a nuestra página en Drupal 7.

Es algo muy sencillo y muy parecido a añadir un artículo que ya vimos anteriormente.

Esto va a ser rápido.

Accedemos a través de la opción «Contenido» del menú de administración y podemos ver algo parecido a esto:

Curso Drupal 7 - 06 Añadir páginas

Como ya supondremos, pulsamos sobre «Basic page» o «Página básica» según el caso:

Curso Drupal 7 - 06 Añadir páginas

Ante de nada, vamos a activar el «resumen» y para ello pulsamos sobre el enlace «Editar resumen«.

Curso Drupal 7 - 06 Añadir páginas

Ahora tenemos un apartado para introducir el «Resumen«.

También observamos que el formato es similar al de artículo.

Curso Drupal 7 - 06 Añadir páginas

Rellenamos los campos.

Yo he utilizado el texto de: http://tlipsum.appspot.com/ pero hay muchos otros.

Curso Drupal 7 - 06 Añadir páginas

En este caso vamos a activar el check «Proporciona un enlace de menú«.

Esto es para que cree una pestaña o un nuevo enlace en el menú de nuestra página.

Curso Drupal 7 - 06 Añadir páginas

El resto de opciones son idénticas a las de artículo.

Simplemente mencionar que en el caso de las páginas, por defecto está activada la opción de «Cerrada» en «opciones de comentarios«. Al contrario que en los artículos.

Curso Drupal 7 - 06 Añadir páginas

Y en «Opciones de publicación» no está activado «Promovido a la portada«.

Curso Drupal 7 - 06 Añadir páginas

No le damos más vueltas y pulsamos en «Guardar«.

A continuación podemos ver cómo queda nuestra nueva página.

También observamos que ha añadido una pestaña nueva (Primera página) al menú principal.

Mencionar también que, si estamos logueados, veremos la opción de «Editar» debajo del título de la página. De esta manera podemos acceder a editar la página sin tener que acceder desde el menú –> «Contenido«.

Curso Drupal 7 - 06 Añadir páginas

Para terminar accedemos a «Contenido» desde el menú de administración para ver que ahora tenemos un artículo y una página.

Desde aquí podemos borrarlos y editarlos.

Curso Drupal 7 - 06 Añadir páginas

Muy sencillo, ¿Verdad?

Si os apetece podéis crear más artículos y más páginas. Jugar con las opciones y demás para que os vaya sonando.

Nos vemos en el siguiente tutorial.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Drupal Etiquetado como: agregar contenido, curso drupal 7

10 junio, 2014 Por oscar Deja un comentario

Curso de Drupal 7 – 05 Informe de estado de nuestro Drupal

Continuamos con el curso de Drupal 7 intentando entender poco a poco el funcionamiento de este software.

En esta ocasión vamos a ver el «Informe de estado» en el que nos informará de la salud de nuestro Drupal. Nos informará de posibles problemas en la instalación, problemas en la configuración, módulos, etc… Así como también nos muestra información relativa a la versión de PHP, Límite de memoria, etc…

Para acceder al «Informe de estado» pulsamos en la opción «Configuración» del menú de administración

Curso de Drupal 7 - 05 Informe de estado

Ahora podemos ver los diferentes informes que nos puede mostrar Drupal.

Para este caso pulsaremos sobre el enlace correspondiente al «Informe de estado«.
Curso de Drupal 7 - 05 Informe de estado

Ya a continuación nos muestra el informe propiamente dicho.

Podemos echar un vistazo para ver qué información nos da.

Ya que estamos, me fijo que hay un aviso (fondo amarillo). Voy a aprovechar para solucionarlo.

El aviso se refiere a que no están habilitadas las notificaciones de actualización. Esto, así a simple vista se refiere al módulo «Update Manager» del core. Es decir, que el módulo que nos hace falta está instalado por defecto pero no está activado.

Vamos a buscarlo…
Curso de Drupal 7 - 05 Informe de estado

Si pulsamos en el enlace «Página de administración del módulo» nos llevará directamente a la página de los módulos.

Al final de la lista de los módulos del núcleo, distinguimos uno con el nombre «Update Manager» y podemos ver en la parte derecha la descripción: «Comprueba las actualizaciones disponibles y puede instalar módulos y temas de forma segura a través de una interfaz web«.

Si, yo creo que el aviso del informe de estado se refiere a éste módulo.

Para activarlo, marcamos el check correspondiente al módulo y «Guardamos configuración«.
Curso de Drupal 7 - 05 Informe de estado

Volvemos a «Informes» –> «Informe de estado» para comprobar.

Ya no aparece el mensaje que aparecía antes, en su lugar hay otro aviso que nos indica que hay una versión de Drupal disponible más actual a la que tenemos instalada.

Pero podemos comprobarlo pulsando sobre el enlace «comprobar manualmente«.
Curso de Drupal 7 - 05 Informe de estado

Realiza el proceso de comprobación:
Curso de Drupal 7 - 05 Informe de estado

Y ahora salimos de dudas.

Parece ser que ya está disponible la versión 7.28 de Drupal y yo tengo instalada la 7.27 como podéis comprobar en la parte superior del «Informe de Estado«.

Ahora no vamos a actualizar de versión. Esto lo veremos en un tutorial posterior del curso.
Curso de Drupal 7 - 05 Informe de estado

Más abajo también nos indica que no tenemos instaladas las bibliotecas necesarias para mostrar los procesos de subida de archivos.

Esto también lo dejamos para otro tutorial.

Hasta aquí llegamos con el tutorial dedicado al «Informe de estado«.

Nos vemos en el próximo.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Drupal Etiquetado como: curso drupal 7, modulos

3 junio, 2014 Por oscar Deja un comentario

Curso de Drupal 7 – 04 Configurar URL limpias

Para comenzar este tutorial del curso de Drupal 7, lo primero que voy a hacer es recordar cómo terminamos el tutorial anterior.

Si no os acordáis no importa. Os recuerdo que creamos un artículo: «Primer artículo«.

Pues bien, por defeto Drupal 7 establece las rutas de los artículos y otros nodos de la forma:  «?q=node/1«.

En la siguiente captura podéis ver lo que os comento.

Ya sabréis que Drupal gestiona todo como nodos y eso está muy bien pero para las personas que ven o que tienen que escribir estas rutas, es un poco incordioso.

Curso de Drupal 7 - 04 Configurar urls limpias

Lo que vamos a hacer es intentar quitar el dichoso «?q=«.

Lo que tenemos que hacer es ir a «Configuración» en el menú principal de administración.

Dentro de la sección «Búsqueda y meta datos«, pulsamos sobre la que dice «URL limpias»

Curso de Drupal 7 - 04 Configurar urls limpias

Nos llevamos una sorpresa porque nos dice que las URL limpias no pueden ser activadas.

Bueno, no pasa nada. Esto es típico en Drupal 7.

Curso de Drupal 7 - 04 Configurar urls limpias

Lo que hacemos es abrir el fichero «.htaccess» que encontraremos en el directorio raiz de nuestro sitio Drupal 7.

Dentro de este fichero, aproximadamente hacia la línea 110 habrá una línea con el siguiente texto:  «#  RewriteBase /«.

Por si no lo sabéis, el carácter # en el fichero «.htaccess» indica que lo que sigue es un comentario por lo que no tendrá efecto.

Curso de Drupal 7 - 04 Configurar urls limpias

Tenemos que descomentar la línea que os he comentado por lo que quedaría:  «RewriteBase /«.

Curso de Drupal 7 - 04 Configurar urls limpias

Guardamos el fichero y lo volvemos a subir a nuestro servidor si es el caso.

Ahora volvemos a cargar la página en la que estámos antes y…

Curso de Drupal 7 - 04 Configurar urls limpias

Sorpresa! esto ha cambiado!

Ahora nos permite activar un check que dice «Activar URL limpias«. Pues lo activamos y pulsamos en «Guardar configuración«.

Curso de Drupal 7 - 04 Configurar urls limpias

Nos muestra un mensaje en el que nos dice que se ha guardado la configuración.

Ahora basta con ir a la dirección de nuestro blog y pulsar en el artículo que habíamos creado.

Ya no se muestran los caracteres «?q=«, ahora se muestra algo como:  «node/1«.

Curso de Drupal 7 - 04 Configurar urls limpias

Vale, ya se que esto tampoco ayuda mucho a la retención de los artículos, páginas y demás, pero es sólo un comienzo.

En posteriores artículos veremos cómo podemos como podemos configurar las URLs para que sean más amigables para todos.

De momento lo dejamos aquí y volveremos pronto.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Drupal Etiquetado como: drupal, drupal 7, urls limpias

27 mayo, 2014 Por oscar Deja un comentario

Curso de Drupal 7 – 03 Añadir contenido: Artículos

Continuando con el Curso de Drupal 7, antes de poder explicar algunas cosas importantes, creo que es buena idea crear algo de contenido antes de nada.

Para cear contenido, sea del tipo que sea, debemos pulsar sobre «Contenido» del menú de administración en la parte superior de la pantalla.

Curso drupal 7 - 03 añadir contenido - artículos

En la siguiente captura de pantalla disponemos de dos opciones: Artículo y Página básica.

A medida que vayamos activando módulos del core o instalando algunos otros, dispondremos de más tipos de contenido para utilizar. Además, como ya veremos más adelante en el curso, podremos crear tipos de contenido personalizados.

Seleccionamos «Article» para crear un artículo.

Curso drupal 7 - 03 añadir contenido - artículos

La siguiente es la pantalla para introducir el artículo en sí.

Título, etiquetas, cuerpo…

Curso drupal 7 - 03 añadir contenido - artículos

En «Formatos de texto» podemos seleccionar cualquiera de los que tenemos disponibles en principio. Ya iremos viendo qué es cada uno, cómo configurarlos e incluso cómo crear nuevos formatos de texto.

Por el momento dejamos el que viene por defecto.

En «Imagen» podemos seleccionar una imágen para subir e incorporar a nuestro artículo. Yo he incluído una.

Curso drupal 7 - 03 añadir contenido - artículos

En el apartado inferior disponemos de un menú a la izquierda que nos va mostrando diferentes opciones.

En la captura de arriba se muestra «Opciones de menu» en la tenemos la posibilidad de activar el check «Proporciona un enlace de menú«. Si lo activamos nos crearía un enlace en el menú a este artículo. De momento no nos interesa así que lo dejamos como está.

A continuación vemos la opción de «Información de la revisión«. Drupal 7 nos permite crear «revisiones» de los artículos e incluir una descripción a la revisión para que sepamos posteriormente lo que hemos hecho en dicha revisión.

Curso drupal 7 - 03 añadir contenido - artículos

La siguiente opción es: «Alias de URL«.

Esto no da la opción de especificar otro nombre o ruta de acceso  a la página o en este caso a nuestro artículo.

Curso drupal 7 - 03 añadir contenido - artículos

En «Opciones de Comantarios» no hay mucho que explicar.

Abrir: Se podrán dejar comentarios a este artículo.

Cerrada: No se podrán dejar comentarios a este artículo.

Curso drupal 7 - 03 añadir contenido - artículos

En «Información de la autoría«, por defecto rellena el campo «Escrito por» con el nombre del usuario que escribe el artículo pero si queremos podemos indicar otro.

También podemos indicar una fecha de publicación si no deseamos que sea la actual.

Curso drupal 7 - 03 añadir contenido - artículos

Por último, «Opciones de publicación» nos ofrece tres opciones:

  • Publicado:  El artículo se publicará.
  • Promovido a la portada:  Aparecerá en la página inicial del sitio.
  • Fijo al comienzo de las listas:  Con esta opción le indicamos que el artículo permanezca fijo al inicio del listado de artículos publicados.

Curso drupal 7 - 03 añadir contenido - artículos

Antes os muestro otra captura en la que se ve la imagen que he adjuntado y subido al artículo.

Para terminar con la edición y publicar el artículo, pulsamos sobre el botón «Guardar» de la parte inferior izquierda.

Curso drupal 7 - 03 añadir contenido - artículos

Ya podemos ver el artículo que se ha publicado y se muestra en la siguiente captura:

Curso drupal 7 - 03 añadir contenido - artículos

Si accedemos o vamos al inicio de nuestro sitio, lo veremos de esta forma:

Curso drupal 7 - 03 añadir contenido - artículos

Para terminar, comentar que para ver el contenido que está publicado deberemos acceder de nuevo a «Contenido» desde el menú de administración.

Como véis, se muestra sólo un artículo porque sólo tenemos uno ahora mismo.

A la derecha del artículo «Primer artículo» tenemos disponibles dos enlaces: «editar» y «eliminar«. Creo que no hay que explicar nada sobre esto, verdad?

Curso drupal 7 - 03 añadir contenido - artículos

Bien, en este tutorial hemos creado nuestro primer artículo en nuestro sitio de Drupal 7.

Ya veis que es sencillo y a medida que vayamos profundizando, nos acostumbraremos a Drupal.

Aquí lo dejamos por ahora.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Drupal Etiquetado como: artículos, curso, curso drupal

23 mayo, 2014 Por oscar Deja un comentario

Lorempixel.com – Generador de imágenes para desarrollos web

LoremPixel.com es una herramienta muy útil a la hora de realizar desarrollos o diseños web.

Seguro que a más de uno de vosotros os ha pasado que no encontráis las imágenes adecuadas con los tamaños adecuados para insertar en un nuevo desarrollo web. Pues bien, lorempixel.com es un servicio gratuito de imágenes del tamaño que necesitemos en cada momento y para cada sitio.

lorempixel - generador imagenes ejemplo para desarrollo web

Es algo muy fácil de implementar en nuestro código html.

Por ejemplo, para disponer de una imagen de 400 x 200 píxeles, deberíamos agregar:

<img src=»http://lorempixel.com/400/2002 />.

En la siguiente captura vemos algunos ejemplos más:

lorempixel - generador imagenes ejemplo para desarrollo web

Además disponemos de un Generador de placeholders como se puede ver en esta captura:

lorempixel - generador imagenes ejemplo para desarrollo web

Y este sería el resultado:

lorempixel - generador imagenes ejemplo para desarrollo web

En este enlace he puesto algunos ejemplos con diferentes tamaños a modo de muestra para que sepáis de lo que estamos hablando.

lorempixel - generador imagenes ejemplo para desarrollo web

Este es un recurso muy útil por lo que os aconsejo que utilicéis o por lo menos lo valoréis.

Es cierto que hay mucho más como este o parecidos y los iremos viendo poco a poco en sucesivos artículos.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Recursos Etiquetado como: desarrollo, diseño, imagenes, lorempixel, placeholder, plantillas, recursos, web

20 mayo, 2014 Por oscar Deja un comentario

Curso de Bootstrap 3 – 01 Introducción y primeros pasos

Con este tutorial comenzamos un nuevo «curso» en el que nos centraremos en la nueva versión de Bootstrap. En este caso la versión 3 y en el momento en el que estoy escribiendo esto la última versión es la «3.1.1«, como se puede ver en la captura siguiente:

No voy a explicar mucho sobre teoría ya que hay mucha por la web e incluso ya existen muchos libros sobre Bootstrap 2 y alguno sobre Bootstrap 3.

Para los que no sepáis lo que es, os diré que es un Framework CSS que nos va a permitir de manera relativamente sencilla, mejorar nuestras páginas web tanto en aspecto como en estructura.

Bien, vamos a empezar con lo que nos ocupa el día de hoy.

Primero vamos a descargar los ficheros necesarios y para ello iremos la página http://getbootstrap.com.

En la página principal disponemos de un botón o enlace «Download Bootstrap» que vamos a pulsar.

Curso de Bootstrap 3 - 01 Primeros pasos

Ahora tenemos a nuestra disp0sición varios botones para descargar bootstrap de diferentes formas pero nosotros vamos a hacerlo de la manera más sencilla por el momento y más adelante ya veremos las otras opciones.

Pulsamos sobre el primer botón: «Download Bootstrap«.

Curso de Bootstrap 3 - 01 Primeros pasos

Esto nos descargará el fichero «bootstrap-3.1.1-dist.zip» (la versión depende del momento en el que os la descargéis).

Si descomprimimos el fichero zip, deberíamos tener algo similar a esto:

Curso de Bootstrap 3 - 01 Primeros pasos

Antes de empezar a hacer nuestra primera página, no está de más echar un vistazo para ver el contenido de cada una de las carpetas.

En la carpeta principal es donde crearemos nuestro fichero «index.html» porque de momento no existe.

Lo que vemos es que hay 3 carpetas:

  • css
  • fonts
  • js

Curso de Bootstrap 3 - 01 Primeros pasos

Está claro qué es lo que hay en cada una pero para asegurarnos, abrimos cada una de ellas para ver el contenido:

Carpeta «css«:

Curso de Bootstrap 3 - 01 Primeros pasos

Carpeta «fonts«:

Curso de Bootstrap 3 - 01 Primeros pasos

Carpeta «js«:

Curso de Bootstrap 3 - 01 Primeros pasos

Bien, ya nos hacemos una idea de lo que hay en cada sitio y como ya sabemos defendernos un poco con HTML, vamos a realizar un página de prueba para ver cómo funciona bootstrap.

Para ello crearemos un fichero de texto vacío con el nombre «index.html» en la carpeta principal.

En este fichero copiaremos el código de ejemplo desde: http://getbootstrap.com/getting-started/#template

Lo pongo a continuación para facilitar el trabajo:

<code><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html></code>

Si abrimos el fichero «index.html» en un navegador web, debería mostrar algo como esto:

Curso de Bootstrap 3 - 01 Primeros pasos

Podéis ver el resultado de este ejemplo aquí.

Ya, ya se que no es muy bonita ni nada por el estilo, es nuestro primer intento con bootstrap 3 y en posteriores tutoriales haremos más cosas, por supuesto.

Recordar que Bootstrap hace uso de la librería JQuery.

De momento lo dejamos aquí.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Bootstrap 3 Etiquetado como: bootstrap, css, desarrollo web, framework

15 mayo, 2014 Por oscar Deja un comentario

Bootply – El jsfidde para bootstrap

Bootply es una buena herramienta online y gratuita para realizar pruebas con nuestros desarrollos en Bootstrap.

Bootply - El jsfidde para bootstrap

En la página principal de Bootply podemos pulsar sobre el botón «Play Now» para probarlo y que veamos las características que tiene y los beneficios que nos ofrece a la hora de realizar un desarrollo sobre Bootstrap.

En la siguiente pantalla podemos hacernos una idea de las secciones o apartados de que dispone.

Bootply - El jsfidde para bootstrap

Para ver un poco las posibilidades de esta herramienta, vamos a pulsar sobre el enlace «Basic Starter» de la barra lateral izquierda, justo debajo de «Templates«.

Esto nos carga una plantilla básica que podemos ver en la siguiente captura:

En la parte inferior vemos la página web.

Si queremos ver cómo va quedando en un navegador web, podemos pulsar el botón de la pantall en la parte derecha.

Bootply - El jsfidde para bootstrap

Esto nos abre una nueva ventana de nuestro navegador y nos muestra esto:

Bootply - El jsfidde para bootstrap

Podemos redimensionar la pantalla para ver cómo va quedando y los cambios que sufre al disminuir el ancho de la ventana:

En la siguiente vemos que el menú ha desaparecido y en su lugar, ha aparecido un botón de menu en la parte superior derecha.

Bootply - El jsfidde para bootstrap

Si seguimos disminuyendo el ancho de la pantalla par que tenga un tamaño tipo smartphone vemos que los textos se adaptan:

Bootply - El jsfidde para bootstrap

En la siguiente captura he marcado las diferentes secciones: Javascript, Css y Html donde podremos añadir nuestro propio código en cada una de ellas.

Bootply - El jsfidde para bootstrap

Si sólo queremos probarlo, podemos hacerlo sin darnos de alta pero si queremos guardar nuestros proyectos, es mejor darnos de alta y para ello debemos pulsar sobre el botón «Login» situado en la parte superior derecha:

Bootply - El jsfidde para bootstrap

Como no tenemos cuenta todavía, debemos pulsar sobre el enlace: «New User? Sign-up…» y nos aparecerán los campos a rellenar para darnos de alta.

Bootply - El jsfidde para bootstrap

Una vez que hayamos realizado el sencillo proceso de alta, podemos entrar a nuestro panel y ver los proyectos que hemos ido creando.

En la siguiente captura vemos que hay un proyecto creado: «01 starter template«.

Bootply - El jsfidde para bootstrap

Bueno, lo dejamos aquí con la esperanza de que os haya sido de utilidad.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Bootstrap 3, programacion Etiquetado como: bootply, bootstrap

8 mayo, 2014 Por oscar Deja un comentario

Curso de Drupal 7 – 02 Cambiar idioma a Español

En el tutorial anterior sobre Dupal 7 vimos cómo instalarlo.

Bien, ahora vamos a cambiar el idioma por defecto a Español ya que lo tenemos en Inglés.

Para ello, en primer lugar entramos en el panel de administración con los datos que pusimos en la instalación.

Drupal 7 - Cambiar idioma a Español

Antes de explicar las deferentes partes y opciones del panel de administración de Drupal 7, vamos a traducirlo.

En la captura siguiente podemos ver el aspecto de la web desde el panel de administración.

Drupal 7 - Cambiar idioma a Español

A continuación seleccionamos «Modulos» del menú superior.

Nos aparece una lista de módulos que, como no hemos instalado ninguno, serán los que vienen por defecto.

En la lista de módulos, buscamos y activamos el check de «Content Translation» y «Locale».

Drupal 7 - Cambiar idioma a Español

Para guardar los cambios pulsamos en «Save Configuration».

Drupal 7 - Cambiar idioma a Español

Ahora nos vamos a «Configuration» y en la parte de abajo, dentro de la sección «Regional and Language» hay un enlace a «Languages». Lo pulsamos.

Drupal 7 - Cambiar idioma a Español

La pantalla que nos aparecerá será muy similar a la siguiente:

Lo que debemos hacer es añadir un nuevo idioma y para ello pulsaremos sobre el enlace «+ Add Language».

Drupal 7 - Cambiar idioma a Español

Ahora buscamos «Spanish (Español)» en la lista desplegable y lo seleccionamos.

Pulsamos en el botón «Add Language».

Drupal 7 - Cambiar idioma a Español

Una vez hecho esto, vemos en la siguiente pantalla que ahora hay dos idiomas en la lista de idiomas.

Si nos fijamos vemos que «English» está como «Default».

Drupal 7 - Cambiar idioma a Español

Podemos cambiar esto para poner «Spanish» por defecto activando el check de «Default» correspondiente a «Spanish» y guardamos.

Drupal 7 - Cambiar idioma a Español

Ahora tenemos que descargar la traducción para nuestro idioma y la versión que tengamos instalada de drupal.

En mi caso es la 7.27.

La podéis descargar desde:  https://localize.drupal.org/translate/languages/es

Drupal 7 - Cambiar idioma a Español

Ahora, de nuevo desde el panel de administración de Drupal, seleccionamos «Configuración» en el menú principal.

Dentro del apartado «Regional and language» pulsamos sobre el enlace «Translate interface».

Drupal 7 - Cambiar idioma a Español

En la siguiente pantalla podemos ver los dos idiomas que tenemos añadidos y que «Spanish» no está traducido.

Pulsamos sobre la pestaña «Import».

Drupal 7 - Cambiar idioma a Español

Dentro de «Import Translation» pulsamos en el botón para seleccionar el fichero que hemos descargado con la traducción correspondiente.

Drupal 7 - Cambiar idioma a Español

Y pulsamos en el botón «Import» de la parte inferior.

Drupal 7 - Cambiar idioma a Español

Este proceso tardará un rato osea que tened paciencia.

Cuando termine, mostrará una página como la de la captura siguiente.

Drupal 7 - Cambiar idioma a Español

Observamos que ya nos aparece en Español.

Tanto el panel de administración como la web.

Drupal 7 - Cambiar idioma a Español

Con esto hemos conseguido poner en Español nuestra instalación de Drupal.

Comentar que también se puede hacer desde la instalación misma, pero eso lo veremos en otro tutorial.

Lo dejamos por ahora.

Saludos.

oscar
oscar

Programador WordPress freelance

Publicado en: Drupal Etiquetado como: desarrollo

  • 1
  • 2
  • Página siguiente »

Hazte con el tema Divi

Divi WordPress Theme
Libro windows server 2008

Libro certificación Windows Server 2016

Libro certificación Windows Server 2016

Libro Windows Server 2016

Libro Windows Sever 2016
Web Hosting

Últimos artículos

  • PHP función var_dump(): Mostrar el contenido de una variable
  • PHP función unset(): Eliminar variables
  • MySQL LIMIT: Limitar la canidad de filas en una consulta
  • PHP función isset(): Evaluar si una variable está definida
  • PHP función empty(): Comprobar si una variable está vacía
  • MySQL SELECT DISTINCT para encontrar registros con diferente valor en el mismo campo
  • Los mejores libros en español para aprender WordPress

Mis Webs

  • Aprende Informática Conmigo
  • Dinapyme
  • MUSIKP
  • Oscar Abad Folgueira

Proyectos

  • Basabe Baserria
  • Batukada Battuere
  • Bicicletas Sin Pedales
  • Bordalan
  • C.R. Pantano del Rumblar
  • Dinapyme
  • DiverBiblio
  • Egia Ingenieros
  • Hermanos Vivas construcciones
  • Ibartxi – Suministros de Gas y Soldadura
  • LANBASE
  • LS Fotografía
  • Luke and Phil
  • Masajes Mas Sana
  • MUSIKP
  • Oh! Yeah Dev
  • Oscar Abad Folgueira
  • Participación ciudadana Basauri
  • Restaurante Bideko
  • Taldesport
  • Vicente Choya
  • WooCommerce Knowledge2K
  • Inicio
  • Contenido Anterior

Copyright © 2023 · Oscar Abad Folgueira Y DINAPYME· Acceder