Archivo de la categoría: Desarrollo de Interfaces Web

Archivo CSS3

css3-help-sheet1

css3-cheat-sheet

Anuncios

Rounded corners
Uno de los grandes usos que ha permitido CSS3 es la creación de bordes redondos de forma sencialla sin tener que crear imagenes redondas a cada esquina como se debia hacer en CSS2. Aun no está
completamente soportada por todos los navegadores la opción de border-radius, así que deberemos de utlizar las siguientes sentencias para estos navegadores:
-webkit-border-radius (valores) para Safari
-moz-border-radius (valores) para Firefox

7

 

 

 

 

 

 

Formularios CSS3

5

 

Aqui os dejo el codigo:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Documento sin título</title>
</head>

<body>
<div id=”formulario”>
<form>
<fieldset>
<legend>Formulario</legend>
<label for=”nombre”>Nombre</label>
<input type=”text” name=”nombre” id=”nombre”>
<br>

<label for=”apellidos”>Apellidos</label>
<input type=”text” name=”nombre” id=”apellidos”>
<br>
<label for=”domicilio”>Domicilio</label>
<input type=”text” name=”nombre” id=”domicilio”>
<br>

<input type=”radio” name=”combustible” value=”hombre”> Hombre<br>
<input type=”radio” name=”combustible” value=”gasolina”> Mujer<br>

Seleccioma tus estudios:
<br>
<select name=”Opciones” id=”opciones”>
<option value=”ESO”>ESO</option>
<option value=”Bachillerato”>Bachillerato</option>
<option value=”Ciclos”>Ciclos</option>
<option value=”Universidad”>Universidad</option>
<option value=”Postgrado”>Postgrado</option>
</select>
<br>
Incluir mi foto
<br> <input type=”file” name=”foto” />
<br>
Comentarios:
<br>
<textarea name=”comentario” id=”comentario”></textarea>
</fieldset>
</form>
</form>
</body>
</html>

Responsive Design CSS

En una práctica creamos layouts rígidos, hemos hablado de los fluidos y ahora toca hablar de los líquidos.

Los layouts fuidos son los que programábamos con “%” para que se adaptaran al porcentaje de la pantalla. Este es un sistema bastante facil de adaptar y que responde a la mayoria de las necesidades pero que aun tiene ciertas limitaciones. A lo mejor al apartado del menú le deja un espacio demasiado grande en alguna resolución, etc…
 Los layouts fluidos son aquellos que se adaptan a la resolución en
concreto con la que veamos la página.

En la siguiente práctica vamos a practicar algunos apuntes básicos de esta
técnica para que al final creeis un layout fluido.

Utiliza las resoluciones más tipicas en internet.
Smartphones
Pantallas normales
Pantallas panorámicas grandes
Ampliación:
Realiza un layout con header, footer y 3 columnas (izquierda centro y
derecha) en la que al cambiar la resolución variará el diseño de la página (la
columna de la izquierda que tendrà el menú se pondrà en la parte superior).

Páginas interesante:
http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/

http://www.creativasfera.com/aprende-ya-diseno-web-responsive-layout-fluido

Aqui podemos ver la web en medidas grandes.

1

Aqui la podemos en ver en medida mediana.

2

Y aqui en formato iphone .

3

Como utilizar los layout.

div

En este trabajo os pongo como utilizado los div para crearme contenedores para poder hacer la practica.

Captura

Aqui od dejo un videoTutorial.

 

 

Aquí os dejo el código fuente.

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

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

<link type=”text/css” href=”externo.css” rel=”stylesheet”>

</head>

<body>

<div id=”pagina”>

<div id=”cabezera” >

<h1>Ejercicio CS3 – Layout 3 colunnas</h1>

</div>

</div>

<div id=”fondoVerde”>

<p>Colunna de la izquierda en esta colunna podriamos poner varias cosas.                 </p>

</div>

<div id=”fondoAmarillo”>

<p>Colunna de contenido</p>

<p>El contenido de esta pagina irira en esta seccion</p>

<p>El diseño es bastante bueno pero las colunnas no se alrgan todo lo que nos gustaria</p>                         <p>tendremos que hacer posteriormente una version que mejore esto</p>

</div>

<div id=”fondoMorado”>

<p>Colunna de la derecha</p>

</div>

<div>

</div>

<div id=”pie”>     Este es el pie de la pagina.     </div>

</body>

</html>

Aquí un css externo.

@charset “utf-8”;

#pagina{  width:100%;

margin:0px;

background-color:#666;

}

#cabezera

{

background-color:#666;  padding:10px;

}

h1

{  color:#FFF;

}

#fondoVerde

{

float:left;

width:300px;

background-color:#0F3;

}

#fondoAmarillo

{

float:left;

width:765px;

background-color:#FF0;

}

#fondoMorado

{

width:284px;

background-color:#60C;

float:right;

}

#pie

{

background-color:#000;

color:#FFF;

text-align:center;

clear:left;

}

Proyecto de DIW CSS

Aqui en este proyecto os voy a enseñar el código y el css  externo que e utilizado para hacer este proyecto de clase mirad, aquí lo que sale.

 

 

Captura

 

Aquí os dejo el código fuente.

<!DOCTYPE html>

<html>

<head>

<link  rel=”StyleSheet” type=”text/css” media=”all” href=”imagen.css” />

</head>

<body>

