Menú

Mostrar Mensajes

Esta sección te permite ver todos los mensajes escritos por este usuario. Ten en cuenta que sólo puedes ver los mensajes escritos en zonas a las que tienes acceso en este momento.

Mostrar Mensajes Menú

Mensajes - arthusu

#281
Off Topic / Que cancion usan como despertador?
Noviembre 19, 2013, 03:30:45 AM
Hola amigos de underc0de! bueno hoy andaba instalando mi despertador y le puse mi musica y pues se me ocurrio preguntarles que musica usan ustedes como despertador! la mia es la siguiente:



espero que compartan las musica con la que se levantan por las mañanas, salu2 :D
#282
Componentes de diseño
Bootstrap provee algunos componentes pero estos necesitan otros complementos separados como son los javascript de bootstrap el jquery, etc... y esto lo podemos personalizar.

  Menú Desplegable
Podemos crear un menú desplegable básico de la siguiente manera:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Expliquemos un poco primero creamos nuestro menu con la clase .dropdown-menu que es para crear el menu desplegable, le damos un rol de menu con el atributo role, aqui viene una parte importante le ponemos display:block ya que en las propiedades del dropdown-menu tiene display:none por lo que le debemos de dar un atributo display:block ... ponemos una posicion static ya que por defecto tiene absolute y le damos algunos margenes y tamaño, usamos el atributo aria-labelledBy para indicar una relacion con widgets, groups y labels.
    Opciones Agregandolo a un Div (Capa)

Tenemos algunas opciones que le podemos agregar a estos menus, empezando por ejemplo: agregando en un div con la clase .dropdown el menu anterior.

De manera que de algo de margen y posicion relativa.

Alinear a la derecha

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Podemos alinearlo a la derecha .pull-right :

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Deshabilitar una opcion del menu

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Para ello utilizamos la clase .disabled :

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Submenu

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Para crear un submenu solo agregamos la clase .dropdown-submenu dentro de una lista y asi podemos crear otra lista con los items para el submenu.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

  Grupos de botones Los grupos de botones permiten que multiples botones se alineen juntos, por lo cual debemos usar una capa (div) con su clase .btn-group

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

barra de herramientas

si tienes multiples botones puedes agregar fuera de la clase .btn-group la clase .btn-toolbar diciendo asi que es una agrupacion de una barra de herramientas, como en el siguiente ejemplo:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Como te puedes dar cuenta estamos usando las clases para hacer referencia a los sprites, si no te acuerdas de esto puedes ver el You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login


Como ves en este caso nuestra clase .btn-group se muestra inline-block por lo que para poder hacer que se muestre por ejemplo, de manera vertical usariamos la clase .btn-group-vertical de manera que quede verticalmente nuestra barra de herramientas.
    Botones desplegables
Para agregar un boton simplemente envuelves el boton y el menu desplegable con .btn-group. Tambien puedes usar .caret para actuar como un indicador de que el boton es un boton desplegable:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Boton desplegable con separador (Split)

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
La diferencia es que le dejamos un boton vacio para que agregue la flecha hacia abajo viendose un poco mas formal.

Puedes usar las clases para hacer mas pequeños los botones como son: .btn-mini, .btn-small, .btn-large.

Tambien puedes usar la clase .dropup para que en lugar de abrir la flecha hacia abajo sea hacia arriba:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
  Elementos de navegación Bootstrap provee diferentes opciones para los estilos para los elementos de navegacion. Todos comparten el mismo marcado y la clase base .nav.

Boostrap tambien provee una clase de ayuda, .active. En principio agrega distincion entre el elemento actual y los elementos aparte del resto de los elementos de navegacion. Tu puedes agregar esta clase para los links principales o los links de la pagina actualmente activos.

  Navegación tabular Para crear unas fichas en el menu, comenzamos basicamente con una lista desordenada con la clase base .nav y agregando .nav-tabs.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

    Navegación básica comprimida Para usar la navegacion comprimida usamos .nav-pills en lugar de .nav-tabs.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

  Clase deshabilitar Para cada clase .nav, tu puedes agregar la clase .disabled, y se creara un link con estilo gris tambien puedes deshabilitar el estado :hover.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

  Navegación apilada Ambas clases .nav-tabs y nav-pills son horizontales por defecto. Por ello aparece el apilamiento vertical, solo agregamos la clase .nav-stacked.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login


You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

  Navegación Desplegable La navegacion desplegable comparte una sintaxis similar con los botones desplegables. Por defecto, tu tienes una lista de enlaces trabajando en conjunto con algunos atributos que disparan una lista desordenada con la clase .dropdown-menu.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Para hacer lo mismo con una navegacion comprimida, simplemente intercambiamos .nav-tabs por .nav-pills.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login





  Lista de navegación Las listas de navegacion son utiles cuando tu necesitas mostrar un grupo de enlaces. Este tipo de elementos es comun cuando creas un panel de administrador.  Un ejemplo, tu puedes crear todos los enlaces de las paginas mas comunes. Al igual que todas las listas vistas hasta ahora, las listas de navegacion tambien no ordenadas con la clase .nav y para agregar el estilo en especifico de lista de navegacion agregamos .nav-list.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Como puedes ver con la clase .nav-header en un elemento de la lista podemos crear nuestro encabezado en la lista de navegacion.
Y tambien con la clase .divider en un elemento de la lista podemos crear un divisor en la lista de navegacion.

  Navegación por fichas Tu no solo puedes crear una navegacion por fichas usando el complemento de javascript y la clase .tabbable, tu puedes agregar interaccion par abrir diferentes ventanas con diferentes contenidos. Para crear una navegacion con pestañas o fichas, nosotros usamos .tab-pane como identificador unico para cada pestaña, y el contenido lo envolvemos con .tab-content:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

  Posicionamiento de las fichas Las pestañas o fichas son completamente posicionables, tu puedes ponerlas abajo o arriba y lo veras como resultado en el contenido.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Como ves usamos la clase .tabs-below, si quisieramos otro posicionamiento de los tabs (fichas o pestañas) podriamos agregar cualquiera de estas clases:

.tabs-left - las fichas se posicionan a la izquierda
.tabs-right  - las fichas se posicionan a la derecha

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

    Barra de navegación La barra de navegacion es una de las mejores caracteristicas que tiene bootstrap, incluye estilos para el nombre del sitio y navegacion basica. Puede ser extendida agregando controles de formulario especificos y dropdowns (menus desplegables), este seguro de que la barra de navegacion restringe el ancho del contenido de la pagina, esta puede ser colocada dentro de un div .span12 o .container.

barra de navegación básica

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Notas la clase .brand en el codigo. Este te da un texto con un poco de brillo, negrita y un tamaño personalizado. Se utiliza para los titulos en la barra de menu.

  Enlaces en la barra de navegación
Para agregar enlaces en la barra de navegacion, simplemente agregas una lista no ordenada con la clase .nav. Si tu quieres agregar un divisor a los enlaces, tu puedes agregar una lista vacia con la clase .divider-vertical:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login


  Formularios En lugar la clase base de los formularios que vimos en elYou are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
