ZoneArtCSS | Tu lugar: Del Arte CSS » html http://www.zoneartcss.com Tu Zona del Arte CSS, tips de programación con estilo Thu, 29 Jul 2010 05:00:55 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Simple Inicio de Sesión con Php y Mysql http://www.zoneartcss.com/webdevelopment/programacion-con-style/simple-inicio-de-sesion-con-php-y-mysql/ http://www.zoneartcss.com/webdevelopment/programacion-con-style/simple-inicio-de-sesion-con-php-y-mysql/#comments Tue, 20 Oct 2009 20:17:37 +0000 miguelortega http://www.zoneartcss.com/?p=928

Crear login para tu sitio web

Pequeño y simple sistema de Login con PHP y MySql

Se que esto es demasiado fácil y sencillo para este blog, que con mucho esfuerzo publicamos por el corto tiempo que tenemos libre, pero este codigo se que a muchas personas les va a ayudar por la sencillez y simplitud para poder explicar el famoso tema de inicios de sesión simple.

Primero creamos un archivo llamado index.php

En este archivo pondremos el formulario con sus respectivas casillas de usuario y contraseña con un botón de “Iniciar sesión”. y en este mismo archivo validados sencillamente el usuario y pass (ojo les recuerdo que ese tipo de inicio de sesión hay que validad bien las variables pro que si no te podrán hacer fácilmente una inyección mysql)

<html>
<head>
<title>Sistema de Administración</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" height="100%" border="0">
  <tr>
    <td>        
<h5 align="center">
  <?php
if($_REQUEST["acceso"]=="AIUFCHMSEUFCNSMUDFH")
{
 
$datos=$_POST;
$nombre=$datos['nombre'];
$clave=$datos['clave'];
 
$query = "SELECT * FROM date_sistem WHERE  usuario='".$nombre."' AND clave='".$clave."'" ;
$result = mysql_query($query, $link);
 
   if(mysql_num_rows($result)) {
		  while($row = mysql_fetch_row($result))
		  {
				die ("<script>window.location = 'login.php?user=747524527000245'</script>"); 
		  }
   }else {
   			print ("El usuario y/o la clave no son válidos");
   }
mysql_close($link);
}
 
?>
</h5><form name="form1" target="_self" method="post" action="index.php?acceso=AIUFCHMSEUFCNSMUDFH">
<table width="255" height="127" border="0" align="center" cellpadding="1" cellspacing="1" background="images/fondo_login.png">
                    <tr>
                      <td class="text">&nbsp;</td>
                      <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td width="90" class="text">
                            <p align="right">Usuario:</p>						</td>
                        <td width="151"><input type="text" name="nombre"></td>
                    </tr>
                    <tr>
                        <td width="90" class="text">
                            <p align="right">Contraseña:</p>						</td>
                        <td width="151">
							<input type="password" name="clave">						</td>
                    </tr>
                    <tr>
                      <td class="text"></td>
                      <td><input type="submit" name="formbutton1" value="Iniciar Sesi&oacute;n !!"></td>
                    </tr>
                    <tr>
                        <td width="90" class="text"></td>
                        <td width="151">&nbsp;</td>
                    </tr>
  </table>
</form>	</td>
  </tr>
</table>
 
</body>
</html>
 
Espero que les sea de utilidad, cualquier cosa que escriban sus dudas en la parte de abajo de los comentarios.
]]> http://www.zoneartcss.com/webdevelopment/programacion-con-style/simple-inicio-de-sesion-con-php-y-mysql/feed/ 3 Parámetros HTML – Flash en tu Web http://www.zoneartcss.com/tips/parametros-html-flash-en-tu-web/ http://www.zoneartcss.com/tips/parametros-html-flash-en-tu-web/#comments Mon, 07 Sep 2009 20:28:46 +0000 miguelortega http://www.zoneartcss.com/?p=664

Flash en tu Web

Parámetros y opciones Flash


Se que aveces es muy, pero muy fácil insertar un swf en tu pagina web, con dar unos cuantos click’s en tu editor de dreamweaver. Pero me he encontrado con muchas paginas que cuanto utilizan un lightbox por ejemplo me doy cuenta que el objeto en flash se sobrepone al efecto y en varios lados he visto este error, que bien con un z-index podriamos arreglar… pero necesitamos que el elemento swf tenga el siguiente parametro en su etiqueta “object” para ie y el “embed” para los navegadores buenos…

Corregir el z-index del flash en el object

1

<object><param name="WMode" value="Transparent"></object>

Corregir el z-index del flash en el embed

1

<embed WMode="Transparent"></embed>