<h1>Ejercicio CSS 1</h1>

<p><img src=”bombilla.gif” width=”100″ height=”180″></p>

<a>A</a>

<p clas=”sub”>aqui tenemos un ejemplo de como utilizar CSS</p>

<p >La letra A esta flotando a la izquierda.</p>

<p>El texto de sobre esta subrrallado.</p>

<p>i este esta a 10px del anterior.</p>

<pre>´ñlkdf´glñks´ñdlgfkñsdlf</pre>

 

<div>You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<div>You can use the overflow property when you want to have better.</div>

</body>

</html>

…………………………………………………………………………………………………………………………………………………………….

Aquí el CSS

body

{

background-color:#d0e4fe;

}

h1

{

color:white; background-color:gray;

}

po

{

font-family:”Times New Roman”

; }

div.scroll

{

position: absolute;

background-color:

yellow;

width: 100px;  height: 100px;  overflow: scroll;

left: 136px;

top: 238px;

}

div.pol

{

position: absolute;

background-color:red;

width: 100px;

height: 100px;  //

visibility: collapse;

left: 478px;

top: 50px;

}

img

{

position: absolute;

left: 68px;

top: 125px;

z-index: -1;

}

.underline

{

color: blue;

border-bottom:1px solid red;

}​

tam

{

color:green;

text-decoration: underline;

font-size: 10px;

}

.sub

{

text-decoration: underline;

}

pre

{

text-decoration: underline;

font-size: 10px;

font-family:”Times New Roman”;

}

a {  text-decoration: underline;  left: 11px;  top: 25px;  float: left;  font-size: 125px;  top: 105px; 976104900 }

Practica trabajando con CSS y Estilos.

En esta parctica e trabajado con CSS externos y con estilos , una simple tabla que cuando pasas el raton por encima se van señalando las celdas.

Captura

Codigo HTML——————————————————————————————————

<!doctype html>

<html>

<head>

<meta charset=”utf-8″>

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

<link rel=”stylesheet” type=”text/css” href=”externo.css” />

</head>

<body>

<table summary=”Tipos de cambio”>

<tr>

<th scope=”col”>Cambio</th>

<th scope=”col”>Compra</th>

<th scope=”col”>Venta</th>

<th scope=”col”>Maximo</th>

<th scope=”col”>Minimo</th>

</tr>

<tr>

<th scope=”row”>Euro/Dolar</th>

<td>1.2524</td>

<td>1.2527</td>

<td>1.2539</td>

<td>1.2488</td>

</tr>

<tr>

<th scope=”row”>Dolar/Yen</th>

<td>119.01</td>

<td>119.05</td>

<td>119.82</td>

<td>119.82</td>

</tr>

<tr>

<th scope=”row”>Libra/Dolar</th>

<td>1.8606</td>

<td>1.8611</td>

<td>1.8651</td>

<td>1.8522</td>

</tr>

<tr>     <th scope=”row”>Yen/Euro</th>

<td>0.6711</td>

<td>0.6705</td>

<td>0.6676</td>

<td>0.6713</td>

</tr>

</table>

</body>

</html>

Aquí el archivo externo CSS —————————————————————————————

@charset “utf-8”;
table {
font: .9em Arial, Helvetica, sans-serif;
border: 1px solid #333;
border-collapse: collapse;
text-align: center;
}
table th {
background: #F5F5F5 url(imagenes/fondo_gris.gif) repeat-x;
padding: 0 .3em;
}
table th.euro {
background: #E6F3FF url(imagenes/euro.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th.dolar {
background: #E6F3FF url(imagenes/dolar.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th.libra {
background: #E6F3FF url(imagenes/libra.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th.yen {
background: #E6F3FF url(imagenes/yen.png) no-repeat left center;
padding: 0 .3em 0 1.2em;
}
table th, table, td {
border: 1px solid #333;
line-height: 2em;
}
.fila {
text-align: left;
}
.par {
background-color:#FFFFCC;
}
table tr:hover {
background: #FFFF66;
}
</style>

http://www.emiliosedano.260mb.net/

http://www.emiliosedano.260mb.net/

Aquí os dejo el Trabajo de Desarrollo de Interfaces Web lo e subido a un servidor asi para verlo mas en directo .

Posicionamiento SEO

images

 

El posicionamiento en buscadores es el proceso de mejorar la visibilidad de un sitio web en los resultados organicos de los diferentes buscadores.

En los ultimo años , la generalización de las estrategias de posicionamiento en buscadores y su implementación en un mayor numero de websites, han logrado generar la consciencia que ocupar los primeros puestos en las paginas de resultados puede ser crucial para un sitio.

En los últimos años , los motores de búsqueda están incorporando nuevas variables que es necesario tener en cuenta para la optimización de un sitio web.

Búsquedas locales, o búsquedas personalizadas son algunos de estos nuevos tipos de posicionamiento.

Los archivos sitemap.xml son impresdincibles para lograr que unsitio web sea indexado con éxito y que cada cambio o modificación en un archivo sea notado inmediantamente.

Diferentes archivos:

Se pueden emplear un simple archivo de texto plano  en el que solo aparezcan listadas las URL de las paginas.

Se tendrá que llamar sitemap.txt

También podemos emplear archivos de texto plano en formato XML, que permite funciones  como:

Incluir imágenes.

Incluir videos.

Incluir fechas.

sitemap