de los formularios usaremos la clase .navbar-form esto asegura que los margenes coincidan para una barra de navegacion. Como nota puedes poner el posicionamiento usando las clases .pull-right y .pull-left.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
El formulario anterior es un formulario basico en una barra de navegacion.

Para agregar esquinas redondeadas, como los campos de entrada que se miran en los dispositivos iOS, usamos la clase .navbar-search en lugar de la clase .navbar-form.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login


  Barra de navegación variaciones en el menú
La barra de navegacion de bootstrap puede ser dinamica. Por defecto, esta posicionada como elemento en bloque basandose en el HTML. Con algunas clases de ayuda, podemos posicionarla arriba o abajo de la pagina, o puede ser que cuando tenga la barra de scroll este estatico en la pagina.

barra de navegación fijada arriba

Si tu quieres una barra de navegacion fijada arriba, agrega .navbar-fixed-top junto la .navbar. Para prevenir que la barra de navegacion quede sentado sobre otro elemento del cuerpo agregamos 40px de padding (separacion) en el body (cuerpo)

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

barra de navegación fijada abajo

para fijar debajo de la pagina, simplemente agregas la clase .fixed-navbar-bottom junto la clase .navbar. Para prevenir que la barra de navegacion quede sentado sobre otro elemento del cuerpo agregamos 40px de padding (separacion) en el body (cuerpo)

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login


Barra de navegación estática arriba

Para crear una barra de navegacion con scrolls en la pagina, agregamos la clase .navbar-static-top. Esta clase no requiere agregar padding (separacion) en el body (cuerpo).

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Responsive Navbar (Barra de navegacion adaptativa)

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como el resto de bootstrap, la barra de navegacion puede mostrarse totalmente responsive (adaptativa). Para agregar caracteristicas adaptativas. El contenido que quieres que sea colapsado (mostrado) debe envolverse en un DIV con la clase .nav-collapse.El colapso es naturalmente activado por el boton con la clase .btn-navbar el cual tiene dos elementos data- . El primero data-toggle llama al javascript para decirle lo que hara el boton, y el segundo data-target indica que elemento se cambia. 3 etiquetas Spans con la clase .icon-bar. Cambiara los elementos que estan en el div .nav-collapse. Para que esta caracteristica funciones deben estar incluidos los archivos bootstrap-responsive.css, collapse.js o completamente el archivo bootstrap.js.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
  Vista desde el navegador sin usar diseño adaptable en firefox

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Vista con el navegador con diseño adaptable firefox
Como puedes ver al adaptarse nuestro barra de navegacion tenemos que usar el boton de arriba el cual creamos para que se colapsara y nos mostrara el menu...
Barra de navegacion color invertido
Para invertir el color de la barra a negro y el texto en blanco simplemente agregamos .navbar-inverse a la clase .navbar.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Camino de navegacion  El camino de navegacion es una buena forma de mostrar la jerarquia del sitio. En el caso de los blogs un camino de navegacion puede mostrar los datos que son publicados en determinadas fechas, categorias. Los caminos de navegacion en bootstrap son simplemente una lista sin ordenadar con la clase .breadcrumb.
Tambien podemos añadir la clase de ayuda .divider con un pequeño texto. El cual puede ser barra diagonal (/), flechas (->) o el divisor que tu eligas.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Paginación  Bootstrap maneja la paginacion como muchos otros elementos de una interfaz, una lista no ordenada, envuelta con un DIV que identifique el elemento. En un formulario basico, agregamos .pagination como DIV (capa) padre creando una lista de enlaces. Cada elemento tiene un estilo adicional usando la clase .disabled o .active.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

En adicion de la clase .active o .disabled para los item, tu puedes agregar .pagination-centered en el DIV (capa) padre. Para centrar el contenido del DIV. Si tu quisieras alinear a la derecha el DIV podrias usar la clase .pagination-right. Para el tamaño en adicion del tamaño normal hay otros tres tamaños que puedes aplicar en el DIV principal: .pagination-large, .pagination-small y pagination-mini.

  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Paginar

Si tu necesitas agregar enlaces mas alla del texto el paginar puede resultar muy bien. Como los enlaces de paginacion, la estructura es una lista no ordenada dentro del DIV principal. Por defecto los enlaces estan centrados.

  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Para alinear los enlaces a la izquierda o a la derecha solo es necesario usar las clases .previous y .next en los items > LI, tambien puedes usar la clase .disabled dentro de un ITEM para que tome otro estilo como si ya no hubiera mas paginas que ver en Anterior por ejemplo.

    You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

  Etiquetas Las etiquetas son geniales para ofrecer cuentas, consejos u otro tipo de estructura en la pagina.

  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
  Simbolo o Insignia Los simbolos o insignias son similares a las etiquetas, la diferencia de esto es que las esquinas son mas redondeadas. Los colores de el simbolo o la insignia refleja algunas clases de las etiquetas.

  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
  Elementos tipográficos En adicion de los botones, etiquetas, formularios, tablas y tabs, bootstrap tiene algunos elementos para una plantilla basica.

Hero Unit

Hero Unit es una gran area de contenido que aumenta el tamaño de las cabeceras y añade un monton de margen para el contenido de la pagina.
Para utilizar Hero Unit basta con crear un DIV (capa) con la clase .hero-unit  ademas de un <H1> mas grande el font-weight es reducido a 200:

  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

    Encabezado de pagina El encabezado de pagina es una pequeña funcion para añadir espacio apropiado alrededor de los titulos de una pagina.  Esto es particularmente util en una pagina como un BLOG por ejemplo, donde puedes tener varios titulos de entrada y necesitas agregar una distincion en cada uno de ellos. Para utilizar un encabezado de pagina, solo hay que poner dentro de un DIV la clase .page-header:

  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

    Miniaturas Una gran cantidad de sitios necesita una manera de exponer imagenes en una cuadricula y bootstrap tiene una manera facil de hacer esto. Para crear una imagen miniatura, añadimos en la etiqueta <a> la clase .thumbnail alrededor de una imagen esto añade 4px de padding (relleno) y un borde gris. Cuando pasas el puntero encima un resplandor de animacion describe la imagen.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Ahora has creado una imagen miniatura basica, tu puedes agregar cabeceras, botones y mas para mostrar, solo cambia la etiqueta <a> que tiene la clase .thumbnail a un <div>. Dentro del <div> puedes agregar lo que tu necesites. Desde este <div> puedes agregar el tamaño por span... (span1,span2,span3....) Si quieres agrupar multiples imagenes, coloca una lista no ordenada y cada item de la lista estara flotando a la izquierda.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como puedes ver usamos la clase .thumbnails para hacer un grupo de imagenes en miniatura...

  Alertas Las alertas proveen un estilo para mensajes a los usuarios. Para crear una alerta por defecto en un <div> agregamos la clase .alert

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Para cerrar la alerta tu usas el boton que contiene el atributo data-dismiss="alert". Los navegadores en celulares con opera o safari requieren un enlace para ser cerrado href="#".

Si tu necesitas escribir un mensaje largo en la alerta, tu deberias usar la clase .alert-block. Esto provee mas padding arriba y abajo en el contenido de la alerta, que es particularmente util para las lineas de varias paginas de contenido.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Este tambien contiene otros tres colores opcionales para mostrar para ayudar a proveer un mas semantico metodo para la alerta.

