Aprende Informatica Conmigo

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

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 febrero, 2010 Por oscar 1 comentario

Formularios de login para inspirarnos

Los formularios de login son basicamente muy parecidos en cuanto al formato del codigo xhtml y ccs, pero podemos dejar volar nuestra imaginacion para moldearnos a nuestro gusto.

Si no tenemos mucha imaginacion, siempre podemos dar una vuelta por la red para encontrar muchos ejemplos que nos puedan inspirar. En este caso os hablo de design reviver que ha realizado una recopilacion con 100 de este tipo de formularios.

La recopilacion de los 100 formularios de login.

Espero que os sirva de inspiracion.

—–

Oscar Abad

http://www.xulak.com – Consultoría informática

oscar
oscar

Programador WordPress freelance

Publicado en: diseño web, programacion Etiquetado como: aprendeinformaticaconmigo, css, formulario, login, plantilla

13 enero, 2010 Por oscar Deja un comentario

Guía de Referencia CSS 2.1

La W3C pone a nuestra disposicion una guia de referencia de CSS 2.1.

Nos vienen muy bien para consultar algunos de los selectores, propiedades o valores.

Son muchos y es complicado acordarse de todos y su funcionamiento en un momento dado.

Bueno, os dejo en enlace: http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/#colores

Venga, saludos.

—–

Oscar Abad

http://www.xulak.com – Consultoría informática

oscar
oscar

Programador WordPress freelance

Publicado en: diseño web, formacion Etiquetado como: aprendeinformaticaconmigo, css, guia de referncia, w3c

12 enero, 2010 Por oscar Deja un comentario

Colores: Sus nombres y codigos para la web

Esta vez se trata de una aplicacion online para conocer el nombre y el codigo de los colores.

Si hemos realizado alguna labor de diseño web en CSS, deberiamos saber que los colores normalmente los indicamos o deberiamos hacerlo mediante su codificacion RGB Hexadecimal.

Esta utilidad (Name that color) nos permite seleccionar un color y partir de ahi, nos muestra sus codigos.

colores01

La veo muy util para esto que os he comentado sobre el diseño web.

Espero que os sea de utilidad.

Saludos.

—–

Oscar Abad

http://www.xulak.com – Consultoría informática

oscar
oscar

Programador WordPress freelance

Publicado en: diseño web, Software Libre - Windows Etiquetado como: aprendeinformaticaconmigo, cogigos, colores, css, hexadecimal, rgb, web 2.0

11 enero, 2010 Por oscar Deja un comentario

Testea todo el codigo antes de hacer publica tu web

El otro dia comente que podiamos testear nuestro codigo en la pagina de W3C, pero esta vez he encontrado algo mas completo.

La web es Test Everything! y, aunque es gratuita tambien dispone de un plan de pago que es, por supuesto, mas completo.

Las herramientas que podemos encontrar son:

  • CSS y HTML validators.
  • SEO.
  • Servicios sociales.
  • Web proxies.
  • Redes.
  • Herramientas de imagen.
  • Miscelaneas.

Cada categoria dispone de muchas herramientas.

Para comprobar que nuestro sitio web cumple con los estandares:

  1. Introducimos la URL de la pagina web.
  2. Seleccionamos que aspecto queremos revisar con las herramientas anteriores.

Fuente

—–

Oscar Abad

http://www.xulak.com – Consultoría informática

oscar
oscar

Programador WordPress freelance

Publicado en: posicionamiento, programacion, sistemas, tutoriales Etiquetado como: aprendeinformaticaconmigo, css, programacion web, test

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