Les dejo un ejemplo de codigo para insertar el flash con los parametros adecuados para que funcione correctamente.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="408" height="240" hspace="0" vspace="0">
        <param name="movie" value="topbar.swf">
        <param name="quality" value="High">
        <param name="_cx" value="5080">
        <param name="_cy" value="5080">
        <param name="src" value="topbar.swf">
        <param name="WMode" value="Transparent">
        <param name="Play" value="true">
        <param name="Loop" value="true">
        <param name="Menu" value="true">
        <param name="Scale" value="ShowAll">
        <param name="DeviceFont" value="false">
        <param name="EmbedMovie" value="false">
        <param name="SeamlessTabbing" value="true">
        <param name="Profile" value="false">
        <param name="ProfilePort" value="0">
        <param name="AllowNetworking" value="all">
        <param name="AllowFullScreen" value="false">
        <embed src="topbar.swf" width="408" height="240" hspace="0" vspace="0" quality="High" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" WMode="Transparent" Play="true" Loop="true" Menu="true" Scale="ShowAll" DeviceFont="false" EmbedMovie="false" SeamlessTabbing="true" Profile="false" ProfilePort="0" AllowNetworking="all" AllowFullScreen="false"></embed>
</object>

Recuerda poner siempre el object y embed por la cuestion de los navegadores.

Saludos.

]]> http://www.zoneartcss.com/tips/parametros-html-flash-en-tu-web/feed/ 0 Función en php para poner acentos html http://www.zoneartcss.com/tips/funcion-en-php-para-poner-acentos-html/ http://www.zoneartcss.com/tips/funcion-en-php-para-poner-acentos-html/#comments Tue, 01 Sep 2009 20:11:05 +0000 miguelortega http://www.zoneartcss.com/?p=604

Acentos HTML

PHP para corregir los acentos en el código HTML

Aqui les presento una función que la cuata de liz me paso, nose por que no lo habia publicado, pero en fin, yo la estoy publicando, la verdad no se de donde la agarro, si ella lo hiso o la copio, pero es de gran utilidad y espero que les sirva.

La funcion en php es la siguiente.

<?
function Reemplaza_Acentos($Cadena){
 $Cadena = str_replace('á','&aacute;',$Cadena);
 $Cadena = str_replace('é','&eacute;',$Cadena);
 $Cadena = str_replace('í','&iacute;',$Cadena);
 $Cadena = str_replace('ó','&oacute;',$Cadena);
 $Cadena = str_replace('ú','&uacute;',$Cadena);
 $Cadena = str_replace('Á','&Aacute;',$Cadena);
 $Cadena = str_replace('É','&Eacute;',$Cadena);
 $Cadena = str_replace('Í','&Iacute;',$Cadena);
 $Cadena = str_replace('Ó','&Oacute;',$Cadena);
 $Cadena = str_replace('Ú','&Uacute;',$Cadena);
 $Cadena = str_replace('ñ','&ntilde;',$Cadena);
 $Cadena = str_replace('Ñ','&Ntilde;',$Cadena);
 $Cadena = str_replace('ä','&auml;',$Cadena);
 $Cadena = str_replace('ë','&euml;',$Cadena);
 $Cadena = str_replace('ï','&iuml;',$Cadena);
 $Cadena = str_replace('ö','&ouml;',$Cadena);
 $Cadena = str_replace('ü','&uuml;',$Cadena);
 $Cadena = str_replace('Ä','&Auml;',$Cadena);
 $Cadena = str_replace('Ë','&Euml;',$Cadena);
 $Cadena = str_replace('Ï','&Iuml;',$Cadena);
 $Cadena = str_replace('Ö','&Ouml;',$Cadena);
 $Cadena = str_replace('Ü','&Uuml;',$Cadena);
 $Cadena = str_replace('²','&sup2;',$Cadena);
 $Cadena = str_replace('ñ','&ntilde;',$Cadena);
 $Cadena = str_replace('Ñ','&Ntilde;',$Cadena);
 return $Cadena;
}
?>

Y la llamas de la siguiente manera.

<?
Reemplaza_Acentos(<--aqui va la cadena-->);
?>

esto es todo de esta función pero a mi me fue de utilidad.

Saludos y voy a tratar de publicar mas seguido.

]]> http://www.zoneartcss.com/tips/funcion-en-php-para-poner-acentos-html/feed/ 5 Editor HTML CSS JS online http://www.zoneartcss.com/webdesign/herramientas-web/pizarra-web-en-web/ http://www.zoneartcss.com/webdesign/herramientas-web/pizarra-web-en-web/#comments Tue, 25 Aug 2009 22:06:11 +0000 Maumas http://www.zoneartcss.com/?p=586