Estos son agregados usando cualquiera de estas clases: .alert-error, .alert-success, o alert-info.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Barra de progreso El propósito de la barra de progreso es hacer ver que los activos están cargando, en curso, o que hay una acción que tiene relación con los elementos de la pagina. Personalmente, yo pienso que estos elementos son solo un ejercicio en la estructura y tiene un pequeño proposito mas alla que en el bootstrap framework. Dicho esto, miles de gente usan bootstrap y como cada uno de ellos tienen una buena razon para usar barras de progeso. Por naturaleza estos son elementos estaticos que necesitan de javascript para prober alguna interaccion con el usuario. Por defecto, la barra de progreso contiene un color gris de fondo que al ir aumentando se muestra azul. Para crear una en un <div> agregamos la clase .progress y dentro agregamos otro <div> vacio con la clase .bar y le agregamos un estilo con el porcentaje style="60%"; indicando que la barra de progreso esta al 60%.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Para crear una barra de progreso con rayas. Solamente agregamos la clase .progress-striped en el <div> que la contiene:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Como la version barra de progreso con rayas, tu puedes animar las rayas, lo que hace que se vea mejor.


 
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
En adicion en la barra azul de progreso, estan las opciones verde, amarillo y rojo usando las clases .bar-success, bar-warning y bar-danger. Las barras de progreso pueden ser apiladas:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Objetos multimedia  Cuando nos fijamos en sitios sociales como twitter, facebook y otros, y quitas la parte donde esta formateado la linea del tiempo, veras el objeto multimedia. Impulsado por la comunidad bootstrap basado en los principios de la comunidad oocss (Object Oriented CSS), el objetivo del objeto de medios es hacer que el codigo para el desarrollo de estos bloques de informacion sea drasticamente menor. You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Logincomparte algunos objetos multimedia similares a los que estan en bootstrap. El objeto multimedia esta diseñado para ahorrar cientos de lineas de codigo por lo que es facil de personalizar.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Bootstrap deja el diseño y formato en ti, pero proporciona una forma sencilla de ponerse en marcha.
Al igual que otras herramientas de Bootstrap, el objetivo de los objetos multimedia (estructura ligera, facil extensibilidad) se logra mediante la aplicacion de clases para una simple estructura. hay dos formas para el objeto multimedia: .media y .media-list. Si estas preparando una lista donde los elementos (items) seran parte de una lista no ordenada, es recomendable usar .media-list y si no es asi basta con agregar la clase .media en un <DIV>:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
En la imagen anterior puedes ver el uso del objecto media con la clase .media en un DIV
Para usar media-list cambiariamos el contenedor <div> a un <ul> dejandole la clase media-list. Desde que agregas un media-list tu puedes agregar elementos dentro de elementos, dejando por ejemplo donde comentan un responder que seria un elemento dentro de otro elemento.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Misceláneo (Componentes de utilidad ligera)  Hay algunos componentes mas que cubriremos en este capitulo. Algunos de ellos son layout-based (basado en el diseño) y unos pocos clases de ayuda production-based (basados en la produccion). El primero de ellos son los wells (hundido).
Wells (hundido)  Un well es un contenedor <div> que hace que el cotenido aparezca hundido en la pagina. Se puede utilizar en los blogs para la meta de informacion de un post como son: autor, fecha y categorias. Para crear un well (hundimiento) simplemente envuelve el contenido con un <div> que contenga la clase .well.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Hay dos clases adicionales que se pueden usar en conjunto con la clase .well las cuales son .well-small y .well-large. Esto afecta el padding (separacion por dentro) y crea el .well (hundimiento) mas largo o mas pequeño dependiendo de la clase que se use en conjunto.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Clases de ayuda  Estas son algunas de las clases de ayuda que pueden venir muy bien.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Alineamiento a la izquierda
Para hacer flotar un elemento a la izquierda use la clase .pull-left:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Alineamiento a la derecha
Para hacer flotar un elemento a la derecha use la clase .pull-right:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Clearfix
Para borrar el float (flotador, alineamiento) de cualquier elemento, utilizaremos la clase .clearfix. Cuando se tienen dos elementos de diferentes tamaños que se flotaban uno junto a otro, es necesario forzar los siguientes elementos en el codigo abajo o para borrar el contenido anterior. Para realizar esta accion solo es necesario agregar la clase .clearfix en un <div> vacio.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Imagen sin clearfix
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Imagen con clearfix
Aqui finalizamos la tercera parte de bootstrap espero que se hayan divertido practicando, nos vemos en la cuarta parte, espero al final de las partes hacer un proyecto facil donde veamos todo lo aprendido, salu2 :P

  Referencias  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login 
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
#283
Ideas y Sugerencias / [Sugerencia]Radio underc0de
Octubre 29, 2013, 03:07:45 AM
Hola underc0de, bueno queria comentarles esta idea no se que les paresca pero he visto que muchas webs tienen su radio para su espacio de musica y para comentar algunas cosillas de hacking se pueden hacer grabaciones o cosas de ese tipo, recuerdo que antes en el inicio de underc0de habia unas canciones se podria hacer de nuevo? algo asi pero con mas canciones como radio y bueno tambien algunas horas hablar sobre algo de hacking que nos gusta a todos los del foro, bueno no se solo es una idea, espero ver las respuestas de los que le parece, saludos :P
#284
Pon la consulta asi:
$Query="INSERT INTO usuarios (Nombre,Email,Clave,Nickname) VALUES ('".$vNombre."','".$vEmail."','".$vClave."','".$vNickname."')";
y me avisas si te arroja un error salu2 :P
#285
Dudas y pedidos generales / Re:Ayuda Con Sql Inyecion
Octubre 25, 2013, 12:50:52 PM
usa la opcion --privileges y te da los privilegios del usuario si tiene update entonces puedes realizar la consulta que quieres con una shell interactiva usando  --sql-shell y para saber el usuario actual que usas  --current-user  salu2 :P
#286
Tipografía
Para empezar explicando esto debemos darnos cuenta que tipo de tipografía usamos en nuestro CSS de bootstrap.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como te puedes dar cuenta Usamos la tipografia Helvenica Neue, Helvetica, Arial, Sans-serif ... Esto quiere decir que si en el ordenador donde estas no existe Helvetica Neue entonces utilizara Helvetica y sino Arial asi sucesivamente. Este tipo de letras la incluyen la mayoria de los computadores de hoy en día.
El tamaño de nuestras letras por defecto es de 14px y el espacio entre ellas es de 20px y un color gris a la fuente. Y los párrafos incluyen un margen abajo de 10px.

  Encabezados Los encabezados tienen un estándar para el tamaño de manera que los niveles van desde h1 hasta h6 cada uno tiene su tamaño, que serian los siguientes:

Código: css
h1 {
  font-size: 38.5px;
}

h2 {
  font-size: 31.5px;
}

h3 {
  font-size: 24.5px;
}

h4 {
  font-size: 17.5px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 11.9px;
}

