Publicado el Deja un comentario

20 Html, Css. Dando formato al formulario

Vemos en el siguiente video como dar formato a nuestro formulario de contacto, probando diferentes opciones y viendo los cambios con los posibles diseños.

En este enlace podras acceder a todos los codigos del ejemplo que hemos creado.

html <!DOCTYPE html><html lang=”es”><head><title>Contacta con nosotros</title><meta charset=”utf-8″><meta name=”viewport” content=”width=device-width,initial-scale=1.0″><meta name=”language” content=”Spanish”><meta name=”author” content=”Jose Ojeda (ticoticotaa)”><meta name=”keywords” content=”programacion,python,html,php,contacto,contactanos”><meta name=”description” content=”Sitio web de ticoticotaa para contactarnos”><link rel=”stylesheet” href=”estilos.css”/><link href=”https://fonts.googleapis.com/css?family=Playfair+Display|Quicksand” rel=”stylesheet”></head><body><!–Cabecera–><header><h1>Cabecera de mi web</h1><figure><img src=”milogo.jpg”/></figure></header> <!–Barra navegacion–><nav><ul><li><a href=”index.html”>Inicio</a></li><li><a href=”contacto.html”>Contacto</a></li><li><a href=”acercade.html”>Acerca de</a></li></ul></nav><!–Contenido principal–><section><article><hgroup><h2>Contactanos</h2></hgroup><form action=”#” method=”post”><label>Nombre:</label><input name=”nombre” type=”text” placeholder=”Nombre” required/><br/><label>Email:</label><input name=”email” type=”email” placeholder=”ticoticotaa@gmail.com”/><br/><label>Mensaje:</label><textarea name=”mensaje” rows=”6″ cols=”50″ placeholder=”escribe tu mensaje”></textarea><br/><input id=”boton” type=”reset” value=”Borrar”/><input id=”boton” type=”submit” value=”Enviar”/></form></article></section><!–Complemento lateral–><aside><h3>Siguenos en: </h3><ul><li><a href=”#” class=”enlace”>Facebook</a></li><li><a href=”#” class=”enlace”>Twitter</a></li></ul></aside><!–Pie de pagina–><footer><p>Jose Ojeda 2019&copy</p><div id=”email”><p>email: nombre@email.com</p></div></footer></body></html>