Editor Online

Pizarra Web || Editor HTML CSS JS online

Bueno hoy saco de mi baul una herramienta de lujooo..  RENDUR

Por lo general los programadores web estamos acostumbrados a probar nuestras lineas de codigo desde nuestro local pero ups!! no siempre tenemos a nuestro equipo y mucho menos estar en una makina con todo lo elemental que se necesita, bueno ahora les mando una herramienta Web online =S —> RENDUR

En ella podran verificar que sus lineas sean correctas tanto de CSS como javascript y poder ver como quedarian, tan solo deberan poner su codigo… espero les guste !!!

Reseña Alex Aguiar:
Bueno eh probado la aplicacion, y es util, cuando prestamos ayuda rapida a colegas o bien hacer rapidos test de codigo para evitar abrir DW Notepad++ entre otros, o bien si no tenemos estos es muy util usar Herramienta web de Rendur, que es un editor online de XHTML CSS y Javascript, y al estar escribiendo vemos los resultados a un costado en la misma ventana del navegador…. es muy util pruebenla chao!…
PD: Perdon por poner la imagen hasta ahora jeje.

]]> http://www.zoneartcss.com/webdesign/herramientas-web/pizarra-web-en-web/feed/ 8 Guía práctica de HTML http://www.zoneartcss.com/general/guia-practica-de-html/ http://www.zoneartcss.com/general/guia-practica-de-html/#comments Fri, 21 Aug 2009 22:04:19 +0000 Liz Palacios http://www.zoneartcss.com/?p=547

Guia HTML Aprende ya

Conocimientos básicos de HTML

Hola!!

Les paso una guia Practica sobre HTLM, sobre etiquetas y sus atributos. Espero les sirva!!!

En la presente tabla se hace una comparación entre las etiquetas de formato de texto . Netscape no soporta : ni (tachado).

Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
ADDRESS
 ADDRESS CITE CITE B: NEGRITA B: NEGRITA
BIG BIG CODE CODE DFN DFN
EM EM I: ITALICA I: ITALICA KBD KBD
SAMP SAMP SMALL SMALL STRONG STRONG
SUB5 SUB 5 SUP5 SUP 5 S Tachado S Tachado
TT TT U Subrayado U Subrayado VAR VAR