Una cosa muy interesante es que si agregas la etiqueta small dentro de un encabezado le da un estilo diferente para empezar por el color y que la fuente no sera mas negrita, pero mejor te lo muestro:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Si te das cuenta los encabezados normales solo agregamos un tamaño a la fuente, negrita y también agregamos algunos párrafos para que te dieras cuenta, como le agrega el margen de 10px abajo. Pero cuando usamos la etiqueta small dentro de un encabezado puedes ver como su color cambia, y además le quita la negrita.



You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
También podemos agregarle la clase .lead a nuestro párrafos de manera que cambiara el tamaño, la separación y negrita...

Código: css
.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
  Letras pequeñas
Anteriormente vimos que podíamos usar dentro de los encabezados la etiqueta small que lo que hacia era cambiar el color y quitarle la negrita... en caso de que la uses sola, el tamaño de la letra no estará a su 100% sino solo estará a su 85%.

  Negritas Para utilizar negritas no usaremos la etiqueta b sino utilizaremos la etiqueta strong, de esta manera en nuestro bootstrap.css ya viene definido su estilo como negrita.

  Itálicas
Al igual que en negritas en una letra itálica no usaremos la etiqueta i sino utilizaremos em por que sus estilos vienen en bootstrap.css

  Clases para alinear el texto
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
En bootstrap existen unas clases para alinear nuestro texto, las cuales son:

.text-left - alinea el texto a la izquierda
.text-right - alinea el texto a la derecha
.text-center - alinea el texto al centro

    Clases para dar énfasis a nuestro texto
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Estas clases son muy utiles ya que le daran un estilo muy lindo a nuestros mensajes informativos, de error, o que se realizaron correctamente...

.muted - agrega un estilo de un color apagado
.text-warning - agrega un estilo de un color como de advertencia
.text-error - agrega un estilo de un color como de error
.text-info - agrega un estilo de un color como de informativo
.text-success - agrega un estilo de un color como de algo que se ha realizado correctamente

En caso de que uses estas clases en enlaces lo que hace es subir un poquito el volumen del color cuando pasas el ratón encima de ellos.

  Abreviaciones
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

La etiqueta abbr sirve para darle abreviación a una palabra para que salga lo que significa agregamos el atributo title donde iría nuestro texto (en bootstrap se le agrega un borde abajo y cuando pasar el ratón sobre encima de el sale un cursor de ayuda) de lo que significa y usaremos una clase llamada .initialism que lo que hará sera agregar nuestra letra en mayúsculas.

  Direcciones (localización)
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Para mostrar la dirección de algo usamos la etiqueta address que tiene unos estilos como display:block, margen, tamaño de letra y espacio entre lineas.
    Bloque de cita
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Un bloque de cita se indica para eso mismo para citar alguna palabra que dijo alguien de algo largo solo una parte un bloque, en este caso utilizamos la etiqueta blockquote para ello, en este caso utilizamos small junto a la etiqueta cite para identificar quien es el autor de el texto citado anteriormente.
El blockquote si miras atentamente tiene un borde al lado izquierdo, además de un margen para los párrafos dentro de el, si hay dentro de el una etiqueta small lo muestra en bloque y con un color gris.
También puedes usar la clase .pull-right que alinearía hacia la derecha nuestro texto citado...
Código: css
.pull-right {
  float: right;
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
}
 
Listas ordenadas y  no ordenadas  Si dirán que estamos viendo HTML xD, pues de eso se trata ver como se aplica nuestro CSS a nuestro HTML y los cambios que esta produciendo, no se desesperen si han llegado aqui :P
Las listas ordenadas y no ordenadas no producen mucho efecto solo que como antes habíamos reseteado todo el html entonces bootstrap agrego algunos margenes...
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Algo que es muy interesante al crear las listas es que hay dos clases .unstyled que lo que hace es remover el ·  e .inline que lo que hace es mostrarlas en linea.
Estos dos son muy importantes a la hora de poder crear un menu...
   Listas de definición  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login 
Las listas de definición como su nombre lo dice son para poner algún elemento que quieras definir algo, por ejemplo que es un blogger... donde con la etiqueta dl definimos una lista de definición y con dt el termino de la definicion y con dd la definicion del termino... lo uncio que hace bootstrap en este caso es darle un margen y negrita al termino de la definicion. Otra cosa importante es que tenemos una clase .dl-horizontal que lo que hace es mover horizontalmente el texto de la definicion de manera que se vea mejor formateado.
Código  You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login 
Hay dos formas de mostrar código con bootstrap utilizando la etiqueta code o también utilizando la etiqueta pre aunque la diferencia mas significativa es que con code el código se muestra en linea agregando un color significativo y con pre se muestra en bloque.
Tablas  Al igual que todas las tablas normales del html podemos tener los siguientes elementos en una tabla:
table - etiqueta que crea la tabla
caption - subtitulo de la tabla
thead - cuerpo de títulos
tbody - cuerpo de la tabla
th -campo de titulo
tr - fila de la tabla
td - campo de la tabla
Con eso dicho hay una clase .table que tiene los estilos básicos para la creación de una tabla.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
También tenemos algunas clases para la tabla, de manera que tenga diferentes estilos.

.table-striped - le da color a una fila si y a otra no 1 si y otra no
.table-bordered - le deja a la tabla un borde redondeado
.table-hover - cuando pasas el cursor encima de una fila le da un color de fondo
.table-condensed - no deja separación entre las celdas lo que hace que la fila se vea mas pequeña (condensada)
Veamos un ejemplo utilizando .table-striped:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Recuerda que si no miras mucho la diferencia puedes darle clic a la imagen para verla mas grande.

Otra cosa muy interesante en las tablas es que puedes usar una clase para las filas, las cuales pueden ser las siguientes:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

  Formularios
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Otras de las características muy buenas que incluye bootstrap al igual que las tablas son los formularios que tienen un par de clases la cual puedes crear unos efectos muy lindos.

Como puedes ver ahí en la imagen incluimos algunas clases, pero expliquemos una de las cosas que agrega bootstrap.css en nuestro formulario.

Por ejemplo la etiqueta legend que anteriomente habiamos reseteado ahora contiene un estilo de un borde abajo de un color como gris...

Y los inputs  contienen un color como gris también pero al tomar el foco cambian su color a azul, placeholder es un atributo html que muestra atrás lo que se puede hacer en ese input... (marcador de posición). Además de eso se muestran en bloque de linea y contienen una transición que dura como 2 seg al seleccionar el input de manera que se mire un poco de retraso, otra cosa es que cuando tiene el foco le agrega un box shadow lo que hace que ese color azul se vea como algo único.


.help-block - Es una clase para mostrar ayuda, lo único que hacen en los estilos es darle que se muestre en bloque y su letra algo gris bajo.


.checkbox - Esta clase da un poco de separación por dentro, entre los elementos del checkbox.

.btn - Esta clase de algo de separación, transición, pero algo de lo mas útil es que hace un gradient (inclinación) o una imagen gris con CSS3 es algo muy útil, además de agregar un efecto cuando toma foco.

    Formularios opcionales capas Espero que se acuerden del primer minitutorial de bootstrap donde comentabamos algo acerca de las capas; si leen esto y no han leido lo otro lo entenderan pero se relacionan al verlo.

  Formulario de búsqueda
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Como su nombre lo dice solo es un formulario para que su estilo gracias a las clases usadas sea como uno de búsqueda y podamos usarlo para nuestra programación back-end, para alguna búsqueda en la base de datos, por ejemplo.

