Mostrando entradas con la etiqueta Herramientas CSS. Mostrar todas las entradas

domingo, octubre 25, 2015

Iconos gratuitos

En fase de diseño de una aplicacion siempre es importante considerar el utilizar ICONOS DE USO LIBRE, a continuacion se detalla dos sitios donde podemos encontrar un buen numero de iconos para este proposito:

ICONOS GRATIS

Sitio de ICONOS Font-Awesome

Sitio de ICONOS iconsdb

lunes, septiembre 07, 2015

Ocultar y enmascarar URL

Resulta importante como un proceso de ocultamiento de URL para evitar que sea un agujero de seguridad mas, que resulte blanco de posible ataques por parte de Hackers.

Para ello se propone lo siguiente:

Pues bien, entonces lo que debes hacer para ocultar la url, es lo siguiente:
En el archivo http://www.tudominio.com/index.html debes insertar un iframe.
Para esto debes usar la etiqueta <iframe> que tiene la siguiente sintaxis:

Donde “xxxxxxxxx.html” debes reemplazarlo por la URL que quieres insertar y que será la que contendrá el contenido real que se moestrará, en este caso dijimos que seria http://www.tudominio.com/home.html

Entonces, dentro de http://www.tudominio.com/index.html, y luego de la etiqueta <body> debes colocar:

<iframe src="http://www.tudominio.com/home.html"></iframe>

Con esto insertamos la “ventana” (iframe) por donde mostraremos el contenido del archivo home.html.

Y también dentro de http://www.tudominio.com/index.html, antes de la etiqueta de cierre </header> debes colocar el siguiente codigo CSS:

<style type="text/css">

    html, body, div, iframe

      { 

            margin:0; padding:0; height:100%; 

      }

    iframe 

      {      

           display:block; width:100%; border:none; 

      }

</style>

Con este codigo CSS, le decimos que la “ventana” del <iframe> la lleve al mismo tamaño del navedador (máximo de alto y ancho).

Entonces cuando vayamos al URL http://www.tudominio.com/ (que es el que contiene el iframe), nos mostrará realmente el contenido del URL http://www.tudominio.com/home.html.

Código final y completo

Archivo http://www.tudominio.com/index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>Documento sin título</title>

    <style type="text/css"> 

           html, body, div, iframe 

              { 

                 margin:0; 

                 padding:0; 

                 height:100%; 

              } 

           iframe 

              { 

                 display:block; 

                 width:100%; 

                 border:none; 

              } 

   </style>

 </head>

 <body>

       <iframe src="http://www.tudominio.com/home.html"></iframe>

  </body>

 </html>