Etiquetas
Apertura Acción Atributos Cierre
< ! Comentario. Ninguno –>
<A> Hipervínculo. HREF, NAME, REL, REV, TITLE </A>
<ADDRESS> Formato para dirección del autor. Ninguno </ADDRESS>
<BASE> Url del autor; contexto del documento. HREF </BASE>
<BASEFONT SIZE> Tamaño de la fuente base. Ninguno NO
<BGSOUND> Sonido de fondo. SRC, LOOP. NO – Internet Explorer
<BIG> Aumenta el tamaño. Ninguno </BIG>
<BLINK> Hace parpadear el texto. Ninguno </BLINK> – Netscape
<BLOCKQUOTE> Da formato con sangría a un párrafo Ninguno </BLOCKQUOTE>
<BODY> Cuerpo del documento. BGCOLOR, BACKGROUND, TEXT, LINK, VLINK, ALINK </BODY>
<BR> Retorno de línea. CLEAR: Se utiliza en combinación con ALIGN de IMAGE. NO
<CAPTION> Posición de la leyenda en una tabla. ALIGN: TOP/BOTTOM. Internet Explorer: LEFT, RIGHT, CENTER </CAPTION>
<CENTER> Centrar. Ninguno </CENTER>
<CITE> Formato para citas en itálicas. Ninguno </CITE>
<CODE> Formato en tipo código. Ninguno </CODE>
<DD> Definiciones marcadas, para Lista de Definiciones <DL>. Ninguno NO
<DFN< Formato en itálica. Internet Explorer </DFN<
<DIR> Lista de directorio, con elementos marcados con <LI>. Ninguno </DIR>
<DL> Lista de Definiciones, con términos marcados con <DT> y definiciones marcadas con <DD>. Ninguno </DL>
<DT> Términos marcados, para Lista de Definiciones <DL>. Ninguno NO
<EM> Formato enfatizado en itálica. Ninguno </EM>;
<EMBED> Sonido de Fondo. SRC, WIDTH, HEIGHT, AUTOSTART, LOOP. NO – Netscapee
<FONT> Definición de la fuente. SIZE, COLOR. Internet Explorer: FACE. </FONT>
<FORM> Para ingreso de datos del usuario en un formulario. ACTION, METHOD </FORM>
<H1 …H6> Tamaño de letras del 1 al 6. HTML 3.0: LEFT, CENTER, RIGHT </H1 …/H6>
<HEAD> Encabezamiento del documento. BASE, TITLE, ISINDEX, NEXTID, META </HEAD>
<HR> Línea horizontal. NOSHADE, SIZE, WIDTH, ALIGN. Internet Explorer: COLOR NO
<HTML> Al principio y al fin de todo documento. HEAD, BODY </HTML>
<I> Itálica (Cursiva). Ninguno </I>
<IMG> Cargar imágenes. ALIGN, SRC, ALT, ISMAP, WIDTH, HEIGHT, VSPACE, HSPACE NO
<INPUT> Define un objeto de ingreso en un formulario. TYPE, NAME, VALUE, SIZE, MAXLENGHT, ALIGN, SRC, CHECKED </INPUT>
<ISINDEX> Indica que existe un index en el server para el documento. Netscape: PROMPT NO
<ISMAP> Activa la selección de imágenes para el usuario. Ninguno NO
<KBD> Formato monoespaciado. Ninguno </KBD>
<LI> Ítem de lista. Netscape: VALUE, TYPE NO
<LISTING> Listados Ninguno. Obsoleto. </LISTING>
<LIT> Literal. Como PRE, pero usa letra proporcional. Ninguno </LIT>
<MARQUEE> Marquesina. ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY. </MARQUEE> – Internet Explorer
<MENU> Lista menú. Ninguno </MENU>
<META> Metainformación ubicada en HEAD. EQUIV, CONTENT, NAME NO
<NEXTID> Es un parámetro que identifica al documento. NO NO
<NOBR> Elimina los saltos de líneas. Ninguno NO
<OL> Lista ordenada, con elementos marcados con <LI>. TYPE, START, VALUE. </OL>
<OPTION> Opción de selección dentro de un formulario. VALUE, SELECTED VALUE NO
<P> Retorno de línea, con un espacio. Ninguno NO
<P ALIGN> Alineación de texto. LEFT, CENTER, RIGHT </P>
<PLAINTEXT> Pasaje de texto plano. Ninguno. Obsoleto. </PLAINTEXT>
<PRE> Visualiza el texto en su formato original. WIDTH </PRE>
<S> Texto tachado. Ninguno </S>
<SAMP> Formato tipo ejemplo. Ninguno </SAMP>
<SELECT> Para selección de opciones dentro de un formulario. NAME, SIZE, MULTIPLE </SELECT>
<SMALL> Disminuye el tamaño. Ninguno </SMALL>
<STRONG> Formato enfatizado más fuerte que <EM>. Ninguno </STRONG>
<SUB> Subíndice. Ninguno </SUB>
<SUP> Superíndice. Ninguno </SUP>
<TABLE> Tabla. BORDER, CELLPADDING, CELLSPACING, HEIGTH, WIDTH. Internet Explorer: COLOR </TABLE>
<TD> Celdas de una fila en una tabla, dentro de <TR>. ALIGN, VALIGN, NOWRAP, COLSPAN, ROWSPAN, HEIGTH, WIDTH </TD>
<TEXTAREA> Área para ingreso de texto dentro de un formulario. NAME, ROWS, COLS. </TEXTAREA>
<TH> Título de Tabla. ROWSPAN, COLSPAN, ALIGN, VALIGN, NOWRAP, HEIGHT, WIDTH </TH>
<TITLE> Título dentro de HEAD. Ninguno </TITLE>
<TR> Fila de una Tabla. ALIGN, VALIGN </TR>
<TT> Formato tipo máquina. Ninguno </TT>
<UL> Lista no ordenada, con elementos marcados con <LI> . COMPACT, TYPE </UL>
<VAR> Formato tipo variable. Ninguno </VAR>
<WBR> Se usa con NOBR para una sección que deba ser separada. Ninguno NO
<XMP> Similar a PRE. Ninguno </XMP>