.search-query - lo que hace es redondear los inputs
.form-search - hace que los inputs se muestren inline-block
.input-medium - Le da al input un tamaño de 150px


  Formularios en linea Cuando digo formulario en linea me refiero que los formularios se muestran uno de detrás de otro de manera que están en linea, y no en bloque...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

como pueden ver lo único nuevo acá es la clase .form-inline que lo que hace es mostrar el formulario de manera que este en linea como dije anteriormente...
se muestra en una sola linea y lo puedes ver en la imagen anterior.

  Formularios horizontales


You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
   Aquí puedes ver los estilos de cada uno de las clases que estamos usando:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como ves no es nada difícil de interpretar solo vemos que los elementos se acomodan como deben de ser. Gracias a las clases aplicadas.


  Controles de formularios soportados
Bootstrap soporta los controles mas usados, como son:
input, textarea, checkbox, radio y select.
Y no solo esos sino que además también soporta los controles de HTML5:
datetime, datetime-local, date, month, time, week, number, email, url, search, tel y color.

  input
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

El input text es el mas usado, una de las características de estos es que incluye un resplandor azul al obtener el foco o estar activo.

  textarea
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

El textarea es uno de los mas usados, ya que se usa para cuando necesitas escribir múltiples lineas, no cambia mucho los estilos.

  Checkbox y botones de radio



You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Con checkbox y botones de radio tu puedes elegir una opcion dentro de la lista de opciones, cuando creas checkbox puedes seleccionar varias opciones en una lista, pero cuando creas un boton de radio puedes seleccionar solo 1 opcion dentro de toda la lista.

Como puedes ver en la imagen anterior, usamos algunas clases en los labels, como son la clase .checkbox que habiamos visto mas atras y la clase .radio, estas clases lo unico que hacen es darle margen y hacer que se muestren en bloque...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Otra cosa es que por ejemplo podríamos usar la clase .inline para formar una fila de checkbox de los cuales elegir varias opciones.

  selects
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Los selects son cuando quieres poner demasiadas o varias opciones, lo puedes usar, pero si quieres usar y seleccionar mas de 1 sola opción necesitas utilizar el atributo multiple.

  Controles de formulario extendidos Ademas de los formularios comunes, bootstrap te ofrece unos complementos para los formularios.

  Campos de entrada adjunto y antepuesto
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

.add-on - agrega un pequeño estilo parecido al del boton (.btn)
.input-prepend - junto a la clase add-on decide agregándolo al principio el pequeño botón (el estilo)
.input-append  -  junto a la clase add-on decide agregándolo al final el pequeño botón (el estilo)


Si ves la imagen de arriba el @ y el .00 son los que estan en la clase add-on y acada uno de ellos estan en sus capas que tienen sus clases input-prepend e input-append.

De hecho puedes combinarlos tanto como quieras:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
  Tamaño de los controles del formulario
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

En bootstrap podemos usar unas clases que nos darán un tamaño predeterminado para los inputs de manera que le podemos dar un mejor estilo o el tamaño que gustemos a cada input.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
no creo que sea necesario explicar como se usa la clase en un input pero por si acaso: <input class="acavalaclase" />

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

No solo podemos usar estas clases, no se si te acuerdas del sistema cuadricula? de la primera parte de bootstrap, bueno pues usaremos las mismas clases solo que se aplican a inputs y textarea... y a cada una tiene su tamaño...
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Como puedes ver .span12 es el mayor y .span1 el menor puedes ver la imagen de arriba como referencia. No solo puedes usarlo en inputs sino tambien en selects,textarea,etc.

  Texto que no puede ser editado
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Una forma de dar un estilo donde tendrías un input con un texto que no puede ser editado es usando la clase .uneditable-input. Con el cual si pasas el ratón encima de el se pondrá una flechita de stop (alto,para) indicando que no puede ser editado.
    Formulario de acciones
El formulario de acciones es un formulario como su nombre lo dice que podriamos poner acciones tales como Cancelar, Enviar, Guardar, Reestablecer...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

.form-actions - da unas separaciones, margenes, color de fondo, borde, y otra cosa es que muestra el contenido en table...

.btn-primary - da ese efecto de azul al botón lo mismo cuando le pasas el botón encima, gracias a esta clase el botón cambia y es la manera de decir que podría ser un botón primario que se diferencia de los demás.

  Texto de ayuda
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
.help-inline - muestra un texto de ayuda en linea (me refiero a su formato) es decir, en una sola linea

.help-block - muestra un texto de ayuda en bloque

  Campo de entrada desabilitado
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

El atributo disabled podemos ver como le da un color y el cursor cambia su forma de manera que indica que ese input no puede ser cambiado.

  Entradas de validación Este tipo de cosas aunque no lo creas son de las mas usadas en una pagina web, como antes vimos con el texto también podía tomar diferentes color dependiendo de la situación (error,warning,info,success) es lo mismo con los inputs.

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login




La mayoria de las cosas ya las habiamos visto, los divs esos agrupan cada input, y le aplicamos su clase dependiendo del estado hay un color.
No solo podemos aplicar un estado de esta manera podriamos usar alguna pseudoclase del css, por ejemplo:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Como puedes ver en el ejemplo, cuando el email esta mal el input lo muestra en rojo, pero cuando esta bien lo muestra en azul. Esto tambien lo podemos modificar nosotros mismos que tal si quisieramos un verde cuando este bien?

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
agregamos nuestro propio estilo, y listo.

  Botones Las siguientes clases no solo pueden ser aplicadas en los botones sino tambien en los enlaces.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como puedes ver solo es cuestion de aplicar estas clases, a nuestro boton con lo cual le daremos unos efectos muy vistosos, como los que estan viendo, algunos que se usan para indicar una determinada accion.
    Tamaño de los botones Al igual que en los inputs podemos darle unas clases para modificar el tamaño de nuestros botones (buttons).

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como puedes ver en la imagen tenemos diferentes clases para los tamaños.

.btn-large - para un boton largo
.btn-small - para un boton pequeño
.btn-mini - para un boton mas pequeño

Otra cosa que podemos hacer con los botones es mostrarlos en bloque, usando la clase .btn-block con lo cual toma todo el ancho de la pagina:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
  Deshabilitar botón (estilos) Veamos como cambian los estilos cuando usamos la clase .disabled

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como puedes ver lo que mas se nota es como agrega la opacidad al boton.

  Imágenes
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Otra de las cosas que dan mucho efecto son las clases de las imagenes:

.img-rounded - agrega un border radius de 6px en cada esquina
.img-circle - redondea completamente una imagen
.img-polaroid - agrega un pequeño borde con el cual parece un cuadro

  Iconos 
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Bootstrap tiene 140 iconos en un sprite, sino sabes que son los sprites puedes ver este tema:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Estos iconos han sido proporcionados por: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
una manera de utilizar estos iconos son con las clases que vienen a su lado...
para ello usamos la etiqueta i...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como puedes ver usamos una clase .btn-toolbar es una barra de herramientas de botones, la cual da algunos margenes. y .btn-group con la cual agrupamos los enlaces de los botones la cual tambien incluye unos margenes.
Lo importante en estos casos es como agregamos los iconos usando la etiqueta i.

  Navegación
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

