Ventanas modal sencillas sin javascript
Aunque hay más formas de hacer modales sin necesidad de Javascript, quizá la más cómoda sea mediante el selector :target, un elemento muy olvidado pero muy útil. Gracias a él vamos a decirle a un ‹a› con un ancla en su href que el elemento al que está anclado y oculto se muestre al ejecutarse :target, es decir, que cuando pinchemos en el botón nos muestre la ventanita modal.
Código HTML:
/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a›
/* La modal */
‹div id=”modal”›
‹a href=”#cerrar”›‹/a›
‹div id=”modalContent”›
‹h1›Soy una ventana modal‹/h1›
‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
‹a href=”#cerrar”›X‹/a›
‹/div›
‹/div›
Código CSS:
/* Creamos unos estilos para el botón */
.btn{
position:relative;
padding:8px 16px;
font-family:'psychotik';
font-size:1.2em;
font-weight:normal;
color:#fff;
text-shadow:none;
border-radius:16px;
background:#00A6B6;
box-shadow:inset 2px 2px 1px #007f8b;
}
.btn:hover{
background:#FF9C00;
box-shadow:inset 2px 2px 1px #995f02;
}
/* Un bloque que ocupe toda la pantalla y contendrá nuestra modal... */
#modalContent{
position:absolute;
top:50%;
left:50%;
z-index:6;
margin:-2% 0px 0px -150px;
float:left;
width:300px;
color:#fff;
line-height:22px;
padding:15px;
border-radius:5px;
background:#00A6B6;
border:1px solid #fff;
box-shadow:0px 2px 1px #999;
}
/* ... los estilos de la ventana central ... */
#modal{
position:fixed;
top:0px;
left:0px;
z-index:5;
float:left;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
display:none;
opacity:0;
}
/* ... y un ‹a› transparente que ocupa todo el espacio para poder cerrar la modal desde cualquier punto */
#modal > a{
position:fixed;
top:0px;
left:0px;
z-index:1;
float:left;
width:100%;
height:100%;
}
El elemento clave, le decimos que cualquier elemento susceptible de absorber esta propiedad, se muestre, o lo que es lo mismo, cuando pulsemos el botón, se ejecutará :target y nos mostrará la modal
:target{
display:block!important;
opacity:1!important;
}
/* Un botón de cerrar para no despistar al usuario */
#modalContent > a{
position:absolute;
top:-4px;
right:-4px;
color:#00A6B6;
border-radius:2px;
background:#fff;
padding:4px;
}
sacado de: http://www.psychotik.net/ventanas-de-alerta-chulas-y-animadas-con-css3/#cerrar
Aunque hay más formas de hacer modales sin necesidad de Javascript, quizá la más cómoda sea mediante el selector :target, un elemento muy olvidado pero muy útil. Gracias a él vamos a decirle a un ‹a› con un ancla en su href que el elemento al que está anclado y oculto se muestre al ejecutarse :target, es decir, que cuando pinchemos en el botón nos muestre la ventanita modal.
Código HTML:
/* El botón */
‹a href=”#modal” title=”” class=”btn”›Pincha aquí‹/a›
/* La modal */
‹div id=”modal”›
‹a href=”#cerrar”›‹/a›
‹div id=”modalContent”›
‹h1›Soy una ventana modal‹/h1›
‹p›Hecha sin JS ni jQuery, solo CSS3‹/p›
‹a href=”#cerrar”›X‹/a›
‹/div›
‹/div›
Código CSS:
/* Creamos unos estilos para el botón */
.btn{
position:relative;
padding:8px 16px;
font-family:'psychotik';
font-size:1.2em;
font-weight:normal;
color:#fff;
text-shadow:none;
border-radius:16px;
background:#00A6B6;
box-shadow:inset 2px 2px 1px #007f8b;
}
.btn:hover{
background:#FF9C00;
box-shadow:inset 2px 2px 1px #995f02;
}
/* Un bloque que ocupe toda la pantalla y contendrá nuestra modal... */
#modalContent{
position:absolute;
top:50%;
left:50%;
z-index:6;
margin:-2% 0px 0px -150px;
float:left;
width:300px;
color:#fff;
line-height:22px;
padding:15px;
border-radius:5px;
background:#00A6B6;
border:1px solid #fff;
box-shadow:0px 2px 1px #999;
}
/* ... los estilos de la ventana central ... */
#modal{
position:fixed;
top:0px;
left:0px;
z-index:5;
float:left;
width:100%;
height:100%;
background:rgba(0,0,0,0.2);
display:none;
opacity:0;
}
/* ... y un ‹a› transparente que ocupa todo el espacio para poder cerrar la modal desde cualquier punto */
#modal > a{
position:fixed;
top:0px;
left:0px;
z-index:1;
float:left;
width:100%;
height:100%;
}
El elemento clave, le decimos que cualquier elemento susceptible de absorber esta propiedad, se muestre, o lo que es lo mismo, cuando pulsemos el botón, se ejecutará :target y nos mostrará la modal
:target{
display:block!important;
opacity:1!important;
}
/* Un botón de cerrar para no despistar al usuario */
#modalContent > a{
position:absolute;
top:-4px;
right:-4px;
color:#00A6B6;
border-radius:2px;
background:#fff;
padding:4px;
}
sacado de: http://www.psychotik.net/ventanas-de-alerta-chulas-y-animadas-con-css3/#cerrar
inner.html
eventos--> el usuario"hace algo" el script responde a la accion generando un resultado
"event handlers"-->"manejadores de eventos"
objetos frecuentes usados:
Evento
onclick
Descripción
Pinchar y soltar el ratón
Evento
onfocus
Descripción
Seleccionar un elemento
Evento
onblur
Descripción
Deseleccionar el elemento
Evento
Descripción
Pulsar una tecla
Evento
onkeydown
Descripción
Pulsar una tecla (sin soltar)
<script type="text/javascript">
function sumar() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a + b;
}
function resta() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a - b;
}
function multi() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a * b;
}
</script>
a: <input type="text" id="a"><br>
b: <input type="text" id="b"><br>
rta: <input type="text" id="rta"readonly><br>
<input type="button" value="sumar" onclick="sumar();">
<br>
<input type="button" value="resta" onclick="resta();">
<br>
<input type="button" value="multiplicacion" onclick="multi();">
<br>
</body>
http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html
eventos--> el usuario"hace algo" el script responde a la accion generando un resultado
"event handlers"-->"manejadores de eventos"
objetos frecuentes usados:
Evento
onclick
Descripción
Pinchar y soltar el ratón
Evento
onfocus
Descripción
Seleccionar un elemento
Evento
onblur
Descripción
Deseleccionar el elemento
Evento
onkeypress |
Descripción
Pulsar una tecla
Evento
onkeydown
Descripción
Pulsar una tecla (sin soltar)
<script type="text/javascript">
function sumar() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a + b;
}
function resta() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a - b;
}
function multi() {
var a= parseInt (document.getElementById("a").value);
var b= parseInt (document.getElementById("b").value);
document.getElementById("rta").value = a * b;
}
</script>
a: <input type="text" id="a"><br>
b: <input type="text" id="b"><br>
rta: <input type="text" id="rta"readonly><br>
<input type="button" value="sumar" onclick="sumar();">
<br>
<input type="button" value="resta" onclick="resta();">
<br>
<input type="button" value="multiplicacion" onclick="multi();">
<br>
</body>
http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html
El profesor nos dio una charla de inicio de año y se trabajo un ejercicio con el código funcion:
En programación, una función es un grupo de instrucciones con un objetivo en particular y que se ejecuta al ser llamada desde otra función o procedimiento. Una función puede llamarse múltiples veces e incluso llamarse a sí misma (función recurrente).
Ejercicio de funcion:
<html>
<head><title>2017</head></title>
<body>
<script>
function sumar(){
var a= parseInt(prompt("a"));
var b= parseInt(prompt("b"));
alert(a+b);
} sumar();
</script>
</body>
</html>
http://www.alegsa.com.ar/Dic/funcion.php
En programación, una función es un grupo de instrucciones con un objetivo en particular y que se ejecuta al ser llamada desde otra función o procedimiento. Una función puede llamarse múltiples veces e incluso llamarse a sí misma (función recurrente).
Ejercicio de funcion:
<html>
<head><title>2017</head></title>
<body>
<script>
function sumar(){
var a= parseInt(prompt("a"));
var b= parseInt(prompt("b"));
alert(a+b);
} sumar();
</script>
</body>
</html>
http://www.alegsa.com.ar/Dic/funcion.php
ENTREGA DEL PROYECTO
Este día se hizo la entrega del proyecto.
El proyecto consistía en hacer una pagina web con un template so
bre un tema en especifico.
Mi pagina quedo de la siguiente forma:
El proyecto consistía en hacer una pagina web con un template so
Mi pagina quedo de la siguiente forma:
Proyecto
El día de hoy se hizo la introducción de como iba a ser el proyecto.
Tenemos que buscar un template y hacer una pagina con base a este template y al tema que nos correspondió.
Qué es un template?
Un template es un conjunto de archivos que determinan la estructura y el aspecto visual de un sitio web, y tiene como ventaja principal disminuir tiempos y costos de desarrollo.
Un template es la solución ideal para muchos sitios web institucionales, ya que permiten resolver el aspecto gráfico del sitio en forma rápida y eficiente. Por supuesto que dependerá de cada empresa comprar un template o elegir un diseño web a medida.
Como recomendación personal creo que un excelente template puede solucionar en muchos casos el aspecto del diseño de un sitio web, sobre todo cuando se trata de empresas o freelancers que recién comienzan o que no tienen muy definida su imagen corporativa.
Un template les permitirá hacer el lanzamiento del sitio web hasta dos meses antes como así también disminuir el presupuesto final y, al mismo tiempo, quizás permite al equipo de desarrollo poner el esfuerzo en otras cuestiones de funcionalidad, contenidos o bien de SEO que quizás sean más importantes que la cuestión meramente estética.
¿QUÉ ELEMENTOS SE CONTEMPLAN DENTRO DE UN TEMPLATE?
En general se contemplan todos los elementos que tienen que ver con la estructura y el aspecto gráfico de un sitio web.
Entre los elementos más comunes encontramos:
Regiones - Son las áreas donde van los bloques de contenido. En la mayoría de los casos se pueden observar: el encabezado, el contenido principal, las columnas y el pie de página. Luego según el template y las opciones que tenga, podemos contar con otro tipo de regiones para darle mayor flexibilidad al sitio.
Gama de colores - Por lo general se utilizan entre dos y tres colores principales que hacen a la estética del sitio. Podemos tener un color de base para el fondo, otro color para los links, y finalmente otro color que se puede aplicar en algunas regiones como el header y el footer.
Si el template es flexible entonces debería permitir fácilmente la adaptación de la gama de colores del sitio. Por ejemplo OpenPyme utiliza un template muy flexible y permite adaptar los colores según cada necesidad.
Tipografías - Un template contempla los tamaños que deberían tener las tipografías, como así también el tipo de fuente a utilizar a lo largo de todo el sitio. Se van a definir los estilos para los headings (h1, h2, h3, h4), como así también para los párrafos de texto, viñetas, textos en el footer y demás textos que hacen a los contenidos del sitio.
Menúes de navegación - Por lo general se contempla un menú principal y uno secundario. Es importante que el diseño del menú principal esté cuidadosamente diseñado. Que sea legible y quede claro cuando el usuario hace hover sobre el botón. El menú principal del sitio es el medio de navegación que tiene el usuario y por ende también debería ser un elemento atractivo y agradable a la vista.
Botones - Los botones son fundamentales en el sentido que los entendamos como verdaderos call to action. Es decir como elementos donde queremos que el usuario haga click para que interactúe con el sitio.
Formularios - En todo sitio web hay al menos un formulario de contacto que tiene elementos como las etiquetas (labels) y los cuadros de texto (form-text). El diseño de los formularios también se contempla en todo template y es muy importante cuidar la legibilidad del texto (contraste y tamaño de la fuente), para que la persona que completa el formulario no se sienta frustrada.
Cada uno de estos elementos se deberían relacionan armónicamente para darle consistencia y coherencia a todo el aspecto visual del sitio web. Y esto es lo que diferencia en principio a un excelente template de uno de mediana o baja calidad.
Un template de excelencia no solo tiene la versatilidad y flexibilidad que uno necesita, sino que también tiene ese cuidado y prolijidad en todos sus elementos que terminan siendo cualidades diferenciales.
VENTAJAS DE USAR UN TEMPLATE
Acortar los tiempos - Si utilizás un template podés lanzar tu sitio web hasta dos meses antes (que es el tiempo mínimo que puede llevar hacer un diseño a medida e implementarlo). Para muchos negocios, el tiempo de salida al mercado (lanzamientos) es fundamental, por lo que todo lo que no sea absolutamente importante debería ser solucionado poniendo la practicidad como principal criterio. La utilización de templates es una excelente manera de ser práctico.
Reducir valores de inversión - Directamente relacionado al punto anterior, dos meses menos de esfuerzo puesto en la implementación de un diseño a medido se traduce automáticamente a los cAl mismo tiempo podés reducir los valores de inversión, hasta un máximo (para la parte de implementación del diseño) de un 80%.
Calidad final - Un template se actualiza permanentemente. También se testea y puede recibir feedback de una comunidad de usuarios para que el desarrollador lo siga mejorando. En este sentido un template puede resultar en una solución de primerísimo nivel, testeada y revisada en más de una ocasión. Se mejoran permanentemente cuestiones que tienen que ver con el código, la compatibilidad con los navegadores, la documentación, etc.
http://www.glidea.com.ar/blog/que-es-un-template
El día de hoy se hizo la introducción de como iba a ser el proyecto.
Tenemos que buscar un template y hacer una pagina con base a este template y al tema que nos correspondió.
Qué es un template?
Un template es un conjunto de archivos que determinan la estructura y el aspecto visual de un sitio web, y tiene como ventaja principal disminuir tiempos y costos de desarrollo.
Un template es la solución ideal para muchos sitios web institucionales, ya que permiten resolver el aspecto gráfico del sitio en forma rápida y eficiente. Por supuesto que dependerá de cada empresa comprar un template o elegir un diseño web a medida.
Como recomendación personal creo que un excelente template puede solucionar en muchos casos el aspecto del diseño de un sitio web, sobre todo cuando se trata de empresas o freelancers que recién comienzan o que no tienen muy definida su imagen corporativa.
Un template les permitirá hacer el lanzamiento del sitio web hasta dos meses antes como así también disminuir el presupuesto final y, al mismo tiempo, quizás permite al equipo de desarrollo poner el esfuerzo en otras cuestiones de funcionalidad, contenidos o bien de SEO que quizás sean más importantes que la cuestión meramente estética.
¿QUÉ ELEMENTOS SE CONTEMPLAN DENTRO DE UN TEMPLATE?
En general se contemplan todos los elementos que tienen que ver con la estructura y el aspecto gráfico de un sitio web.
Entre los elementos más comunes encontramos:
Regiones - Son las áreas donde van los bloques de contenido. En la mayoría de los casos se pueden observar: el encabezado, el contenido principal, las columnas y el pie de página. Luego según el template y las opciones que tenga, podemos contar con otro tipo de regiones para darle mayor flexibilidad al sitio.
Gama de colores - Por lo general se utilizan entre dos y tres colores principales que hacen a la estética del sitio. Podemos tener un color de base para el fondo, otro color para los links, y finalmente otro color que se puede aplicar en algunas regiones como el header y el footer.
Si el template es flexible entonces debería permitir fácilmente la adaptación de la gama de colores del sitio. Por ejemplo OpenPyme utiliza un template muy flexible y permite adaptar los colores según cada necesidad.
Tipografías - Un template contempla los tamaños que deberían tener las tipografías, como así también el tipo de fuente a utilizar a lo largo de todo el sitio. Se van a definir los estilos para los headings (h1, h2, h3, h4), como así también para los párrafos de texto, viñetas, textos en el footer y demás textos que hacen a los contenidos del sitio.
Menúes de navegación - Por lo general se contempla un menú principal y uno secundario. Es importante que el diseño del menú principal esté cuidadosamente diseñado. Que sea legible y quede claro cuando el usuario hace hover sobre el botón. El menú principal del sitio es el medio de navegación que tiene el usuario y por ende también debería ser un elemento atractivo y agradable a la vista.
Botones - Los botones son fundamentales en el sentido que los entendamos como verdaderos call to action. Es decir como elementos donde queremos que el usuario haga click para que interactúe con el sitio.
Formularios - En todo sitio web hay al menos un formulario de contacto que tiene elementos como las etiquetas (labels) y los cuadros de texto (form-text). El diseño de los formularios también se contempla en todo template y es muy importante cuidar la legibilidad del texto (contraste y tamaño de la fuente), para que la persona que completa el formulario no se sienta frustrada.
Cada uno de estos elementos se deberían relacionan armónicamente para darle consistencia y coherencia a todo el aspecto visual del sitio web. Y esto es lo que diferencia en principio a un excelente template de uno de mediana o baja calidad.
Un template de excelencia no solo tiene la versatilidad y flexibilidad que uno necesita, sino que también tiene ese cuidado y prolijidad en todos sus elementos que terminan siendo cualidades diferenciales.
VENTAJAS DE USAR UN TEMPLATE
Acortar los tiempos - Si utilizás un template podés lanzar tu sitio web hasta dos meses antes (que es el tiempo mínimo que puede llevar hacer un diseño a medida e implementarlo). Para muchos negocios, el tiempo de salida al mercado (lanzamientos) es fundamental, por lo que todo lo que no sea absolutamente importante debería ser solucionado poniendo la practicidad como principal criterio. La utilización de templates es una excelente manera de ser práctico.
Reducir valores de inversión - Directamente relacionado al punto anterior, dos meses menos de esfuerzo puesto en la implementación de un diseño a medido se traduce automáticamente a los cAl mismo tiempo podés reducir los valores de inversión, hasta un máximo (para la parte de implementación del diseño) de un 80%.
Calidad final - Un template se actualiza permanentemente. También se testea y puede recibir feedback de una comunidad de usuarios para que el desarrollador lo siga mejorando. En este sentido un template puede resultar en una solución de primerísimo nivel, testeada y revisada en más de una ocasión. Se mejoran permanentemente cuestiones que tienen que ver con el código, la compatibilidad con los navegadores, la documentación, etc.
http://www.glidea.com.ar/blog/que-es-un-template
Suscribirse a:
Entradas (Atom)