Atributos
Nombre Etiqueta Acción Valor
HREF Dirección del URL local o remoto. href=”www.hp.com”
LOOP <BGSOUND> Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1. loop=infinite
SRC Nombre del archivo de sonido (Internet Explorer) src=”sonido.wav”
LOOP <EMBED> Número de veces que se reproduce el archivo de sonido. Para permanente se usa INFINITE o -1. loop=-1
SRC Nombre del archivo de sonido (con Crescendo) src=”sonido.mid”
SRC <IMAGE> Nombre del gráfico src=”imagen.gif”
ALT Nombre que reemplaza a la imágen cuando ésta no puede ser cargada. alt=”Nombre de Imágen”
BGCOLOR <BODY> Color de fondo bgcolor=”#FFFFFF” (blanco)
BACKGROUND Imágen de fondo background=”foto.gif”
TEXT Color del texto text=”#000000″ (negro)
LINK Color de vínculo link=”#0000FF” (azul)
VLINK Color de vínculo visitado vlink=”#FF0000″ (rojo)
ALINK Color de vínculo presionado alink=”#00FF00″ (verde)
ALIGN <CAPTION> dentro de <TABLE> Colocar título arriba (TOP) o debajo (BOTTOM) de la tabla. align=top
ALIGN <H1..H6>, <P ALIGN>, <TD>, <TH>, <TR>, <DIV>, Alinear el texto: LEFT, RIGHT, CENTER align=center
ALIGN <HR> Alinear el texto: LEFT, RIGHT, CENTER align=center
SIZE Valor de la altura en pixels o porcentaje size=3
WIDTH Valor del ancho en pixels o porcentaje width=50%
SIZE <FONT> Tamaño de la letra de 1 a 7 size=6
COLOR Color de la letra color=”#000000″ (negro)
FACE Fuente del texto (Internet Explorer) face=”helv” (helvética)
HEIGHT <EMBED>, <IMAGE>, <MARQUEE>, <TD>, <TH> Valor de la altura en pixels o porcentaje heigth=80
WIDTH Valor del ancho en pixels o porcentaje width=50%
BORDER <TABLE> Borde y ancho del borde en la tabla border=5
CELLPADDING Espacio entre el borde y el texto cellpadding=10
CELLSPACING Espacio entre las líneas interna y externa del borde cellspacing=3
HEIGHT Valor de la altura en pixels o porcentaje heigth=80
WIDTH Valor del ancho en pixels o porcentaje width=50%
COLSPAN <TD> dentro de <TABLE> Expandir una celda varias columnas colspan=4
ROWSPAN Expandir una celda varias filas rowspan=4
]]> http://www.zoneartcss.com/general/guia-practica-de-html/feed/ 0 Como vincular un html con Css http://www.zoneartcss.com/webdesign/css/como-vincular-un-html-con-css/ http://www.zoneartcss.com/webdesign/css/como-vincular-un-html-con-css/#comments Fri, 14 Aug 2009 19:40:46 +0000 miguelortega http://www.zoneartcss.com/?p=488

Separando CSS de XHTML

Separando el CSS del HTML

Hay veces que te dan dudas de como poder agregar estilos a tu página Web. Hay varias maneras de poderlos agregar y aqui en este pequeño tutorial basico te enseñaremos como.

La primera Forma es agregando el css directo desde tu página html, normalmente los editores domo Adobe Dreamweaver asi lo agregan, veamos el ejemplo siguiente:

Ejemplo 1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!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&iacute;tulo</title>
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color: #000000;
}
body {
	background-color: #FFFFFF;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style></head>
 
<body>
ZoneArtCss - www.zoneartcss.com
</body>
</html>

Pero el problema esta cuando ese mismo estilo lo vas a utilizar en varias paginas, tendrias que copiar y pegar varias veces el codigo css y por lo tanto pesará mas tu web. La solucion seria que crees un archivo llamado por ejemplo “style.css” en donde scribiras tus estilos y acontinuacion en tu condigo html lo vinculas con el siguiente codigo:

Ejemplo 2:

1
2
3
4
5
6
7
8
9
10
11
12
13

<!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&iacute;tulo</title>
 
<link rel="stylesheet" href="style.css"  type="text/css" />
 
</head>
 
<body>
</body>
</html>

Con este ejemplo podras cargar todos tus estilos en un solo archivo sin ningun problema, es mas facil buscar los estilos cuando tienes un proyecto grande y sabes que en un solo archivo se encuentran los estilos.

Espero que les sea util.

]]> http://www.zoneartcss.com/webdesign/css/como-vincular-un-html-con-css/feed/ 2 Efecto Page Peel Con jQuery & CSS http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/ http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/#comments Fri, 31 Jul 2009 02:28:03 +0000 Liz Palacios http://www.zoneartcss.com/?p=411

Dejate doblar con - Page Peel effect

Hola les mostrare como crear el efecto de paginacion en tu Web. La mayoria de las veces esto lo crean con flash, pero les voy a mostrar una manera mas rapida y sencilla de hacerlo.
Les muestro como:

1ro vamos a crear el contenedor de nuestra esquina paginada.

1
2
3
4
5
6

<div id="pageflip">
	<a href="#">
		<img src="page_flip.png" alt="" />
		<span class="msg_block">Subscribe via RSS</span>
	</a>
</div>