Y asi ocultaremos la URL real (http://www.tudominio.com/home.html).

COMO EN MASCARAR UNA URL

Cómo enmascarar la url de destino de un enlace de nuestras paginas web.

Aunque no se trata precisamente de una redirección, vamos a ver aquí cómo enmascarar un enlace. Al fin y al cabo es enviar a un visitante a un lugar distinto del que pensaba, no? Y para qué vamos a querer enmascarar un enlace? La verdad es que normalmente los usuarios de las páginas webs hacen click en los vínculos sin prestar atención de cuál es la ruta a la que les lleva. Pero en cambio los robots de los buscadores sí que se fijan y, quizás nos interese que un enlace dirigido a una página de referidos sea visto por un buscador como un enlace normal y corriente. O incluso quizás nos interese ocultar el número de identificación que podamos tener como referidor en los enlaces de los anuncios de algunos de nuestros banners publicitarios.
Cualquiera que sea el motivo, vamos a ver cómo ocultar la dirección de destino de un enlace.

Requisitos para poder enmarcarar la URL de un enlace en servidores con Php.

Para poder aplicar este remedio, necesitamos que nuestro servidor ejecute archivos Php. Si cumples ese requisito puedes seguir leyendo para aprender a aplicar el enmascaramiento de URLs. En caso contrario tendrás que buscar otro remedio.

Enmmascarar una URL en un enlace.
1.- Creamos una carpeta en el directorio llamada "publicidad".
2.- En la carpeta "publicidad" colocamos un archivo llamado "index.php" con este contenido:
<?php
$banner = $_GET['banner'];
// Enlaces que queremos disimular
$link[1] = "http://www.sobrasadascosme.es/afiliacion/?afiliado=983744";
$link[2] = "http://www.chorizoselfelix.es/afiliacion/?referido=982141";
$link[3] = "http://www.salchichasluisa.es/afiliating/?referida=234234";
header("HTTP/1.1 301 Moved Permanently");
header("Location: $link[$banner]");
header("Connection: close");
?>

A la hora de colocar enlaces de publicidad en nuestras páginas, el código Html a colocar sería este:
- Ocultando el archivo a los buscadores.
Si podemos acceder y retocar el archivo robots.txt de nuestro servidor, podemos evitar que los robots la rastreen, añadiendo a nuestro robots.txt las líneas:

User-agent: *
Disallow:/clic/
- Editando el archivo .htaccess
Si tenemos acceso a nuestro archivo .htaccess y podemos editarlo, podemos usar este otro método más limpio en lugar del anterior. Basta con colocar en nuestro .htaccess lo siguiente:

     RewriteEngine On
     RewriteBase /
     Redirect permanent /loqueyopongoenmiweb http://www.webdereferido.com/?referido=543256

De ese modo si yo coloco un enlace a www.comocreartuweb.com/loqueyopongoenmiweb, el visitante irá dirigido a http://www.webdereferido.com/?referido=543256 que es la dirección que me dice la empresa de referidos que tengo que poner en mi web.
Si en tu .htaccess ya había código, coloca esas líneas al final del archivo. Si tras esos cambios la web deja de funcionar totalmente, te basta con eliminar esa línea y dejarlo como estaba. Será por algúna letra mal colocada, alguna línea en blanco al final o alguna tonteria equivalente. Si en tu .htaccess ya existían alguna de esas tres líneas (quiás ya tenías la primera y la segunda) solo necesitas añadir las que te falten, mejor no dupliques ninguna.

domingo, julio 14, 2013

Herramientas de Hojas de Estilo - CSS

CSS3 Generator

Ultimate CSS Gradient Generator

Generador de Tabs

Generador de Botones con CSS3

Otro Generador de Botones con CSS3

Ejemplo de Borders

CSS3 Gradient Generator

CSS3 Box Shadow Generator

Textos con CSS3

Generar Animacion con CSS3

___________________________________

http://westciv.com/tools/gradients/index-moz.html - Gradientes

http://mothereffingtextshadow.com/ Manejador de Sombras

http://css3.mikeplate.com/

http://www.webtutorialplus.com/css3-generator.aspx Manejo de todas las ventajas de CSS3
http://csscorners.com/ Para Generar Gradientes

___________________________________

Tomado de:

Definición de CSS - ¿Qué son las hojas de estilo o cascading style sheets?

CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.

¿Para que sirve?

CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentacin del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.

¿Cómo funciona?

El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.
Selector

Ejemplo:

h2 {color: green;}

h2 ---> es el selector
{color: green;} ---> es la declaración
- color ---> es la propiedad o atributo
- green ---> es el valor

Selector

El Selector especifica que elementos HTML van a estar afectados por esa declaración, de manera que hace de enlace entre la estructura del documento y la regla estilística en la hoja de estilo.

Declaración

La Declaración que va entre corchetes es la información de estilo que indica cómo se va a ver el selector. En caso de que haya más de una declaración se usa punto y coma para separarlas.

Propiedad o Atributo y Valor

Dentro de la declaración, la Propiedad o Atributo define la interpretación del elemento asignándosele un cierto Valor, que puede ser color, alineación, tipo de fuente, tamaño..., es decir, especifican qué aspecto del selector se va a cambiar.

Tres tipos de estilos

La información CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, y dentro de estas posibilidades destacan tres formas de dar estilo a un documento web:

Hoja de Estilo Externa

La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la sección head. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.

Hoja de Estilo Interna

La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elemento style dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.

Estilo en Línea

El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la sección body con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.

Versiones CSS

Existen varias versiones: CSS1 y CSS2, la CSS3 está todavía en desarrollo por el CSS WG (Cascading Style Sheets Working Group).
Los navegadores actuales implementan bastante bien CSS1 desde 1999 (tres años después de su lanzamiento) aunque dependiendo de la marca y versión del navegador hay algunas pequeñas diferencias de implementación. El primer navegador en dar soporte completo al CSS1 ha sido Internet Explorer 5.0 for the Macintosh en 2000, anteriormente el que mejor soportaba CSS1 haba sido Opera, después otros navegadores también lo han ido implementando.
Sin embargo, CSS2 (lanzado en 1998) sólo está parcialmente implementado en los navegadores más recientes, variando en estos los niveles de implementación.

Ventajas de CSS

La principal ventaja de CSS sobre el lenguaje HTML o similar, es que el estilo se puede guardar completamente por separado del contenido siendo posible, por ejemplo, almacenar todos los estilos de presentación para una web de 10.000 páginas en un sólo archivo de CSS.
CSS permite un mejor control en la presentación de un sitio web que los elementos de HTML, agilizando su actualización.
Aumento de la accesibilidad de los usuarios gracias a que pueden especificar su propia hoja de estilo, permitiéndoles modificar el formato de un sitio web según sus necesidades, de manera que por ejemplo, personas con deficiencias visuales puedan configurar su propia hoja de estilo para aumentar el tamaño del texto.
El ahorro global en el ancho de banda es notable, ya que la hoja de estilo se almacena en cache después de la primera solicitud y se puede volver a usar para cada página del sitio, no se tiene que descargar con cada página web. Por otro lado, quitando todo lenguaje de marcado en la presentación en favor del uso de CSS reduce su tamaño y ancho de banda hasta más del 50%, esto beneficia al dueño del sitio web con menos ancho de banda y costes de almacenamiento, as como a los visitantes para los cuales las páginas se van a cargar más rápido.
Una página puede tener diferentes hojas de estilo para mostrarse en diferentes dispositivos, como pueden ser impresoras, lectores de voz, o móvile