css *{ margin:0 auto; padding:0px; /*font-family: ‘Playfair Display’, serif;*/ font-family: ‘Quicksand’, sans-serif;}header{ background:#FF5733; color:#FFFFFF; font-size:3em; width:95%; padding:10px; margin:5px 5px; display:inline-block; border:solid 1px #ccc; border-radius:25px;}header figure{ float:left;}header h1{ float:right;}nav{ font-size:1em; width:95%; padding:5px; margin:1px 1px; text-align:center;}nav ul{ list-style-type:none;}nav li{ display:inline; text-align:center; margin:0 15px 0 0;}nav li a{ padding:2px 7px 2px 7px; color:#FF5733; background-color:#FFFFFF; border:1px solid #ccc; text-decoration:none;}nav li a:hover{ background:#FF5733; color:#FFFFFF;}section{ width:70%; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; float:left; background:#E6E6E6; color:#000000; border-radius:25px;}section h2{ color:#FF5733; font-size:1.5em;}section p{ font-size:1em;}aside{ width:20%; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; float:left; background:#E6E6E6; color:#000000; border-radius:25px; font-size:1em;}aside a{ text-decoration:none;}aside a:hover{ color:#000000;}aside ul{ list-style-type:none;}footer{ width:95%; clear:both; margin-left:15px; margin-top:25px; padding:10px; border:1px solid #ccc; background:#FF5733; color:#FFFFFF; font-size:0.5em; border-radius:25px;}label{ margin-left:10px; margin-right:10px; padding:10px; float:left; width:70px;}input{ display:inline-block; margin-top:20px; margin-right:10px; margin-bottom:10px; padding:10px;}#boton{ display:inline-block; margin-bottom:10px; margin-top:10px;}
#email{ margin-left:65px; font-size:1.5em; color:yellow;}.enlace{ color:green; font-size:1em;}.enlace:hover{ color:blue; font-size:2em;}@media screen and (max-width:480px){ header{ font-size:1em; width:95%; padding:2px; margin:2px 2px; display:inline-block; border:solid 1px #ccc; border-radius:15px; } section p{ font-size:0.8em; color:red;}}

Please follow and like us:
Publicado el Deja un comentario

07 Android. Esquinas redondeadas en botones

Se añade codigo para poner las variables a 0 de la aplicacion MarcadorBaloncesto del video anterior, tambien se ve como redondear las esquinas de los botones y como añadir colores al archivo colors.xml.

esquinaredondeada

<?xml version="1.0" encoding="utf-8"?><shape xmlns:
android="http://schemas.android.com/apk/res/android"   
 android:shape="rectangle">
    <solid android:color="#ffffff"/>
    <stroke android:width="3dp"           
 android:color="#ff000000"/>
    <padding android:left="1dp"           
 android:top="1dp"            android:right="1dp"        
    android:bottom="1dp"/>
    <corners android:radius="30px"/>
</shape>

colors

<?xml version="1.0" encoding="utf-8"?><resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorAmarillo">#ffe940</color>
    <color name="colorVerde">#40ff53</color>
</resources>

styles

<resources>

    <!-- Base application theme. -->   
 <style name="AppTheme" parent="Theme.AppCompat.Light.
DarkActionBar">
        <!-- Customize your theme here. -->  
      <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">
@color/colorPrimaryDark
</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
<style name="boton">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:padding">10dp</item>
    <item name="android:layout_margin">10dp</item>
    <item name="android:background">@drawable/
esquinaredondeada</item>
    <item name="android:layout_gravity">center</item>
    <item name="android:gravity">center</item>
    <item name="android:textColor">@color/colorAccent</item>

</style>
    <style name="texto">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:textSize">24sp</item>
        <item name="android:textColor">@color/colorAmarillo
</item>
        <item name="android:gravity">center</item>

    </style>
    <style name="titulo">
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:textSize">32sp</item>
        <item name="android:textColor">@color/colorVerde</item>
        <item name="android:gravity">center</item>

    </style>
</resources>

activity_main

<?xml version="1.0" encoding="utf-8"?><android.support.
constraint.ConstraintLayout xmlns:android=
"http://schemas.android.com/apk/res/android"  
  xmlns:app="http://schemas.android.com/apk/res-auto"   
 xmlns:tools="http://schemas.android.com/tools"   
 android:layout_width="match_parent"  
  android:layout_height="match_parent"  
  tools:context="ticoticotaa.es.marcadorbaloncesto.
MainActivity">

    <LinearLayout        android:layout_width="match_parent"   
     android:layout_height="match_parent"     
   android:orientation="vertical">

        <TextView            android:id="@+id/tvTitulo"   
         style="@style/titulo" />

        <LinearLayout          
  android:layout_width="match_parent"      
      android:layout_height="wrap_content"       
     android:gravity="center"           
 android:orientation="horizontal">

            <LinearLayout               
 android:layout_width="wrap_content"        
        android:layout_height="wrap_content"         
       android:orientation="vertical">

                <TextView                
    android:id="@+id/tvMarcadorLocal"          
          style="@style/texto" />

                <Button                  
  android:id="@+id/btnLocal2"                 
   style="@style/boton"                  
  android:text="@string/dosPuntos"/>

                <Button                 
   android:id="@+id/btnLocal3"             
       style="@style/boton"                
    android:text="@string/tresPuntos"                    />

                <Button               
     android:id="@+id/btnLocal1"      
              style="@style/boton"      
              android:text="@string/unPunto"/>
            </LinearLayout>

            <LinearLayout             
   android:layout_width="wrap_content"   
             android:layout_height="wrap_content"             
   android:orientation="vertical">

                <TextView                 
   android:id="@+id/tvMarcadorVisitante"    
                style="@style/texto" />

                <Button              
      android:id="@+id/btnVisitante2"            
        style="@style/boton"             
       android:text="@string/dosPuntos"/>

                <Button                
    android:id="@+id/btnVisitante3"     
               style="@style/boton"               
     android:text="@string/tresPuntos"/>

                <Button                 
   android:id="@+id/btnVisitante1"                 
   style="@style/boton"              
      android:text="@string/unPunto"/>
            </LinearLayout>
        </LinearLayout>

        <Button            android:id="@+id/btnReset"        
    style="@style/boton"            android:text="@string/reset"/>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

MainActivity

package ticoticotaa.es.marcadorbaloncesto;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity
 implements View.OnClickListener {
    public TextView marcadorLocal, marcadorVisitante,titulo;
    public Button btn1Local,btn2Local,btn3Local,
btn1Visitante,btn2Visitante,btn3Visitante,btnReset;
    public int puntuacionLocal,puntuacionVisitante,puntos;
    @Override    protected void onCreate(Bundle
 savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        titulo=(TextView)findViewById(R.id.tvTitulo);
        titulo.setText("Marcador Basket");
        marcadorLocal=(TextView)findViewById
(R.id.tvMarcadorLocal);
        marcadorVisitante=(TextView)findViewById
(R.id.tvMarcadorVisitante);
        marcadorLocal.setText("Local: "+0);
        marcadorVisitante.setText("Visitante: "+0);
        btn1Local=(Button)findViewById(R.id.btnLocal1);
        btn2Local=(Button)findViewById(R.id.btnLocal2);
        btn3Local=(Button)findViewById(R.id.btnLocal3);
        btn1Visitante=(Button)findViewById
(R.id.btnVisitante1);
        btn2Visitante=(Button)findViewById
(R.id.btnVisitante2);
        btn3Visitante=(Button)findViewById
(R.id.btnVisitante3);
        btnReset=(Button)findViewById(R.id.btnReset);
        btn1Local.setOnClickListener(this);
        btn2Local.setOnClickListener(this);
        btn3Local.setOnClickListener(this);
        btn1Visitante.setOnClickListener(this);
        btn2Visitante.setOnClickListener(this);
        btn3Visitante.setOnClickListener(this);
        btnReset.setOnClickListener(this);
    }

    @Override    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btnLocal1:
                incrementa(1,1);
                break;
            case R.id.btnLocal2:
                incrementa(1,2);
                break;
            case R.id.btnLocal3:
                incrementa(1,3);
                break;
            case R.id.btnVisitante1:
                incrementa(2,1);
                break;
            case R.id.btnVisitante2:
                incrementa(2,2);
                break;
            case R.id.btnVisitante3:
                incrementa(2,3);
                break;
            case R.id.btnReset:
                borra();
                break;
        }
    }
    public void incrementa(int equipo, int puntos){
        if (equipo==1){
            puntuacionLocal=puntuacionLocal+puntos;
            marcadorLocal.setText("Local: "+puntuacionLocal);
        }else{
            puntuacionVisitante=puntuacionVisitante+puntos;
            marcadorVisitante.setText("Visitante: "
+puntuacionVisitante);
        }
    }
    public void borra(){
        marcadorLocal.setText("Local: "+0);
        marcadorVisitante.setText("Visitante: "+0);
        puntuacionLocal=0;
        puntuacionVisitante=0;
    }
}
Please follow and like us:
Publicado el Deja un comentario