Ahora creamos nuestro style css, establecemos nuestra imagen de la esquina a un tamaño pequeño (50px por 50px) por defecto y establecemos el posicionamiento absoluto de nuestro span en la esquina superior derecha.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

#pageflip {
	position: relative;
}
#pageflip img {
	width: 50px; height: 52px;
	z-index: 99;
	position: absolute;
	right: 0; top: 0;
	-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
	width: 50px; height: 50px;
	position: absolute;
	z-index: 50;
	right: 0; top: 0;
	background: url(subscribe.png) no-repeat right top; /* Imagen oculta a mostrar */
	text-indent: -9999px;
}

Y por ultimo nuestro codigo js, antes debemos llamar a nuestro archivo jQuery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$("#pageflip").hover(function() { //On hover...
	$("#pageflip img , .msg_block").stop()
		.animate({ // Animacion de nuestro div (Width + height)
			width: '307px',
			height: '319px'
		}, 500);
	} , function() {
	$("#pageflip img").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '52px'
		}, 220);
	$(".msg_block").stop() //Al estar fuera volvemos a nuestro tamaño original 50x52
		.animate({
			width: '50px',
			height: '50px'
		}, 200);

Les dejo el link de la DEMO EL LINEA

]]> http://www.zoneartcss.com/webdesign/css/efecto-page-peel-con-jquery-css/feed/ 3 Marquesina con onMouseOver=”this.stop()” y onMouseOut=”this.start()” http://www.zoneartcss.com/tips/marquesina-con-onmouseoverthis-stop-y-onmouseoutthis-start/ http://www.zoneartcss.com/tips/marquesina-con-onmouseoverthis-stop-y-onmouseoutthis-start/#comments Fri, 31 Jul 2009 01:35:47 +0000 miguelortega http://www.zoneartcss.com/?p=400

Cintilla HTML

Este es un codiguito muy sencillo pero muchas veces util, sobre todo cuando no quieres utilizar flash o javascript para hacer este efecto de marquesina, y lo mejor de todo solo es una etiqueta HTML y le agregamos dos eventos los cuales serian el onMouseOver y el onMouseOut para que cuando nos posicionemos en el texto o imagen que este dentro de nuestra marquesina se detenga y cuando quitemos el mouse siga ya sea verticalmente o horizontalmente la animación.

Ejemplo de marquesina HTML

1
2
3
4
5

<marquee onMouseOver="this.stop()"  onMouseOut="this.start()" scrollAmount="2" scrollDelay="4" direction="up" width="100%" height="120">
 
//tu contenido aquí
 
</marquee>

Ahora si le quieres poner mas estilo de opacidad y demas agregale esta linea:

style=”FILTER: Alpha(Opacity=90, FinishOpacity=100, StartX=100, StartY=2, FinishX=0, FinishY=0)”

El resultado de todo esto seria:

1
2
3
4
5

<marquee onMouseOver="this.stop()" style="FILTER: Alpha(Opacity=90, FinishOpacity=100, StartX=100, StartY=2, FinishX=0, FinishY=0)" onMouseOut="this.start()" scrollAmount="2" scrollDelay="4" direction="up" width="100%" height="120">
 
//tu contenido
 
</marquee>

Saludos.

]]> http://www.zoneartcss.com/tips/marquesina-con-onmouseoverthis-stop-y-onmouseoutthis-start/feed/ 0 Comentarios Condicionales para IE http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/ http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/#comments Thu, 16 Jul 2009 04:15:17 +0000 miguelortega http://www.zoneartcss.com/?p=257

Comentarios condicionales para internet explorer

Es muy util, tanto CSS, como JS (javascript), fijar condiciones detectando el navegador que estamos utilizando.
Esto solo aplica para los “internet explorer’s” ya que los comentarios condicionales fueron creados para microsoft.

Para que sirve?

Bueno su trabajo es ocultarse para que los navegadores desentes (todos menos ie) no lean dichas lineas comentadas…

Como lo aplico?

Primero deben estar colocados dentro de nuestro <head> y entonces…

Aplicando Condicion

1
2
3

<!--[if condicion ie]> 
Aqui el <strong>HTML</strong> que solo interpretara <strong>IE</strong> donde "condicion" debe variar segun la version... que elijamos
<![endif]–>

Escoger una version

Acontinuacion las variaciones de “condicion” que es donde escogemos la version o versiones que haremos para que lo interprete IE.
Y al igual que “X” es la version del IE, , 5.5, 6, 7, 8.

