#html & #css: #Bootstrap 3, el #manual oficial by @librosweb

#html & #css: #Bootstrap 3, el #manual oficial by @librosweb

fuente: http://librosweb.es/libro/bootstrap_3/

 

 

#Tutorial #Ionic #Framework – Parte 1: Instalación y Proyecto Base by @erixdev

fuente: https://jsjutsu.com/blog/2015/06/tutorial-ionic-parte-uno/

Ionic es un framework de desarrollo de aplicaciones híbridas en HTML5 basado en AngularJS y que funciona con Apache Cordova (sí Cordova con V).

En mi opinión, sus puntos fuertes son:

  • Rendimiento muy bueno: sí, no es lo mismo que una aplicación nativa. Pero para un buen número de apps que hacen poco más que una aplicación web va que chuta. Y el mismo código te vale para IOS y Android.
  • Tiene un set de componentes visuales muy chulo y fácil de usar.
  • Si sabes AngularJS empezar a usarlo es inmediato.

Con este post empezamos una serie en la que elaboraremos una aplicación que presentará un listado de eventos. Utilizará unbackend en Node.js y permitirá autenticarse con Twitter.

DISCLAIMER: si no sabes lo básico de AngularJS seguramente no te enteres de nada. Pero no te preocupes porque tiene arreglo 🙂 Puedes conseguir un minilibro gratis con la suscripción a la lista de correo del blog.

Vamos a ello.

Instalación

Como siempre, tendremos que tener instalado Node.js. Una vez instalado, en una terminal ejecutamos:

1
npm i -g cordova ionic

Este comando lo dejará todo listo para empezar.

Creando un esqueleto de App

Ejecutamos en una terminal:

1
ionic start events-app tabs

Con ese comando lo que estamos diciendo a Ionic es que cree una aplicación básica con navegación basada en tabs, en el directorio events-app. Nos preguntará si queremos crear una cuenta ionic.io, la cual no es necesaria para poder hacer este tutorial.

¡Listo!, ahora entramos al directorio de la aplicación y la arrancamos para echarle un vistazo.

1
2
cd events-app
ionic serve

Ionic creará un servidor http y podremos abrir la página en nuestro navegador en la dirección http://localhost:8100. La idea es desarrollar utilizando el navegador y después probar en un móvil o un emulador.

Debes tener en cuenta que si vas a utilizar APIs de dispositivo (por ejemplo, el acelerómetro) tendrás que probar estas cosas en un emulador o dispositivo, ya que el navegador no implementa esto.

app-creada-1app-creada-1
app-creada-2app-creada-2

Para visualizar la aplicación con la resolución de otro dispositivo en el mismo navegador web puedes hacerlo:

  • En Firefox pulsando Ctrl-Shift-M.
  • En Chrome abriendo las herramientas de desarrollo (F12) y pulsando en el dibujito del teléfono arriba y en la izquierda.

Personalmente, suelo utilizar Firefox Developer Edition, y cuando el depurador se me queda corto me paso a Chrome un rato.

Estructura de directorios

Echemos un vistazo a los directorios que Ionic nos ha creado.

directoriosdirectorios

Se trata de un esqueleto web para una aplicación de Cordova, en la que se utiliza Gulp para automatización de algunas tareas yBower como gestor de dependencias frontend.
De aquí, lo importante lo tenemos en el directorio www.

directorio wwwdirectorio www

Este directorio debes verlo como el de aplicación web normal y corriente, con tres salvedades:

  • Puedes acceder a APIs de dispositivo móvil gracias a Cordova.
  • Puedes usar AngularJS. De hecho ya es una aplicación Angular básica con unos cuantos controladores y servicios.
  • Y por último, puedes usar los componentes de Ionic en forma de directivas AngularJS.

Por lo demás es lo mismo que te encontrarías en otra web. El index.html, carpetas para el CSS y JS etc.

Preparando el proyecto