03 Aplicacion. AmpaApp

Aplicacion creada para el AMPA del Ceip Valdes Leal (diseño Raul Lopez, programacion Jose Ojeda).
Con ella, el usuario tiene acceso total a todos los canales informativos del AMPA, incluso recibira
notificaciones en tiempo real, con lo que no tendra que usar los molestos (a veces) grupos de Whatsapp.
Podeis ver como funciona en el video que aparece bajo estas lineas.
Esta aplicacion se puede adaptar perfectamente a cualquier necesidad, en caso de estar interesados
pueden contactar con nosotros a traves de cualquiera de nuestros canales.
Podeis descargar la aplicacion AQUI.

 

Please follow and like us:
Publicado el Deja un comentario

Crea tu Web Responsive 2

CSS, dando formato a la web

Diseño para móvil

Vamos a crear donde tenemos grabada
nuestra web index.html una carpeta que llamaremos “css” y dentro de esta
carpeta crearemos un archivo llamado “estilos.css”.
En el “head” de index, os recuerdo que
ya incluimos la siguiente línea: <link
rel=”stylesheet” href=”css/estilos.css”
type=”text/css”/>
, esta línea enlaza al archivo de estilos
que vamos a preparar a continuación.
Para comenzar con el formato de la
web, personalmente prefiero primero prepararla para móvil y después para
escritorio, por lo que debemos añadir la siguiente línea al “head”: <meta name=”viewport”
content=”width=device-width, initial-scale=1″>.
En el archivo estilos.css añadimos lo
siguiente:
@media screen and
(min-width:480px){}
@media screen and
(min-width:767px){}
@media screen and
(min-width:950px){}
Con lo que podemos poner dentro de las
llaves de cada uno los estilos y atributos para móvil, tablet y PC’s, debido al
minimo de ancho que especificamos en pixeles (480, 767 y 950).
Ahora vamos a diferenciar las partes
de nuestra web añadiendo colores llamativos al CSS para ver claramente las
partes, una vez que situemos todo bien pasaremos a poner una gama de colores menos
llamativa.
header{
         background:cyan;
}
nav{
         background:yellow;
}
section{
         background:brown;
}
article{
         background:red;
}
aside{
         background:blue;
}
footer{
         background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and (min-width:767px){
header{
         background:green;
         }
nav{
         background:cyan;
}
section{
         background:pink;
}
article{
         background:yellow;
}
aside{
         background:red;
}
footer{
         background:brown;
}
}
@media screen and
(min-width:950px){      
}
Con el código anterior puesto en el
archivo css, una vez grabado, podréis observar, al ejecutar la web index.html
en el navegador, que al disminuir el tamaño los colores de fondo cambiaran. Con
esto hemos conseguido que al cambiar el tamaño de la visualización cambien los
colores de fondo, ahora vamos a cambiar también la disposición de los bloques
según se vean en un dispositivo u otro, para ello cambiamos el código css a:
*{
         margin:0px;
         padding:0px;
}
header,nav,section,article,aside,footer{
         display:block;
}
header{
         background:cyan;
}
nav{
         background:yellow;
}
section{
         background:brown;
}
article{
         background:red;
}
aside{
         background:blue;
}
footer{
         background:pink;
}
@media screen and
(min-width:480px){
}
@media screen and
(min-width:767px){
header{
         background:green;
         }
nav{
         background:cyan;
}
section{
         background:pink;
         display:inline-block;
         width:74%;
}
article{
         background:yellow;      
}
aside{
         background:red;
         display:inline-block;
         vertical-align:top;
         width:23%;        
}
footer{
         background:brown;
}
}
@media screen and
(min-width:950px){      
}
Quedando nuestra web en modo
escritorio:

Y en modo móvil:

Os explico las modificaciones en este
código, lo primero que cambiamos es:
*{
         margin:0px;
         padding:0px;
}
header,nav,section,article,aside,footer{
         display:block;
}
Con esto indicamos con el “*”
(selector universal) que eliminamos todos los márgenes y paddings, el padding
es como un margen interior.
Despues separamos todos los
identificadores usados con “,” para darles a todos formato para que actúen como
bloques y se visualicen uno debajo del otro según el orden que tienen en el
html.
Seguidamente, dentro del apartado css
para las tablets minimo de ancho 767px, introducimos el siguiente código:
section{
         background:pink;
         display:inline-block;
         width:74%;
}
article{
         background:yellow;      
}
aside{
         background:red;
         display:inline-block;
         vertical-align:top;
         width:23%;
}
Como podeis ver, el primer cambio es
que en vez de visualizarse en bloque como indicamos anteriormente, ahora
indicamos que se visualicen en línea e indicamos un ancho en porcentaje para
que quepan las dos partes, alineando el “aside” verticalmente arriba (top). El
ancho se puede indicar mediante pixeles, os recomiendo hacer cambios y probar.
Con esto ya tenemos la web preparada
para varios dispositivos, ahora pasaremos a darle un formato mejor.
En la siguiente entrada profundizare en el formato CSS para cada componente de nuestra web.
Gracias.
Please follow and like us:
Publicado el Deja un comentario

06. CSS Tablas

En este video se ven algunas propiedades de las tablas, que se cambiaran mediante CSS.

El codigo html es:

<!doctype html>
<html lang=”ES”>
<head>
<link rel=”stylesheet” type=”text/css” href=”css/tablas.css”>
<title>
Tablas
</title>
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<hgroup>
<h1>Titulo Principal</h1>
<h2>Titulo Secundario</h2>
</hgroup>
</article>
<h2>Primera tabla</h2>
<table class=”uno”>
<caption>Tabla de colores</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Verde</td>
<td>Uno</td>
</tr>
<tr>
<td>Rojo</td>
<td>Dos</td>
</tr>
<tr>
<td>Amarillo</td>
<td>Tres</td>
</tr>
</table>
<h2>Segunda tabla</h2>
<table class=”dos”>
<caption>Tabla de colores 2</caption>
<tr><th>Colores</th><th>Numeros</th> </tr>
<tr>
<td>Rosa</td>
<td>Cuatro</td>
</tr>
<tr>
<td>Azul</td>
<td>Cinco</td>
</tr>
<tr>
<td>Celeste</td>
<td></td>
</tr>
</table>
</section>
<aside>
</aside>
<footer>
<h4>Pie de pagina</h4>
</footer>
</body>
</html>

El codigo css es:

/*Comentario de CSS*/
/*selector universal*/
*{
   
}
table{
    border-collapse:separate;
    border-spacing:5px 4px;
   
}
caption {
    caption-side:top;
}
.uno{
    border:1px solid gray;
    width:50%;
    table-layout:auto;
    text-align:center;
}
.dos{
    border:2px solid blue;
    width:75%;
    table-layout:fixed;
    background-color:gray;
    empty-cells:hide;
}

En el video se me paso como ocultar celdas vacias mediante la propiedad empty-cells a la que podemos darle como valor hide para que no se muestren, en el codigo css esta incluido.
Espero os sea util, gracias.

Please follow and like us: