lunes, 7 de julio de 2014
Buzón para el proyecto 4.
lunes, 30 de junio de 2014
Hojas de Estilo en Cascada con CSS
Las propiedades y sus valores son definidos usando una sintaxis de CSS simple. Estas definiciones no pertenecen al estándar HTML, pero están pensadas para reemplazar los atributos presentacionales que HTML ha juntado durante sus primeros tiempos.
De este modo puedes definir muchos pares de valores y propiedades en un mismo bloque, dado que una definición básica es separada de la próxima por un punto y coma. Un conjunto de propiedades puede entonces ser aplicado, por ejemplo, a un elemento, lo que establecerá el aspecto visual de ese elemento dondequiera que aparezca en el documento.
En el siguiente ejemplo un conjunto de propiedades visuales es definido para el elemento elemento HTML p. Para lograr esto, el nombre del elemento debe aparecer antes de la declaración de propiedades, las cuales irán encerradas entre llaves ("{" y "}").
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
Al declarar este código en un documento HTML, todos los párrafos tomarán estas propiedades. En algunos casos necesitas establecer características sólo para algunos párrafos en lugar de para todos. Si este es el caso, puedes usar el atributo "style", las clases o los selectores ID.
Nota: las propiedades CSS y sus posibles valores no ser´na tratados en profundidad en este sitio. Para encontrar más información acerca de este tema, refiérete a este índice de propiedades para CSS 2.
Definiciones de estilo
Puedes definir propiedades de estilo de tres formas: dentro del rag de apertura de un elemento específico (usando el atributo "style"), dentro de un bloque en el encabezado del documento (usando el elemento HTML style) o en archivos externos (usando el tag HTML link).
Usando el atributo "style"
El atributo "style" permite a los autores declarar propiedades de estilo "en línea" como valor de un atributo. Es útil cuando el autor necesita declarar un conjunto único de propiedades para un elemento específico. La sintaxis para las propiedades CSS son las mismas.
Contenido del párrafo
Como puedes ver, el estilo declarado en este ejemplo es el mismo declarado en el ejemplo anterior. La diferencia es que este último sólo afecta al elemento contenedor y el primero afecta implícitamente a todos los párrafos.
Usando el elemento HTML style
El elemento HTML style define un bloque donde las declaraciones de estilo pueden ser contenidas. El bloque de estilo debe ser declarado en algún lugar del encabezado del documento (elemento HTML head) y definirá estilos y clases para el documento actual.
p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
a {
font-size: 12px;
font-weight: bold;
}
</style>
Nota que estas dos definiciones afectarán a todos los elementos "a" y "p" presentes en el documento.
Usando archivos externos
Los archivos externos también pueden ser utilizados para definir propiedades de estilo para uno o más documentos. El archivo, usalmente presenta la extensión "css" (por ejemplo, "basic.css") y el conjunto de propiedades puede ser definido de la misma forma que en el contenido del elemento HTML style. Esta práctica separa completamente la parte semántica de la presentación del documento, mientras ayuda a los autores a compartir definiciones de estilo entre varias páginas de sitio.
Para hacer referencia a un archivo CSS desde el documento HTML, puedes usar el tag HTML link en el encabezado del mismo. Esta declaración le dice al agente de usuario, dónde se pueden encontrar las declaraciones de estilo de este documento.
Usar esta misma línea en diferentes documentos, te permitirá especificar atributos comunes a un conjunto de páginas (o inclusive a un sitio entero), lo que puede resultar en actualizaciones más sencillas.
Clases en CSSUna clase en CSS es una forma de agrupar propiedades que luego pueden ser aplicadas a un elemento específico usando su atributo "class". Estos grupos reciben nombres y pueden ser definidos exclusivamente para un elemento o para cualquiera. Para definir una clase, los autores deben escribir el elemento para el cual está declarado, seguido por un punto y el nombre de la clase. El bloque de propiedades va encerrado entre llaves como en los ejemplos anteriores.
En el siguiente ejemplo definiremos tres clases: la primera llamada "importante" para el elemento "p", la segunda llamada "diminuto" para todos los elementos y la tercera llamada "grande" para todos los elementos también.
color: red;
}
*.diminuto {
font-size: 8px;
}
.grande {
font-size: 12px;
}
Nota que el uso de un asterisco en lugar del elemento indica que esta clase puede ser aplicada a cualquier elemento (es lo mismo que no usar nada). También ten en cuenta que la primera declaración no especifica que la clase debe ser automáticamente aplicada a los elementos "p" del documento; sólo los elementos "p" con el valor "importante" en su atributo "class" serán afectados por este estilo.
Usando el atributo "class"
Usemos el ejemplo anterior para mostrar como aplicar las propiedades agrupadas en las clases a los elementos en un documeto HTML. En el siguiente ejemplo, aplicaremos las tres clases a tres párrafos respectivamente.
<p class="diminuto">Este texto será muy pequeño</p>
<p class="grande">Este, en cambio, será grande</p>
Recuerda que la clase "importante" ha sido solo definida para el elemento "p" de modo que ha funcionado bien en el ejemplo anterior, pero no funcionará si la apllicamo a otro elemento (como por ejemplo una tabla, tag HTML table).
En este caso, el agente de usuario intentará encontrar una clase con el nombre "importante" que haya sido definida para el elemento "a" (a.important {...) o para todos los elementos (.important {...). como no existe ninguna clase con esa definición, ninguna propiedad se aplica al elemento.
el atributo "class" también soporta listas de clases separadas por espacios como valor, lo cual puede ser muy útil para aplicar muchas propiedades de diferentes clases a un solo elementos de una vez.
Este párrafo no solo tendrá un color rojo (de la clase "importante") sino que además tendrá un tamaño de feunte de "12px" (de la clase "grande").
Selectores ID
Los selectores ID trabajan en forma similar a las clases con un par de excepciones. En primer lugar, en la definición de un selector ID, el elemento del nombre va seguido por un símbolo numeral (#) y un identificador (que se corresponde con el valor del atributo "id" del elemento al que pretende afectar).
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
}
*#hframe {
border-style: solid;
border-color: blue;
border-width: 2px;
}
#hcolor {
background-color: #9EC7EB;
color: white;
}
Excepto por el símbolo "#" y el nombre (que debe ser un identificador), este método funciona igual que las clases.
Usando el atributo "id"
La aplicación de propiedades CSS a elementos HTML mediante los selectores ID se da a través de los atributos "id" de los elementos. Como ya debes saber, el atributo "id" está diseñado para actuar como un identificador para elemento (por lo que debe ser único en el documento). Esto claramente significa, que las propiedades definidas a través de este método sólo podrán aplicarse a un único elemento por documento.
En este caso podríamos decir que las propiedades se refieren a un elemento específico, caso contrario al de las clases que son diseñadas para que los elementos se refieran a ellas. En el siguiente ejemplo, un párrafo tiene un valor en su atributo "id" que coincide con una de las fediniciones previas.
La herencia es una característica muy simple, por la cual los elementos contenidos por otros elementos heredan de sus padres las características aunque no haya sido definidas para ellos mismos.
En el siguiente ejemplo, las propiedades definidas para el párrafo anularán aquellas definidas para el cuerpo (tag HTML body). Las propiedaes del cuerpo que no son anuladas, ser heredarán por el párrafo (ya que el mismo está contenido por el cuerpo).
<head>
<title>Prueba</title>
<style type="text/css">
p {
font-family: arial,helvetica;
font-size: 10px;
color: black;
}
.importante {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body class="importante">
<p>Algún texto</p>
</body>
</html>
En este documento, el párrafo tendrá todas las propiedades definidas para el elemento "p" ("font-family", "font-size" y "color"), pero la propiedad "font-weight" será heredada del cuerpo (su padre).
Cascada
La jerarquía en la estructura de CSS es una de sus más importantes características, y es además de donde toma su denominación de "cascading". La idea de cascada veine del efecto causado por el orden en que las propiedades son aplicadas a un elemento desde diferentes orígenes. Los tres orígenes posibles son, en orden de relevancia: el autor, el visitante y el navegador.
Las implicancias de este orden son muy pequeñas para los autores, ya que las definiciones de estilos que ellos declaren sólo pueden ser anuladas explícitamente por el usuario. Pero no debes olvidar el echo de que los atributos que no especifiques serán establecidos por el visitante o navegador (y los valores predeterminados de los navegadores pueden variar).
La regla "!important"
La otra variante que provee la propiedad de cascada es la regla "!important". Con esta regla los autores pueden cambiar el órden en que los estilos son aplicados: los estilos normales son siempre anulados por los estilos importantes.
La regla "!important" es aplicada a las propiedades al final de la declaración (antes del punto y coma) y separada del resto por un espacio.
font-family: arial, helvetica;
font-size: 10px !important;
color: black;
}
En el ejemplo anterior el tamaño de la letra es declarado con la regla "!important", por lo tanto, cualquier párrafo definido con estilos normales seguirá teniendo un tamaño de fuente de 10px (ya que esta declaración se aplica a todos los párrafos).
El orden de especificidad
El orden de especificidad tiene un mayor impacto en la forma que los autores aplican atributos a sus documentos. A diferencia de la propiedad de cascada, éste especifica el órden en que diferentes declaraciones (atributo "style", selectores ID, clases, etc.) toman precedencia.
La lista siguiente muestra el órden de especificidad usado para aplicar propiedades CSS a elementos HTML, desde el más específico al más global.
- El atributo "style" (por ejemplo,
<p style="...">). - Selectores ID (por ejemplo,
p#ayuda {...}). - Definición de clase específica (por ejemplo,
p.segundo {...}). - Definición de clase global (por ejemplo,
*.segundo {...}). - Definición de elemento (por ejemplo,
p {...}). - Definición global (por ejemplo,
* {...}).
En el siguiente ejemplo analizaremos la aplicación de diferentes definiciones de estilo a un solo elemento.
<head>
<title>Prueba</title>
<style type="text/css">
p {
font-family: arial,helvetica;
font-size: 10px;
color: black;
}
.importante {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<p class="importante" style="font-weight: normal;">Algún texto</p>
</body>
</html>
Las declaraciones con mayor orden de especificidad anula al resto. En el ejemplo anterior, el párrafo tendrá una fuente "arial, helvetica" y un color negro de las propiedades definidas para el elemento "p", pero no tendrá un tamaño de fuente de "10px" debido a que será anulada por la propiedad definida en la clase "importante" que es aplicada al elemento. Subsecuentemente, el elemento recibirá de la clase "importante" un tamaño de fuente de "12px" pero el espesor de la fuente "bold" será anulado por la propiedad definida en el atributo "style".
CSS: Div y span
Los elementos div y span fueron introducidos en la especificación de HTML 4 para proveer un mecanismo genérico para agrupar y dar estructura a los documentos.
el tag div
Esta etiqueta se encarga de crear una capa, que es un elemento de bloque que sirve de contenedor a otros elementos de bloque e inline.
El uso de las capas viene dado por dos motivos: para organizar semánticamente la páginay para maquetar. Por ejemplo, el layout típico de un blog tiene cuatro capas: la cabecera, la del contenido principal, la de la barra lateral4 y la del pie de página.
Mediante CSS podrá controlarse la disposición de las capas.
Un elemento id y/o class suele asociarse con el div o span para utilizarlo como ancla para estilos css. Este conceptio surgió cuando los desarrolladores reemplazaron los layouts creados con tablas por layouts CSS.
Sin embargo, ha habido un abuso de los elementos div hasta el punto de casi crear su propio lenguaje compuesto básicamente de elementos div anidados.
El elemento div es semánticamente neutro: no tiene ningún otro significado a parte de ser un contenedor. Debe usarse cuando no exista otro elemento que pueda actuar como contenedor, no como reemplazo de elementos con un significado reconocido y aceptado, como los encabezados, párrafos, listas, etc.
El tag span
El tag <span> es lo que se podría denominar un elemento neutro que no añade nada al documento en sí. Pero con CSS <span> se puede usar para añadir características visuales distintivas a partes específicas de texto en los documentos.
Para su correcta comprensión, supóngase la siguiente cita:
<p>El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio.</p>
Se quiere resaltar en rojo las palabras 'saludable', 'rico' y 'sabio'. La solución consiste en utilizar el atributo </span>. A cada elemento span se le añadirá el atributo class, que podría definirse así en nuestra hoja de estilo:
.destacado-en-rojo { color:red; }
Una vez definida la clase CSS el resultado HTML sería el siguiente:
<p>El que pronto se acuesta y pronto se levanta, es hombre <span class="destacado-en-rojo>saludable</span>,
<span class="destacado-en-rojo>rico</span> y
<span class="destacado-en-rojo>sabio</span>.</p>
Y el resultado en el navegador:
El que pronto se acuesta y pronto se levanta, es hombre saludable, rico y sabio. fuente: http://www.htmlquick.com/es/tutorials/css/3.html
lunes, 16 de junio de 2014
Que son las APIs
martes, 3 de junio de 2014
Tablas Dinámicas en Excel
Las tablas dinámicas son útiles para analizar los datos almacenados en Excel.
Le permiten agrupar datos en una gran cantidad de maneras diferentes para poder obtener la información que necesitamos.
Las tablas dinámicas en Excel reciben su nombre por su capacidad de cambiar dinámicamente la información agrupada con tan solo rotar las columnas o filas de la tabla.
miércoles, 28 de mayo de 2014
Conociendo macros y VB
martes, 27 de mayo de 2014
Reflect on Project 1
Excel
domingo, 25 de mayo de 2014
mi pagina web
Bueno aquí les dejo la dirección de mi pagina web donde pueden encontrarme poco a poco la iré actualizando. gracias
jjsalasm.besaba.com
jueves, 15 de mayo de 2014
WBS Chart
Toggl
SUBLIME TEXT 3 (EXE Y PORTABLE)
https://drive.google.com/file/d/0B_fK6DAgltv8bHVKQ3dzamxOSmM/edit?usp=sharing
https://drive.google.com/file/d/0B_fK6DAgltv8dVVlQmNYcnhnT28/edit?usp=sharing