Vamos a hurgar un poco en el código que viene de ejemplo y dejarlo limpito para lo que nosotros necesitamos. Que básicamente serán tres vistas: una para autenticarnos, otra para ver los eventos y otra para cerrar la sesión.

NOTA: el código tal cual lo dejamos en este paso puedes obtenerlo con:

1
2
3
git clone https://github.com/er1x/events-app
cd events-app
git checkout part1

Veamos lo más importante del código.

index.html

El fichero de entrada de la aplicación. Hace lo siguiente:

  • Cargar las dependencias: Ionic (incorpora Angular), Cordova y los ficheros JS de nuestra aplicación.
  • Define la aplicación AngularJS: ng-app=”eventsApp”
  • Define dos directivas: una barra de navegación (ion-nav-bar) y otra que contendrá las vistas concretas que se cargarán después (ion-nav-view).
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
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Events App</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>

  </head>
  <body ng-app="eventsApp">

    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>

    <ion-nav-view></ion-nav-view>

  </body>
</html>
app.js

El fichero JS principal. En él definimos el nombre de la aplicación (eventsApp) y tres dependencias, que son el propio framework Ionic, y servicios y controladores de la aplicación. Después configuramos el enrutador. En Ionic se utiliza Angular UI Router.

El router de Ionic difiere del router por defecto de Angular en que en este se utiliza el concepto de máquina de estados. Aquí utilizamos un estado abstracto tab y dos estados hijos: list y account. Por otra parte hay otra vista independiente, login.

Este sistema permite tener vistas anidadas. En este caso, las vistas que necesitamos (listado y configuración), se integran dentro de otra. A estas rutas les asignamos una plantilla HTML y un controlador.

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
27
28
29
30
31
32
33
34
35
36
37
38
angular.module('eventsApp', [ 'ionic',
                              'eventsApp.controllers',
                              'eventsApp.services'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider.state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })
  .state('tab.list', {
    url: '/list',
    views: {
      'tab-list': {
        templateUrl: 'templates/tab-list.html',
        controller: 'ListCtrl'
      }
    }
  })
  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'AccountCtrl'
      }
    }
  })
  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'LoginCtrl'
  });

  $urlRouterProvider.otherwise('/tab/list');
});
services.js

El servicio que utilizaremos se encargará de proveer a la aplicación de la lista de eventos. De momento los tendrá en memoria. Más adelante se conectará al backend para obtener el listado.

Proporciona una única funcion: all. Para listar los eventos.

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
27
28
29
30
31
angular.module('eventsApp.services', [])

.factory('EventsService', function($http) {
  return {
    all: function() {

      // TODO: get events from backend
      var events = [
        {
          'speaker': 'Homer Simpson',
          'title': 'Emprender en servicios web: Compuglobalhipermeganet',
          'place': 'Sala 5',
          'date': '15:00'
        },
        {
          'speaker': 'Stewie Griffin',
          'title': 'Cómo generar ingresos extra siguiendo gordos con una tuba',
          'place': 'Salón de talleres 1',
          'date': '17:00'
        },
        {
          'speaker': 'Ralph Wiggum',
          'title': '¡Corre plátano!',
          'place': 'Sala 5',
          'date': '19:00'
        }
      ];
      return events;
    }
  };
});
controllers.js

Tenemos un controlador para el listado (que utiliza el servicio para listar los eventos), y otros para las vista de login y cuenta, que de momento no hacen nada más que mostrar un mensaje en la consola cuando se pulse un botón.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
angular.module('eventsApp.controllers', [])

.controller('LoginCtrl', function($scope){
  $scope.authenticate = function() {
    console.log('TODO: authenticate');
  };
})

.controller('ListCtrl', function($scope, EventsService) {
  $scope.events = EventsService.all();
})

.controller('AccountCtrl', function($scope) {
  $scope.logout = function() {
    console.log('TODO: logout');
  };
});
tabs.html