1
2
3
4
5
6
7
8
9
10
11
12

 IE  
     Cualquier versión de Internet Explorer  
 lt IE X  
    Versiones inferiores a X  
 lte IE X  
     Versiones inferiores o iguales a X  
 IE X  
     Solo para la version X  
 gte IE X  
     Versiones superiores o iguales a X  
 gt IE X  
     Versiones superiores a X

Comentario Condicional IE6 para hoja de estilos CSS

Acontinuacion un ejemplo para usar la condicion a “cualquier IE” y que los navegadores decentes no veran.

1
2
3
4
5
6

<head>  
<link href="firefox_y_otros.css" rel="stylesheet" type="text/css">  
<!--[if IE]>  
<link href="cualquier_IE.css" rel="stylesheet" type="text/css">  
<![endif]-->
</head>

Comentarios Condicionales para IE

Bueno aqui les dejo las variaciones que puedes hacer, y declarar las condiciones que necesites.

Para condicionar una version del IE en especifico

1
2
3
4

<!--[if IE 5.5]>Para internet explorer 5.5<![endif]-->  
<!--[if IE 6]>Para internet explorer 6<![endif]-->  
<!--[if IE 7]>Para internet explorer 7<![endif]-->  
<!--[if IE 8]>Para internet explorer 8<![endif]-->

Para condicionar una version del IE en especifico y sus superiores

1
2
3
4

<!--[if gte IE 5.5]>Para internet explorer 5.5 y superiores<![endif]-->
<!--[if gte IE 6]>Para internet explorer 6 y superiores<![endif]-->
<!--[if gte IE 7]>Para internet explorer 7 y superiores<![endif]-->
<!--[if gte IE 8]>Para internet explorer 8 y superiores<![endif]-->

Para condicionar sus versiones superiores a la elegida

1
2
3
4

<!--[if gt IE 5.5]>Para versiones superiores a internet explorer 5.5<![endif]-->
<!--[if gt IE 6]>Para versiones superiores a internet explorer 6<![endif]-->
<!--[if gt IE 7]>Para versiones superiores a internet explorer 7<![endif]-->
<!--[if gt IE 8]>Para versiones superiores a internet explorer 8<![endif]-->

Para condicionar sus versiones inferiores a la elegida

1
2
3
4

<!--[if gt IE 5.5]>Para internet explorer 5.5 e inferiores<![endif]-->
<!--[if lt IE 6]>Para internet explorer 6 e inferiores<![endif]-->
<!--[if lt IE 7]>Para internet explorer 7 e inferiores<![endif]-->
<!--[if lt IE 8]>Para internet explorer 8 e inferiores<![endif]-->

Conclusion de las condicionales y/o sus variaciones de estas.

1
2
3
4

gt: greater than (version mayor que).
gte: greater than equal (version igual o mayor que).
lt: lower than (version menor que).
lte: lower than equal (version igual o menor que).
]]> http://www.zoneartcss.com/webdesign/css/comentarios-condicionales-para-ie/feed/ 0 WTF is CSS? – manual basico CSS http://www.zoneartcss.com/webdesign/css/wtf-is-css-manual-basico-css/ http://www.zoneartcss.com/webdesign/css/wtf-is-css-manual-basico-css/#comments Mon, 06 Jul 2009 03:44:17 +0000 miguelortega http://www.zoneartcss.com/?p=165

Que cara?... que demo... what the...

Bueno no soy un programador, pero si tengo ciertas habilidades en el CSS, no me considero experto pero si con los conocimientos suficientes, y bueno este lenguaje que en mi opinión tonta y personal no considero muy de programación sino de estrategia y sobre todo paciencia.

Primero lo básico para dar estilos es importante saber a quien se lo estamos dando vale?… Es un poco tedio pero es fácil si tienes paciencia y un poco de razonamiento.
Cuando damos un estilo es necesario saber si es a una etiqueta HTML o una clase o bien a una ID. Y en castellano se traduce a:

Etiqueta HTML o bien


La siguiente propiedad CSS le dará el estilo a todas las etiquetas “div” de nuestro sitio,
(esta propiedad se le puede dar a otras etiquetas, table, span, h1, etc..)

1
2

/* Esto le dará un margen en la parte superior de 15px*/
div{ margin-top:15px; } /*el html es: <div></div>*/

Estilo a una clase “.miclase”
Esta propiedad CSS le dará el estilo a una o varias clases en nuestro sitio dependiendo a que elementos le hayamos asignado en nuestro código HTML.

(no importa si la etiqueta HTML es un “div”, “table”, “h1” o cualquier otro, ya que tendrá el estilo que le demos en el siguiente código, aquí lo importante es la clase y no su etiqueta.)

1
2
3
4
5
6
7
8
9
10