.nav y nav-list - da unos margenes para que se vea como una lista de navegacion
.active - hace que el enlace se vea con fondo azul como que esta activo
i class="clasedelicono" - le pone el icono como una imagen sprite


Hasta aqui ha llegado la segunda parte de este minitutorial nos vemos en la tercera parte espero traerle un poco mas de sorpresas, muchos diran estamos aprendiendo HTML y CSS a la ves, pues eso es algo que podria decirse correcto en si, bootstrap lo unico que hace es facilitarnos todo este proceso.

Referencias:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Fuente: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
#287
Softwares e ISOs / Google Web Designer
Octubre 09, 2013, 03:12:01 PM


Google ha creado este programa para realizar diseños en HTML5 web responsives, intenta incluir nuevas tecnologías como lo es CSS3, animaciones,etc

Si quieren mas información y quieren descargar el programa creo que esta en fase beta lo pueden hacer desde aqui:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Capturas:











Para ver videotutoriales de uso pueden checar su canal:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
#288
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como por ejemplo

Network security
Pentesting
Reversing
ETC.
Mírate los foros que están en cada categoría y tienes varias ramas...

#289
Off Topic / Re:Juego de ingenio infomático
Octubre 08, 2013, 02:56:51 PM
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Alguien lo entiende?:

Código: text
begin 666 Restricted.zip
M4$L#!!0````(`%T[="_]<LYX`P(``'0#```.````4F5S=')I8W1E9"YT>'1M
M4\MNVT`0NQOP/TSNM@PT0!/X4N16`RE0%.GC.I9&TE;2CKH/J_K[<E;IX]"+
M'UJ20W)6^]U3)SX=]KO][D*]SD(7XHD2CX/S'26EU`L%U_6)9@E1?46NQ4,7
MR?E6P\3)J:=%@ABZY7'$P2MO"0J1GGT3Z;B1YJ#?I4ZT:!X;N@KI34)%3Y%6
MS8#>A#I-&[;E`-H%'(EY@G[/(-I',=GI;XN"H49?''YXT#LE]BNU.<!&,*(W
M0&4Y7V#,F_&11NV<-TNU-!D!>HZP5"MF91^YE0-D&H2C5CAL\T&P:#/'A*<+
M#F6(!IEXW?Q?13Q=@P[XLBHJ>L[UX,;U8+`"X3I)0S^RJX=Q+3-28)@@+IK:
MEAD@AQRM7DY)ICG%BK[:(,\=L$C>20*EUCR/8BP'&'H+.OT5:+`V>,*NK$%9
MZ<;>Q1X"1WJOBZ#_8HQ+`3?K%(U<1U-:7.HI6A]_+/V[\RU,J]DW!SMV@<37
M89W+>5QCL6/"MDHTQPV&UT5-<R!=?%D)MG^AR&Y3^>]::JP0H2MZ4>3UR?F,
M[>18,L'"..I2K'.,BP8TF<K)YT_/IG1S#<@VZ^,KX$QO'[\\WC_<W;V[?_-P
MW>^`/%.?TGP^G99EJ29MCC^K6JL\G%H78CJQC[CGU=S/V_M2KEN<A0?;A5U`
M[AC.U2*6OUOE0<KD#Q#\MM_]`E!+`0(4`!0````(`%T[="_]<LYX`P(``'0#
M```.``````````$`(`"V@0````!297-T<FEC=&5D+G1X=%!+!08``````0`!
+`#P````O`@``````
`
end

Es del archivo restricted.txt que hay que desencodear para poder registrarse...
y si le das permisos 777?, por que decodifique eso y solo es lo que contiene el archivo ZIP

Código: text
00000000
00000010
00000020
00000030
00000040
00000050
00000060
00000070
00000080
00000090

50 4b 03 04 14 00 00 00 08 00 5d 3b 74 2f fd 72
ce 78 03 02 00 00 74 03 00 00 0e 00 00 00 52 65
73 74 72 69 63 74 65 64 2e 74 78 74 6d 53 cb 6e
db 40 10 bb 1b f0 3f 4c ee b6 0c 34 40 13 f8 52
e4 56 03 29 50 14 e9 e3 3a 96 46 d2 56 d2 8e ba
0f ab fa fb 72 56 e9 e3 d0 8b 1f 5a 92 43 72 56
fb dd 53 27 3e 1d f6 bb fd ee 42 bd ce 42 17 e2
89 12 8f 83 f3 1d 25 a5 d4 0b 05 d7 f5 89 66 09
51 7d 45 ae c5 43 17 c9 f9 56 c3 c4 c9 a9 a7 45
82 18 ba e5 71 c4 c1 2b 6f 09 0a 91 9e 7d 13 e9
   
P K . . . . . . . . ] ; t / ý r
Î x . . . . t . . . . . . . R e
s t r i c t e d . t x t m S Ë n
Û @ . » . ð ? L î ¶ . 4 @ . ø R
ä V . ) P . é ã : – F Ò V Ò . º
. « ú û r V é ã Ð ‹ . Z . C r V
û Ý S ' > . ö » ý î B ½ Î B . â
. .  . ó . % ¥ Ô . . × õ . f .
Q } E ® Å C . É ù V Ã Ä É © § E
. . º å q Ä Á + o . . ‘ . } . é
#290
 Introducción 
Bueno amigos esta es la primera parte de algunas series que haré sobre bootstrap, en las cuales empezaremos explicando cosas basicas y al final crearemos nuestra plantilla.
  ¿Que es Bootstrap?
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Bootstrap es una librería You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login que esta mantenida por dos desarrolladores que anteriormente trabajaban en You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login (You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login y You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login). Que puede ser modificable para utilizarla en tus desarrollos webs, además de que es You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login.
    Estructura de Bootstrap
Citar
bootstrap/ ├── css/ │   ├── bootstrap.css │   ├── bootstrap.min.css ├── js/ │   ├── bootstrap.js │   ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png 

Esa es la estructura básica para usar You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Como puedes observar estos son los archivos mínimos necesarios para empezar a utilizar bootstrap...
  Plantilla Básica HTML usando Bootstrap Para empezar creando una plantilla basica usando bootstrap no es necesario, crear demasidado codigo, lo de aqui seria jugar con clases que vienen en los css, que veremos mas adelante...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login


Como puedes ver el resultado arriba ya esta aplicado los estilos a la cabecera que escribi... utilize los estilos comprimidos al igual el js comprimido... una cosa aqui es que si te das cuenta estoy guardando mi proyecto en mi localhost, lo cual no es necesario (lo hago por gusto) ya que como es front-end no es necesario utilizar un servidor web para poder probarlo.
Además es importante el uso de !DOCTYPE como etiqueta en este caso se requiere para usarlo en navegadores modernos.
  Estilos globales y su importancia 
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Una de las cosas importantes es que en nuestros estilos podemos ver como bootstrap.css utiliza You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login que lo que hace es resetear nuestros html a 0, es decir, medidas a 0. Con esto se asegura de que la visibilidad sea la misma para todos los navegadores al aplicar nuestros estilos... y como les dije así aplicando You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login.

Otras caracteristicas son que en el body no hay margen, el color del body es blanco, @baseFontFamily @baseFontSize @baseLineHeight  @linkColor son algunas variables que pueden ser personalizadas.

  Sistema Cuadricula Por defecto bootstrap contiene una sistema de cuadricula que contiene 12 columnas, esto es para que no de un tamaño de pantalla segun sea el dispositivo que nos este viendo, para ello claro tenemos que añadir nuestro archivo bootstrap-responsive.css, lo cual veremos mas adelante...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
En la imagen anterior podemos darnos cuenta que en el código, existen dos clases la cuales son .row y .span[numero] siendo row nuestra fila y span nuestro numero de columnas...
Con el numero de columnas le damos un tamaño a nuestra fila... Ejemplo:

Código: Text
 span12 - 940px
span11 - 860px
span10 - 780px
span9 - 700px
span8 - 620px
span7 - 540px
span6 - 460px
span5 - 380px
span4 -  300px
span3 - 220px
span2 - 140px
span1 - 60px


Entonces como mostramos el primer You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login tenemos 940px despues tenemos 620px 300px que dan como resultado  920px acercandose mucho a span12 pero con ello puedes ver como creamos nuestra fila con nuestro tamaño, te estaras preguntando ¿y esto para que lo hacemos?, pues muchas veces algunos diseñadores web utilizan cuadriculas en su diseños para que se vean fijos en las webs de manera que en todas las webs se vean igual...

  Acomodar las columnas
Una cosa importante al utilizar las cuadriculas seria acomodar las columnas de manera que le demos un margen izquierdo... Si alguna ves vistes algo de CSS recordaras que el margen es lo de fuera del borde...

Para realizar esto en bootstrap utilizaremos la clase .offset la cual podemos ver todos sus tamaños en el archivo bootstrap.css

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Entonces le daré un offset a nuestra columna span12 de 100px(offset1) que nos dara un margen izquierdo en el como puedes comparar la siguiente imagen con la de arriba (lo amarillo es lo que acabamos de aplicar offset1):

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

  Anidación de columnas A anidación me refiero que puede haber una columna dentro de otra...
Como en este ejemplo:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Todo esto lo hemos visto arriba lo único que estamos haciendo es poner una fila dentro de otra fila, algo que es algo interesante es que la clase .row agrega por defecto un margen izquierdo de -20px por lo cual tuve que ingresarle un .offset2 ala primera columna de la segunda fila ya que se hereda... en caso de que quisiéramos que todo quedara Fixed podriamos usar la clase .row-fluid en lugar de .row de manera que quedara tal y como debe ser.

  Capas Una de las muchas cosas utilizadas en el diseño web son las capas y esta seria una de las cosas mas importantes que veremos en esta parte con la cual podríamos usar la clase .container o .container-fluid con la cual centramos nuestro contenido y con container-fluid le damos un espacio por dentro...
Un buen ejemplo seria poner nuestra barra lateral y contenido, que cuando inicias un proyecto siempre divides tu web de manera que quede como tu lo decidistes...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Como puedes ver usamos todo lo visto hasta ahora y container-fluid, que es el de ahora mismo, y para que distinguieramos las cosas le agregue unos estilos aparte de los colores y un border y un margen arriba para que se viera con colores como es que estamos creando nuestras capas y dividiendolas usando solo las clases de bootstrap...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
  Responsive Web Design (Vista de diseño adaptable)
Esto se refiere que nuestro diseño se adapta al dispositivo donde lo estemos mirando para ello agregaremos nuestro CSS y una etiqueta meta...

Dentro del head agregamos lo siguiente:

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Con esto nuestra pagina web se ira adaptando segun las escalas de los dispositivos que se esten usando en el momento....

Un ejemplo para ello es utilizar el inspector de elemento de firefox y utilizar el icono vista diseño adaptable para ir viendo como quedaria nuestro diseño en diferentes resoluciones...

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Y hasta aqui la primera parte de este minitutorial espero traer la segunda parte pronto...

Sitio referencia:
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
#291
Me anoto :3
#292
Back-end / Sistema de paginacion en PHP y MySQL
Septiembre 18, 2013, 05:36:22 AM
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Bueno amigos como tenia rato sin aportar nada ahora que ando al pedo xD
Me he puesto a crear un par de tutoriales que les pueden ser de utilidad para cualquier trabajo, ya que es una de las cosas mas usadas, en el desarrollo web...

Les dejo el PDF para que se entretengan leyendo....

Ver online: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Descargar: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
#293
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
Me pueden decir que tipo de codificacion es esta -.. .-. .- --. --- -.
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
#294
Python / Re:Cifrado Morse
Septiembre 08, 2013, 12:55:17 AM
Ya arregle lo de los espacios gracias a Danyfirex aca dejo el codigo:

Código: php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Cifrado morse</title>
</head>
<body>
<?php
$abc=array('A'=>'.-','B'=>'-...','C'=>'-.-.','D'=>'-..','E'=>'.','F'=>'..-.','G'=>'--.','H'=>'....','I'=>'..','J'=>'.---','K'=>'-.-','L'=>'.-..','M'=>'--','N'=>'-.','Ñ'=>'--.--','O'=>'---','P'=>'.--.','Q'=>'--.-','R'=>'.-.','S'=>'...','T'=>'-','U'=>'..-','V'=>'...-','W'=>'.--','X'=>'-..-','Y'=>'-.--','Z'=>'--..',0=>'-----',1=>'.----',2=>'..---',3=>'...--',4=>'...-',5=>'.....',6=>'-....',7=>'--...',8=>'---..',9=>'----.','.'=>'.-.-.-',','=>'--..--','?'=>'..--..','!'=>'..--.',':'=>'---...','"'=>'.-..-.',"'"=>'.----.','='=>'-...-',' '=>' ');

if(isset($_POST['enviar'])){
if(!empty($_POST['morse'])){
switch ($_POST['morse2']) {
case 'Encode':
$post=$_POST['morse'];
for($i=0;$i<=strlen($post);$i++){
$letra=substr($post, $i,1);
foreach($abc as $key=>$value){
if(preg_match("/^".preg_quote($letra)."$/i", $key)){
echo htmlentities($value)."&nbsp;";
}
}
}
break;
case 'Decode':
$post=$_POST['morse'];
$morse_pal=explode(" ",$post);
foreach($morse_pal as $indice=>$letra){
foreach($abc as $key=>$value){
if(empty($letra)){$letra=' ';}
if(preg_match("/^".preg_quote($letra)."$/i", $value)){
echo htmlentities(strtoupper($key));
}
}
}

break;
default:
echo "Ocurrio un error";
break;
}
}else{
echo "Rellene el campo";
}
}

?>
<form action="" method="post">
<p><b>Ingrese el texto:</b></p>
<input name="morse" type="text" /><br />
<input type="radio" name="morse2" value="Encode">Codificar<br>
<input type="radio" name="morse2" value="Decode" checked="checked">Decodificar<br>
<input type="submit" name="enviar" />
</form>
</body>
</html>
#295
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

Espero que te ayude :P
#296
Python / Re:Cifrado Morse
Septiembre 07, 2013, 04:25:34 AM
Bueno Sanko tambien lo intente hacer en PHP, solo que al decodificar no se como darle los espacios y otra cosa queria usar en la expresion regular \b$acamivariable\b en el decodificado pero no daba el resultado deseado por eso use ^preg_quote($acamivariable)$, puede contener muchos errores por lo que si hay alguna forma mejor o algo que se pueda mejorar y sepan como hacerlo son libres de editarlo o comentarme como hacerlo, gracias Sanko  me diverti un rato salu2 bro

Código: php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Cifrado morse</title>
</head>
<body>
<?php
$abc=array('A'=>'.-','B'=>'-...','C'=>'-.-.','D'=>'-..','E'=>'.','F'=>'..-.','G'=>'--.','H'=>'....','I'=>'..','J'=>'.---','K'=>'-.-','L'=>'.-..','M'=>'--','N'=>'-.','Ñ'=>'--.--','O'=>'---','P'=>'.--.','Q'=>'--.-','R'=>'.-.','S'=>'...','T'=>'-','U'=>'..-','V'=>'...-','W'=>'.--','X'=>'-..-','Y'=>'-.--','Z'=>'--..',0=>'-----',1=>'.----',2=>'..---',3=>'...--',4=>'...-',5=>'.....',6=>'-....',7=>'--...',8=>'---..',9=>'----.','.'=>'.-.-.-',','=>'--..--','?'=>'..--..','!'=>'..--.',':'=>'---...','"'=>'.-..-.',"'"=>'.----.','='=>'-...-'," "=>" ");

if(isset($_POST['enviar'])){
if(!empty($_POST['morse'])){
switch ($_POST['morse2']) {
case 'Encode':
$post=$_POST['morse'];
for($i=0;$i<=strlen($post);$i++){
$letra=substr($post, $i,1);
foreach($abc as $key=>$value){
if(preg_match("/^".preg_quote($letra)."$/i", $key)){
echo htmlentities($value)." ";
}
}
}
break;
case 'Decode':
$post=$_POST['morse'];
$morse_pal=explode(" ",$post);
foreach($morse_pal as $letra){

foreach($abc as $key=>$value){
if(preg_match("/^".preg_quote($letra)."$/i", $value)){
echo htmlentities(strtoupper($key));
}
}
}
break;
default:
echo "Ocurrio un error";
break;
}
}else{
echo "Rellene el campo";
}
}

?>
<form action="" method="post">
<p><b>Ingrese el texto:</b></p>
<input name="morse" type="text" /><br />
<input type="radio" name="morse2" value="Encode">Codificar<br>
<input type="radio" name="morse2" value="Decode" checked="checked">Decodificar<br>
<input type="submit" name="enviar" />
</form>
</body>
</html>


Resultado:



#297
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
2 errores mas! XD

a cada archivo le debes poner session_start() para crear o activar las sessiones como nuestro amigo You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login nos dice XD, sino no nos funcionaran las sessiones! y no veo que se lo hayas puesto a los archivos xD

ademas aca

Cita de: phpecho '<form action="process.php?token='.$_SESSION["envio_token"].'" method="post">';

la variable que creas se llama token y aca

Cita de: phpif($_GET["envio_token"] == $_SESSION["envio_token"]){ 

aqui tratas de obtener por get la variable "envio_token", por logica el script funcionara mal
acaso no probaste tus script bro? :/
los probé y no funcionaban xD


Aqui los que si me funcionaron

Código: php
<html>
   <head><title>Hola</title></head>
   <meta charset="utf-8">
   <body>
        <?php
session_start();
$_SESSION["envio_token"] = sha1(uniqid(rand(), TRUE));
        echo '<form action="process.php?token='.$_SESSION["envio_token"].'" method="post">';
                 echo 'Ingrese algún texto: <input type="text" name="text"><br><br>';
                                 echo '<input type="submit" value="Ejecutar">';
        echo '</form>';
                ?>
   </body>
</html>


Código: php
<html>
   <head>
   <title>Proceso</title>
   </head>
   <body>
        <?php
session_start();

             if($_GET["token"] == $_SESSION["envio_token"]){       
                         echo 'Se ha ejecutado el token correctamente';
    }
        else{
    echo 'Error';
            }
       ?>
   </body>
</html>


A mí me funcionaron perfectamente con mi configuración. Pero de todas formas si tienes razón ya está actualizado.

Saludos.

De hecho si se debe iniciar con session_start() pero como mufero dice tambien puedes no hacerlo especificando en el php.ini You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login_start = 1 con el valor 1 (true) :p
Asi que en realidad los dos tienen razon, salu2 :P
#298
CitarBueno, eso ha sido todo. Espero les haya gustado, si me equivoco en algo corrijanme y actualizo el post

aca:

Código: text
<?php

$urlvulnerable = "localhost"; // Link del sitio
$valor = "M5f3r0 was here!"; // Valor a modificar

echo '<form action="'.$urlvulnerable.'/process.php" method="POST" />'; // Ingresamos la url del formulario a ejecutar
echo '<input type="hidden" value="'.$valor.'" name="text" />'; // Ingresamos el nombre del input y el valor a ingresar.
echo '<body onload="document.csrf.submit();">'; // Ejecutamos el documento con el script "document.csrf.submit();"
echo '</form>

?>


te falto ponerle el nombre al form si no no se ejecutaria este javascript: document.csrf.submit() osea solo te falto la etiqueta name="csrf" en
<form action="'.$urlvulnerable.'/process.php" method="POST" name="csrf"> ademas no debes cerrar / al principio es decir:
<form action="'.$urlvulnerable.'/process.php" method="POST" /> por que ya esta siendo cerrada en </form>, bueno bro nada mas eso solo comente por que al final dijistes espero que no me lo tomes a mal ya sabes que yo te estimo mucho bro un saludo :P
#299


Resumen:

Este libro te enseña PHP6 y MySQL5 Desde 0, comenzando desde programación estructurada, cosas básicas como:Que es un sitio dinámico, sintaxis, comentarios, variables, cadenas, números, constantes, concatenación, comillas simples vs comillas dobles, crear formularios html y manejarlos, validar datos, arrays, bucles, el lenguaje mysql desde 0 hasta avanzado (manejar datos crud,diseñar bases de datos, realizar transacciones, joins), manejo de errores, técnicas de programación comunes (paginar,editar registros, modulación, etc), enviar mails, subir archivos, manejo de cabeceras, cookies y sesiones (sistema de login), metodos de seguridad (evitar spam, validar tipos de datos, evitar sqli, métodos de encriptacion), expresiones regulares, creando sitios universales (charsets,languages,unicode), crear un foro simple, crear un sistema de registros, crear un sitio ecommerce (de compras) simple, como instalar apache mysql php en diferentes plataformas, y configurar nuestro php.ini, es un libro muy completo y se los recomiendo.... La única desventaja es que esta en ingles  y que solo muestra programación estructurada jaja :P

Link de descarga: You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login



salu2 :D
#300
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login
You are not allowed to view links. You are not allowed to view links. Register or Login or You are not allowed to view links. Register or Login

solo dejas activados les das valores y listo xD