Se trata de una vista global que utiliza la directiva ion-tabs.

Esta directiva se utiliza para la navegación con los tabs, que son los menús que se ven en la parte de abajo.

1
2
3
4
5
6
7
8
9
10
11
12
13
<ion-tabs class="tabs-icon-top tabs-color-active-positive">

  <!-- List Tab -->
  <ion-tab title="Eventos" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" href="#/tab/list">
    <ion-nav-view name="tab-list"></ion-nav-view>
  </ion-tab>

  <!-- Account Tab -->
  <ion-tab title="Cuenta" icon-off="ion-ios-gear-outline" icon-on="ion-ios-gear" href="#/tab/account">
    <ion-nav-view name="tab-account"></ion-nav-view>
  </ion-tab>

</ion-tabs>
login.html

Desde esta vista mostraremos un botón para iniciar la sesión. Utiliza las directivas:

  • ion-view: para cargarse dentro del nav-view.
  • ion-content: un área para el contenido.
  • button: un botón normal corriente con ng-click=”logout()”. Al pulsarse ejecutará la función logout del controlador correspondiente.
1
2
3
4
5
<ion-view view-title="Autenticación">
  <ion-content class="padding">
    <button class="button button-block button-positive" ng-click="authenticate()">Inicia sesión con Twitter</button>
  </ion-content>
</ion-view>

vista de loginvista de login

list.html

Igual que la vista de login, utiliza ion-view para ser cargada. Después utiliza el componente card para crear una tarjetita con la información de cada evento.
Con ng-repeat se van cargando los elementos del $scope y entre llaves van poniéndose los atributos de los objetos de eventos. Esto es AngularJS básico.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ion-view view-title="Eventos">
  <ion-content class="padding">
    <div class="list card card" ng-repeat="event in events">
      <div class="item item-divider">
        {{ event.speaker}}
        <p>
          {{event.date}} | {{event.place}}
        </p>
      </div>
      <div class="item item-body">
        <div>
          {{ event.title }}
        </div>
      </div>
    </div>
  </ion-content>
</ion-view>

vista de listadovista de listado

account.html

Por último la vista de cuenta, que es exactamente igual que la de login, pero con un botón para cerrar la sesión.

1
2
3
4
5
<ion-view view-title="Cuenta">
  <ion-content class="padding">
    <button class="button button-block button-positive" ng-click="logout()">Cerrar sesión</button>
  </ion-content>
</ion-view>

vista de cuentavista de cuenta

Resumen

En esta primera parte del tutorial de Ionic hemos visto:

  • Cómo instalar Ionic.
  • Cómo crear el esqueleto de un proyecto y verlo en el navegador.
  • La estructura de una app hecha con Ionic.

En la segunda parte de esta serie veremos cómo crear un sencillo backend con Node.js y Express que permita autenticarse con Twitter y proporcione un listado de los eventos.

#php: #yii2 #framework, descargar e instalar #tema, #template, #plantilla, etc…

buenas

este ejemplo es para yii basic y con un template en concreto, el Greenery

lo descargais, y en la carpeta raiz del yii creais themes/greenery descomprimis el template

en config/web.php añadimos estas lineas dentro de components

‘view’ => [
‘theme’ => [
‘pathMap’ => [‘@app/views’ => ‘@app/themes/greenery’],
‘baseUrl’ => ‘@web/../themes/greenery’,
],
],

fijaros que ahora la web ya no funciona bajo views/layouts/main.php si no que ahora manda themes/greenery/layouts/main.php

un saludo

#php: #yii #framework 2 – #upload y registro en bd de fotos

buenas

en español no encuentro mucho material sobre yiiframework2 y el que encuentro esta incompleto porque solo hacen upload y no registran en base de datos o estan redactados para programadores avanzados que no necesitan leer tutoriales para hacer las cosas … vamos al turron