/* Esto le dará un margen en la parte superior de 15px a todos los elementos que contengan esta clase sin importar si es un “div”, o cualquier otra etiqueta HTML*/
.miclase{ margin-top:15px; }  /*el html es: <div class=”miclase”></div>*/
/*De igual manera podemos personalizarla a un nivel “semi-avanzado en CSS*/
div.miclase{ margin-top:15px; }  /*le dará el margen de 15px solo a los “div’s” que tengan esta clase ejemplo:<div class=”miclase”></div>*/
 
span.miclase{ margin-top:14px; } /* le dará el margen de 14px solo a los “span’s” que tengan esta clase ejemplo:<span class=”miclase”></span>*/
 
h3.miclase{ margin-top:13px; } /* le dará el margen de 13px solo a los “h3’s” que tengan esta clase ejemplo:<h3 class=”miclase”></h3>*/
 
/*todas las anteriores tuvieron asignada la misma clase, pero fue variando su margen dependiendo de su etiqueta HTML*/

Estilo a una ID #ESTILO
Esta propiedad CSS le dará el estilo a nuestra ID que por reglas HTML no se debe repetir en nuestro documento, es muy util para ahorrar codigo… cuando a nuestras ID’s les asignamos eventos en JS… y de paso le damos estilos… pero igual se pueden usar las 2.
(a veces sin querer se repite nuestra id, para estos casos se debe asignar una clase ya que un ID debe ser único. )

1
2
3
4
5

/* Esto le dará un margen en la parte superior de 15px*/
#ESTILO{ margin-top:15px; }
 
/*De igual manera se puede asignar el elemento HTML para tenerlo ordenado o bien para que no olvidemos que etiqueta era… enfin*/
div#ESTILO{ margin-top:15px; }

El punto es que cuando es una etiqueta HTML se escribe tal cual es, si es un “div” en el CSS es “div { }”, cuando es una clase lleva un punto antes
“.miclase { }” y cuando es una ID lleva un signo de gato antes “#ESTILO”.

Esto fue una extencion de un “manual” que tenia para hacer templates y mejor explicado chao!…

]]> http://www.zoneartcss.com/webdesign/css/wtf-is-css-manual-basico-css/feed/ 0 position:fixed para Internet Explorer 6 http://www.zoneartcss.com/webdesign/css/positionfixed-para-internet-explorer-6/ http://www.zoneartcss.com/webdesign/css/positionfixed-para-internet-explorer-6/#comments Sat, 04 Jul 2009 01:19:48 +0000 miguelortega http://www.zoneartcss.com/?p=161

Position fixed para ie6

Bueno despues de tratar, y utilizar un millon de hacks… eh encontrado una solucion… ok no valida pero sirve… asi k toca joderse otra vez… por culpa de… adivinen…. sip… FUCK IE 6 acertaron… (joer… k cliche de post) pero bueno… eh aqui la luz…

Tenemos nuestro div “cabecera” que tiene el fondo, ancho, alto etc… y le agregamos… position:absolute; esto es para IE6, y el siguiente codigo en JS (No estoy seguro de que sea JS, no se programar mucho tansolo, diseño y css, pero si me equivoco corrijanme) hace el efecto de “estar fijo“, tomando en cuenta el movimiento de nuestro scroll del mouse para darle las cordenadas de arriba e izquierda para simular la posicion fija…

1
2
3

.cabecera{background:#333;height:50px;width:100%;color:#FFF;position:absolute;
top:expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); 
left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px'); line-height:3em;}

Y ahora hacemos uso de > para que solo nuestros bonitos navegadores interpreten el siguiente codigo… y es todo

1

body > div.cabecera {position:fixed;top:0px;left:0px;}

y nuestro html algo asi

1
2
3

<div class="cabecera">
Posicion fija: &lt;/Alex Aguiar&gt;
</div>

pero yo le agregue un div mas dandole mucha altura para hacer la prueba…

1
2

<div style="width:800px;height:1000px;margin:auto;">
</div>

Ver demo online

]]> http://www.zoneartcss.com/webdesign/css/positionfixed-para-internet-explorer-6/feed/ 3 Foros CSS, Diseño y mas en ZoneArtCSS http://www.zoneartcss.com/general/foros-css-diseno-y-mas-en-zoneartcss/ http://www.zoneartcss.com/general/foros-css-diseno-y-mas-en-zoneartcss/#comments Tue, 30 Jun 2009 02:47:41 +0000 miguelortega http://www.zoneartcss.com/?p=85

Foros de desarrollo y diseño de sitios web

]]> http://www.zoneartcss.com/general/foros-css-diseno-y-mas-en-zoneartcss/feed/ 2