Esto está programado sobr eun ejemplo sencillo, una tabla que se llama ejemplos con un campo nombre y otro “imagen” que es donde guardaremos ruta y nombre de archivo

  • creamos la vista upload.php en la carpeta views y dentro en este caso en la carpeta ejemplos y le metemos este codigo:
<?php use yii\helpers\Html; use yii\widgets\ActiveForm; ?>

<?= $msg ?>


<h3>Subir archivos</h3>


<?php $form = ActiveForm::begin([ "method" => "post",
     "enableClientValidation" => true,
     "options" => ["enctype" => "multipart/form-data"],
     ]);
?>

<?= $form->field($model, "file[]")->fileInput(['multiple' => true]) ?>

<?= Html::submitButton("Subir", ["class" => "btn btn-primary"]) ?>

<?php $form->end() ?>
  • creamos el modelo de validación FormUpload.php en la carpeta models y le metemos este codigo:
<?php namespace app\models; use yii\base\Model; class FormUpload extends Model{ public $file; public function rules() { return [ ['file', 'file', 'skipOnEmpty' => false,
   'uploadRequired' => 'No has seleccionado ningún archivo', //Error
   'maxSize' => 1024*1024*1, //1 MB
   'tooBig' => 'El tamaño máximo permitido es 1MB', //Error
   'minSize' => 10, //10 Bytes
   'tooSmall' => 'El tamaño mínimo permitido son 10 BYTES', //Error
   'extensions' => 'jpg',
   'wrongExtension' => 'El archivo {file} no contiene una extensión permitida {extensions}', //Error
   'maxFiles' => 4,
   'tooMany' => 'El máximo de archivos permitidos son {limit}', //Error
   ],
        ]; 
    } 
 
 public function attributeLabels()
 {
  return [
   'file' => 'Seleccionar archivos:',
  ];
 }
}

  • agregamos las clases FormUpload y UploadedFile al controlador, en este caso el nuestro es controllers/EjemplosController.php:
use app\models\FormUpload;
use yii\web\UploadedFile;
  • y creamos la acción Upload en el controlador controllers/EjemplosController.php:
public function actionUpload($id)
	{
 
	 $model = new FormUpload;
	 $msg = null;
 
	 if ($model->load(Yii::$app->request->post()))
	 {
	  $model->file = UploadedFile::getInstances($model, 'file');

	  if ($model->file && $model->validate()) {
	   foreach ($model->file as $file) {
	    if ($file->saveAs('archivos/' . $file->baseName . '.' . $file->extension)){
		    $msg = "

<strong class='label label-info'>Enhorabuena, subida realizada con éxito</strong>

";
			$modele = $this->findModel($id);
			$modele->imagen=$file->baseName . '.' . $file->extension;
			$modele->save();
		}
	   }
	  }
	 }
	 return $this->render("upload", ["model" => $model, "msg" => $msg]);
	}

con esto ya tenemos la subida de archivos desde el panel de control, ahora solo tenemos que modificar la vista de cada registro para ver la foto de marras

  • en views/ejemplos/view.php añadimos esta linea al final para poder ver la foto relacionada con cada registro del a base de datos : <?= Html::img(Url::base().’/archivos/’.$model->imagen,[‘height’=>’200px’]);?> y añadimos esta otra donde tenemos los botones update y delete para poder llamar al formulario de subida de imagenes <?= Html::a(Yii::t(‘app’, ‘Upload’), [‘upload’, ‘id’ => $model->id], [‘class’ => ‘btn btn-primary’]) ?>

y si no he bebido mucho vino creo que no me olvido de nada

espero que esto le sirva de ayuda a alguien mas aparte de a mi mismo xDD

#yiiframework2 –> #tutoraliazo del año: añadir al menu la ruta de una seccion estatica

estoy muy verde con el yii y el MVC y la casa santa, asi que esto mas que un tutorial o una demostracion de conocimientos se trata mas de una nota mental para que no se me olvide los pasitos que voy dando xDDD

añadir una seccion nueva en yii y linkarla en el menu? mamao, vamos a la carpeta views y en site creamos nuestra nuevaseccion.php y creamos el link en el views/layouts/main.php copiando y pgando de los demas y a correr … pues no, ademas de esto falta un pasito mas

falta añadir al controller la accion … controllers/SiteController.php y hacemos copy paste de la accion about por ejemplo que es la que usa yii para cargar la seccion about valga la rebuznancia

public function actionAbout()
{
return $this->render(‘about’);
}

ahora si, nuestra nueva seccion estatica o lo que quiera que sea se cargara dentro del framework como una mas de la familia

#php: #yiiframework2 activando URLs limpias o amigables by @TutsPlusCode

fuente: http://code.tutsplus.com/es/tutorials/programming-with-yii2-getting-started–cms-22440

Activemos las urls amigables en Yii2 con mod_rewrite. En la página de inicio de Yii, si haces click en About en el menú, la url será algo comohttp://localhost:8888/hello/web/index.php?r=site%2Fabout. Nos gustaría cambiarla para que fuera algo como http://localhost:8888/hello/web/site/about.

El subdirectorio config incluye configuración para tus aplicaciones web y de consola, al igual que para la base de datos. Edita /config/web.php para agregarurlManagement a la aplicación web actual. Agrega la sección urlManager al array de componentes:

Después crea un fichero .htaccess en el directorio /web donde está el ficheroindex.php principal.

Asegúrate de que el módulo mod_rewrite se está ejecutando localmente en MAMP; de lo contrario, sigue esta guía en StackOverflow.

En tu navgador, visita la URL http://localhost:8888/hello/web/site/about. Deberías ver la página de About de la aplicación Yii y haciendo click en cualquier enlace del menú debería mostrar la página de destino con las urls amigables.

#php: configurar idioma en #yii #framework 2

mu facil … pero incompleto de momento hasta que investigue mas por el amigo google

abrimos el archivo \basic\config\web.php

y añadimos la siguiente linea: ‘language’ => ‘es’,

dejando el codigo asi:

$config = [
‘id’ => ‘basic’,
‘basePath’ => dirname(__DIR__),
‘language’ => ‘es’,
‘bootstrap’ => [‘log’],
‘components’ => [

con esto sacamos los textos de los formularios y algunos mas en español … los textos de los botones me siguen saliendo en ingles por eso decia al principio que incompleto.

cuando pueda averigüo más, ahora mismo tengo que dejar esto asi que me llama la muyer pa cenar y tien muy mala ostia xDD

#php #yii #framework para #torpes como yo xDD … primeros pasos

buenas a tod@s

el yii framework de php esta muy guapo, genera automaticamente las tipicas secciones pesadas de administracion como altas/bajas/modificaciones entre otras cosas

guia en plan rapido para tener el yiiframework funcionando sin dolores de cabeza … para temas mas avanzados a tirar de google xDD

  • descargamos de www.yiiframework.com una de las versiones de yii que solo es descargar y a correr –> Yii 2 with basic application template
  • extraemos el contenido del rar en el directorio raiz de nuestro server, en este caso nos quedaria asi localhost/basic
  • accedemos a localhost/basic/web
  • nos va a dar un error como un piano contandonos no se que movidas de las cookies o no se que, editamos el fichero web.php que esta dentro de la carpeta config, en la linea 12 que tenemos esto ‘cookieValidationKey’ => ”, metemos un valor numerico a voleo por ejemplo 1234 y comprobaremos que ya no da error y el yii ya se esta ejecutando
  • creamos nuestra base de datos, para ir rapido creamos una base de datos que se llame ejemplo con una tabla que se llame ejemplos
  • editamos el archivo db.php de la carpeta config y en la linea 5 que deberia ser esta ‘dsn’ => ‘mysql:host=localhost;dbname=ejemplo’, en dbname ponemos el nombre de la base de datos que acabamos de crear
  • la url del index que acabamos de crear es o deberia ser http://localhost/basic/web/index.php?r=site%2Findex pues la modificamos asi http://localhost/basic/web/index.php?r=gii y asi accedemos al panel para poder crear las secciones del panel de administracion de altas/bajas/modificaciones
  • le damos a model generator y en table name ponemos el nombre de la tabla que hemos creado “ejemplos”, model class que es el siguiente campo se rellena solo. si queremos varios idiomas checkamos Enable I18N
  • pasamos a CRUD Generator, el primer campo Model Class lo rellenamos asi: app\models\Ejemplos. El segundo campo Search Model Class: app\models\EjemplosSearch. y el tercer campo Controller Class: app\controllers\EjemplosController … porque? porque si, porque funciona y to palante!, como veis son las rutas del modelo y del controller y siempre Ejemplos que es el nombre de la clase que hemos creado anteriormente
  • por ultimo editamos el menu para ver furrulando lo que acabamos de hacer, vamos a la carpeta views/layouts y editamos main.php vamos a la linea 40 que deberia ser esta [‘label’ => ‘About’, ‘url’ => [‘/site/about’]], la clonamos y la editamos asi [‘label’ => ‘Ejemplo’, ‘url’ => [‘/ejemplos/index’]], vamos al index http://localhost/basic/web/index.php y ya deberiamos ver en el menu el boton ejemplos, vamos y deberiamos ver el listado con su buscador y su boton de altas y tal y taaaaaal !!

este post es un rollo lo se, la terminologia la manera de redactar y proceder dejan mucho que desear pero es una guia muy rapida de que mi madre hacer paso a paso para ver yii funcionando muy rapido

espero que este post sirva de ayuda a alguien mas que a mi xDD

cakephp framework de puta mierda

hola a todos

odio cakephp como se puede leer en el titulo

he perdido una hora de mi vida con la chorrada mas gorda que os podais echar a la cara … necesitaba añadir un campo en un formulario de insercion de productos en la base de datos del panel de administracion de la web … añado el campo en la tabla, añado el campo en el controller en el model en casa dios … todo perfecto

publico ejecuto el campo aparece en el formulario mu guapo … hago una insercion y catacrocker, no inserta anda. Desde el formulariod e modificacion nada tampoco … inserto a pelu gochu en la tabla y en la vista desde cliente no se ve nada. Un cuadro, vamos

Despues de una hora de revolver por google y buscar manuales de php cake para retrasados como yo … no encuentro nada de nada la teoria ye toda muy guapa. Gracias a un foro di con la solucion: cambiar el modo debug de esta morralla de framework de desarrollo a produccion y de nuevo cambiarlo para dejarlo como estaba para forzar la cache y no se cuantas cosas mas … acojonante

Para hacer esto solo tenemos que irnos a la carpeta app/config y en el archivo core.php modificar o añadir porque a mi no me venia la linea Configure::write(‘debug’, 1); 0 = Modo produción. No produce ninguna salida. 1 = Muestra los error y warnings. 2 = Muestra los error, warnings, y consultas SQL 3 = Muestra los error, warnings, consultas SQL, y volcado completo del Controller.

Por si acaso toque tambien la linea Configure::write(‘Cache.disable’, true); y la puse en true que a mi me salia en false, es para que no cachee absolutamente nada de nada

en fin … como podeis ver estoy mas quemao que la moto de un jipi con el cake, seguramente sea un gran framework y la casa santa … pero a mi desde que lo conozco no me ha traido mas que disgustos y me ha quitado años de vida

espero haberle servido de ayuda a alguien, dejo por aqui un bonito enlace donde desarrollan profundamente el tema de la configuracion

http://book.cakephp.org/1.3/es/The-Manual/Developing-with-CakePHP/Configuration.html

un saludo